/* Spendly consolidated stylesheet — v7.1.0 */

*{box-sizing:border-box}
body{margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent}
button, input, select, textarea{font:inherit}
button{border:0;cursor:pointer;color:inherit}
input, select, textarea{width:100%;border:1px solid var(--line);outline:none;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;user-select:text}
textarea{resize:vertical}
.app-shell{min-height:100vh;margin:0 auto;position:relative;padding:env(safe-area-inset-top) 18px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}
.topbar{display:flex;align-items:center;justify-content:space-between;position:relative;top:auto;z-index:20;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand{display:flex;align-items:center}
.brand-mark{display:grid;place-items:center;font-weight:900;letter-spacing:-0.05em}
.brand-copy{min-width:0}
.brand-copy h1{margin:0}
.brand-copy p{margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date-pill{white-space:nowrap;flex:0 0 auto}
main{position:relative}
.page{display:none;animation:pageIn .24s ease both}
.page.active{display:block}
@keyframes pageIn{from { opacity: 0; transform: translateY(8px) scale(.992); }
      to { opacity: 1; transform: translateY(0) scale(1); }}
.hero{border:1px solid rgba(77, 139, 87, .16);border-radius:var(--radius-xl);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;width:150px;height:150px;border-radius:999px;right:-60px;top:-64px}
.hero > *{position:relative;z-index:1}
.eyebrow{font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.hero h2{margin:0}
.hero p{margin:11px 0 0;color:var(--muted);font-weight:650}
.hero-budget{display:grid;gap:10px;margin-top:18px;border:1px solid rgba(76, 106, 74, .12)}
.hero-budget-label{color:var(--muted);font-size:12px;font-weight:900}
.hero-budget-value{letter-spacing:-0.08em;font-weight:950;line-height:.9}
.hero-budget-sub{font-weight:850;line-height:1.35}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stack{display:grid;gap:14px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-head h3{margin:0}
.section-head span{color:var(--muted);font-size:12px;font-weight:800;text-align:right}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;backdrop-filter:blur(16px)}
.stat-card{min-height:118px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-32px;bottom:-38px;width:110px;height:110px;border-radius:999px}
.stat-card > *{position:relative;z-index:1}
.stat-label{color:var(--muted);font-size:12px;font-weight:850}
.stat-value{font-size:28px;letter-spacing:-0.07em;font-weight:950;margin-top:6px}
.stat-sub{color:var(--muted);font-size:12px;font-weight:700;margin-top:5px;line-height:1.25}
.budget-control{display:grid;gap:12px}
.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:18px;border:1px solid rgba(76, 106, 74, .10)}
.control-title{font-weight:950;letter-spacing:-0.03em}
.control-sub{color:var(--muted);font-size:12px;font-weight:750;margin-top:3px}
.control-value{font-weight:950;white-space:nowrap}
.btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center}
.btn:active, .nav-btn:active, .item-card:active, .quick-chip:active{transform:scale(.985)}
.btn.secondary{border:1px solid var(--line)}
.btn.ghost{border:1px solid var(--line);box-shadow:none}
.btn.danger{border:1px solid rgba(216, 111, 111, .22)}
.btn.full{width:100%}
.btn.small{min-height:36px;border-radius:13px;padding:0 12px;font-size:12px}
.form-grid{display:grid}
.field label{display:block;margin:0 0 7px 2px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-chips{display:flex;gap:9px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.quick-chips::-webkit-scrollbar{display:none}
.quick-chip{flex:0 0 auto;border-radius:999px;padding:10px 13px;border:1px solid var(--line);font-size:12px;font-weight:900;box-shadow:var(--soft-shadow);transition:transform .12s ease}
.item-card{border:1px solid var(--line);border-radius:20px;padding:14px;display:grid;gap:10px;transition:transform .12s ease}
.item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-title{font-weight:950;letter-spacing:-0.03em;line-height:1.15}
.item-meta{margin-top:5px;color:var(--muted);font-size:12px;font-weight:750;line-height:1.35}
.amount-pill{border-radius:999px;font-weight:950;padding:8px 10px;white-space:nowrap;font-size:13px}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tag{border-radius:999px;padding:7px 9px;border:1px solid rgba(76, 106, 74, .10);font-size:11px;font-weight:850}
.empty{color:var(--muted);text-align:center;padding:24px 14px;font-weight:750;line-height:1.45}
.soft-note{border-radius:20px;padding:13px;font-size:13px;line-height:1.4;font-weight:760}
.insight-row{display:grid;gap:8px}
.bar-line{display:grid;gap:6px}
.bar-head{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;font-weight:850}
.bar-track{height:10px;border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;min-width:3px}
.nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:50}
.nav-inner{display:grid;grid-template-columns:repeat(5, 1fr);gap:4px}
.nav-btn{display:grid;place-items:center}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;z-index:80;font-weight:850;transition:opacity .2s ease, transform .2s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-backdrop{position:fixed;place-items:end center;z-index:70}
.modal{animation:sheetIn .22s ease both;scrollbar-width:none}
.modal::-webkit-scrollbar{display:none}
@keyframes sheetIn{from { opacity: 0; transform: translateY(24px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }}
.modal-head{justify-content:space-between}
.close-btn{font-weight:950}
input[type="date"]{color-scheme:dark}
.brand-mark{color:#06120b}
.hero{border-color:rgba(125, 213, 138, .18);background:linear-gradient(145deg, rgba(24, 48, 34, .96), rgba(10, 23, 16, .9)),
        radial-gradient(circle at 100% 0%, rgba(125, 213, 138, .22), transparent 35%);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06)}
.hero::after{background:radial-gradient(circle, rgba(125, 213, 138, .28), rgba(125, 213, 138, .05) 58%, transparent 70%)}
.eyebrow{color:#8be895}
.hero-budget{background:linear-gradient(145deg, rgba(8, 18, 13, .78), rgba(21, 42, 30, .72));border-color:rgba(202, 236, 199, .13);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hero-budget-value{color:#eaffdf;text-shadow:0 0 22px rgba(125, 213, 138, .18)}
.hero-budget-sub{color:#b7edba}
.card{background:linear-gradient(145deg, rgba(18, 35, 25, .86), rgba(11, 24, 17, .78));border-color:rgba(202, 236, 199, .12);box-shadow:var(--soft-shadow), inset 0 1px 0 rgba(255,255,255,.04)}
.stat-card::after{background:rgba(125, 213, 138, .10)}
.stat-card.good::after{background:rgba(125, 213, 138, .16)}
.stat-card.warn::after{background:rgba(240, 189, 99, .17)}
.stat-card.bad::after{background:rgba(240, 138, 138, .16)}
.control-row{background:rgba(8, 18, 13, .48);border-color:rgba(202, 236, 199, .10)}
.control-value.good{color:#8ce897}
.control-value.warn{color:#f0bd63}
.control-value.bad{color:#ff9b9b}
.btn.ghost{background:rgba(255,255,255,.03)}
.quick-chip{background:rgba(17, 32, 23, .82);border-color:rgba(202, 236, 199, .13);color:#d7ffd8}
.item-card{background:rgba(13, 28, 20, .78);border-color:rgba(202, 236, 199, .12);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.amount-pill{background:rgba(125, 213, 138, .18);color:#d7ffd8;border:1px solid rgba(125, 213, 138, .16)}
.amount-pill.warn{background:rgba(240, 189, 99, .16);color:#ffd88e;border-color:rgba(240, 189, 99, .18)}
.amount-pill.bad{background:rgba(240, 138, 138, .14);color:#ffb0b0;border-color:rgba(240, 138, 138, .18)}
.tag{background:rgba(255, 255, 255, .045);border-color:rgba(202, 236, 199, .10);color:#aebdad}
.tag.need, .tag.paid{background:rgba(125, 213, 138, .14);color:#aef5b5}
.tag.want, .tag.pending{background:rgba(240, 189, 99, .14);color:#ffd88e}
.tag.mixed{background:rgba(143, 187, 229, .14);color:#b7d8f7}
.tag.high{background:rgba(240, 138, 138, .13);color:#ffb0b0}
.soft-note{background:rgba(125, 213, 138, .11);color:#c9f7cc;border:1px solid rgba(125, 213, 138, .12)}
.soft-note.warn{background:rgba(240, 189, 99, .13);color:#ffe0a1;border-color:rgba(240, 189, 99, .16)}
.soft-note.bad{background:rgba(240, 138, 138, .12);color:#ffc0c0;border-color:rgba(240, 138, 138, .16)}
.danger-zone{border-color:rgba(240, 138, 138, .20);background:rgba(40, 18, 18, .42)}
.bar-track{background:rgba(202, 236, 199, .08)}
.bar-fill{background:linear-gradient(90deg, #9af0a2, #4ab461)}
.bar-fill.warn{background:linear-gradient(90deg, #f2cb7c, #d59b38)}
.bar-fill.bad{background:linear-gradient(90deg, #ffadad, #de6969)}
.toast{background:rgba(231, 245, 229, .94);color:#06120b;box-shadow:0 16px 38px rgba(0, 0, 0, .36)}
html, body{overscroll-behavior-y:contain;scrollbar-width:none}
html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .app-shell::-webkit-scrollbar,
    main::-webkit-scrollbar{display:none;width:0;height:0}
.app-shell{touch-action:pan-y;isolation:isolate}
main{min-height:calc(100vh - var(--nav-h) - 120px)}
.page{transform-origin:center top;will-change:transform, opacity}
.page.slide-forward{animation:spendlySlideForward .24s cubic-bezier(.22, .8, .22, 1) both}
.page.slide-back{animation:spendlySlideBack .24s cubic-bezier(.22, .8, .22, 1) both}
@keyframes spendlySlideForward{from { opacity: 0; transform: translateX(22px) scale(.992); filter: blur(.4px); }
      to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }}
@keyframes spendlySlideBack{from { opacity: 0; transform: translateX(-22px) scale(.992); filter: blur(.4px); }
      to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }}
.nav-btn{-webkit-user-select:none;user-select:none}
.btn, .nav-btn, .quick-chip, .item-card{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion: reduce){.page,
      .page.slide-forward,
      .page.slide-back,
      .modal{animation:none!important}
.btn,
      .nav-btn,
      .item-card,
      .quick-chip{transition:none!important}}
body.startup-lock{overflow:hidden}
.brand-mark{overflow:hidden;padding:0;background:#fbfaf4}
.brand-mark img{width:100%;height:100%;display:block;object-fit:cover}
.startup-screen{position:fixed;inset:0;z-index:999;min-height:100dvh;display:grid;place-items:center;padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));opacity:1;visibility:visible;transition:opacity .42s ease, visibility .42s ease}
body.startup-complete .startup-screen{opacity:0;visibility:hidden;pointer-events:none}
.startup-content{width:min(100%, 340px);display:grid;place-items:center;text-align:center;animation:startupContentIn .78s cubic-bezier(.2, .9, .2, 1) both}
.startup-logo-shell{width:122px;height:122px;border-radius:32px;display:grid;place-items:center;background:rgba(255,255,255,.04);overflow:hidden;animation:startupLogoPop .86s cubic-bezier(.2, .95, .2, 1.15) both}
.startup-logo-shell img{width:100%;height:100%;display:block;object-fit:cover}
.startup-title{margin-top:24px;font-size:42px;line-height:.92;font-weight:950;letter-spacing:-0.075em;text-shadow:0 18px 50px rgba(0,0,0,.38)}
.startup-subtitle{margin-top:10px;font-size:15px;font-weight:850;letter-spacing:-0.03em}
.startup-loader{width:122px;height:5px;margin-top:28px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.startup-loader span{display:block;height:100%;width:44%;border-radius:inherit;background:linear-gradient(90deg, rgba(140,232,151,.2), #8ce897, #10b998);animation:startupLoad 1.05s ease-in-out both}
@keyframes startupContentIn{from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(8px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }}
@keyframes startupLogoPop{0% { opacity: 0; transform: translateY(18px) scale(.74) rotate(-4deg); }
      68% { opacity: 1; transform: translateY(0) scale(1.045) rotate(0); }
      100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }}
@keyframes startupLoad{0% { transform: translateX(-115%); }
      72% { transform: translateX(62%); }
      100% { transform: translateX(142%); }}
@media (max-width: 380px){.app-shell{padding-left:14px;padding-right:14px}
.hero h2{font-size:27px}
.hero-budget-value{font-size:36px}
.stat-value{font-size:25px}
.field-row{grid-template-columns:1fr}
.brand-copy h1{font-size:20px}}
html,
    body{width:100%;min-width:100%;min-height:100%;background-color:#07110c}
body{min-height:100dvh}
.app-shell{max-width:520px}
.topbar{padding-top:max(12px, env(safe-area-inset-top));padding-bottom:12px}
.brand{flex:1 1 auto}
.brand-copy p{line-height:1.1}
.hero{padding:20px}
.hero h2{font-size:clamp(27px, 8vw, 34px);letter-spacing:-0.08em;line-height:.96}
.hero p{font-size:16px;line-height:1.42;max-width:95%}
.hero-budget{padding:14px;border-radius:22px}
.hero-budget-value{font-size:clamp(40px, 13vw, 58px)}
.hero-budget-sub{font-size:13px}
#page-buy .hero .btn-row{display:grid;grid-template-columns:1fr 1fr;justify-items:stretch;align-items:center;gap:12px;margin-top:18px!important}
#page-buy .hero .btn-row .btn.primary{grid-column:1 / -1;justify-self:center;width:min(100%, 260px)}
#page-buy .hero .btn-row .btn.secondary,
    #page-buy .hero .btn-row .btn.ghost{width:100%}
.form-grid{gap:10px}
input,
    select,
    textarea{border-radius:15px;padding:12px 13px;min-height:49px;font-size:16px}
.modal .btn.full{min-height:50px;margin-top:2px}
@supports (-webkit-touch-callout: none){input,
      select,
      textarea{font-size:16px}}
@media (max-width: 640px){.app-shell{width:100%;max-width:none;margin:0;padding-left:16px;padding-right:16px;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}
.topbar{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;border-bottom:1px solid rgba(202, 236, 199, .06)}
.nav{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;padding-left:16px;padding-right:16px}
.nav-inner{max-width:none}
.hero,
      .card,
      .item-card{border-radius:24px}
.grid-2{gap:12px}
.stat-card{min-height:116px;padding:14px}
.stat-value{font-size:clamp(25px, 8vw, 32px)}
.modal-backdrop{padding-left:10px;padding-right:10px}}
@media (max-width: 390px){.app-shell{padding-left:14px;padding-right:14px}
.topbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
.brand-mark{width:39px;height:39px;border-radius:14px}
.brand-mark img{border-radius:14px}
.brand-copy h1{font-size:19px}
.date-pill{padding:7px 9px}
.hero{padding:18px}
#page-buy .hero .btn-row{grid-template-columns:1fr}
#page-buy .hero .btn-row .btn.primary{width:100%}}
html,
    body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
body{position:relative}
.app-shell,
    main,
    .page,
    .modal-backdrop,
    .modal,
    .modal *{max-width:100%}
.modal-backdrop{left:0;right:0;width:100%;overflow-x:hidden;touch-action:pan-y}
.modal{max-width:492px;overflow-x:hidden}
@supports (width: 100dvw){.modal{width:calc(100dvw - 20px)}}
.field,
    .field-row,
    .field-row > *{min-width:0}
.modal input,
    .modal select,
    .modal textarea{width:100%;max-width:100%;min-width:0}
.modal input[type="date"]{-webkit-appearance:none;appearance:none;text-align:left}
.modal input[type="date"]::-webkit-date-and-time-value{text-align:left;min-height:1.2em}
@media (max-width: 640px){.modal-backdrop{padding-left:10px;padding-right:10px}
.modal{width:calc(100vw - 20px)}
@supports (width: 100dvw){.modal{width:calc(100dvw - 20px)}}
.modal .field-row{grid-template-columns:minmax(0, 1fr);gap:10px}}
.home-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.home-hero > *{position:relative;z-index:1}
.home-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.home-kicker{text-transform:uppercase}
.home-week-badge{min-width:0;max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(202, 236, 199, .10);border-radius:999px;font-size:10px}
.home-safe-label{color:#a9bca9;font-size:12px;font-weight:850}
.home-safe-status{align-items:center;border-radius:999px}
.home-actions{display:grid;gap:10px}
.home-actions .btn{width:100%;min-width:0;min-height:50px}
.home-actions .btn.secondary{background:rgba(255,255,255,.055);border-color:rgba(202, 236, 199, .11);color:#d9e8d7;box-shadow:none}
.home-glance{display:grid}
.home-glance-item{min-width:0}
.home-glance-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-glance-value{line-height:1}
.home-week-label{color:#dcebd9;font-size:14px;font-weight:900}
.home-week-dates{margin-top:5px}
.home-week-amount{flex:0 0 auto;color:#f1fff1;font-size:27px;font-weight:950;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.home-details{overflow:hidden;border:1px solid rgba(202, 236, 199, .10);border-radius:22px;background:rgba(12, 28, 19, .66);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.home-details summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px 46px 14px 16px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.home-details summary::-webkit-details-marker{display:none}
.home-details summary::after{content:"⌄";position:absolute;right:17px;top:50%;font-size:18px;font-weight:900;transform:translateY(-54%);transition:transform .18s ease}
.home-details[open] summary::after{transform:translateY(-42%) rotate(180deg)}
.home-details summary strong{display:block}
.home-details summary small{display:block;margin-top:4px;font-size:10px}
.home-details-badge{flex:0 0 auto;padding:7px 9px;border-radius:999px;font-size:10px}
.home-details-body{display:grid;gap:15px;padding:0 15px 15px;border-top:1px solid rgba(202, 236, 199, .07)}
.home-progress{padding-top:15px}
.home-detail-list{display:grid;border:1px solid rgba(202, 236, 199, .075);border-radius:17px;overflow:hidden}
.home-detail-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:12px 13px;border-bottom:1px solid rgba(202, 236, 199, .055)}
.home-detail-row:last-child{border-bottom:0}
.home-detail-row span{font-size:11px}
.home-detail-row strong{min-width:0;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.home-details-subhead{margin:4px 2px 9px;color:#8ea18e;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.section-link{padding:6px 0;background:transparent;font-size:11px;font-weight:900}
.home-activity{display:grid;border:1px solid rgba(202, 236, 199, .09);background:rgba(12, 28, 19, .62)}
.home-activity-row{min-width:0}
.home-activity-icon{display:grid;place-items:center;font-size:13px;font-weight:950}
.home-activity-meta{overflow:hidden;margin-top:4px;text-overflow:ellipsis;white-space:nowrap}
.home-activity-empty{padding:22px 16px;color:#849684;font-size:12px;font-weight:750;text-align:center;line-height:1.45}
.home-activity-count{margin:8px 3px 0;font-size:10px;font-weight:800;text-align:right}
@media (max-width: 370px){.home-hero{padding:18px}
.home-week-badge{max-width:62%}
.home-glance{gap:7px}
.home-glance-item{padding:12px 9px}
.home-glance-value{font-size:16px}
.home-actions{grid-template-columns:1fr}}
.home-glance-value{overflow:visible;white-space:nowrap}
#homeBudgetLeft{font-size:clamp(14px, 4.15vw, 20px)}
.nav-add-btn{overflow:visible}
.nav-add-btn .nav-add-orb{margin-top:-16px;display:grid;place-items:center;font-size:29px;line-height:1;font-weight:500;transition:transform .14s ease, box-shadow .14s ease}
.nav-add-btn:active{transform:none}
.nav-add-btn:active .nav-add-orb{transform:scale(.94);box-shadow:0 8px 20px rgba(49, 184, 84, .28), inset 0 1px 0 rgba(255,255,255,.30)}
.nav-add-btn > span:last-child{color:#dff7df;font-size:10px}
.spend-sheet-form{gap:12px}
.spend-sheet-summary{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid rgba(125, 213, 138, .14);border-radius:16px;background:rgba(125, 213, 138, .08);color:#aebfad;font-size:12px;font-weight:800}
.spend-sheet-summary strong{min-width:0;color:#d9ffdc;font-size:17px;font-weight:950;font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-amount-field label{margin-bottom:7px}
.spend-amount-input{min-width:0;display:flex;align-items:center;gap:8px;padding:0 15px;border:1px solid rgba(125, 213, 138, .24);background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.spend-amount-input:focus-within{border-color:rgba(125, 213, 138, .54);box-shadow:0 0 0 4px rgba(125, 213, 138, .10), inset 0 1px 0 rgba(255,255,255,.04)}
.spend-amount-input > span{flex:0 0 auto;color:#8fe99a;font-size:29px;font-weight:900}
.spend-amount-input input{min-width:0;height:70px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#f4fff4;font-size:clamp(36px, 12vw, 48px);line-height:1;font-weight:950;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.spend-amount-input input:focus{border:0;background:transparent;box-shadow:none}
.spend-amount-input input::-webkit-outer-spin-button,
    .spend-amount-input input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.spend-sheet-quick{display:flex;gap:8px;overflow-x:auto;padding:0 0 3px;scrollbar-width:none}
.spend-sheet-quick::-webkit-scrollbar{display:none}
.spend-quick-chip{flex:0 0 auto;min-height:36px;padding:0 11px;border:1px solid rgba(202, 236, 199, .11);border-radius:999px;background:rgba(255,255,255,.045);color:#bed0bd;font-size:11px;font-weight:850;transition:transform .12s ease, background .14s ease, color .14s ease, border-color .14s ease}
.spend-quick-chip:active{transform:scale(.97)}
.spend-quick-chip.selected{border-color:rgba(125, 213, 138, .30);background:rgba(125, 213, 138, .14);color:#d9ffdc}
.spend-more-details{overflow:hidden;border:1px solid rgba(202, 236, 199, .10);border-radius:17px;background:rgba(255,255,255,.025)}
.spend-more-details summary{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;color:#dbe9d9;font-size:13px;font-weight:900;cursor:pointer;list-style:none}
.spend-more-details summary::-webkit-details-marker{display:none}
.spend-more-details summary::after{content:"⌄";color:#829682;font-size:18px;line-height:1;transition:transform .16s ease}
.spend-more-details[open] summary::after{transform:rotate(180deg)}
.spend-more-details summary small{margin-left:auto;color:#7f927f;font-size:10px;font-weight:750}
.spend-more-body{display:grid;gap:10px;padding:0 12px 12px}
.spend-save-btn{border-radius:18px;font-size:15px}
@media (max-width: 370px){.home-glance{grid-template-columns:minmax(0, 1.22fr) minmax(0, .68fr) minmax(0, 1.10fr)}
.home-glance-item{padding-left:8px;padding-right:8px}
.home-glance-value,
      #homeBudgetLeft{font-size:13px}
.nav-add-btn .nav-add-orb{width:46px;height:46px;border-radius:17px}
.spend-more-details summary small{display:none}}
.history-header{padding:10px 2px 4px}
.history-kicker{color:#8fe99a;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.history-header h2{margin:7px 0 0;color:#f2fbf0;font-size:clamp(29px, 8.6vw, 38px);line-height:.98;letter-spacing:-.065em}
.history-header p{margin:10px 0 0;color:#8da08d;font-size:13px;font-weight:700}
.history-overview{display:grid}
.history-overview-item{min-width:0}
.history-overview-item span{display:block}
.history-overview-item strong{display:block;margin-top:7px;overflow:hidden;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.history-overview-item.compact strong{font-size:clamp(24px, 7vw, 30px)}
.history-opening-note{display:flex;align-items:center;justify-content:space-between;gap:14px}
.history-opening-note div{min-width:0}
.history-opening-note span{display:block;font-size:11px}
.history-opening-note small{display:block;margin-top:3px;font-size:9px;line-height:1.35}
.history-opening-note strong{flex:0 0 auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.history-feed{display:grid}
.history-day-group{min-width:0}
.history-day-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.history-day-head h4{margin:0;letter-spacing:-.02em}
.history-day-head span{font-variant-numeric:tabular-nums}
.history-day-card{border:1px solid rgba(202, 236, 199, .09)}
.history-transaction-row{width:100%;min-width:0;display:grid;align-items:center;border-bottom:1px solid rgba(202, 236, 199, .055);border-radius:0;background:transparent;text-align:left;transition:background .14s ease, transform .12s ease}
.history-transaction-row:last-child{border-bottom:0}
.history-transaction-row:active{transform:scale(.995)}
.history-transaction-icon{display:grid;place-items:center;font-size:13px;font-weight:950}
.history-transaction-copy{min-width:0}
.history-transaction-copy > strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-transaction-copy small{min-width:0;display:flex;align-items:center;gap:7px;margin-top:5px;overflow:hidden;font-size:10px;white-space:nowrap}
.history-transaction-copy small > span:first-child{overflow:hidden;text-overflow:ellipsis}
.history-type{flex:0 0 auto;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.045);color:#9bad9a;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.history-type.need{background:rgba(125, 213, 138, .10);color:#aee9b5}
.history-type.want{background:rgba(232, 178, 92, .11);color:#e7bd7c}
.history-type.mixed{background:rgba(111, 158, 204, .11);color:#a9c8e3}
.history-transaction-amount{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.history-transaction-chevron{font-size:18px;font-weight:700}
.history-empty{display:grid;justify-items:center;border:1px solid rgba(202, 236, 199, .09);text-align:center}
.history-empty-icon{display:grid;place-items:center;font-size:19px;font-weight:950}
.history-empty strong{font-size:14px;font-weight:900}
.history-empty span{max-width:240px;font-size:11px;font-weight:700;line-height:1.45}
.history-empty .btn{margin-top:5px}
.transaction-detail{display:grid}
.transaction-detail-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:15px;border:1px solid rgba(125, 213, 138, .13);border-radius:19px;background:rgba(125, 213, 138, .07)}
.transaction-detail-hero span{min-width:0;overflow:hidden;font-size:13px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.transaction-detail-hero strong{flex:0 0 auto;font-size:27px;line-height:1;font-weight:950;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.transaction-detail-list{overflow:hidden;border:1px solid rgba(202, 236, 199, .09);border-radius:18px;background:rgba(255,255,255,.022)}
.transaction-detail-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 13px;border-bottom:1px solid rgba(202, 236, 199, .055)}
.transaction-detail-row:last-child{border-bottom:0}
.transaction-detail-row > span{flex:0 0 auto;font-size:11px;font-weight:800}
.transaction-detail-row > strong{min-width:0;font-size:11px;font-weight:900;line-height:1.4;text-align:right;overflow-wrap:anywhere}
.transaction-detail-row.note > strong{max-width:68%}
.transaction-detail-row > strong.muted{color:#728572;font-weight:750}
.transaction-detail-actions{display:grid}
@media (max-width: 350px){.history-overview{grid-template-columns:minmax(0, 1fr) 96px}
.history-overview-item{padding:13px 11px}
.history-overview-item strong{font-size:20px}
.history-transaction-row{grid-template-columns:37px minmax(0, 1fr) auto 9px;gap:9px;padding-left:11px;padding-right:9px}
.history-transaction-icon{width:37px;height:37px;border-radius:12px}
.history-type{display:none}}
.screen-header{padding:8px 3px 16px}
.screen-kicker{color:#7df096;font-size:11px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}
.screen-header h2{margin:7px 0 0;color:#f2fff2;font-size:31px;line-height:1;letter-spacing:-.065em}
.screen-header p{margin:9px 0 0;color:#849786;font-size:13px;font-weight:700;line-height:1.45}
.plan-segments{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));border:1px solid rgba(202, 236, 199, .08)}
.plan-segment{min-width:0;padding:0 8px;background:transparent;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;transition:background .16s ease, color .16s ease, transform .12s ease}
.plan-segment:active{transform:scale(.98)}
.plan-segment small{min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;font-size:10px;font-weight:950}
.plan-panel[hidden]{display:none!important}
.plan-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 2px 10px}
.plan-panel-head h3{margin:0;letter-spacing:-.045em}
.plan-panel-head p{margin:4px 0 0;font-size:11px}
.plan-add-action{flex:0 0 auto;display:grid;place-items:center;font-size:23px;font-weight:800;transition:transform .12s ease}
.plan-add-action:active{transform:scale(.96)}
.plan-list{border:1px solid rgba(202, 236, 199, .08)}
.plan-row{width:100%;min-width:0;display:grid;grid-template-columns:40px minmax(0, 1fr) auto 9px;align-items:center;gap:11px;padding:13px 12px;background:transparent;border-bottom:1px solid rgba(202, 236, 199, .055);text-align:left;transition:background .14s ease, transform .12s ease}
.plan-row:last-child{border-bottom:0}
.plan-row:active{background:rgba(255,255,255,.035);transform:scale(.995)}
.plan-row.complete{opacity:.62}
.plan-row-icon{width:40px;height:40px;display:grid;place-items:center;font-size:12px;font-weight:950}
.plan-row-copy{min-width:0;display:grid;gap:4px}
.plan-row-copy strong{min-width:0;font-size:13px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-row-copy small{min-width:0;font-size:10px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-row-amount{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan-row-chevron{font-size:20px;line-height:1}
.plan-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.plan-empty-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;font-size:23px;margin-bottom:13px}
.plan-empty strong{color:#dfeade;font-size:15px}
.plan-empty small{max-width:260px;margin:7px 0 16px;color:#718373;font-size:11px;line-height:1.45;font-weight:700}
.settings-section{margin-top:18px}
.settings-section-title{text-transform:uppercase}
.settings-list{overflow:hidden;border:1px solid rgba(202, 236, 199, .08);border-radius:21px;background:rgba(255,255,255,.022)}
.settings-row{width:100%;min-width:0;display:grid;grid-template-columns:39px minmax(0, 1fr) auto;align-items:center;gap:12px;padding:11px 13px;background:transparent;border-bottom:1px solid rgba(202, 236, 199, .055);text-align:left;cursor:pointer;transition:background .14s ease, transform .12s ease}
.settings-row:last-child{border-bottom:0}
button.settings-row:active, label.settings-row:active{background:rgba(255,255,255,.035);transform:scale(.995)}
.settings-row.static{cursor:default}
.settings-icon{display:grid;place-items:center;font-size:14px;font-weight:950}
.settings-copy{min-width:0;display:grid;gap:4px}
.settings-copy strong{letter-spacing:-.015em}
.settings-copy small{min-width:0;font-size:10px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-chevron{font-size:21px;line-height:1}
.settings-value{font-size:10px;white-space:nowrap}
.settings-footnote{margin:8px 5px 0;font-size:10px;font-weight:700;line-height:1.4}
.advanced-settings{margin-top:18px;overflow:hidden;border:1px solid rgba(202, 236, 199, .08);border-radius:21px;background:rgba(255,255,255,.022)}
.advanced-settings summary{min-height:64px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none}
.advanced-settings summary::-webkit-details-marker{display:none}
.advanced-settings summary > span:first-child{display:grid;gap:4px}
.advanced-settings summary strong{font-size:13px}
.advanced-settings summary small{font-size:10px}
.advanced-settings-body{padding:0 13px 13px;border-top:1px solid rgba(202, 236, 199, .055);padding-top:13px}
.plan-detail{gap:13px}
@media (max-width: 350px){.plan-segment{gap:4px;padding:0 5px;font-size:11px}
.plan-segment small{min-width:18px;padding:0 4px}
.plan-row{grid-template-columns:37px minmax(0, 1fr) auto 8px;gap:9px;padding-left:10px;padding-right:9px}
.plan-row-icon{width:37px;height:37px}
.settings-row{grid-template-columns:37px minmax(0, 1fr) auto;gap:10px;padding-left:11px;padding-right:11px}
.settings-icon{width:37px;height:37px}}
:root{--surface-0:#07110c;--surface-1:#0b1a12;--surface-2:#10251a;--surface-3:#153021;--text-soft:#b8c8b7}
.app-icon{width:20px;height:20px;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.btn-icon{width:18px;height:18px}
.topbar{background:linear-gradient(180deg, rgba(7,17,12,.96), rgba(7,17,12,.80) 76%, transparent);border-bottom:1px solid transparent}
.brand-copy p{margin-top:4px;font-size:10px;font-weight:800;color:#718473}
.date-pill{border-color:var(--hairline)}
.history-header, .screen-header{padding:10px 2px 15px}
.history-kicker, .screen-kicker{color:#72df86;font-size:10px;letter-spacing:.12em;font-weight:900}
.history-header h2, .screen-header h2{margin-top:7px;color:var(--text-strong);font-size:30px;line-height:1;letter-spacing:-.06em}
.history-header p, .screen-header p{margin-top:8px;color:var(--text-muted);font-size:12px;font-weight:700}
.btn{padding:0 15px;gap:8px;box-shadow:none;transition:transform .12s ease, background .16s ease, border-color .16s ease, opacity .16s ease}
.btn:active{transform:scale(.975)}
.btn:focus-visible, .nav-btn:focus-visible, .settings-row:focus-visible, .plan-row:focus-visible, .plan-segment:focus-visible, .plan-add-action:focus-visible, .close-btn:focus-visible{outline:2px solid rgba(123, 235, 143, .72);outline-offset:2px}
.nav{padding-left:10px;padding-right:10px}
.nav-btn{transition:color .16s ease, background .16s ease, transform .12s ease}
.nav-btn .ico{font-size:0;line-height:0}
.nav-btn:active{transform:scale(.97)}
.nav-add-btn{gap:2px}
.nav-add-btn .nav-add-orb{border-color:rgba(188,255,195,.29)}
.plan-panel-head{min-height:48px}
.plan-add-action .app-icon{width:20px;height:20px;stroke-width:2.1}
.plan-list, .settings-list, .advanced-settings, .history-day-card, .transaction-detail-list{border-radius:var(--radius-list);background:rgba(255,255,255,.018);border-color:var(--hairline);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.plan-row, .history-transaction-row, .settings-row{min-height:62px}
.plan-row-icon, .history-transaction-icon, .settings-icon{background:rgba(116,226,135,.075);color:#84ed97}
.plan-row-icon .app-icon, .history-transaction-icon .app-icon, .settings-icon .app-icon{width:19px;height:19px}
.plan-row-icon.complete .app-icon{width:18px;height:18px}
.plan-row-chevron, .history-transaction-chevron, .settings-chevron{display:grid;place-items:center;color:#4f6252;font-size:0}
.plan-row-chevron .app-icon, .history-transaction-chevron .app-icon, .settings-chevron .app-icon{width:16px;height:16px;stroke-width:2}
.advanced-settings[open] .settings-chevron{transform:rotate(90deg)}
.plan-empty-icon .app-icon, .history-empty-icon .app-icon{width:22px;height:22px}
.home-activity-icon .app-icon{width:18px;height:18px}
.modal-backdrop{padding-top:max(10px, env(safe-area-inset-top))}
.modal{scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom))}
.modal-head{top:0}
input, select, textarea{min-height:50px;border-radius:15px;padding:13px 14px;font-size:16px}
textarea{min-height:88px}
.field label{margin-bottom:7px;font-size:11px}
.spend-amount-input{border-radius:19px}
.spend-save-btn{min-height:54px!important}
.toast{max-width:calc(100vw - 32px);padding:11px 14px;border-radius:14px;font-size:12px;white-space:normal;text-align:center}
.toast.has-action{display:flex;align-items:center;gap:16px;min-width:min(310px, calc(100vw - 32px));justify-content:space-between;pointer-events:auto;text-align:left}
.toast-message{min-width:0}
.toast-action{flex:0 0 auto;padding:5px 2px;background:transparent;color:#176a2d;font-size:12px;font-weight:950;text-decoration:underline;text-underline-offset:3px}
.toast-action:active{transform:scale(.96)}
@media (hover: hover) and (pointer: fine){button.settings-row:hover, label.settings-row:hover, .plan-row:hover, .history-transaction-row:hover{background:rgba(255,255,255,.03)}
.btn:hover{opacity:.94}}
@media (max-width: 350px){.app-shell{padding-left:13px;padding-right:13px}
.brand-mark{width:39px;height:39px;border-radius:13px}
.brand-mark img{border-radius:13px}
.date-pill{padding-left:8px;padding-right:8px}
.nav{padding-left:7px;padding-right:7px}
.nav-inner{border-radius:20px}
.nav-btn{font-size:8px}
.nav-add-btn .nav-add-orb{width:45px;height:45px;border-radius:16px}
.modal-backdrop{padding-left:6px;padding-right:6px}
.modal{padding-left:13px;padding-right:13px}
.modal-head{margin-left:-13px;margin-right:-13px;padding-left:13px;padding-right:13px}}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.topbar{min-height:58px;padding:8px 2px 7px;gap:12px}
.brand{gap:9px;min-width:0}
.brand-mark{width:36px;height:36px;border-radius:12px;flex:0 0 36px;box-shadow:0 8px 22px rgba(35, 190, 95, .16)}
.brand-mark img{border-radius:12px}
.brand-copy h1{font-size:20px;line-height:1;letter-spacing:-.05em}
.brand-copy p{display:none}
.date-pill{margin-left:auto;padding:4px 1px;border:0;border-radius:0;background:transparent;box-shadow:none;color:#829383;font-size:11px;font-weight:850;letter-spacing:.01em}
.modal-head{margin-bottom:12px}
.close-btn{flex:0 0 36px;margin-left:auto}
.nav-btn[data-tab="more"] .ico .app-icon{width:20px;height:20px;stroke-width:1.8}
@media (max-width: 350px){.brand-mark{width:34px;height:34px;flex-basis:34px;border-radius:11px}
.brand-mark img{border-radius:11px}
.brand-copy h1{font-size:19px}
.date-pill{font-size:10px}
.modal-head{padding-left:11px;padding-right:11px}}
.contextual-topbar{gap:14px;align-items:center}
.context-header-copy{display:grid;gap:5px}
.context-header-copy h1{margin:0}
.context-header-copy p{margin:0}
.context-header-meta{margin-left:auto;line-height:1;letter-spacing:.01em;white-space:nowrap}
.context-header-meta[hidden]{display:none}
#page-insights .history-overview,
    #page-buy .plan-segments,
    #page-more .settings-section:first-of-type{margin-top:10px}
@media (max-width: 350px){.contextual-topbar{min-height:66px;padding-top:8px}
.context-header-copy h1{font-size:23px}
.context-header-copy p{font-size:10px}
.context-header-meta{padding:6px 8px;font-size:10px}}
.home-insights-entry{width:100%;display:grid;grid-template-columns:42px minmax(0, 1fr) 28px;align-items:center;gap:12px;color:inherit;text-align:left;transition:transform .14s ease, border-color .14s ease, background .14s ease}
.home-insights-entry:active{transform:scale(.988)}
.home-insights-icon{display:grid;place-items:center;border:1px solid rgba(115, 245, 154, .13)}
.home-insights-icon .app-icon{width:21px;height:21px}
.home-insights-copy{min-width:0;display:grid;gap:4px}
.home-insights-copy strong{line-height:1.1;letter-spacing:-.025em}
.home-insights-copy small{overflow:hidden;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.home-insights-chevron{width:28px;height:28px;display:grid;place-items:center}
.home-insights-chevron .app-icon{width:17px;height:17px}
body.insights-open{overflow:hidden}
.insights-subpage{position:fixed;inset:0;z-index:65;display:none;flex-direction:column;width:100%;height:100dvh;color:var(--text);overflow:hidden}
.insights-subpage.show{display:flex;animation:insightsPageIn .22s ease both}
@keyframes insightsPageIn{from { opacity: 0; transform: translateX(14px); }
      to { opacity: 1; transform: translateX(0); }}
.insights-subpage-header{flex:0 0 auto;min-height:calc(68px + env(safe-area-inset-top));display:grid;grid-template-columns:40px minmax(0, 1fr) auto;align-items:end;gap:11px;padding:calc(9px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid rgba(202, 236, 199, .075);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.insights-back{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(202,236,199,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.insights-back:active{transform:scale(.96)}
.insights-back .app-icon{width:19px;height:19px}
.insights-header-copy{min-width:0;display:grid;gap:4px}
.insights-header-copy h1{margin:0;font-size:23px;line-height:1;letter-spacing:-.052em}
.insights-header-copy p{margin:0;color:#7d9080;font-size:10.5px;line-height:1.1;font-weight:800}
.insights-period-label{align-self:center;max-width:105px;overflow:hidden;padding:7px 9px;border-radius:999px;color:#91a493;background:rgba(255,255,255,.025);border:1px solid rgba(202,236,199,.08);font-size:9.5px;line-height:1;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.insights-subpage-body{flex:1 1 auto;min-height:0;width:min(100%, 520px);margin:0 auto;padding:12px 14px calc(18px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.insights-subpage-body::-webkit-scrollbar{display:none}
.insights-controls{position:sticky;top:-12px;z-index:3;display:grid;gap:9px;padding:0 0 11px}
.insights-scope-switch,
    .insights-section-tabs{display:grid;padding:4px;border:1px solid rgba(202,236,199,.09);border-radius:16px}
.insights-scope-switch{grid-template-columns:1fr 1fr}
.insights-scope-switch[hidden]{display:none!important}
.insights-section-tabs{grid-template-columns:repeat(4, minmax(0, 1fr))}
.insights-scope-btn,
    .insights-section-btn{min-width:0;min-height:34px;border-radius:12px;background:transparent;font-size:10px;line-height:1;font-weight:900;white-space:nowrap;transition:color .14s ease, background .14s ease, transform .12s ease}
.insights-section-btn{font-size:9px}
.insights-scope-btn:active,
    .insights-section-btn:active{transform:scale(.975)}
.insights-panel{display:none;animation:insightsPanelIn .18s ease both}
.insights-panel.active{display:grid;gap:11px}
@keyframes insightsPanelIn{from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }}
.insights-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.insights-metric{min-width:0;min-height:83px;display:flex;flex-direction:column;justify-content:space-between;gap:7px;padding:12px;border:1px solid rgba(202,236,199,.085);border-radius:18px;background:rgba(255,255,255,.027);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.insights-metric span{color:#788b7b;font-size:9.5px;line-height:1.1;font-weight:850;text-transform:uppercase;letter-spacing:.035em}
.insights-metric strong{max-width:100%;overflow:hidden;color:#eef8ec;font-size:clamp(18px, 5.4vw, 23px);line-height:1;font-weight:950;letter-spacing:-.055em;text-overflow:ellipsis;white-space:nowrap}
.insights-metric small{overflow:hidden;color:#718374;font-size:9px;line-height:1.15;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.insights-card{min-width:0;padding:14px;border:1px solid rgba(202,236,199,.085);border-radius:21px;background:linear-gradient(145deg, rgba(18,39,27,.88), rgba(9,23,15,.94));box-shadow:0 14px 34px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.02);overflow:hidden}
.insights-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.insights-card-head div{min-width:0;display:grid;gap:4px}
.insights-card-head h2{margin:0;color:#eaf5e8;font-size:14px;line-height:1.1;font-weight:950;letter-spacing:-.025em}
.insights-card-head p{margin:0;color:#718374;font-size:9.5px;line-height:1.25;font-weight:750}
.insights-card-head strong{flex:0 0 auto;font-size:12px;line-height:1;font-weight:950}
.insights-type-bar{height:13px;display:flex;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 3px rgba(0,0,0,.22)}
.insights-type-segment{min-width:0;height:100%;transition:width .25s ease}
.insights-type-segment.need{background:#5de58a}
.insights-type-segment.want{background:#f4b45f}
.insights-type-segment.mixed{background:#75aef0}
.insights-type-legend{display:grid;grid-template-columns:repeat(3, 1fr);gap:7px;margin-top:11px}
.insights-type-item{min-width:0;display:grid;gap:3px}
.insights-type-item span{color:#728476;font-size:9px;font-weight:850}
.insights-type-item strong{color:#dce9db;font-size:11px;font-weight:950}
.insights-chart-empty{min-height:180px;display:grid;place-items:center;color:#708173;text-align:center;font-size:11px;line-height:1.4;font-weight:800}
.insights-donut-layout{display:grid;grid-template-columns:152px minmax(0, 1fr);align-items:center;gap:14px}
.insights-donut{position:relative;width:152px;height:152px;border-radius:50%;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 28px rgba(0,0,0,.17)}
.insights-donut::after{content:"";position:absolute;inset:25px;border-radius:50%;box-shadow:0 0 0 1px rgba(202,236,199,.06), inset 0 8px 20px rgba(0,0,0,.22)}
.insights-donut-center{position:absolute;inset:34px;z-index:1;display:grid;place-content:center;gap:4px;text-align:center}
.insights-donut-center strong{color:#eff9ed;font-size:19px;font-weight:950;letter-spacing:-.05em}
.insights-donut-center span{color:#718374;font-size:8.5px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.insights-category-legend{display:grid;gap:8px;min-width:0}
.insights-category-row{min-width:0;display:grid;grid-template-columns:8px minmax(0, 1fr) auto;align-items:center;gap:7px}
.insights-category-dot{width:8px;height:8px;border-radius:50%}
.insights-category-row span:nth-child(2){overflow:hidden;color:#8a9b8c;font-size:9.5px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.insights-category-row strong{color:#dce8da;font-size:10px;font-weight:950}
.insights-chart-svg{display:block;width:100%;height:auto;overflow:visible}
.insights-chart-grid{stroke-width:1}
.insights-chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.insights-chart-dot{stroke-width:2}
.insights-chart-label{font-size:8px;font-weight:800}
.insights-chart-value{fill:#d9e8d7;font-size:8px;font-weight:900}
.insights-trend-footer,
    .insights-week-footer{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:#718374;font-size:9px;font-weight:800}
.insights-week-chart{height:178px;display:flex;align-items:end;gap:6px;padding:9px 2px 0;border-bottom:1px solid rgba(202,236,199,.08)}
.insights-week-column{min-width:0;flex:1 1 0;height:100%;display:grid;grid-template-rows:minmax(0, 1fr) 17px;align-items:end;gap:5px}
.insights-week-bar-wrap{height:100%;display:flex;align-items:end;justify-content:center}
.insights-week-bar{width:min(22px, 72%);min-height:3px;border-radius:7px 7px 3px 3px;transition:height .25s ease}
.insights-week-column.current .insights-week-bar{background:linear-gradient(180deg, #b0ffc2, #5cdd81)}
.insights-week-column span{color:#6e8171;text-align:center;font-size:8px;font-weight:900}
.insights-note{padding:10px 12px;border-radius:15px;color:#718374;font-size:9.5px;line-height:1.35;font-weight:750}
@media (max-width: 360px){.insights-subpage-header{padding-left:12px;padding-right:12px}
.insights-subpage-body{padding-left:11px;padding-right:11px}
.insights-header-copy h1{font-size:21px}
.insights-donut-layout{grid-template-columns:128px minmax(0, 1fr);gap:10px}
.insights-donut{width:128px;height:128px}
.insights-donut::after{inset:22px}
.insights-donut-center{inset:29px}
.insights-donut-center strong{font-size:17px}
.insights-section-btn{font-size:8.3px}}
@media (prefers-reduced-motion: reduce){.insights-subpage.show, .insights-panel{animation:none!important}
.insights-type-segment, .insights-week-bar{transition:none!important}}
:root{--spendly-visual-height:100dvh;--spendly-visual-top:0px;--sheet-side-gap:8px;--sheet-header-height:64px;--sheet-content-gutter:16px;--sheet-bottom-comfort:max(14px, calc(env(safe-area-inset-bottom) - 8px))}
body.modal-open{overflow:hidden;overscroll-behavior:none}
.modal-backdrop{inset:auto 0 auto 0;top:var(--spendly-visual-top);height:var(--spendly-visual-height);display:none;align-items:flex-end;justify-content:center;overflow:hidden;padding:max(8px, env(safe-area-inset-top)) var(--sheet-side-gap) 8px;overscroll-behavior:none}
.modal-backdrop.show{display:flex}
.modal{width:min(calc(100vw - (var(--sheet-side-gap) * 2)), 500px);height:auto;max-height:min(780px, calc(var(--spendly-visual-height) - max(16px, env(safe-area-inset-top)) - 12px));display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;overflow:hidden;border-radius:30px;border:1px solid rgba(157, 230, 169, .16);overscroll-behavior:contain;touch-action:pan-y}
.modal-head{position:relative;inset:auto;z-index:4;flex:0 0 auto;min-height:var(--sheet-header-height);margin:0;padding:10px 12px 10px 20px;display:grid;grid-template-columns:minmax(0, 1fr) 44px;align-items:center;gap:12px;border-bottom:1px solid rgba(202,236,199,.075)}
.modal-head h3{min-width:0;margin:0;overflow:hidden;font-size:22px;line-height:1.08;letter-spacing:-.048em;text-overflow:ellipsis;white-space:nowrap}
.close-btn{width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;display:grid;place-items:center;align-self:center;justify-self:end;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);transition:transform .12s ease, background .16s ease}
.close-btn:active{transform:scale(.94);background:rgba(255,255,255,.095)}
.close-btn .app-icon{width:19px;height:19px;stroke-width:2.15}
.modal-body{flex:0 1 auto;min-width:0;min-height:0;padding:15px var(--sheet-content-gutter) var(--sheet-bottom-comfort);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding:18px 0 calc(72px + var(--sheet-bottom-comfort));touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modal-body::-webkit-scrollbar{display:none;width:0;height:0}
.modal-body > *{min-width:0}
.transaction-detail{gap:13px}
.transaction-detail-actions{gap:9px;padding-top:2px}
.transaction-detail-actions .btn{min-height:52px}
.modal-backdrop[data-kind="expense-edit"] .modal{max-height:min(760px, calc(var(--spendly-visual-height) - max(16px, env(safe-area-inset-top)) - 12px))}
.modal-backdrop[data-kind="expense-edit"] .modal-body{flex:0 1 auto;display:flex;padding:0;overflow:hidden}
.edit-expense-form{flex:0 1 auto;width:100%;min-width:0;min-height:0;max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.edit-expense-scroll{flex:0 1 auto;min-width:0;min-height:0;display:grid;align-content:start;gap:12px;padding:15px var(--sheet-content-gutter) 18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding:16px 0 26px;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.edit-expense-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.edit-expense-scroll > *{min-width:0}
.edit-expense-amount{position:relative;min-width:0}
.edit-expense-amount span{position:absolute;left:14px;top:50%;z-index:1;color:#90a292;font-size:15px;font-weight:900;transform:translateY(-50%);pointer-events:none}
.edit-expense-amount input{height:50px;min-height:50px;padding-left:33px;font-size:16px;font-weight:900;font-variant-numeric:tabular-nums}
.edit-expense-section{display:grid;gap:11px;margin-top:3px;padding-top:14px;border-top:1px solid rgba(202,236,199,.075)}
.edit-expense-section-title{margin:0 2px -1px;font-size:11px;line-height:1;font-weight:950;letter-spacing:.045em;text-transform:uppercase}
.modal-backdrop[data-kind="expense-edit"] .field-row{grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr);gap:10px}
.edit-expense-form textarea{min-height:96px;resize:none}
.edit-expense-footer{position:relative;z-index:3;flex:0 0 auto;margin:0;padding:10px var(--sheet-content-gutter) var(--sheet-bottom-comfort);border-top:1px solid rgba(202,236,199,.075)}
.edit-expense-footer .btn{min-height:52px;margin:0;border-radius:16px}
@media (max-width: 380px){:root{--sheet-side-gap:6px;--sheet-content-gutter:14px}
.modal{border-radius:27px}
.modal-head{padding-left:17px;padding-right:10px}
.modal-head h3{font-size:21px}}
@media (max-width: 340px){.modal-backdrop[data-kind="expense-edit"] .field-row{grid-template-columns:minmax(0, 1fr)}
.edit-expense-scroll{gap:10px;padding-top:13px}}
@media (orientation: landscape) and (max-height: 540px){:root{--sheet-header-height:56px}
.modal-backdrop{padding-top:6px;padding-bottom:6px}
.modal{max-height:calc(var(--spendly-visual-height) - 12px);border-radius:24px}
.modal-head{padding-top:6px;padding-bottom:6px}
.modal-head h3{font-size:20px}
.edit-expense-scroll{padding-top:12px}}
@media (prefers-reduced-motion: reduce){.modal-body, .edit-expense-scroll{scroll-behavior:auto}}
html.modal-open,
    body.modal-open{height:100%;overflow:hidden;overscroll-behavior:none}
.modal-backdrop,
    .modal,
    .modal-head{overscroll-behavior:none}
.modal-body,
    .edit-expense-scroll{overscroll-behavior-y:contain;overscroll-behavior-x:none;scroll-snap-type:none}
.modal-body:not(.can-scroll),
    .edit-expense-scroll:not(.can-scroll){overflow-y:hidden}
.activity-tools{display:grid;grid-template-columns:minmax(0, 1fr) auto}
.activity-search{min-width:0;height:46px;display:grid;grid-template-columns:20px minmax(0, 1fr);align-items:center;gap:9px;padding:0 13px;border:1px solid rgba(202, 236, 199, .10);border-radius:16px;background:rgba(12, 28, 19, .66);color:#789079}
.activity-search .app-icon{width:18px;height:18px}
.activity-search input{min-width:0;height:44px;padding:0;border:0;border-radius:0;box-shadow:none;font-size:14px}
.activity-search input:focus{border:0;background:transparent;box-shadow:none}
.activity-search input::-webkit-search-cancel-button{filter:invert(.72)}
.activity-filter-button{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid rgba(202, 236, 199, .10);border-radius:16px;background:rgba(12, 28, 19, .66);font-size:12px}
.activity-filter-button .app-icon{width:17px;height:17px}
.activity-filter-button strong[hidden]{display:none}
.activity-filter-button strong{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;font-size:9px;font-weight:950}
.activity-filter-chips{display:flex;gap:7px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;overscroll-behavior-inline:contain}
.activity-filter-chips[hidden]{display:none}
.activity-filter-chips::-webkit-scrollbar{display:none}
.activity-filter-chip{flex:0 0 auto;min-height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid rgba(125, 224, 141, .16);border-radius:999px;font-size:10px;font-weight:900}
.activity-filter-chip .app-icon{width:12px;height:12px}
.activity-filter-form{display:grid;gap:15px}
.activity-filter-actions{display:grid;gap:9px;margin-top:3px}
.activity-filter-summary{padding:12px 13px;border:1px solid rgba(125, 224, 141, .12);border-radius:16px;background:rgba(125, 224, 141, .065);font-size:11px;font-weight:760;line-height:1.45}
.setup-adjustment-card{display:grid;gap:12px;padding:14px;border:1px solid rgba(125, 224, 141, .12);border-radius:19px;background:rgba(125, 224, 141, .055)}
.setup-adjustment-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.setup-adjustment-head strong{color:#dce9db;font-size:13px;font-weight:920}
.setup-adjustment-head small{display:block;margin-top:4px;color:#7f927f;font-size:10px;font-weight:720;line-height:1.4}
.setup-adjustment-head span{color:#9eeaaa;font-size:13px;font-weight:950;white-space:nowrap}
.setup-balance-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#819481;font-size:11px;font-weight:800}
.setup-balance-preview strong{color:#e5f4e3;font-size:14px;font-weight:950}
@media (max-width: 350px){.activity-tools{grid-template-columns:minmax(0, 1fr) 48px}
.activity-filter-button{min-width:48px;padding:0}
.activity-filter-button > span{display:none}}
:root{--shadow:0 24px 70px rgba(0,0,0,.34);--soft-shadow:0 12px 34px rgba(0,0,0,.20);--radius-sheet:28px;--radius-list:18px;--radius-control:15px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
.context-header-meta{font-size:10px;font-weight:760}
.btn{min-height:50px;border-radius:15px;font-size:13px;font-weight:820;letter-spacing:-.015em}
.btn.primary{color:#07110b;background:linear-gradient(145deg, #8be5a5, #5cc67b);box-shadow:0 12px 30px rgba(72,183,103,.19), inset 0 1px 0 rgba(255,255,255,.34)}
.btn.secondary{color:#d6dbe0;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.075);box-shadow:none}
.btn.ghost{color:#9ba2ab;border-color:rgba(255,255,255,.075)}
.btn.danger{color:#ff9ba1;background:rgba(239,133,141,.075);border-color:rgba(239,133,141,.17)}
.home-hero{border:1px solid rgba(255,255,255,.07);background:radial-gradient(circle at 92% -5%, rgba(123,221,152,.13), transparent 34%),
        linear-gradient(150deg, #171c22 0%, #101419 72%);box-shadow:0 24px 64px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045)}
.home-hero::after{width:190px;height:190px;right:-118px;bottom:-128px;background:rgba(123,221,152,.045)}
.home-kicker{color:#84dda0;font-size:10px;font-weight:820;letter-spacing:.11em}
.home-week-badge{padding:7px 10px;border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.035);color:#969ea7;font-weight:700}
.home-question{margin-top:20px}
.home-safe-block{margin-top:13px}
.home-safe-value{margin-top:0}
.home-safe-status{margin-top:13px;padding:7px 10px;background:rgba(123,221,152,.09);color:#bdecc9;font-size:11px;font-weight:720}
.home-safe-status.warn{background:rgba(230,173,91,.10);color:#f3ca8d}
.home-safe-status.bad{background:rgba(239,133,141,.10);color:#ffadb3}
.home-actions{grid-template-columns:minmax(0, 1fr);margin-top:21px}
.home-actions .btn.primary{width:100%}
.home-actions .btn.secondary{display:none}
.home-glance{margin-top:12px;border:1px solid rgba(255,255,255,.065);background:#11151a;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.home-glance-item{border-radius:0;box-shadow:none}
.home-glance-item:nth-child(2){border-left:1px solid rgba(255,255,255,.06)}
.home-glance-item:nth-child(3){display:none}
.week-status-pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;line-height:1;white-space:nowrap}
.week-status-pill.watch{border-color:rgba(226, 173, 91, .18)}
.week-status-pill.over{border-color:rgba(239, 133, 141, .18)}
.home-week-card{border:1px solid rgba(255,255,255,.065);background:#11151a;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.home-week-progress span{width:0;transition:width .24s ease}
.home-week-foot strong{text-align:right}
.home-insights-entry{padding:10px 13px;border:1px solid rgba(255,255,255,.06);border-radius:18px;background:#11151a;box-shadow:none}
.home-insights-icon{width:38px;height:38px;border-radius:12px}
.home-insights-copy strong{color:#e3e6e9;font-size:13px;font-weight:760}
.home-insights-copy small{color:#727a84;font-size:9px;font-weight:620}
.home-insights-chevron{color:#515861}
.home-details,
    .home-activity{border-color:rgba(255,255,255,.06);border-radius:19px;background:#11151a;box-shadow:none}
.home-details summary{min-height:64px;padding-left:15px}
.home-details summary strong{color:#e2e6e8;font-size:13px;font-weight:760}
.home-details summary small{color:#707881;font-weight:620}
.home-details summary::after{color:#5e6670}
.home-details-badge{font-weight:740}
.home-details-body{border-top-color:rgba(255,255,255,.055)}
.home-detail-list{border-color:rgba(255,255,255,.055);background:#0d1115}
.home-detail-row{border-bottom-color:rgba(255,255,255,.05)}
.home-detail-row span{color:#737b84;font-weight:650}
.home-detail-row strong{color:#dce0e3;font-weight:760}
.home-activity-row{border-bottom-color:rgba(255,255,255,.05)}
.home-activity-icon{width:36px;height:36px;border-radius:11px;background:#1a2027;color:#8d98a3}
.home-activity-count{color:#545c65}
.history-overview{grid-template-columns:minmax(0, 1.25fr) minmax(108px,.75fr);overflow:hidden;border:1px solid rgba(255,255,255,.065);border-radius:20px;background:#11151a}
.history-overview-item{min-height:82px;padding:15px 16px;border:0;background:transparent;box-shadow:none}
.history-overview-item + .history-overview-item{border-left:1px solid rgba(255,255,255,.06)}
.history-overview-item span{font-size:10px;font-weight:690}
.history-overview-item strong{font-size:26px;font-weight:800}
.activity-tools{gap:8px;margin:13px 0 9px}
.activity-search,
    .activity-filter-button{height:44px;border-color:rgba(255,255,255,.065);background:#11151a;color:#858e98}
.activity-search input{color:#e5e8eb;font-weight:650}
.activity-search input::placeholder{color:#626a74}
.activity-filter-button{min-width:82px;font-weight:740}
.activity-filter-button strong{background:#7bdd98;color:#07110b}
.activity-filter-chip{border-color:rgba(123,221,152,.14);background:rgba(123,221,152,.075);color:#a9e1b8}
.history-opening-note{margin-top:8px;padding:11px 3px;border:0;background:transparent}
.history-opening-note span{font-weight:720}
.history-opening-note small{font-weight:600}
.history-opening-note strong{color:#b9bec4;font-size:13px;font-weight:760}
.history-section{margin-top:18px}
.history-feed{gap:21px}
.history-day-head{margin:0 2px 8px}
.history-day-head h4{font-weight:760}
.history-day-head span{font-size:11px;font-weight:720}
.history-day-card{border-color:rgba(255,255,255,.06);background:#11151a;box-shadow:none}
.history-transaction-row{grid-template-columns:36px minmax(0,1fr) auto 10px;gap:11px}
.history-transaction-row:active{background:rgba(255,255,255,.025)}
.history-transaction-icon{width:36px;height:36px;border-radius:11px;background:#1a2027;color:#8d98a3}
.history-transaction-copy small{font-weight:620}
.history-transaction-chevron{color:#49515a}
.history-empty{gap:7px;padding:24px 18px;border-color:rgba(255,255,255,.06);border-radius:18px;background:#11151a}
.history-empty-icon{width:42px;height:42px;border-radius:13px;background:#1a2027;color:#91a09b}
.history-empty strong{color:#dfe3e6}
.history-empty span{color:#707881}
.plan-segments{gap:3px;border-color:rgba(255,255,255,.065);background:#11151a;box-shadow:none}
.plan-segment{font-weight:710}
.plan-segment small{background:rgba(255,255,255,.045);color:#747c86}
.plan-segment.active small{background:rgba(123,221,152,.11);color:#9fdfb1}
.plan-panel{margin-top:19px}
.plan-panel-head h3{color:#e7eaed;font-size:16px;font-weight:780}
.plan-panel-head p{color:#6d7580;font-weight:620}
.plan-add-action{width:39px;height:39px;color:#07110b;box-shadow:0 9px 22px rgba(72,183,103,.17)}
.plan-list{border-color:rgba(255,255,255,.06);background:#11151a;box-shadow:none}
.plan-row-icon{color:#909aa4}
.plan-row-icon.complete{background:rgba(123,221,152,.09);color:#81d69a}
.plan-row-copy strong{font-weight:740}
.plan-row-copy small{font-weight:620}
.plan-row-amount{font-weight:780}
.plan-row-chevron{color:#49515a}
.plan-empty{min-height:180px;padding:22px 18px;background:transparent}
.plan-empty-icon{background:#1a2027;color:#8d98a3}
.settings-section-title{margin:0 5px 8px;font-size:10px;font-weight:760;letter-spacing:.075em}
.settings-list,
    .advanced-settings{border-color:rgba(255,255,255,.06);background:#11151a;box-shadow:none}
.settings-copy small{font-weight:610}
.settings-value{font-weight:700}
.settings-chevron{color:#49515a}
.settings-footnote{color:#575f68}
.advanced-settings summary strong{color:#d9dde0;font-weight:740}
.advanced-settings summary small{color:#6b737d;font-weight:610}
.modal-head h3{font-weight:790}
.modal-body{background:transparent}
input::placeholder, textarea::placeholder{color:#59616a}
.field label{font-weight:690}
.spend-amount-shell,
    .transaction-detail-hero,
    .transaction-detail-list,
    .activity-filter-summary,
    .setup-adjustment-card{border-color:rgba(255,255,255,.07);background:#11161b}
.transaction-detail-hero span{color:#abb2b9}
.transaction-detail-hero strong{color:#f0f5f1}
.transaction-detail-row{border-bottom-color:rgba(255,255,255,.05)}
.transaction-detail-row > span{color:#747c85}
.transaction-detail-row > strong{color:#dce0e3}
.edit-expense-section{border-top-color:rgba(255,255,255,.055)}
.edit-expense-section-title{color:#7d858e}
.edit-expense-footer{box-shadow:0 -14px 34px rgba(0,0,0,.22)}
.activity-filter-summary{color:#7f8790}
body.insights-open .nav{display:none}
.insights-back{background:#171c22;color:#b7bec5;border-color:rgba(255,255,255,.06)}
.insights-header-copy h1{color:#f2f4f6;font-weight:790}
.insights-header-copy p,
    .insights-period-label{color:#747c86}
.insights-scope-switch,
    .insights-section-tabs{border-color:rgba(255,255,255,.06);background:#11151a;box-shadow:none}
.insights-scope-btn,
    .insights-section-btn{color:#6e7680}
.insights-scope-btn.active,
    .insights-section-btn.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.insights-metric,
    .insights-card{border-color:rgba(255,255,255,.06);background:#11151a;box-shadow:none}
.insights-metric span,
    .insights-metric small,
    .insights-card-head p,
    .insights-note{color:#707881}
.insights-card-head strong{color:#8edca5}
.insights-note{background:#0f1318}
.insights-donut::after{background:#11151a;border-color:rgba(255,255,255,.05)}
.insights-chart-line{stroke:#7bdd98}
.insights-chart-dot{fill:#a6edb9;stroke:#11151a}
.insights-chart-grid{stroke:rgba(255,255,255,.06)}
.insights-chart-label{fill:#69717a}
.insights-week-chart{border-bottom-color:rgba(255,255,255,.06)}
.insights-week-bar{background:linear-gradient(180deg, #8be5a5, #58b974);box-shadow:none}
.nav-inner{border-color:rgba(255,255,255,.075)}
.nav-add-btn .nav-add-orb{border:0}
.startup-logo-shell{box-shadow:0 24px 70px rgba(0,0,0,.42)}
@media (max-width: 380px){.app-shell{padding-left:15px;padding-right:15px}
.context-header-copy h1{font-size:25px}
.home-hero{padding:19px}
.home-safe-value{font-size:clamp(54px, 17vw, 68px)}
.home-glance-item{padding-left:13px;padding-right:13px}
.nav{padding-left:8px;padding-right:8px}}
@media (max-width: 340px){.home-week-badge{max-width:57%}
.history-overview{grid-template-columns:minmax(0,1fr) 92px}
.activity-filter-button{min-width:48px}}
.home-week-card{min-width:0;align-items:stretch;justify-items:stretch;justify-content:stretch}
.home-week-primary,
    .home-week-amount-line,
    .home-week-progress,
    .home-week-foot{width:100%;min-width:0}
.home-week-foot{justify-content:stretch}
:root{--bg:#080a0c;--bg-soft:#0c0f11;--surface:#14171a;--surface-raised:#191d20;--surface-soft:#101316;--card:#14171a;--card-strong:#191d20;--text:#efeee9;--text-strong:#f2f1ec;--muted:#969a9f;--text-muted:#969a9f;--text-faint:#656a70;--line:rgba(223, 228, 224, .09);--hairline:rgba(223, 228, 224, .09);--green:#78df92;--green-dark:#78df92;--accent:#78df92;--accent-soft:rgba(120, 223, 146, .12);--mint:rgba(120, 223, 146, .12);--mint-strong:rgba(120, 223, 146, .20);--amber:#e6ad65;--rose:#ed858d;--blue:#77aef0;--nav-h:94px;--radius-xl:30px;--radius-lg:24px;--radius-md:17px;color-scheme:dark;font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif}
html{background:var(--bg)}
body{color:var(--text);background:radial-gradient(circle at 78% -9%, rgba(92, 174, 115, .075), transparent 27%),
        radial-gradient(circle at 0% 18%, rgba(130, 145, 158, .035), transparent 30%),
        linear-gradient(180deg, #080a0c 0%, #0a0c0e 47%, #080a0c 100%)}
body::before{background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.009) 45%, transparent 78%)}
.app-shell{width:min(100%, 520px);padding-left:16px;padding-right:16px;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 25px)}
.contextual-topbar{min-height:102px;padding:21px 5px 19px;background:linear-gradient(180deg, rgba(8,10,12,.985), rgba(8,10,12,.90) 75%, transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
.context-header-copy{min-width:0}
.context-header-copy h1{color:#f0efe9;font-size:clamp(31px, 8.5vw, 38px);line-height:.98;font-weight:760;letter-spacing:-.055em}
.context-header-copy p{margin-top:9px;max-width:315px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#85898f;font-size:13px;line-height:1.2;font-weight:590;letter-spacing:-.015em}
.context-header-meta{width:52px;height:52px;padding:0;display:grid;place-items:center;flex:0 0 52px;border:1px solid rgba(255,255,255,.07);border-radius:50%;background:linear-gradient(145deg, #171a1d, #101215);color:#72dd8d;box-shadow:0 12px 28px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.035)}
.context-header-meta .app-icon{width:23px;height:23px;stroke-width:1.8}
.section{margin-top:24px}
.section-head{margin:0 10px 12px}
.section-head h3{color:#ebeae5;font-size:20px;line-height:1;font-weight:735;letter-spacing:-.045em}
.section-head span,
    .section-link{color:#7d8288;font-size:12px;font-weight:680}
.section-link{color:#79df92}
#page-home{padding-top:1px}
.home-week-section{margin-top:1px}
.home-week-card,
    .home-hero,
    .home-activity,
    .home-glance,
    .home-insights-entry,
    .home-details{border:1px solid rgba(224, 229, 225, .09);background:linear-gradient(145deg, rgba(255,255,255,.019), transparent 42%),
        linear-gradient(155deg, #171a1d 0%, #111416 100%);box-shadow:0 22px 52px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025)}
.home-week-card{width:100%;display:grid;grid-template-columns:minmax(0, 1fr);gap:19px;padding:22px 20px 20px;border-radius:30px;overflow:hidden}
.home-week-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.home-week-card-head h3{min-width:0;margin:0;color:#efeee9;font-size:clamp(20px, 5.7vw, 25px);line-height:1;font-weight:735;letter-spacing:-.045em}
.week-status-pill{min-height:36px;padding:0 14px;border:1px solid rgba(120,223,146,.17);background:linear-gradient(145deg, rgba(34,90,51,.62), rgba(24,63,36,.72));color:#86e79d!important;font-size:12px!important;font-weight:760!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.week-status-pill::before{content:"✓";width:18px;height:18px;display:grid;place-items:center;margin-right:7px;border-radius:50%;background:#79df92;color:#102417;font-size:11px;font-weight:950}
.week-status-pill.watch{background:rgba(104,70,30,.72);color:#efc37f!important}
.week-status-pill.watch::before{content:"!";background:#e6ad65;color:#2b1c08}
.week-status-pill.over{background:rgba(105,39,47,.72);color:#f1a0a6!important}
.week-status-pill.over::before{content:"!";background:#ed858d;color:#2a0d10}
.home-week-primary{display:grid;gap:14px;min-width:0}
.home-week-amount-line{width:100%;display:flex;align-items:baseline;gap:10px;min-width:0}
.home-week-amount-line strong{min-width:0;color:#f1f0eb;font-size:clamp(43px, 12.6vw, 61px);line-height:.94;font-weight:760;letter-spacing:-.073em;font-variant-numeric:tabular-nums}
.home-week-amount-line span{color:#9a9ea4;font-size:clamp(16px, 4.4vw, 20px);font-weight:650;letter-spacing:-.02em}
.home-week-date-row{display:flex;align-items:center;gap:9px;color:#898e94}
.home-week-date-row .app-icon{width:20px;height:20px;stroke-width:1.7}
.home-week-dates{color:#898e94;font-size:14px;font-weight:620;letter-spacing:-.015em}
.home-week-progress-row{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:12px;width:100%;min-width:0}
.home-week-progress{width:100%;height:12px;overflow:hidden;border-radius:999px;background:#262a2e;box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
.home-week-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg, #66d986, #8ce7a2);box-shadow:0 0 18px rgba(120,223,146,.18)}
.home-week-progress span.near{background:linear-gradient(90deg, #d9964c, #efbf76)}
.home-week-progress span.over{background:linear-gradient(90deg, #dc6b75, #f0969d)}
.week-percent-pill{min-width:55px;min-height:38px;display:grid;place-items:center;padding:0 11px;border-radius:15px;background:linear-gradient(145deg, #86e39e, #60c97d);color:#0b1a10;font-size:14px;font-weight:830;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.week-percent-pill.watch{background:linear-gradient(145deg, #efc27b, #d39750);color:#281b0c}
.week-percent-pill.over{background:linear-gradient(145deg, #f19aa1, #d96b75);color:#2a0d10}
.home-week-foot{width:100%;display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:baseline;gap:12px;padding-top:1px;color:#878c92;font-size:13px;font-weight:620;font-variant-numeric:tabular-nums}
.home-week-foot strong{justify-self:end;color:#b7bbb8;font-size:13px;font-weight:720}
.home-today-section{margin-top:20px}
.home-hero{position:relative;padding:20px;border-radius:28px;overflow:hidden}
.home-hero::after{display:none}
.home-today-top{display:grid;grid-template-columns:48px minmax(0,1fr) auto 24px;align-items:center;gap:12px;min-width:0}
.home-today-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(120,223,146,.13);color:#78df92;box-shadow:inset 0 0 0 1px rgba(120,223,146,.06)}
.home-today-icon .app-icon{width:24px;height:24px;stroke-width:1.8}
.home-today-copy{min-width:0;display:grid;gap:4px}
.home-question{margin:0;color:#efeee9;font-size:19px;line-height:1.05;font-weight:720;letter-spacing:-.035em}
.home-today-subtitle{color:#8b9096;font-size:12px;font-weight:610}
.home-safe-value{margin:0;color:#75df90;font-size:clamp(28px, 8vw, 36px);line-height:1;font-weight:760;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-today-add{width:24px;height:42px;display:grid;place-items:center;padding:0;background:transparent;color:#666c72}
.home-today-add .app-icon{width:22px;height:22px;stroke-width:2}
.home-today-progress{height:10px;margin-top:20px;overflow:hidden;border-radius:999px;background:#25292d}
.home-today-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg, #62d681, #83e39a)}
.home-today-progress span.warn{background:linear-gradient(90deg, #d99a4f, #edbd73)}
.home-today-progress span.bad{background:linear-gradient(90deg, #d86973, #ef939b)}
.home-today-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:#8e9399;font-size:13px;font-weight:620;font-variant-numeric:tabular-nums}
.home-today-foot strong{color:#aeb2b0;font-weight:690}
.home-safe-status{display:none!important}
.home-recent-section{margin-top:28px}
.home-activity{overflow:hidden;border-radius:25px}
.home-activity-row{width:100%;min-height:75px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px 15px;border:0;border-bottom:1px solid rgba(223,228,224,.075);background:transparent;text-align:left;color:inherit}
.home-activity-row:last-child{border-bottom:0}
.home-activity-row:active{background:rgba(255,255,255,.025)}
.home-activity-icon,
    .history-transaction-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#202429;color:#9ca3aa}
.home-activity-icon .app-icon,
    .history-transaction-icon .app-icon{width:22px;height:22px;stroke-width:1.8}
.category-tone-groceries{color:#76df90!important;background:rgba(120,223,146,.12)!important}
.category-tone-eating{color:#eea759!important;background:rgba(238,167,89,.12)!important}
.category-tone-trips{color:#72abef!important;background:rgba(114,171,239,.12)!important}
.category-tone-shared{color:#b894e9!important;background:rgba(184,148,233,.12)!important}
.category-tone-gym{color:#eb7f89!important;background:rgba(235,127,137,.12)!important}
.category-tone-clothes{color:#74d4cd!important;background:rgba(116,212,205,.12)!important}
.category-tone-misc{color:#a3a8ad!important;background:rgba(163,168,173,.11)!important}
.home-activity-copy{min-width:0;display:grid;gap:5px}
.home-activity-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ecebe6;font-size:15px;font-weight:690;letter-spacing:-.02em}
.home-activity-meta{color:#898e94;font-size:12px;font-weight:590}
.home-activity-side{display:grid;justify-items:end;gap:5px}
.home-activity-amount{color:#efeee9;font-size:15px;font-weight:720;font-variant-numeric:tabular-nums}
.home-activity-side small{color:#8a8f95;font-size:11px;font-weight:590}
.home-activity-count{display:none}
.home-overview-section{margin-top:28px}
.home-glance{grid-template-columns:repeat(3, minmax(0,1fr));gap:0;overflow:hidden;border-radius:23px}
.home-glance-item{min-height:83px;padding:16px 14px;border:0;border-right:1px solid rgba(223,228,224,.075);background:transparent;text-align:left}
.home-glance-item:last-child{display:block;border-right:0}
.home-glance-label{color:#777c82;font-size:10px;font-weight:660}
.home-glance-value{margin-top:9px;color:#ebeae5;font-size:clamp(18px, 5.3vw, 24px);font-weight:740;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.home-insights-entry,
    .home-details{border-radius:22px}
.home-insights-entry{min-height:68px}
.home-insights-icon{background:rgba(120,223,146,.11);color:#78df92}
.home-insights-copy strong,
    .home-details summary strong{color:#e7e6e1}
.home-insights-copy small,
    .home-details summary small{color:#7f848a}
.home-details-badge{background:rgba(120,223,146,.10);color:#8de5a3}
.history-overview{gap:10px;margin-top:2px}
.history-overview-item,
    .activity-search,
    .activity-filter-button,
    .history-opening-note,
    .history-day-card,
    .history-empty{border-color:rgba(223,228,224,.085);background:linear-gradient(150deg, #171a1d, #111416);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.history-overview-item{border-radius:21px}
.history-overview-item span{color:#7e8389}
.history-overview-item strong{color:#ebeae5}
.activity-tools{margin-top:16px}
.activity-search,
    .activity-filter-button{min-height:48px;border-radius:17px}
.activity-search input{background:transparent}
.activity-filter-button{color:#aeb3b7}
.history-opening-note{border-radius:20px}
.history-opening-note span{color:#d8d7d2}
.history-opening-note small{color:#787d83}
.history-day-head h4{color:#9b9fa4;font-size:12px}
.history-day-head span{color:#858a90}
.history-day-card{overflow:hidden;border-radius:23px}
.history-transaction-row{min-height:72px;padding:12px 14px;border-bottom-color:rgba(223,228,224,.07)}
.history-transaction-copy > strong{color:#e9e8e3;font-size:14px;font-weight:690}
.history-transaction-copy small{color:#868b91}
.history-transaction-amount{color:#ecebe6;font-weight:720}
.plan-segments,
    .plan-list,
    .settings-list,
    .advanced-settings{border-color:rgba(223,228,224,.085);background:linear-gradient(150deg, #171a1d, #111416);box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.plan-segments{border-radius:18px;padding:4px}
.plan-segment{min-height:45px;border-radius:14px;color:#777c82}
.plan-segment.active{color:#ecebe6;background:#25292d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 7px 18px rgba(0,0,0,.18)}
.plan-add-action{border-radius:50%;background:linear-gradient(145deg, #8ae5a0, #60ca7d)}
.plan-list{border-radius:23px;overflow:hidden}
.plan-row{min-height:68px;border-bottom-color:rgba(223,228,224,.07)}
.plan-row-icon{border-radius:50%;background:#22262a}
.plan-row-copy strong{color:#e7e6e1}
.plan-row-copy small{color:#83888e}
.plan-row-amount{color:#ecebe6}
#page-more .settings-section{margin-top:22px}
.settings-section-title{margin-left:10px;color:#777c82}
.settings-list,
    .advanced-settings{border-radius:23px;overflow:hidden}
.settings-row{min-height:68px;border-bottom-color:rgba(223,228,224,.07)}
.settings-icon{width:40px;height:40px;border-radius:14px;background:#23272b;color:#9ca2a7}
.settings-copy strong{color:#e6e5e0;font-size:14px;font-weight:680}
.settings-copy small{color:#81868c}
.settings-value{color:#9ca1a6}
.modal-backdrop{background:rgba(0,0,0,.70);backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%)}
.modal{border-color:rgba(223,228,224,.10);background:linear-gradient(180deg, #1b1f22 0%, #111416 100%);box-shadow:0 32px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.03)}
.modal-head{background:rgba(27,31,34,.985);border-bottom-color:rgba(223,228,224,.075)}
.modal-head h3{color:#efeee9}
.close-btn{border-radius:50%;background:rgba(255,255,255,.055);color:#b8bcbf}
input, select, textarea{color:#ebeae5;background:#0e1113;border-color:rgba(223,228,224,.10)}
input:focus, select:focus, textarea:focus{border-color:rgba(120,223,146,.42);background:#101315;box-shadow:0 0 0 3px rgba(120,223,146,.09)}
.field label{color:#8f949a}
.edit-expense-footer{background:rgba(17,20,22,.985);border-top-color:rgba(223,228,224,.075)}
.insights-subpage{background:#080a0c}
.insights-subpage-header{background:rgba(8,10,12,.975);border-bottom-color:rgba(223,228,224,.07)}
.insights-controls{background:linear-gradient(180deg, #080a0c 72%, transparent)}
.insights-scope-switch,
    .insights-section-tabs,
    .insights-metric,
    .insights-card{border-color:rgba(223,228,224,.085);background:linear-gradient(150deg, #171a1d, #111416)}
.insights-scope-btn.active,
    .insights-section-btn.active{background:#25292d;color:#ecebe6}
.insights-metric strong,
    .insights-card-head h2{color:#eae9e4}
.nav{width:min(100%, 520px);padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:linear-gradient(180deg, transparent, rgba(8,10,12,.84) 22%, #080a0c 68%)}
.nav-inner{height:78px;overflow:visible;padding:5px 4px;border:1px solid rgba(223,228,224,.085);border-radius:29px;background:rgba(23,26,29,.96);box-shadow:0 20px 58px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-btn{min-width:0;height:68px;grid-template-rows:43px auto;align-content:center;gap:2px;border-radius:21px;background:transparent;color:#8b9096;font-size:10px;font-weight:630}
.nav-btn .ico{width:43px;height:43px;display:grid;place-items:center;margin:0 auto;border-radius:50%;color:#969ba1}
.nav-btn .ico .app-icon{width:23px;height:23px;stroke-width:1.75}
.nav-btn.active{color:#78df92;background:transparent;box-shadow:none}
.nav-btn.active .ico{background:rgba(120,223,146,.13);color:#78df92;box-shadow:inset 0 0 0 1px rgba(120,223,146,.05)}
.nav-add-btn{position:relative;z-index:2;transform:translateY(-5px);color:#989da2}
.nav-add-btn .nav-add-orb{width:56px;height:56px;border-radius:50%;color:#0a180f;background:linear-gradient(145deg, #91e7a5, #62cb7d);box-shadow:0 12px 30px rgba(72,183,103,.31), inset 0 1px 0 rgba(255,255,255,.30)}
.nav-add-orb .app-icon{width:27px;height:27px;stroke-width:2.1}
.startup-screen{background:#080a0c}
.startup-title{color:#efeee9}
.startup-subtitle{color:#858a90}
@media (max-width: 390px){.app-shell{padding-left:14px;padding-right:14px}
.contextual-topbar{min-height:96px}
.context-header-copy h1{font-size:31px}
.context-header-copy p{max-width:270px;font-size:12px}
.context-header-meta{width:48px;height:48px;flex-basis:48px}
.home-week-card{padding:20px 18px 18px}
.home-week-card-head h3{font-size:21px}
.week-status-pill{min-height:34px;padding:0 11px;font-size:11px!important}
.home-week-foot{grid-template-columns:1fr;gap:5px}
.home-week-foot strong{justify-self:start}
.home-today-top{grid-template-columns:44px minmax(0,1fr) auto 20px;gap:10px}
.home-today-icon{width:44px;height:44px}
.home-question{font-size:17px}
.home-safe-value{font-size:28px}
.home-glance-item{padding-left:11px;padding-right:11px}
.home-glance-value{font-size:18px}}
@media (max-width: 345px){.home-week-card-head{align-items:flex-start}
.week-status-pill::before{display:none}
.home-week-progress-row{grid-template-columns:minmax(0,1fr) 48px;gap:9px}
.week-percent-pill{min-width:48px;min-height:34px;font-size:12px}
.home-today-top{grid-template-columns:42px minmax(0,1fr) auto}
.home-today-add{display:none}
.home-safe-value{font-size:25px}
.home-glance{grid-template-columns:1fr 1fr}
.home-glance-item:nth-child(3){display:none}
.nav-btn{font-size:9px}
.nav-add-btn .nav-add-orb{width:52px;height:52px}}


/* v4.2 — Itemised grocery expenses */
.expense-grocery-items{display:grid;gap:12px;padding:14px;border:1px solid rgba(223,228,224,.085);border-radius:20px;background:linear-gradient(150deg,rgba(28,32,35,.92),rgba(15,18,20,.94))}
.expense-grocery-items[hidden]{display:none!important}
.expense-grocery-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.expense-grocery-head>div{display:grid;gap:3px;min-width:0}
.expense-grocery-head strong{color:#e9e8e3;font-size:14px;font-weight:760;letter-spacing:-.02em}
.expense-grocery-head span{color:#858b90;font-size:11px;font-weight:650}
.expense-grocery-optional{flex:0 0 auto;padding:6px 8px;border-radius:999px;background:rgba(120,223,146,.09);color:#8cda9f!important;font-size:10px!important;font-weight:760!important}
.expense-grocery-list{display:grid;gap:10px}
.expense-grocery-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(92px,.42fr) 36px;align-items:end;gap:8px;min-width:0}
.expense-grocery-line .field{min-width:0}
.expense-grocery-line .field label{margin-bottom:6px;font-size:11px}
.expense-grocery-line .field label small{color:#666c71;font:inherit;font-weight:600}
.expense-grocery-line input{min-height:46px;padding:11px 12px;border-radius:14px}
.expense-grocery-price-input{position:relative;display:flex;align-items:center;min-width:0}
.expense-grocery-price-input>span{position:absolute;left:12px;z-index:1;color:#7f858a;font-size:14px;font-weight:760;pointer-events:none}
.expense-grocery-price-input input{padding-left:28px}
.expense-grocery-remove{width:36px;height:46px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.045);color:#7d8388;font-size:22px;line-height:1;transition:background .15s ease,color .15s ease,transform .12s ease}
.expense-grocery-remove:active{transform:scale(.96);background:rgba(229,107,115,.12);color:#e7949a}
.expense-grocery-add{min-height:42px;border:1px dashed rgba(120,223,146,.22);border-radius:14px;background:rgba(120,223,146,.055);color:#8bdda0;font-size:12px;font-weight:760}
.expense-grocery-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(223,228,224,.07);font-size:11px;font-weight:680}
.expense-grocery-summary span{color:#7f858b}
.expense-grocery-summary strong{color:#a9afb3;text-align:right}
.expense-grocery-items[data-balance-state="match"] .expense-grocery-summary strong{color:#7fe097}
.expense-grocery-items[data-balance-state="partial"] .expense-grocery-summary strong{color:#c8b77c}
.expense-grocery-items[data-balance-state="over"] .expense-grocery-summary strong{color:#e18d94}
.transaction-grocery-items{display:grid;gap:0;overflow:hidden;border:1px solid rgba(223,228,224,.085);border-radius:20px;background:rgba(255,255,255,.018)}
.transaction-grocery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid rgba(223,228,224,.07)}
.transaction-grocery-head strong{color:#e6e5e0;font-size:13px;font-weight:740}
.transaction-grocery-head span{color:#777d82;font-size:11px;font-weight:680}
.transaction-grocery-list{display:grid}
.transaction-grocery-row{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 15px;border-bottom:1px solid rgba(223,228,224,.06)}
.transaction-grocery-row span{min-width:0;color:#b8bcbf;font-size:13px;font-weight:620;overflow-wrap:anywhere}
.transaction-grocery-row strong{flex:0 0 auto;color:#e6e5e0;font-size:13px;font-weight:720;font-variant-numeric:tabular-nums}
.transaction-grocery-row strong.muted{color:#686e73;font-weight:620}
.transaction-grocery-subtotal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;background:rgba(120,223,146,.045)}
.transaction-grocery-subtotal span{color:#858b90;font-size:11px;font-weight:650}
.transaction-grocery-subtotal strong{color:#8cdda0;font-size:12px;font-weight:760;font-variant-numeric:tabular-nums}
@media (max-width:370px){.expense-grocery-line{grid-template-columns:minmax(0,1fr) 88px 34px;gap:6px}.expense-grocery-items{padding:12px}.expense-grocery-line input{padding-left:10px;padding-right:10px}.expense-grocery-price-input input{padding-left:25px}.expense-grocery-price-input>span{left:10px}.expense-grocery-remove{width:34px}}


/* v4.2.1 — Grocery entry and iPhone keyboard comfort */
.modal input,.modal textarea,.modal select{scroll-margin-top:18px;scroll-margin-bottom:150px}
.modal-body:focus-within{padding-bottom:max(96px,var(--sheet-bottom-comfort))}
.edit-expense-scroll:focus-within{padding-bottom:108px}
.expense-grocery-entry{display:grid;gap:10px;min-width:0}
.expense-grocery-entry[hidden]{display:none!important}
.expense-grocery-toggle{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 15px;border:1px solid rgba(223,228,224,.085);border-radius:17px;background:rgba(255,255,255,.028);color:#d9ddd9;font-size:13px;font-weight:760;text-align:left}
.expense-grocery-toggle .app-icon{width:18px;height:18px;color:#777e83;transition:transform .16s ease,color .16s ease}
.expense-grocery-toggle[aria-expanded="true"]{border-color:rgba(120,223,146,.15);background:rgba(120,223,146,.045);color:#95dfa7}
.expense-grocery-toggle[aria-expanded="true"] .app-icon{color:#8ad99e;transform:rotate(90deg)}
.expense-grocery-items{gap:11px;padding:13px}
.expense-grocery-balance{margin-top:-2px;color:#8b9196;font-size:11px;font-weight:680;text-align:right}
.expense-grocery-items[data-balance-state="match"] .expense-grocery-balance{color:#7fe097}
.expense-grocery-items[data-balance-state="partial"] .expense-grocery-balance{color:#c8b77c}
.expense-grocery-items[data-balance-state="over"] .expense-grocery-balance{color:#e18d94}
.expense-grocery-summary{padding-top:9px}
.expense-grocery-summary strong{color:#e1e4e1;font-variant-numeric:tabular-nums}
@media (max-height:620px){.modal-body,.edit-expense-scroll{scroll-padding-bottom:190px}.expense-grocery-items{padding:11px}}

/* v4.2.2 — Itemised groceries use an automatic transaction description. */


/* v4.3 — Grocery checklist and highlighted budget balance */
.home-budget-focus-section{margin-top:12px}
.home-budget-focus{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(112px,.75fr);overflow:hidden;border:1px solid rgba(126,225,151,.16);border-radius:24px;background:linear-gradient(145deg,rgba(28,41,32,.98),rgba(15,19,17,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 42px rgba(0,0,0,.18)}
.home-budget-focus-main,.home-budget-focus-side{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:18px 17px}
.home-budget-focus-side{border-left:1px solid rgba(223,228,224,.075)}
.home-budget-focus span{color:#8f9992;font-size:10px;font-weight:720;text-transform:uppercase;letter-spacing:.06em}
.home-budget-focus strong{margin-top:7px;color:#91e6a5;font-size:clamp(28px,8.5vw,38px);line-height:1;font-weight:820;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-budget-focus-side strong{color:#ebeae5;font-size:clamp(25px,7.5vw,32px)}
.home-budget-focus small{margin-top:7px;color:#748078;font-size:10px;font-weight:640;white-space:nowrap}
.home-overview-section{margin-top:24px}
.grocery-quick-add{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:9px;margin-bottom:10px}
.grocery-quick-add input{min-width:0;height:48px;padding:0 15px;border-radius:17px;background:#11151a}
.grocery-quick-add button{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;color:#07110b;background:linear-gradient(145deg,#8ae5a0,#60ca7d);box-shadow:0 9px 22px rgba(72,183,103,.17)}
.grocery-quick-add button .app-icon{width:21px;height:21px;stroke-width:2.2}
.grocery-plan-toolbar{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.grocery-log-run,.grocery-clear-bought{min-height:39px;padding:0 13px;border-radius:14px;font-size:11px;font-weight:760}
.grocery-log-run{flex:1;background:rgba(120,223,146,.09);color:#98dfa9;border:1px solid rgba(120,223,146,.13)}
.grocery-log-run:disabled{opacity:.42}
.grocery-clear-bought{background:rgba(255,255,255,.035);color:#92989d;border:1px solid rgba(255,255,255,.055)}
.grocery-plan-groups{display:grid;gap:17px}
.grocery-plan-group{display:grid;gap:7px}
.grocery-plan-group-head{display:flex;align-items:center;justify-content:space-between;padding:0 5px;color:#838b92;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.06em}
.grocery-plan-group-head small{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.045);color:#777f86;font-size:10px}
.grocery-plan-row{display:grid;grid-template-columns:45px minmax(0,1fr);align-items:stretch;border-bottom:1px solid rgba(223,228,224,.07)}
.grocery-plan-row:last-child{border-bottom:0}
.grocery-plan-row.complete{opacity:.63}
.grocery-check-button{width:45px;min-height:67px;display:grid;place-items:center;background:transparent;color:#07110b}
.grocery-check-button::before{content:'';width:22px;height:22px;border:1.5px solid #596269;border-radius:50%;background:#171b1f}
.grocery-check-button.complete::before{display:none}
.grocery-check-button.complete .app-icon{width:15px;height:15px;stroke-width:2.5}
.grocery-check-button.complete{position:relative}
.grocery-check-button.complete::after{content:'';position:absolute;width:24px;height:24px;border-radius:50%;background:#7bdd98;z-index:-1}
.grocery-plan-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 14px;align-items:center;gap:10px;padding:12px 13px 12px 0;background:transparent;text-align:left}
.grocery-plan-main:active{background:rgba(255,255,255,.025)}
.grocery-plan-main .plan-row-copy strong{white-space:normal;overflow-wrap:anywhere}
.grocery-plan-row.complete .plan-row-copy strong{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#657068}
.grocery-list-empty{min-height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;text-align:center;border:1px solid rgba(223,228,224,.085);border-radius:23px;background:linear-gradient(150deg,#171a1d,#111416)}
.grocery-list-empty strong{color:#dfe3e6;font-size:14px}
.grocery-list-empty span{margin-top:7px;color:#717981;font-size:11px}
.grocery-detail-hero{align-items:flex-start}
.grocery-detail-hero strong{font-size:24px;white-space:normal;text-align:right;overflow-wrap:anywhere}
@media(max-width:370px){.home-budget-focus{grid-template-columns:minmax(0,1.35fr) minmax(100px,.65fr)}.home-budget-focus-main,.home-budget-focus-side{padding:16px 13px}.home-budget-focus strong{font-size:27px}.home-budget-focus-side strong{font-size:25px}.grocery-quick-add{grid-template-columns:minmax(0,1fr) 46px}.grocery-quick-add button{width:46px}}


/* v4.4 — Full-screen Grocery Run Mode */
.grocery-quantity-stepper{height:50px;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;overflow:hidden;border:1px solid rgba(223,228,224,.09);border-radius:17px;background:#11151a}
.grocery-quantity-stepper button{background:rgba(255,255,255,.025);color:#9ce0ab;font-size:22px;font-weight:520}
.grocery-quantity-stepper input{height:48px;padding:0;border:0;border-left:1px solid rgba(223,228,224,.07);border-right:1px solid rgba(223,228,224,.07);border-radius:0;background:transparent;text-align:center;font-variant-numeric:tabular-nums}
.grocery-run-subpage{position:fixed;inset:0;z-index:68;display:none;flex-direction:column;width:100%;height:var(--spendly-visual-height,100dvh);top:var(--spendly-visual-top,0);overflow:hidden;color:var(--text);background:#080a0c}
.grocery-run-subpage.show{display:flex;animation:groceryRunIn .25s cubic-bezier(.2,.75,.2,1) both}
@keyframes groceryRunIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.grocery-run-open{overflow:hidden;overscroll-behavior:none}
body.grocery-run-open .nav{display:none}
.grocery-run-header{flex:0 0 auto;min-height:calc(70px + env(safe-area-inset-top));display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:end;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 11px;border-bottom:1px solid rgba(223,228,224,.07);background:rgba(8,10,12,.975);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.grocery-run-back{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:#15191c;color:#c3c7c4}
.grocery-run-back .app-icon{width:20px;height:20px}
.grocery-run-header>div:nth-child(2){min-width:0;display:flex;flex-direction:column;justify-content:center;padding-bottom:2px}
.grocery-run-header>div:nth-child(2) span{color:#6f777d;font-size:9px;font-weight:760;text-transform:uppercase;letter-spacing:.09em}
.grocery-run-header>div:nth-child(2) strong{margin-top:2px;color:#efeee9;font-size:18px;font-weight:790;letter-spacing:-.03em}
.grocery-run-header-badge{align-self:center;margin-top:env(safe-area-inset-top);padding:7px 10px;border:1px solid rgba(120,223,146,.13);border-radius:999px;background:rgba(120,223,146,.08);color:#8fe2a2;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.06em}
.grocery-run-body{flex:1 1 auto;min-height:0;width:min(100%,520px);margin:0 auto;padding:14px 14px calc(18px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding-bottom:150px}
.grocery-run-body::-webkit-scrollbar{display:none}
.grocery-run-hero{display:grid;grid-template-columns:minmax(0,1fr) 74px;align-items:center;gap:14px;padding:19px;border:1px solid rgba(120,223,146,.13);border-radius:25px;background:linear-gradient(145deg,#18231c,#101412);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 18px 42px rgba(0,0,0,.2)}
.grocery-run-hero>div:first-child{display:flex;flex-direction:column}.grocery-run-hero span{color:#80cb91;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.07em}.grocery-run-hero strong{margin-top:6px;color:#f0efe9;font-size:29px;line-height:1;font-weight:820;letter-spacing:-.055em}.grocery-run-hero small{margin-top:8px;color:#7d8780;font-size:11px;font-weight:650}
.grocery-run-progress-ring{width:68px;height:68px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#7bdd98 var(--run-progress),rgba(255,255,255,.055) 0);position:relative}.grocery-run-progress-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:#121814}.grocery-run-progress-ring span{position:relative;z-index:1;color:#dce4dd;font-size:12px;font-weight:780;letter-spacing:0}
.grocery-run-store-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;margin-top:12px;padding:14px;border:1px solid rgba(223,228,224,.075);border-radius:21px;background:#121518}.grocery-run-store-card label{min-width:0;display:grid;gap:7px}.grocery-run-store-card label>span{color:#7f878d;font-size:10px;font-weight:700}.grocery-run-store-card input{height:43px;padding:0 12px;border-radius:14px;background:#0d1012}.grocery-run-connectivity{display:flex;align-items:center;gap:6px;padding-bottom:12px;color:#777f84;font-size:9px;font-weight:680;white-space:nowrap}.grocery-run-status-dot{width:7px;height:7px;border-radius:50%;background:#78df92;box-shadow:0 0 0 4px rgba(120,223,146,.08)}.grocery-run-connectivity.offline .grocery-run-status-dot{background:#e6ad65;box-shadow:0 0 0 4px rgba(230,173,101,.08)}
.grocery-run-groups{display:grid;gap:18px;margin-top:18px}.grocery-run-group{display:grid;gap:8px}.grocery-run-group-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:#81898f;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.065em}.grocery-run-group-head small{min-width:21px;height:21px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.045);font-size:10px}
.grocery-run-list{display:grid;gap:9px}.grocery-run-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;padding:13px 12px;border:1px solid rgba(223,228,224,.075);border-radius:21px;background:#121518;transition:transform .18s ease,border-color .18s ease,background .18s ease}.grocery-run-item.in-cart{border-color:rgba(120,223,146,.15);background:linear-gradient(145deg,rgba(120,223,146,.065),#121618);animation:groceryCartPop .24s ease both}.grocery-run-item.not-found{opacity:.55}@keyframes groceryCartPop{0%{transform:scale(.975)}65%{transform:scale(1.012)}100%{transform:scale(1)}}
.grocery-run-check{width:34px;height:34px;margin-top:2px;display:grid;place-items:center;border:1.5px solid #4f585f;border-radius:50%;background:#171b1f;color:#07110b}.grocery-run-item.in-cart .grocery-run-check{border-color:#7bdd98;background:#7bdd98}.grocery-run-check .app-icon{width:15px;height:15px;stroke-width:2.6}.grocery-run-item-main{min-width:0}.grocery-run-item-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.grocery-run-item-title strong{min-width:0;color:#e8e7e2;font-size:14px;font-weight:740;overflow-wrap:anywhere}.grocery-run-item-title span{flex:0 0 auto;padding:5px 7px;border-radius:9px;background:rgba(255,255,255,.045);color:#969da2;font-size:10px;font-weight:720}.grocery-run-item-main>small{display:block;margin-top:5px;color:#747d82;font-size:10px}
.grocery-run-item-controls{display:grid;grid-template-columns:auto minmax(82px,1fr) auto;align-items:center;gap:8px;margin-top:11px}.grocery-run-stepper{height:34px;display:grid;grid-template-columns:30px 28px 30px;overflow:hidden;border:1px solid rgba(223,228,224,.075);border-radius:11px}.grocery-run-stepper button{background:#181c20;color:#9ce0ab;font-size:16px}.grocery-run-stepper span{display:grid;place-items:center;border-left:1px solid rgba(223,228,224,.06);border-right:1px solid rgba(223,228,224,.06);color:#cfd2cf;font-size:11px;font-weight:760}.grocery-run-price{height:34px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px;padding:0 8px;border:1px solid rgba(223,228,224,.075);border-radius:11px;background:#0f1214}.grocery-run-price span{color:#737b80;font-size:9px}.grocery-run-price input{min-width:0;height:31px;padding:0;border:0;background:transparent;text-align:right;font-size:12px}.grocery-run-line-total{color:#cdd1ce;font-size:10px;font-weight:720;white-space:nowrap}.grocery-run-not-found{grid-column:2;justify-self:start;margin-top:-1px;padding:0;background:transparent;color:#737b80;font-size:10px;font-weight:680}.grocery-run-not-found.active{color:#d8aa72}
.grocery-run-shop-footer{position:sticky;bottom:-1px;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:20px -2px -2px;padding:12px;border:1px solid rgba(223,228,224,.08);border-radius:21px;background:rgba(17,20,23,.96);box-shadow:0 -14px 32px rgba(0,0,0,.22);backdrop-filter:blur(18px)}.grocery-run-shop-footer>div{display:flex;flex-direction:column}.grocery-run-shop-footer span{color:#777f84;font-size:9px;font-weight:680}.grocery-run-shop-footer strong{margin-top:3px;color:#ebeae5;font-size:18px;font-weight:790}.grocery-run-shop-footer button{min-height:47px;padding:0 16px;border-radius:15px;background:linear-gradient(145deg,#8ae5a0,#60ca7d);color:#07110b;font-size:12px;font-weight:800}.grocery-run-shop-footer button:disabled{opacity:.35}
.grocery-checkout-intro{display:flex;flex-direction:column;padding:19px;border:1px solid rgba(120,223,146,.13);border-radius:24px;background:linear-gradient(145deg,#18231c,#101412)}.grocery-checkout-intro span{color:#80cb91;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.07em}.grocery-checkout-intro strong{margin-top:7px;color:#f0efe9;font-size:27px;font-weight:810;letter-spacing:-.05em}.grocery-checkout-intro small{margin-top:7px;color:#7f8981;font-size:11px}.grocery-checkout-card{display:grid;gap:12px;margin-top:12px;padding:15px;border:1px solid rgba(223,228,224,.075);border-radius:22px;background:#121518}.grocery-checkout-amount{height:54px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;border:1px solid rgba(120,223,146,.15);border-radius:17px;background:#0d1110}.grocery-checkout-amount>span{padding-left:13px;color:#7bdd98;font-size:19px}.grocery-checkout-amount input{height:52px;padding:0 13px 0 0;border:0;background:transparent;color:#eef1ed;font-size:26px;font-weight:790;letter-spacing:-.04em}
.grocery-checkout-summary{display:grid;gap:0;margin-top:12px;overflow:hidden;border:1px solid rgba(223,228,224,.075);border-radius:21px;background:#121518}.grocery-checkout-summary>div{min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px;border-bottom:1px solid rgba(223,228,224,.06)}.grocery-checkout-summary>div:last-child{border-bottom:0}.grocery-checkout-summary span{color:#81898f;font-size:11px}.grocery-checkout-summary strong{color:#e2e4e1;font-size:12px}.grocery-checkout-summary .over strong{color:#e18d94}.grocery-checkout-items{display:grid;margin-top:12px;overflow:hidden;border:1px solid rgba(223,228,224,.065);border-radius:19px;background:#101316}.grocery-checkout-items>div{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 13px;border-bottom:1px solid rgba(223,228,224,.055)}.grocery-checkout-items>div:last-child{border-bottom:0}.grocery-checkout-items span{color:#a9afb2;font-size:11px}.grocery-checkout-items strong{color:#858d92;font-size:11px}.grocery-checkout-footer{position:sticky;bottom:-1px;z-index:3;display:grid;grid-template-columns:.72fr 1.28fr;gap:9px;margin:18px -2px -2px;padding:11px;border:1px solid rgba(223,228,224,.08);border-radius:20px;background:rgba(17,20,23,.96);box-shadow:0 -14px 32px rgba(0,0,0,.22);backdrop-filter:blur(18px)}.grocery-checkout-footer button{min-height:49px;border-radius:15px;font-size:12px;font-weight:790}.grocery-checkout-footer .secondary{background:#202428;color:#b7bdba}.grocery-checkout-footer .primary{background:linear-gradient(145deg,#8ae5a0,#60ca7d);color:#07110b}
.grocery-run-complete{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.grocery-run-complete-check{width:86px;height:86px;display:grid;place-items:center;border-radius:50%;background:#7bdd98;color:#07110b;box-shadow:0 18px 44px rgba(72,183,103,.26);animation:groceryComplete .45s cubic-bezier(.2,.9,.25,1.25) both}.grocery-run-complete-check .app-icon{width:38px;height:38px;stroke-width:2.4}@keyframes groceryComplete{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}.grocery-run-complete>span{margin-top:20px;color:#8ddda0;font-size:11px;font-weight:760;text-transform:uppercase;letter-spacing:.08em}.grocery-run-complete>strong{margin-top:7px;color:#f0efe9;font-size:42px;font-weight:830;letter-spacing:-.06em}.grocery-run-complete>small{margin-top:8px;color:#7f878c;font-size:12px}.grocery-run-empty{min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.grocery-run-empty strong{color:#e5e5df;font-size:18px}.grocery-run-empty span{margin-top:7px;color:#747c82;font-size:11px}
@media(max-width:370px){.grocery-run-body{padding-left:11px;padding-right:11px}.grocery-run-hero{grid-template-columns:minmax(0,1fr) 62px;padding:16px}.grocery-run-progress-ring{width:60px;height:60px}.grocery-run-item{padding-left:10px;padding-right:10px}.grocery-run-item-controls{grid-template-columns:auto minmax(72px,1fr);}.grocery-run-line-total{grid-column:2;text-align:right}.grocery-run-store-card{grid-template-columns:1fr}.grocery-run-connectivity{padding:0}.grocery-run-shop-footer{grid-template-columns:1fr auto}.grocery-run-shop-footer button{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.grocery-run-subpage.show,.grocery-run-item.in-cart,.grocery-run-complete-check{animation:none!important}}

.grocery-detail-quantity-row{align-items:center}.grocery-detail-stepper{display:grid;grid-template-columns:34px auto 34px;align-items:center;gap:6px}.grocery-detail-stepper button{width:34px;height:34px;border-radius:11px;background:#202428;color:#9ce0ab;font-size:17px}.grocery-detail-stepper strong{min-width:52px;text-align:center}

.grocery-detailed-add{min-height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid rgba(120,223,146,.12);border-radius:12px;background:rgba(120,223,146,.065);color:#91dca2;font-size:10px;font-weight:740}.grocery-detailed-add .app-icon{width:14px;height:14px;stroke-width:2.1}
.grocery-run-store-field{min-width:0;display:grid;gap:8px}.grocery-run-store-field label{display:grid;gap:7px}.grocery-store-suggestions{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.grocery-store-suggestions::-webkit-scrollbar{display:none}.grocery-store-suggestions button{flex:0 0 auto;min-height:27px;padding:0 9px;border:1px solid rgba(223,228,224,.07);border-radius:999px;background:rgba(255,255,255,.035);color:#8f979c;font-size:9px;font-weight:680}


/* v4.5 — Groceries Hub */
.grocery-hub-page { display: grid; gap: 18px; }
.grocery-hub-page.active { display: grid; }
.grocery-hub-hero {
  margin-top: 2px;
  padding: 22px;
  border-radius: 30px;
  border: 1px solid rgba(126, 224, 153, .22);
  background:
    radial-gradient(circle at 96% 0%, rgba(111, 221, 145, .17), transparent 34%),
    linear-gradient(150deg, rgba(25, 34, 31, .98), rgba(13, 17, 19, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.grocery-hub-hero-top { display:flex; align-items:center; gap:12px; }
.grocery-hub-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; background:rgba(124,226,153,.13); color:var(--green); }
.grocery-hub-icon .app-icon { width:25px; height:25px; }
.grocery-hub-kicker { min-width:0; flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grocery-hub-kicker > span { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.grocery-hub-kicker > strong { padding:7px 10px; border-radius:999px; color:#a8edb9; background:rgba(111,221,145,.12); font-size:11px; white-space:nowrap; }
.grocery-hub-copy { margin-top:21px; }
.grocery-hub-copy h2 { margin:0; font-size:29px; line-height:1.02; letter-spacing:-.06em; }
.grocery-hub-copy p { margin:9px 0 0; color:var(--muted); line-height:1.45; font-size:14px; font-weight:650; }
.grocery-hub-progress { height:7px; margin-top:20px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.grocery-hub-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#80e49b,#54c876); transition:width .35s ease; }
.grocery-hub-progress-copy { margin-top:9px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:780; }
.grocery-hub-progress-copy strong { color:var(--text); }
.grocery-hub-start { width:100%; min-height:68px; margin-top:18px; padding:12px 16px; display:flex; align-items:center; gap:13px; text-align:left; border-radius:21px; background:linear-gradient(135deg,#83e49c,#5ccc79); color:#07100a; box-shadow:0 18px 34px rgba(74,196,109,.20); }
.grocery-hub-start:disabled { opacity:.42; box-shadow:none; }
.grocery-hub-start-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:14px; background:rgba(2,15,7,.12); }
.grocery-hub-start-icon .app-icon { width:22px; height:22px; }
.grocery-hub-start > span:last-child { display:grid; gap:3px; }
.grocery-hub-start strong { font-size:17px; letter-spacing:-.025em; }
.grocery-hub-start small { color:rgba(4,22,10,.65); font-size:12px; font-weight:800; }
.grocery-hub-list-card, .grocery-recent-section, .grocery-other-plans {
  border:1px solid var(--line); border-radius:28px; background:linear-gradient(155deg,rgba(24,28,31,.96),rgba(14,17,19,.96)); box-shadow:var(--soft-shadow);
}
.grocery-hub-list-card { padding:18px; }
.grocery-hub-section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.grocery-hub-section-head h3 { margin:0; font-size:22px; letter-spacing:-.045em; }
.grocery-hub-section-head p { margin:5px 0 0; color:var(--muted); font-size:13px; font-weight:750; }
.grocery-hub-section-head.compact { padding:18px 18px 12px; }
.grocery-hub-detail-add { min-height:39px; padding:0 12px; display:flex; align-items:center; gap:6px; border:1px solid rgba(111,221,145,.18); border-radius:14px; background:rgba(111,221,145,.08); color:#99e9ae; font-size:12px; font-weight:900; white-space:nowrap; }
.grocery-hub-detail-add .app-icon { width:17px; height:17px; }
.grocery-hub-quick-add { margin-top:16px; }
.grocery-hub-toolbar { justify-content:flex-end; min-height:0; margin:10px 0 0; }
.grocery-hub-list { margin-top:8px; }
.grocery-hub-item-row { width:100%; align-items:center; background:linear-gradient(150deg,rgba(26,31,34,.95),rgba(17,20,22,.95)); }
.grocery-hub-item-row .grocery-plan-main { pointer-events:none; }
.grocery-quantity-badge { flex:0 0 auto; min-width:48px; min-height:48px; padding:0 10px; display:grid; place-items:center; border-radius:16px; background:rgba(111,221,145,.10); color:#9de8b0; font-size:13px; font-weight:950; }
.grocery-quantity-badge.complete { background:rgba(111,221,145,.14); }
.grocery-quantity-badge .app-icon { width:20px; height:20px; }
.grocery-recent-section { overflow:hidden; }
.grocery-recent-runs { display:grid; }
.grocery-recent-row { width:100%; min-height:72px; padding:13px 17px; display:grid; grid-template-columns:42px minmax(0,1fr) auto 18px; align-items:center; gap:11px; border-top:1px solid var(--line); background:transparent; text-align:left; }
.grocery-recent-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(111,221,145,.09); color:#91e5a8; }
.grocery-recent-icon .app-icon { width:21px; height:21px; }
.grocery-recent-copy { min-width:0; display:grid; gap:4px; }
.grocery-recent-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.grocery-recent-copy small { color:var(--muted); font-size:12px; font-weight:740; }
.grocery-recent-amount { font-size:14px; font-weight:900; }
.grocery-recent-chevron { color:var(--muted); }
.grocery-recent-chevron .app-icon { width:18px; height:18px; }
.grocery-recent-empty { padding:25px 18px; display:grid; gap:6px; text-align:center; border-top:1px solid var(--line); }
.grocery-recent-empty span { color:var(--muted); font-size:13px; }
.grocery-other-plans { overflow:hidden; }
.grocery-other-plans > summary { min-height:76px; padding:15px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto 22px; align-items:center; gap:12px; list-style:none; cursor:pointer; }
.grocery-other-plans > summary::-webkit-details-marker { display:none; }
.grocery-other-plans > summary span:first-child { display:grid; gap:4px; }
.grocery-other-plans > summary strong { font-size:16px; }
.grocery-other-plans > summary small { color:var(--muted); font-size:12px; font-weight:720; }
.grocery-other-count { min-width:32px; height:32px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-weight:900; }
.grocery-other-plans > summary > .app-icon { width:20px; height:20px; color:var(--muted); transition:transform .2s ease; }
.grocery-other-plans[open] > summary > .app-icon { transform:rotate(180deg); }
.grocery-other-plans-body { padding:0 14px 14px; display:grid; gap:14px; }
.grocery-other-panel { padding:15px; border:1px solid var(--line); border-radius:22px; background:rgba(8,11,13,.55); }
.grocery-run-quick-add { margin:14px 0 4px; display:grid; grid-template-columns:minmax(0,1fr) 50px; gap:10px; }
.grocery-run-quick-add input { min-height:50px; border-radius:17px; background:rgba(255,255,255,.055); }
.grocery-run-quick-add button { border-radius:17px; background:rgba(111,221,145,.13); color:#8de5a6; }
.grocery-run-quick-add .app-icon { width:22px; height:22px; }
.grocery-run-item { animation:groceryItemArrive .22s ease both; }
@keyframes groceryItemArrive { from { opacity:.4; transform:translateY(5px) scale(.992); } to { opacity:1; transform:none; } }
@media (max-width:360px) {
  .grocery-hub-hero { padding:18px; }
  .grocery-hub-copy h2 { font-size:26px; }
  .grocery-hub-list-card { padding:15px; }
  .grocery-hub-detail-add span { display:none; }
  .grocery-hub-detail-add { width:40px; padding:0; justify-content:center; }
  .grocery-recent-row { grid-template-columns:38px minmax(0,1fr) auto 14px; padding-left:14px; padding-right:14px; }
}


/* v4.5.2 compatibility — iPhone Grocery Mode polish */
.grocery-hub-page { display: none; gap: 18px; }
.grocery-hub-page.active { display: grid; }
#groceryHubBadge,
#groceryHubSubtitle,
#groceryHubStartMeta { display: none !important; }
.grocery-hub-kicker { justify-content: flex-start; }
.grocery-hub-copy { margin-top: 17px; }
.grocery-hub-start > span:last-child { display: block; }
.grocery-run-header { grid-template-columns: 42px minmax(0,1fr) 42px; align-items: end; }
.grocery-run-header > div:nth-child(2) { padding-bottom: 8px; }
.grocery-run-header > div:nth-child(2) strong { margin-top: 0; }
.grocery-run-store-card { grid-template-columns: minmax(0,1fr); align-items: stretch; }
.grocery-run-connectivity { display: none !important; }
.grocery-run-subpage input,
.grocery-run-subpage textarea,
.grocery-run-subpage select { font-size: 16px; }
.grocery-run-price input { font-size: 16px !important; line-height: 1; }
.grocery-run-subpage.keyboard-active .grocery-run-shop-footer,
.grocery-run-subpage.keyboard-active .grocery-checkout-footer { display: none; }
.grocery-run-subpage.keyboard-active .grocery-run-body { scroll-padding-bottom: 28px; }
.grocery-run-subpage.keyboard-active .grocery-run-header { min-height: calc(62px + env(safe-area-inset-top)); }
@media (max-width: 370px) {
  .grocery-run-item-controls { grid-template-columns: auto minmax(84px,1fr); }
  .grocery-run-price input { font-size: 16px !important; }
}


/* v4.5.3 — Grocery Mode design upgrade */
:root { --nav-h: 78px; }
.nav { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); }
.nav-inner { height: 64px; padding: 4px 5px; border-radius: 24px; }
.nav-btn { height: 56px; grid-template-rows: 32px auto; gap: 1px; border-radius: 17px; font-size: 9px; }
.nav-btn .ico { width: 32px; height: 32px; }
.nav-btn .ico .app-icon { width: 20px; height: 20px; }
.nav-add-btn { transform: translateY(-4px); }
.nav-add-btn .nav-add-orb { width: 46px; height: 46px; }
.nav-add-orb .app-icon { width: 23px; height: 23px; }
.nav-btn.active .ico { background: rgba(120,223,146,.11); }

.grocery-hub-hero { padding: 19px; border-radius: 26px; background: radial-gradient(circle at 88% 12%, rgba(120,223,146,.10), transparent 32%), linear-gradient(145deg,#111a15,#0c100e); }
.grocery-hub-hero-top { align-items:center; }
.grocery-hub-icon { width: 46px; height: 46px; border-radius: 15px; }
.grocery-hub-copy { margin-top: 15px; }
.grocery-hub-copy h2 { font-size: 29px; }
.grocery-hub-progress { height: 7px; margin-top: 17px; }
.grocery-hub-start { min-height: 59px; border-radius: 18px; }
.grocery-hub-list-card, .grocery-recent-section, .grocery-other-plans { border-radius: 24px; }
.grocery-purchased-section[hidden] { display:none !important; }
.grocery-clear-bought.compact { min-height: 32px; padding:0 11px; border:1px solid rgba(120,223,146,.12); border-radius:999px; background:rgba(120,223,146,.07); color:#8de5a6; }
.grocery-recent-row.purchased { grid-template-columns:42px minmax(0,1fr) 18px; }
.grocery-recent-icon.purchased { border-radius:50%; background:rgba(120,223,146,.18); }

body.grocery-run-open .nav { display:block; z-index:72; }
body.grocery-run-open .app-shell { visibility:hidden; }
.grocery-run-subpage { z-index:68; padding-bottom:calc(72px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% -18%,rgba(120,223,146,.045),transparent 35%),#080a0c; }
.grocery-run-header { min-height:calc(68px + env(safe-area-inset-top)); grid-template-columns:42px minmax(0,1fr) 42px; align-items:end; padding:calc(9px + env(safe-area-inset-top)) 16px 10px; border-bottom-color:rgba(223,228,224,.055); background:rgba(8,10,12,.91); }
.grocery-run-header > div:nth-child(2) { align-items:center; padding-bottom:8px; }
.grocery-run-header > div:nth-child(2) strong { font-size:19px; }
.grocery-run-header-spacer { width:42px; }
.grocery-run-back { width:42px; height:42px; border-radius:15px; background:#14181b; }
.grocery-run-body { padding:16px 15px 124px; gap:14px; }
.grocery-run-hero { grid-template-columns:minmax(0,1fr) 72px; padding:20px; border-radius:25px; background:radial-gradient(circle at 88% 20%,rgba(120,223,146,.10),transparent 36%),linear-gradient(145deg,#121d16,#0d120f); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 16px 42px rgba(0,0,0,.20); }
.grocery-run-hero span { color:#78df92; font-size:10px; letter-spacing:.12em; }
.grocery-run-hero strong { margin-top:7px; font-size:31px; }
.grocery-run-hero small { margin-top:7px; font-size:12px; }
.grocery-run-progress-ring { width:70px; height:70px; }
.grocery-run-store-card { margin-top:0; padding:15px; border-radius:22px; background:linear-gradient(145deg,#121619,#0f1214); }
.grocery-run-store-field label { gap:8px; }
.grocery-run-store-input-shell { height:48px; display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:6px; padding:0 12px; border:1px solid rgba(223,228,224,.08); border-radius:16px; background:#0b0e10; }
.grocery-run-store-input-shell i { width:29px; height:29px; display:grid; place-items:center; border-radius:10px; background:rgba(120,223,146,.09); color:#86df9d; font-style:normal; }
.grocery-run-store-input-shell i .app-icon { width:17px; height:17px; }
.grocery-run-store-input-shell input { height:45px; padding:0; border:0; background:transparent; font-weight:650; }
.grocery-run-store-input-shell b { color:#8f969b; font-size:18px; font-weight:500; }
.grocery-run-quick-add { margin:0; grid-template-columns:minmax(0,1fr) 50px; }
.grocery-run-quick-add input { min-height:52px; border-radius:17px; }
.grocery-run-quick-add button { border-radius:17px; }
.grocery-run-groups { gap:18px; }
.grocery-run-group-head { margin:0 7px 8px; }
.grocery-run-group-head span { letter-spacing:.13em; }
.grocery-run-group-empty { min-height:70px; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; border:1px dashed rgba(120,223,146,.12); border-radius:18px; background:rgba(120,223,146,.025); color:#737b80; text-align:center; }
.grocery-run-group-empty > span { width:30px; height:30px; display:grid; place-items:center; color:#77817c; }
.grocery-run-group-empty .app-icon { width:20px; height:20px; }
.grocery-run-group-empty small { max-width:190px; font-size:11px; line-height:1.35; }
.grocery-run-list { gap:8px; }
.grocery-run-item { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:13px; border-radius:20px; background:linear-gradient(145deg,#13171a,#0f1214); }
.grocery-run-check { width:34px; height:34px; background:#101417; }
.grocery-run-item-title strong { font-size:15px; }
.grocery-run-item-title span { padding:4px 7px; border-radius:8px; }
.grocery-run-item-controls { grid-template-columns:auto minmax(104px,1fr) auto; gap:8px; margin-top:10px; }
.grocery-run-stepper { height:34px; border-radius:10px; }
.grocery-run-price { height:34px; grid-template-columns:12px minmax(0,1fr); border-radius:10px; }
.grocery-run-price span { font-size:13px; }
.grocery-run-price input { font-size:16px!important; text-align:left; }
.grocery-run-line-total { min-width:0; font-size:10px; }
.grocery-run-not-found { margin-top:4px; font-size:10px; }
.grocery-run-shop-footer { position:fixed; left:50%; bottom:calc(70px + env(safe-area-inset-bottom)); width:min(calc(100% - 30px),490px); transform:translateX(-50%); margin:0; padding:11px 12px; border-radius:20px; background:rgba(18,22,24,.96); box-shadow:0 -16px 38px rgba(0,0,0,.38); }
.grocery-run-shop-footer button { min-height:46px; display:flex; align-items:center; gap:8px; padding:0 16px; border-radius:15px; }
.grocery-run-shop-footer button .app-icon { width:17px; height:17px; }
.grocery-run-subpage.keyboard-active { padding-bottom:0; }
.grocery-run-subpage.keyboard-active + .nav, body.grocery-run-open:has(.grocery-run-subpage.keyboard-active) .nav { display:none; }
.grocery-run-subpage.keyboard-active .grocery-run-shop-footer, .grocery-run-subpage.keyboard-active .grocery-checkout-footer { display:none; }
.grocery-run-subpage.keyboard-active .grocery-run-body { padding-bottom:28px; }

@media(max-width:370px){
  :root { --nav-h:74px; }
  .nav { padding-left:8px; padding-right:8px; }
  .nav-inner { height:61px; }
  .nav-btn { height:53px; font-size:8.5px; }
  .nav-add-btn .nav-add-orb { width:43px; height:43px; }
  .grocery-run-body { padding-left:11px; padding-right:11px; }
  .grocery-run-item-controls { grid-template-columns:auto minmax(92px,1fr); }
  .grocery-run-line-total { grid-column:2; text-align:right; }
  .grocery-run-shop-footer { width:calc(100% - 22px); bottom:calc(66px + env(safe-area-inset-bottom)); }
}

.grocery-checkout-footer { position:fixed; left:50%; bottom:calc(70px + env(safe-area-inset-bottom)); width:min(calc(100% - 30px),490px); transform:translateX(-50%); margin:0; z-index:4; }
.grocery-run-subpage:has(.grocery-checkout-footer) .grocery-run-body { padding-bottom:128px; }
@media(max-width:370px){.grocery-checkout-footer{width:calc(100% - 22px);bottom:calc(66px + env(safe-area-inset-bottom));}}

#clearBoughtGroceriesBtn { display:none!important; }


/* v4.5.5 — Grocery Mode layout polish */
:root { --nav-h: 70px; }
.nav { padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); }
.nav-inner { height: 58px; padding: 3px 5px; border-radius: 22px; }
.nav-btn { height: 50px; grid-template-rows: 28px auto; gap: 1px; border-radius: 16px; font-size: 8.5px; }
.nav-btn .ico { width: 28px; height: 28px; }
.nav-btn .ico .app-icon { width: 18.5px; height: 18.5px; }
.nav-add-btn { transform: translateY(-3px); }
.nav-add-btn .nav-add-orb { width: 42px; height: 42px; }
.nav-add-orb .app-icon { width: 21px; height: 21px; }

.grocery-run-subpage { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.grocery-run-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px 15px 150px;
}
.grocery-run-hero,
.grocery-run-store-card,
.grocery-run-quick-add,
.grocery-run-groups { margin: 0; }
.grocery-run-hero { border-radius: 24px; }
.grocery-run-store-card {
  padding: 14px;
  border-radius: 21px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
.grocery-run-store-field label > span { margin-left: 2px; }
.grocery-run-store-input-shell {
  height: 50px;
  grid-template-columns: 34px minmax(0,1fr) 18px;
  padding: 0 13px;
  border-radius: 16px;
}
.grocery-run-store-input-shell input { min-width: 0; height: 48px; }

.grocery-run-quick-add {
  display: grid;
  grid-template-columns: minmax(0,1fr) 44px;
  gap: 0;
  padding: 4px;
  border: 1px solid rgba(223,228,224,.075);
  border-radius: 18px;
  background: linear-gradient(145deg,#121619,#0f1214);
}
.grocery-run-quick-add input {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}
.grocery-run-quick-add input:focus { box-shadow: none; background: rgba(255,255,255,.018); }
.grocery-run-quick-add button {
  width: 44px;
  height: 44px;
  align-self: center;
  border-radius: 14px;
  background: rgba(120,223,146,.12);
  color: #8de5a6;
}
.grocery-run-quick-add button .app-icon { width: 20px; height: 20px; }

.grocery-run-groups { gap: 22px; }
.grocery-run-group { gap: 9px; }
.grocery-run-group-head { margin: 0 6px; padding: 0; }
.grocery-run-group-head small { min-width: 22px; height: 22px; }
.grocery-run-item {
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  padding: 14px;
  border-radius: 21px;
}
.grocery-run-item-title { align-items: center; }
.grocery-run-item-title strong { font-size: 15.5px; line-height: 1.2; }
.grocery-run-item-title span { padding: 4px 8px; }
.grocery-run-item-controls {
  grid-template-columns: auto minmax(118px,1fr);
  align-items: center;
  gap: 9px;
  margin-top: 12px;
}
.grocery-run-stepper {
  width: 98px;
  height: 36px;
  grid-template-columns: 32px 32px 32px;
  border-radius: 11px;
}
.grocery-run-price {
  height: 36px;
  grid-template-columns: 14px minmax(0,1fr);
  gap: 6px;
  padding: 0 10px;
  border-radius: 11px;
  background: #0c0f11;
}
.grocery-run-price span { color: #7b8287; font-size: 14px; }
.grocery-run-price input {
  height: 34px;
  padding: 0;
  text-align: left;
  color: #e8e9e5;
  font-size: 16px !important;
}
.grocery-run-price input::placeholder { color: #697077; opacity: 1; }
.grocery-run-price.empty { border-color: rgba(223,228,224,.06); }
.grocery-run-line-total {
  grid-column: 2;
  justify-self: end;
  min-height: 12px;
  margin-top: -3px;
  color: #9fa6a2;
  font-size: 10px;
}
.grocery-run-line-total:empty { display: none; }
.grocery-run-not-found {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #737b80;
}
.grocery-run-not-found.active { background: rgba(230,173,101,.08); }

.grocery-run-shop-footer {
  bottom: calc(63px + env(safe-area-inset-bottom));
  width: min(calc(100% - 30px),490px);
  padding: 10px 11px;
  border-radius: 19px;
}
.grocery-run-shop-footer strong { font-size: 17px; }
.grocery-run-shop-footer button { min-height: 44px; padding: 0 15px; border-radius: 14px; }
.grocery-checkout-footer { bottom: calc(63px + env(safe-area-inset-bottom)); }

@media(max-width:370px){
  :root { --nav-h: 68px; }
  .nav { padding-left: 7px; padding-right: 7px; }
  .nav-inner { height: 56px; }
  .nav-btn { height: 48px; font-size: 8px; }
  .nav-add-btn .nav-add-orb { width: 40px; height: 40px; }
  .grocery-run-body { padding-left: 11px; padding-right: 11px; }
  .grocery-run-item-controls { grid-template-columns: 96px minmax(105px,1fr); gap: 7px; }
  .grocery-run-stepper { width: 96px; grid-template-columns: 31px 32px 31px; }
  .grocery-run-shop-footer { width: calc(100% - 22px); bottom: calc(61px + env(safe-area-inset-bottom)); }
  .grocery-checkout-footer { bottom: calc(61px + env(safe-area-inset-bottom)); }
}

/* v4.5.5 — optical alignment polish */
.grocery-run-quick-add button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.grocery-run-quick-add button .app-icon {
  display: block;
  margin: 0;
  transform: translateX(.75px);
  transform-origin: center;
}

.grocery-run-price.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding-left: 11px;
  padding-right: 11px;
}
.grocery-run-price.empty span {
  flex: 0 0 auto;
  line-height: 1;
  transform: translateY(-.25px);
}
.grocery-run-price.empty input {
  flex: 0 1 84px;
  width: 84px;
  min-width: 0;
  text-align: center;
}
.grocery-run-price:not(.empty) input {
  text-align: left;
}

.nav-add-orb {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-add-orb .app-icon {
  display: block;
  margin: 0;
  transform: translateX(.5px);
}

.grocery-run-shop-footer button:disabled {
  opacity: .48;
  color: rgba(7,17,11,.9);
}


/* v4.5.6 — quantity badge and supermarket picker polish */
.grocery-plan-row {
  grid-template-columns: 58px minmax(0,1fr);
  column-gap: 10px;
}
.grocery-quantity-badge {
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 0 6px;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  white-space: nowrap;
}
.grocery-plan-main { padding-left: 0; }

.grocery-run-store-field { position: relative; }
.grocery-run-store-input-shell {
  grid-template-columns: 34px minmax(0,1fr) 34px;
  gap: 7px;
  padding-right: 8px;
}
.grocery-store-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
  background: transparent;
  color: #8f969b;
}
.grocery-store-toggle .app-icon {
  width: 17px;
  height: 17px;
  transform: rotate(90deg);
  transition: transform .18s ease, color .18s ease;
}
.grocery-store-toggle[aria-expanded="true"] .app-icon { transform: rotate(-90deg); color: #8de5a6; }
.grocery-store-toggle:disabled { opacity: .34; }
.grocery-store-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  padding: 9px;
  border: 1px solid rgba(223,228,224,.09);
  border-radius: 16px;
  background: rgba(15,18,20,.985);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
}
.grocery-store-dropdown[hidden] { display: none; }
.grocery-store-dropdown > span {
  display: block;
  padding: 3px 6px 8px;
  color: #737b80;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.grocery-store-dropdown > div { display: grid; gap: 5px; }
.grocery-store-dropdown button {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: #e4e7e3;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}
.grocery-store-dropdown button:active { background: rgba(120,223,146,.10); color: #9be8ad; }

@media(max-width:370px){
  .grocery-plan-row { grid-template-columns: 54px minmax(0,1fr); column-gap: 8px; }
  .grocery-quantity-badge { width:54px; min-width:54px; min-height:54px; }
}

/* v4.6 — Grocery List + Store Budget Mode */
.grocery-run-body {
  gap: 13px;
  padding: 15px 15px 148px;
}
.grocery-run-budget-card {
  display: grid;
  gap: 13px;
  padding: 17px;
  border: 1px solid rgba(120,223,146,.15);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%,rgba(120,223,146,.10),transparent 34%),
    linear-gradient(145deg,#142018,#0e1310);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.18);
}
.grocery-run-budget-card.over { border-color: rgba(229,157,91,.26); }
.grocery-run-budget-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) 104px;
  align-items: center;
  gap: 14px;
}
.grocery-run-budget-head > div { min-width: 0; display: flex; flex-direction: column; }
.grocery-run-budget-head > div > span {
  color: #7bdd98;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.grocery-run-budget-head > div > strong {
  margin-top: 6px;
  color: #f0efe9;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: -.045em;
}
.grocery-run-budget-card.over .grocery-run-budget-head > div > strong { color: #e9ad78; }
.grocery-run-budget-head > div > small {
  margin-top: 7px;
  color: #7d8781;
  font-size: 10.5px;
  font-weight: 650;
}
.grocery-run-budget-input {
  height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(223,228,224,.085);
  border-radius: 15px;
  background: #0b0f0d;
}
.grocery-run-budget-input > span { color: #7bdd98; font-size: 15px; }
.grocery-run-budget-input input {
  min-width: 0;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eceeea;
  text-align: right;
  font-size: 16px !important;
  font-weight: 750;
}
.grocery-run-budget-input input::placeholder { color: #626b66; opacity: 1; }
.grocery-run-budget-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}
.grocery-run-budget-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#70d98b,#8be3a0);
  transition: width .22s ease;
}
.grocery-run-budget-card.over .grocery-run-budget-track i { background: linear-gradient(90deg,#d69458,#e8b276); }

.grocery-run-store-card { padding: 14px; }
.grocery-run-store-field label > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.grocery-run-store-field label > span small {
  color: #5f686d;
  font-size: 8.5px;
  font-weight: 670;
  text-transform: none;
  letter-spacing: 0;
}

.grocery-run-simple-list {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}
.grocery-run-simple-list .grocery-run-group-head {
  margin: 0 6px;
}
.grocery-run-simple-list .grocery-run-group-head small {
  min-width: 34px;
  padding: 0 7px;
}
.grocery-run-list { gap: 8px; }
.grocery-run-item {
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  padding: 13px;
  border-radius: 20px;
  background: linear-gradient(145deg,#13171a,#0f1214);
  transition: border-color .18s ease,background .18s ease,transform .18s ease;
}
.grocery-run-item.selected {
  border-color: rgba(120,223,146,.20);
  background: linear-gradient(145deg,rgba(120,223,146,.075),#111715);
  animation: groceryCartPop .22s ease both;
}
.grocery-run-item.selected .grocery-run-check {
  border-color: #7bdd98;
  background: #7bdd98;
  color: #07110b;
}
.grocery-run-item-title { align-items: center; }
.grocery-run-item-title strong { font-size: 15.5px; }
.grocery-run-item-title span {
  min-width: 38px;
  text-align: center;
  color: #9ba29e;
}
.grocery-run-item-hint {
  display: block;
  margin-top: 5px;
  color: #687177 !important;
  font-size: 10px !important;
}
.grocery-run-item-controls {
  grid-template-columns: 100px minmax(110px,1fr);
  gap: 8px;
  margin-top: 11px;
}
.grocery-run-stepper {
  width: 100px;
  height: 38px;
  grid-template-columns: 33px 34px 33px;
}
.grocery-run-stepper button,
.grocery-run-stepper span { min-width: 0; }
.grocery-run-price {
  height: 38px;
  display: grid !important;
  grid-template-columns: 14px minmax(0,1fr) !important;
  align-items: center;
  justify-content: stretch !important;
  gap: 6px !important;
  padding: 0 10px !important;
}
.grocery-run-price input,
.grocery-run-price.empty input {
  flex: initial;
  width: 100%;
  min-width: 0;
  height: 36px;
  text-align: right;
  font-size: 16px !important;
}
.grocery-run-price input::placeholder { color: #697077; }
.grocery-run-calculation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 0 2px;
}
.grocery-run-calculation span {
  min-width: 0;
  color: #687176;
  font-size: 9.5px;
  font-weight: 650;
}
.grocery-run-calculation strong {
  flex: 0 0 auto;
  color: #aeb5b0;
  font-size: 10px;
  font-weight: 760;
}
.grocery-run-item.selected .grocery-run-calculation strong { color: #8fe2a2; }

.grocery-run-shop-footer {
  grid-template-columns: minmax(0,1fr) auto;
  bottom: calc(63px + env(safe-area-inset-bottom));
  width: min(calc(100% - 30px),490px);
  padding: 10px 11px;
}
.grocery-run-shop-footer > div small {
  margin-top: 2px;
  color: #60696e;
  font-size: 8.5px;
  font-weight: 650;
}
.grocery-run-shop-footer button {
  min-width: 130px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border: 1px solid rgba(120,223,146,.18);
  background: linear-gradient(145deg,#8ae5a0,#60ca7d);
  color: #07110b;
  opacity: 1;
}
.grocery-run-shop-footer button[data-state="empty"] {
  background: rgba(120,223,146,.085);
  color: #86d99a;
}
.grocery-run-shop-footer button[data-state="missing"] {
  border-color: rgba(229,173,101,.20);
  background: rgba(229,173,101,.11);
  color: #e1ae74;
}
.grocery-run-shop-footer button .app-icon { width: 17px; height: 17px; }

@media(max-width:370px){
  .grocery-run-body { padding-left: 11px; padding-right: 11px; }
  .grocery-run-budget-card { padding: 15px; }
  .grocery-run-budget-head { grid-template-columns: minmax(0,1fr) 92px; gap: 10px; }
  .grocery-run-budget-head > div > strong { font-size: 22px; }
  .grocery-run-budget-input { padding: 0 8px; }
  .grocery-run-item { padding: 12px 10px; gap: 9px; }
  .grocery-run-item-controls { grid-template-columns: 94px minmax(100px,1fr); gap: 7px; }
  .grocery-run-stepper { width: 94px; grid-template-columns: 31px 32px 31px; }
  .grocery-run-shop-footer { width: calc(100% - 22px); bottom: calc(61px + env(safe-area-inset-bottom)); }
  .grocery-run-shop-footer button { min-width: 116px; padding: 0 12px; }
}


/* v4.6.1 — compact quantities and cleaner Store Mode controls */
.grocery-plan-row {
  grid-template-columns: 50px minmax(0,1fr);
  column-gap: 10px;
}
.grocery-quantity-badge {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 12px;
}

.grocery-run-body {
  padding-top: 14px;
}
.grocery-run-store-card {
  margin-top: 0;
}
.grocery-run-item-controls {
  grid-template-columns: 104px minmax(118px,1fr);
  align-items: end;
  gap: 10px;
  margin-top: 12px;
}
.grocery-run-control-group {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.grocery-run-control-label {
  color: #70797e;
  font-size: 9px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.grocery-run-stepper {
  width: 104px;
  height: 40px;
  grid-template-columns: 34px 36px 34px;
}
.grocery-run-price-group {
  cursor: text;
}
.grocery-run-price {
  width: 100%;
  height: 40px;
  display: grid !important;
  grid-template-columns: 15px minmax(0,1fr) !important;
  align-items: center;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 14px;
}
.grocery-run-price > span {
  display: grid;
  place-items: center;
  color: #7c858a;
  line-height: 1;
}
.grocery-run-price input,
.grocery-run-price.empty input {
  width: 100%;
  height: 38px;
  padding: 0;
  text-align: left;
  font-size: 16px !important;
  font-weight: 700;
}
.grocery-run-price input::placeholder {
  color: #646c71;
  opacity: 1;
}
.grocery-run-calculation {
  margin-top: 9px;
  padding: 0;
}
.grocery-run-calculation span {
  color: #697277;
}
.grocery-run-calculation strong {
  min-width: 36px;
  text-align: right;
  color: #858d89;
}
.grocery-run-item.selected .grocery-run-calculation strong {
  color: #8fe2a2;
}

@media(max-width:370px){
  .grocery-plan-row { grid-template-columns: 46px minmax(0,1fr); column-gap: 8px; }
  .grocery-quantity-badge { width:44px; min-width:44px; min-height:44px; height:44px; border-radius:14px; }
  .grocery-run-item-controls { grid-template-columns: 98px minmax(108px,1fr); gap: 8px; }
  .grocery-run-stepper { width:98px; grid-template-columns:32px 34px 32px; }
}

/* v4.6.2 — optically centred unit-price field */
.grocery-run-price {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  padding: 0 12px !important;
}
.grocery-run-price > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: translateY(-0.5px);
}
.grocery-run-price input,
.grocery-run-price.empty input {
  flex: 0 0 6.2ch;
  width: 6.2ch;
  min-width: 0;
  max-width: 6.2ch;
  height: 38px;
  padding: 0;
  text-align: center;
}


/* v4.7 — smart grocery price memory */
.grocery-run-header { grid-template-columns: 64px minmax(0,1fr) 64px; }
.grocery-run-back { justify-self:start; }
.grocery-run-reset {
  justify-self:end;
  min-width:58px;
  height:38px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(223,228,224,.09);
  border-radius:13px;
  background:#14181b;
  color:#949b9f;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.01em;
}
.grocery-run-reset:active { transform:scale(.97); }
@media (max-width:340px) {
  .grocery-run-header { grid-template-columns:56px minmax(0,1fr) 56px; padding-left:12px; padding-right:12px; }
  .grocery-run-reset { min-width:52px; padding:0 8px; font-size:11px; }
}


/* v4.7.1 — Store Mode remove item */
.grocery-run-item-title-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.grocery-run-item-title-actions > span {
  flex: 0 0 auto;
}
.grocery-run-remove-item {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(223,228,224,.075);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #858d92;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}
.grocery-run-remove-item .app-icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}
.grocery-run-remove-item:active {
  transform: scale(.94);
  color: #ef9a9a;
  border-color: rgba(238,125,125,.24);
  background: rgba(238,125,125,.09);
}
@media (hover:hover) {
  .grocery-run-remove-item:hover {
    color: #ef9a9a;
    border-color: rgba(238,125,125,.22);
    background: rgba(238,125,125,.08);
  }
}
@media (max-width:350px) {
  .grocery-run-item-title-actions { gap: 4px; }
  .grocery-run-remove-item { width: 27px; height: 27px; }
}

.grocery-run-list-empty {
  display: grid;
  gap: 4px;
  padding: 22px 14px;
  border: 1px dashed rgba(223,228,224,.09);
  border-radius: 18px;
  text-align: center;
}
.grocery-run-list-empty strong { color: #cfd2cf; font-size: 13px; }
.grocery-run-list-empty span { color: #747d82; font-size: 11px; line-height: 1.4; }


/* v4.8 — Native Input Redesign */
:root{
  --native-surface:#121619;
  --native-surface-raised:#171b1e;
  --native-line:rgba(223,228,224,.075);
  --native-line-strong:rgba(223,228,224,.12);
  --native-label:#858c91;
  --native-text:#efeee9;
  --native-accent:#7fdf98;
}

/* Bottom sheets feel more like a native panel than a web dialog. */
.modal{border-radius:28px 28px 24px 24px;background:linear-gradient(180deg,#1a1e21 0%,#101315 100%)}
.modal-head{min-height:62px;padding-top:16px;padding-bottom:8px;background:rgba(25,29,32,.985)}
.modal-head::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;border-radius:999px;background:rgba(235,238,234,.18);transform:translateX(-50%)}
.modal-head h3{font-size:20px;font-weight:760;letter-spacing:-.035em}
.close-btn{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.045)}
.close-btn .app-icon{width:18px;height:18px;stroke-width:1.8}
.modal-body{padding-top:14px}

/* Shared native-style form system. */
.native-form{display:grid;gap:13px}
.native-group{min-width:0;overflow:hidden;border:1px solid var(--native-line);border-radius:17px;background:linear-gradient(180deg,rgba(22,26,29,.98),rgba(17,21,24,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.native-group>.field{position:relative;min-width:0;padding:10px 13px 9px;background:transparent;transition:background .16s ease}
.native-group>.field+.field{border-top:1px solid var(--native-line)}
.native-group>.field:focus-within{background:rgba(255,255,255,.025)}
.native-group>.field label{margin:0 0 4px;color:var(--native-label);font-size:10px;line-height:1.1;font-weight:720;letter-spacing:.012em;text-transform:none}
.native-group>.field input,
.native-group>.field select,
.native-group>.field textarea{min-height:34px;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--native-text);box-shadow:none;font-size:16px;font-weight:610;letter-spacing:-.018em}
.native-group>.field input:focus,
.native-group>.field select:focus,
.native-group>.field textarea:focus{border:0;background:transparent;box-shadow:none}
.native-group>.field input::placeholder,
.native-group>.field textarea::placeholder{color:#626a70;opacity:1}
.native-group>.field textarea{min-height:62px;padding-top:5px;line-height:1.42;resize:none}
.native-group>.field select{padding-right:25px;color:#e9e8e3}
.native-section-label{margin:2px 4px -5px;color:#777f84;font-size:10px;font-weight:760;letter-spacing:.055em;text-transform:uppercase}
.native-tall-textarea{min-height:210px!important}
.native-money-input{display:flex;align-items:center;gap:7px;min-width:0}
.native-money-input>span{flex:0 0 auto;color:#858d92;font-size:14px;font-weight:720}
.native-money-input input{min-width:0!important}

/* Primary amount becomes a calm focal point rather than a boxed field. */
.native-spend-form .spend-sheet-summary{justify-self:center;width:auto;min-height:30px;padding:6px 10px;border-color:rgba(127,223,152,.10);border-radius:999px;background:rgba(127,223,152,.065);font-size:10px;gap:7px}
.native-spend-form .spend-sheet-summary strong{font-size:12px;color:#9be9ad}
.native-spend-form .spend-amount-field{padding:4px 0 7px;text-align:center}
.native-spend-form .spend-amount-field>label{margin:0 0 2px;color:#777f84;font-size:10px;font-weight:720}
.native-spend-form .spend-amount-input{justify-content:center;gap:7px;min-height:78px;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none}
.native-spend-form .spend-amount-input:focus-within{border:0;box-shadow:none}
.native-spend-form .spend-amount-input>span{font-size:27px;color:#76d990;transform:translateY(-2px)}
.native-spend-form .spend-amount-input input{flex:0 1 8ch;width:auto;max-width:8ch;height:72px;text-align:center;font-size:clamp(43px,14vw,56px);font-weight:760;letter-spacing:-.075em}
.native-spend-form .spend-amount-input input::placeholder{color:#555d62}
.native-expense-main{margin-top:1px}

/* More details is a single compact disclosure row. */
.native-more-details{border-color:var(--native-line);border-radius:17px;background:var(--native-surface)}
.native-more-details summary{min-height:48px;padding:0 13px;font-size:13px;font-weight:670}
.native-more-details summary::after{font-size:15px;color:#777f84}
.native-more-details .spend-more-body{gap:0;padding:0;border:0;border-top:1px solid var(--native-line);border-radius:0;background:transparent}
.native-more-details .spend-more-body>.field{padding-left:13px;padding-right:13px}
.native-more-details .spend-more-body>.field:first-child{border-top:0}

/* Buttons are compact, confident and less pill-like. */
.native-form>.btn.full,
.native-form .activity-filter-actions .btn.full{min-height:50px;border-radius:14px;font-size:14px;font-weight:760;letter-spacing:-.015em}
.native-form>.btn.primary{box-shadow:0 10px 24px rgba(72,183,103,.15)}

/* Grocery quick-add becomes one integrated command row. */
.grocery-quick-add{grid-template-columns:minmax(0,1fr) 42px;gap:4px;padding:4px;border:1px solid var(--native-line);border-radius:17px;background:linear-gradient(180deg,#15191c,#101416);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.grocery-quick-add input{height:42px;padding:0 11px;border:0;border-radius:12px;background:transparent;box-shadow:none}
.grocery-quick-add input:focus{border:0;background:rgba(255,255,255,.018);box-shadow:none}
.grocery-quick-add button{width:42px;height:42px;border-radius:13px;box-shadow:none}
.grocery-quick-add button .app-icon{width:19px;height:19px}

/* Detailed grocery quantity is a control, not another input box. */
.native-stepper-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.native-stepper-field label{margin:0!important}
.native-stepper-field .grocery-quantity-stepper{width:132px;height:38px;grid-template-columns:38px 54px 38px;border-color:var(--native-line);border-radius:12px;background:#0d1012}
.native-stepper-field .grocery-quantity-stepper button{font-size:18px;background:rgba(255,255,255,.02)}
.native-stepper-field .grocery-quantity-stepper input{height:36px!important;min-height:36px!important;border-left:1px solid var(--native-line)!important;border-right:1px solid var(--native-line)!important;font-size:14px;text-align:center}

/* Setup reads like iOS settings groups. */
.native-setup-form{gap:11px}
.native-balance-preview{margin-top:-3px;padding:11px 13px;border:1px solid rgba(127,223,152,.10);border-radius:14px;background:rgba(127,223,152,.055)}
.native-balance-preview span{font-size:10px;color:#7f878c}
.native-balance-preview strong{font-size:15px;color:#9be9ad}

/* Store Mode: compact, editable values without form-box heaviness. */
.grocery-run-store-card{border-color:var(--native-line);border-radius:18px;background:linear-gradient(180deg,#15191c,#101416);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.grocery-run-store-input-shell{height:46px;border-color:transparent;border-radius:13px;background:#0c0f11}
.grocery-run-store-input-shell:focus-within{border-color:rgba(127,223,152,.18);box-shadow:0 0 0 3px rgba(127,223,152,.055)}
.grocery-run-store-input-shell input{font-size:15px;font-weight:610}
.grocery-store-suggestions button{min-height:30px;padding:0 11px;border-color:var(--native-line);background:#171b1e;font-size:10px}
.grocery-run-item.selected{border-color:rgba(127,223,152,.12);background:linear-gradient(180deg,rgba(20,26,23,.98),rgba(15,19,17,.98))}
.grocery-run-item-controls{grid-template-columns:minmax(104px,.85fr) minmax(118px,1.15fr);gap:8px}
.grocery-run-control-group{min-width:0;padding:8px 9px;border:1px solid var(--native-line);border-radius:13px;background:#0d1012}
.grocery-run-control-label{margin:0 0 5px;color:#747c81;font-size:9px;font-weight:720}
.grocery-run-stepper{width:100%;height:36px;grid-template-columns:36px minmax(32px,1fr) 36px;border:0;border-radius:10px;background:#15191c}
.grocery-run-stepper button{background:transparent}
.grocery-run-stepper span{border-color:var(--native-line)}
.grocery-run-price{width:100%;height:36px!important;padding:0 5px!important;border:0!important;border-radius:9px!important;background:#15191c!important;justify-content:center!important}
.grocery-run-price>span{color:#7d858a;font-size:13px}
.grocery-run-price input,
.grocery-run-price.empty input{height:34px!important;flex:0 1 6.4ch;max-width:6.4ch;font-size:16px!important;font-weight:690;text-align:center!important}
.grocery-run-calculation{margin-top:8px;padding-top:8px;border-top:1px solid rgba(223,228,224,.055)}

/* Activity search gets the same integrated-control language. */
.activity-search-shell{border-color:var(--native-line)!important;border-radius:15px!important;background:linear-gradient(180deg,#15191c,#101416)!important}
.activity-search-shell input{background:transparent!important;border:0!important;box-shadow:none!important}

@media(max-width:370px){
  .modal-head{min-height:58px}
  .native-spend-form .spend-amount-input input{font-size:45px}
  .native-stepper-field .grocery-quantity-stepper{width:122px;grid-template-columns:35px 52px 35px}
  .grocery-run-item-controls{grid-template-columns:minmax(98px,.85fr) minmax(108px,1.15fr)}
  .grocery-run-control-group{padding:7px}
}


/* v4.8 finishing pass — edit sheets and itemised grocery rows */
.edit-expense-form.native-form .edit-expense-scroll>.field:first-child{padding:3px 0 8px;text-align:center}
.edit-expense-form.native-form .edit-expense-scroll>.field:first-child>label{margin:0 0 2px;color:#777f84;font-size:10px;font-weight:720}
.edit-expense-form.native-form .edit-expense-amount{display:flex;align-items:center;justify-content:center;gap:7px}
.edit-expense-form.native-form .edit-expense-amount span{position:static;color:#76d990;font-size:20px;transform:translateY(-1px)}
.edit-expense-form.native-form .edit-expense-amount input{flex:0 1 8ch;width:auto;max-width:8ch;height:58px;min-height:58px;padding:0;border:0;background:transparent;box-shadow:none;text-align:center;font-size:35px;font-weight:760;letter-spacing:-.06em}
.edit-expense-form.native-form .edit-expense-amount input:focus{border:0;background:transparent;box-shadow:none}
.edit-expense-form.native-form .edit-expense-section{gap:9px;border-top:0;padding-top:3px}
.edit-expense-form.native-form .edit-expense-section-title{margin:0 4px 0;color:#777f84}

.native-form .expense-grocery-toggle{border-color:var(--native-line);border-radius:17px;background:linear-gradient(180deg,#15191c,#101416);font-weight:680}
.native-form .expense-grocery-items{gap:10px;padding:11px;border-color:var(--native-line);border-radius:17px;background:linear-gradient(180deg,#15191c,#101416)}
.native-form .expense-grocery-line{grid-template-columns:minmax(0,1fr) minmax(86px,.42fr) 34px;gap:7px}
.native-form .expense-grocery-line .field{padding:0;border:0;background:transparent}
.native-form .expense-grocery-line .field label{margin:0 0 4px 2px;color:#767e83;font-size:9px;font-weight:700}
.native-form .expense-grocery-line input{min-height:42px;padding:0 10px;border-color:var(--native-line);border-radius:12px;background:#0d1012}
.native-form .expense-grocery-line input:focus{border-color:rgba(127,223,152,.24);background:#0f1311;box-shadow:0 0 0 3px rgba(127,223,152,.055)}
.native-form .expense-grocery-price-input>span{left:10px}
.native-form .expense-grocery-price-input input{padding-left:25px}
.native-form .expense-grocery-remove{width:34px;height:42px;border-radius:11px;background:#171b1e}
.native-form .expense-grocery-add{min-height:40px;border-color:rgba(127,223,152,.15);border-radius:12px;background:rgba(127,223,152,.045)}

/* v4.8.2 — Grocery quick-add vertical alignment and iPhone zoom guard */
html,
body,
.app-shell,
.modal-backdrop,
.modal,
.modal-body,
.edit-expense-scroll,
.grocery-run-subpage,
.grocery-run-body,
button,
a,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

.grocery-hub-quick-add input {
  padding-left: 12px;
}

.grocery-hub-quick-add button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  line-height: 0;
  aspect-ratio: 1 / 1;
}

.grocery-hub-quick-add button .app-icon {
  width: 19px;
  height: 19px;
  margin: 0;
  flex: 0 0 auto;
  transform: none;
}


/* v4.8.4 — Exact grocery quick-add centering.
   The row and its 42px button now share the same grid track and are centred by layout,
   with no manual top/translate offsets. */
.grocery-hub-quick-add {
  align-items: center;
}

.grocery-hub-quick-add button {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  align-self: center !important;
  justify-self: center !important;
}

.grocery-hub-quick-add button .app-icon {
  transform: none !important;
}


/* v5.0 read-only sync foundation */
.sync-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sync-foundation-badge{display:inline-flex;align-items:center;min-height:24px;padding:4px 9px;border:1px solid rgba(123,235,143,.22);border-radius:999px;background:rgba(123,235,143,.075);color:#8ee9a3;font-size:9px;font-weight:820;letter-spacing:.035em;text-transform:none}
.sync-foundation-card{border:1px solid rgba(202,236,199,.1);border-radius:21px;background:linear-gradient(145deg,rgba(18,28,23,.78),rgba(255,255,255,.018));padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.sync-foundation-status{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:start;gap:12px}
.sync-foundation-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#596169;box-shadow:0 0 0 5px rgba(89,97,105,.1);transition:background .18s ease,box-shadow .18s ease}
.sync-foundation-copy{min-width:0;display:grid;gap:4px}
.sync-foundation-copy strong{color:#f1f2ef;font-size:15px;line-height:1.2}
.sync-foundation-copy small{color:#858c91;font-size:11px;font-weight:650;line-height:1.45}
.sync-foundation-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:15px}
.sync-foundation-metrics>span{min-width:0;display:grid;gap:3px;padding:10px 9px;border:1px solid rgba(202,236,199,.07);border-radius:13px;background:rgba(0,0,0,.14)}
.sync-foundation-metrics small{color:#717981;font-size:9px;font-weight:780;text-transform:uppercase;letter-spacing:.055em}
.sync-foundation-metrics strong{overflow:hidden;color:#e7eae6;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
.sync-foundation-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.sync-foundation-actions .btn{min-height:46px;margin:0;padding:11px 13px;border-radius:14px;font-size:12px}
.sync-foundation-card[data-sync-state="checking"] .sync-foundation-dot{background:#e3bd67;box-shadow:0 0 0 5px rgba(227,189,103,.1);animation:syncPulse 1.2s ease-in-out infinite}
.sync-foundation-card[data-sync-state="match"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="cloud-ready"] .sync-foundation-dot{background:#7beb8f;box-shadow:0 0 0 5px rgba(123,235,143,.11)}
.sync-foundation-card[data-sync-state="different"] .sync-foundation-dot{background:#e3bd67;box-shadow:0 0 0 5px rgba(227,189,103,.1)}
.sync-foundation-card[data-sync-state="auth"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="error"] .sync-foundation-dot{background:#ee827d;box-shadow:0 0 0 5px rgba(238,130,125,.1)}
.sync-foundation-card[data-sync-state="offline"] .sync-foundation-dot{background:#717981;box-shadow:0 0 0 5px rgba(113,121,129,.1)}
.sync-foundation-card.is-busy .sync-foundation-actions button{pointer-events:none;opacity:.58}
@keyframes syncPulse{0%,100%{transform:scale(.86);opacity:.72}50%{transform:scale(1);opacity:1}}
@media (max-width:350px){.sync-foundation-card{padding:14px}.sync-foundation-actions{grid-template-columns:1fr}.sync-foundation-metrics>span{padding:9px 7px}.sync-foundation-metrics strong{font-size:14px}}
@media (prefers-reduced-motion:reduce){.sync-foundation-card[data-sync-state="checking"] .sync-foundation-dot{animation:none}}

/* =========================================================
   Spendly v5.1 — Cloud restore + responsive desktop shell
   ========================================================= */
.desktop-nav-brand,
.desktop-nav-footer{display:none}

.sync-foundation-actions .sync-restore-btn{
  grid-column:1 / -1;
  min-height:48px;
  border:1px solid rgba(144,232,163,.26);
  background:linear-gradient(145deg,#91e7a5,#62cb7d);
  color:#08140c;
  box-shadow:0 12px 28px rgba(72,183,103,.19),inset 0 1px 0 rgba(255,255,255,.28);
  font-weight:850;
}
.sync-foundation-actions .sync-restore-btn:hover{filter:brightness(1.035)}
.sync-foundation-actions .sync-restore-btn:active{transform:translateY(1px) scale(.995)}
.sync-foundation-card[data-sync-state="restoring"] .sync-foundation-dot{
  background:#e3bd67;
  box-shadow:0 0 0 5px rgba(227,189,103,.10);
  animation:syncPulse 1.2s ease-in-out infinite
}
.sync-foundation-card[data-sync-state="restored"] .sync-foundation-dot{
  background:#7beb8f;
  box-shadow:0 0 0 5px rgba(123,235,143,.12)
}

@media (min-width:900px){
  :root{
    --desktop-sidebar-width:248px;
    --desktop-content-max:1240px;
  }

  html,body{min-height:100%;}
  body{
    min-width:900px;
    background:
      radial-gradient(circle at 76% -12%,rgba(92,174,115,.09),transparent 31%),
      radial-gradient(circle at 4% 70%,rgba(77,130,96,.045),transparent 29%),
      #080a0c;
  }

  .app-shell{
    width:auto!important;
    max-width:none!important;
    min-height:100dvh;
    margin:0 0 0 var(--desktop-sidebar-width)!important;
    padding:0 34px 58px!important;
  }

  .contextual-topbar{
    width:100%;
    max-width:var(--desktop-content-max);
    min-height:112px;
    margin:0 auto 6px!important;
    padding:30px 4px 20px!important;
    background:linear-gradient(180deg,rgba(8,10,12,.985),rgba(8,10,12,.91) 74%,transparent)!important;
  }
  .context-header-copy h1{font-size:31px;letter-spacing:-.035em}
  .context-header-copy p{font-size:12px}
  .context-header-meta{min-width:92px;padding:9px 13px;font-size:11px}

  main{
    width:100%;
    max-width:var(--desktop-content-max);
    min-height:calc(100vh - 132px);
    margin:0 auto;
  }

  .page{animation-duration:.18s}
  .page.active{width:100%}
  .section{margin-top:18px}

  /* Sidebar navigation */
  .nav{
    display:block!important;
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:var(--desktop-sidebar-width)!important;
    height:100dvh!important;
    padding:18px 14px!important;
    transform:none!important;
    background:linear-gradient(90deg,#0b0e11 0%,rgba(11,14,17,.985) 83%,rgba(11,14,17,.58) 100%)!important;
    border-right:1px solid rgba(223,228,224,.055);
  }
  .nav-inner{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    gap:7px!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    padding:13px!important;
    overflow:hidden!important;
    border:1px solid rgba(223,228,224,.075)!important;
    border-radius:28px!important;
    background:linear-gradient(155deg,rgba(25,29,32,.98),rgba(16,19,22,.98))!important;
    box-shadow:0 26px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.025)!important;
  }
  .desktop-nav-brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:68px;
    margin:2px 2px 12px;
    padding:9px 8px 14px;
    border-bottom:1px solid rgba(223,228,224,.07);
  }
  .desktop-nav-logo{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.30)
  }
  .desktop-nav-logo img{display:block;width:100%;height:100%;object-fit:cover}
  .desktop-nav-brand>span:last-child{min-width:0;display:grid;gap:2px}
  .desktop-nav-brand strong{color:#f0f2ef;font-size:17px;letter-spacing:-.025em}
  .desktop-nav-brand small{color:#747c81;font-size:10px;font-weight:700}

  .nav-btn{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    justify-items:start!important;
    align-content:center!important;
    gap:10px!important;
    padding:7px 11px!important;
    border-radius:16px!important;
    background:transparent!important;
    color:#90979c!important;
    font-size:12px!important;
    font-weight:760!important;
    transform:none!important;
  }
  .nav-btn:hover{background:rgba(255,255,255,.033)!important;color:#d7dcd8!important}
  .nav-btn.active{
    background:rgba(120,223,146,.105)!important;
    color:#83e39a!important;
    box-shadow:inset 0 0 0 1px rgba(120,223,146,.055)!important
  }
  .nav-btn .ico,
  .nav-add-btn .nav-add-orb{
    width:36px!important;
    height:36px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:12px!important;
    color:inherit!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:none!important;
  }
  .nav-btn.active .ico{background:rgba(120,223,146,.09)!important}
  .nav-btn .ico .app-icon,
  .nav-add-btn .nav-add-orb .app-icon{width:20px!important;height:20px!important;stroke-width:1.8!important}
  .nav-add-btn{
    position:static!important;
    z-index:auto!important;
    color:#8cdf9e!important;
  }
  .nav-add-btn .nav-add-orb{
    color:#0b1710!important;
    background:linear-gradient(145deg,#91e7a5,#62cb7d)!important;
    box-shadow:0 8px 19px rgba(72,183,103,.17)!important
  }
  .nav-add-btn>span:last-child{color:inherit!important;font-size:12px!important}
  .desktop-nav-footer{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding:12px 10px 5px;
    color:#70787d;
  }
  .desktop-nav-footer>span{width:7px;height:7px;border-radius:50%;background:#72d98a;box-shadow:0 0 0 4px rgba(114,217,138,.08)}
  .desktop-nav-footer small{font-size:9.5px;font-weight:720}

  /* Home dashboard */
  #page-home.page.active{
    display:grid;
    grid-template-columns:minmax(0,1.24fr) minmax(340px,.76fr);
    gap:18px;
    align-items:start;
  }
  #page-home>.section{margin-top:0}
  #page-home .home-week-section{grid-column:1;grid-row:1}
  #page-home .home-today-section{grid-column:1;grid-row:2}
  #page-home .home-budget-focus-section{grid-column:1;grid-row:3}
  #page-home .home-recent-section{grid-column:2;grid-row:1 / span 2}
  #page-home .home-overview-section{grid-column:2;grid-row:3}
  #page-home .home-insights-section{grid-column:1;grid-row:4}
  #page-home .home-details-section{grid-column:2;grid-row:4}
  .home-week-card,.home-hero,.home-budget-focus,.home-activity,.home-glance,.home-insights-entry,.home-details{height:100%}
  .home-activity{max-height:430px;overflow:auto;overscroll-behavior:contain;padding-right:3px}
  .home-today-top{grid-template-columns:auto minmax(0,1fr) auto auto}
  .home-safe-value{font-size:34px}
  .home-budget-focus-main,.home-budget-focus-side{min-height:132px}

  /* Activity */
  #page-insights.page.active{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
    gap:18px;
    align-items:start;
  }
  #page-insights .history-overview{grid-column:1 / -1;margin:0}
  #page-insights .activity-tools{grid-column:1;margin:0}
  #page-insights .activity-filter-chips{grid-column:1;margin:0}
  #page-insights .history-opening-note{grid-column:2;grid-row:2 / span 2;margin:0;min-height:68px}
  #page-insights .history-section{grid-column:1 / -1;margin-top:0}
  .activity-search input{height:52px}
  .activity-filter-button{height:52px;min-width:122px}
  .history-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
  .history-feed>.empty-state{grid-column:1 / -1}

  /* Grocery hub */
  #page-buy.page.active{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    gap:18px;
    align-items:start;
  }
  #page-buy>.grocery-hub-list-card{grid-column:1;grid-row:1 / span 3;margin:0}
  #page-buy>.grocery-hub-hero{grid-column:2;grid-row:1;margin:0}
  #page-buy>.grocery-purchased-section{grid-column:2;grid-row:2;margin:0}
  #page-buy>.grocery-recent-section:not(.grocery-purchased-section){grid-column:2;grid-row:3;margin:0}
  #page-buy>.grocery-other-plans{grid-column:1 / -1;margin:0}
  .grocery-hub-list-card{min-height:520px}
  .grocery-hub-list{max-height:620px;overflow:auto;overscroll-behavior:contain;padding-right:3px}
  .grocery-other-plans-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

  /* Settings */
  #page-more.page.active{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:start;
  }
  #page-more>.settings-section,
  #page-more>.advanced-settings{margin:0}
  #page-more>.sync-foundation-section{grid-column:1 / -1}
  #page-more>.advanced-settings{grid-column:1 / -1}
  .sync-foundation-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:19px 20px}
  .sync-foundation-status{grid-column:1}
  .sync-foundation-metrics{grid-column:1;margin-top:0;max-width:560px}
  .sync-foundation-actions{grid-column:2;grid-row:1 / span 2;grid-template-columns:repeat(2,minmax(130px,1fr));min-width:300px;margin-top:0}
  .sync-foundation-actions .sync-restore-btn{grid-column:1 / -1}

  /* Add page and modal usability */
  #page-spend.page.active{max-width:980px;margin:0 auto}
  #page-spend .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-backdrop{padding:26px!important;align-items:center!important}
  .modal{width:min(700px,calc(100vw - 64px))!important;max-width:700px!important;max-height:min(820px,calc(100dvh - 52px))!important;border-radius:27px!important}
  .modal-head{padding-left:24px;padding-right:24px}
  .modal-body{padding-left:24px;padding-right:24px}

  /* Full-screen tools retain the sidebar */
  body.insights-open .nav,
  body.grocery-run-open .nav{display:block!important}
  .insights-subpage,
  .grocery-run-subpage{
    left:var(--desktop-sidebar-width)!important;
    width:calc(100% - var(--desktop-sidebar-width))!important;
  }
  .insights-subpage-header,
  .insights-subpage-body,
  .grocery-run-header,
  .grocery-run-body{
    width:100%;
    max-width:1080px;
    margin-left:auto;
    margin-right:auto;
  }
  .insights-subpage-body{padding-left:28px;padding-right:28px}
  .grocery-run-body{padding-left:28px;padding-right:28px}
  .grocery-run-shop-layout{max-width:920px;margin-left:auto;margin-right:auto}

  /* Pointer and keyboard polish */
  button,.settings-row,.history-transaction-row,.plan-row{cursor:pointer}
  button:focus-visible,.settings-row:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid rgba(123,235,143,.72)!important;
    outline-offset:2px!important;
  }
}

@media (min-width:1280px){
  .app-shell{padding-left:44px!important;padding-right:44px!important}
  #page-home.page.active{grid-template-columns:minmax(0,1.32fr) minmax(370px,.68fr)}
  #page-buy.page.active{grid-template-columns:minmax(0,1.34fr) minmax(370px,.66fr)}
}

@media (prefers-reduced-motion:reduce){
  .sync-foundation-card[data-sync-state="restoring"] .sync-foundation-dot{animation:none}
}

/* =========================================================
   Spendly v5.1.1 — desktop usability and scroll repair
   ========================================================= */
@media (min-width:900px){
  html,
  body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden!important;
  }

  body{
    min-width:900px;
  }

  .app-shell{
    position:fixed!important;
    inset:0 0 0 var(--desktop-sidebar-width)!important;
    width:auto!important;
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:0 34px 76px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain;
    scrollbar-gutter:stable;
    scroll-behavior:auto;
  }

  .app-shell,
  .home-activity,
  .grocery-hub-list,
  .grocery-recent-runs,
  .modal-body,
  .edit-expense-scroll,
  .insights-subpage-body,
  .grocery-run-body{
    scrollbar-width:thin!important;
    scrollbar-color:rgba(126,221,148,.5) rgba(255,255,255,.035)!important;
  }

  .app-shell::-webkit-scrollbar,
  .home-activity::-webkit-scrollbar,
  .grocery-hub-list::-webkit-scrollbar,
  .grocery-recent-runs::-webkit-scrollbar,
  .modal-body::-webkit-scrollbar,
  .edit-expense-scroll::-webkit-scrollbar,
  .insights-subpage-body::-webkit-scrollbar,
  .grocery-run-body::-webkit-scrollbar{
    display:block!important;
    width:10px!important;
    height:10px!important;
  }

  .app-shell::-webkit-scrollbar-track,
  .home-activity::-webkit-scrollbar-track,
  .grocery-hub-list::-webkit-scrollbar-track,
  .grocery-recent-runs::-webkit-scrollbar-track,
  .modal-body::-webkit-scrollbar-track,
  .edit-expense-scroll::-webkit-scrollbar-track,
  .insights-subpage-body::-webkit-scrollbar-track,
  .grocery-run-body::-webkit-scrollbar-track{
    background:rgba(255,255,255,.025);
    border-radius:999px;
  }

  .app-shell::-webkit-scrollbar-thumb,
  .home-activity::-webkit-scrollbar-thumb,
  .grocery-hub-list::-webkit-scrollbar-thumb,
  .grocery-recent-runs::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb,
  .edit-expense-scroll::-webkit-scrollbar-thumb,
  .insights-subpage-body::-webkit-scrollbar-thumb,
  .grocery-run-body::-webkit-scrollbar-thumb{
    min-height:44px;
    border:2px solid transparent;
    border-radius:999px;
    background:rgba(126,221,148,.42);
    background-clip:padding-box;
  }

  .app-shell::-webkit-scrollbar-thumb:hover,
  .home-activity::-webkit-scrollbar-thumb:hover,
  .grocery-hub-list::-webkit-scrollbar-thumb:hover,
  .grocery-recent-runs::-webkit-scrollbar-thumb:hover,
  .modal-body::-webkit-scrollbar-thumb:hover,
  .edit-expense-scroll::-webkit-scrollbar-thumb:hover,
  .insights-subpage-body::-webkit-scrollbar-thumb:hover,
  .grocery-run-body::-webkit-scrollbar-thumb:hover{
    background:rgba(139,232,161,.68);
    background-clip:padding-box;
  }

  body.modal-open .app-shell,
  body.insights-open .app-shell,
  body.grocery-run-open .app-shell{
    overflow-y:hidden!important;
  }

  .contextual-topbar{
    position:sticky!important;
    top:0!important;
    z-index:45!important;
    min-height:94px!important;
    margin:0 auto 12px!important;
    padding:20px 4px 14px!important;
    border-bottom:1px solid rgba(223,228,224,.055);
    background:linear-gradient(180deg,rgba(8,10,12,.985) 0%,rgba(8,10,12,.965) 78%,rgba(8,10,12,.82) 100%)!important;
    box-shadow:0 14px 28px rgba(0,0,0,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  main{
    min-height:calc(100dvh - 112px)!important;
    padding-bottom:24px;
  }

  .page.active{
    min-width:0;
    padding-bottom:8px;
  }

  #page-home.page.active,
  #page-insights.page.active,
  #page-buy.page.active,
  #page-more.page.active{
    gap:16px!important;
  }

  /* Home keeps its dashboard hierarchy but uses laptop height better. */
  .home-activity{
    max-height:338px!important;
    padding-right:8px!important;
  }

  .home-week-card,
  .home-hero,
  .home-budget-focus,
  .home-glance,
  .home-insights-entry,
  .home-details{
    min-width:0;
  }

  /* Activity remains readable while the page itself has a reliable scrollbar. */
  .history-feed{
    align-items:start;
    gap:14px 16px!important;
  }

  .history-day-group{
    align-self:start;
  }

  /* Grocery workspace: remove the oversized empty desktop panel. */
  .grocery-hub-list-card{
    min-height:390px!important;
  }

  .grocery-hub-list{
    min-height:210px;
    max-height:min(500px,calc(100dvh - 300px))!important;
    padding-right:8px!important;
    overflow-y:auto!important;
  }

  .grocery-purchased-section .grocery-recent-runs{
    max-height:350px;
    overflow-y:auto;
  }

  #page-buy>.grocery-recent-section:not(.grocery-purchased-section) .grocery-recent-runs{
    max-height:290px;
    overflow-y:auto;
  }

  /* Settings use both columns instead of leaving a large blank area. */
  #page-more>.settings-section:nth-of-type(1){
    grid-column:1;
    grid-row:1;
  }

  #page-more>.settings-section:nth-of-type(4){
    grid-column:2;
    grid-row:1;
  }

  #page-more>.sync-foundation-section{
    grid-column:1 / -1!important;
    grid-row:2;
  }

  #page-more>.settings-section:nth-of-type(3){
    grid-column:1;
    grid-row:3;
  }

  #page-more>.advanced-settings{
    grid-column:2!important;
    grid-row:3;
    align-self:start;
  }

  /* Desktop dialogs always own their scroll area and never cut off actions. */
  .modal-backdrop{
    align-items:center!important;
    padding:20px 28px!important;
  }

  .modal{
    width:min(680px,calc(100vw - 72px))!important;
    max-width:680px!important;
    max-height:calc(100dvh - 40px)!important;
    border-radius:26px!important;
    box-shadow:0 34px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.028)!important;
  }

  .modal-head{
    min-height:68px!important;
    padding:12px 20px 10px 24px!important;
  }

  .modal-head::before{
    display:none!important;
  }

  .modal-body,
  .modal-body:not(.can-scroll),
  .edit-expense-scroll,
  .edit-expense-scroll:not(.can-scroll){
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .modal-body{
    padding:17px 24px 24px!important;
  }

  .edit-expense-scroll{
    padding:17px 24px 22px!important;
  }

  .edit-expense-footer{
    padding:12px 24px 18px!important;
  }

  .modal select,
  .modal option,
  .modal optgroup{
    color-scheme:dark;
  }

  .modal select option,
  .modal select optgroup{
    color:#eef1ed;
    background:#161a1e;
  }

  .modal select:focus{
    background:#171c20!important;
  }

  /* Pointer polish for desktop-only controls. */
  .app-shell button,
  .app-shell input,
  .app-shell select,
  .app-shell textarea,
  .modal button,
  .modal input,
  .modal select,
  .modal textarea{
    -webkit-user-select:auto;
    user-select:auto;
  }
}

/* Compact laptops retain the sidebar but switch complex pages to one column. */
@media (min-width:900px) and (max-width:1120px){
  :root{
    --desktop-sidebar-width:220px;
  }

  .app-shell{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  #page-home.page.active,
  #page-insights.page.active,
  #page-buy.page.active,
  #page-more.page.active{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #page-home.page.active>* ,
  #page-insights.page.active>* ,
  #page-buy.page.active>* ,
  #page-more.page.active>*{
    grid-column:1!important;
    grid-row:auto!important;
  }

  .home-activity,
  .grocery-hub-list,
  .grocery-purchased-section .grocery-recent-runs,
  #page-buy>.grocery-recent-section:not(.grocery-purchased-section) .grocery-recent-runs{
    max-height:none!important;
  }

  .grocery-hub-list-card{
    min-height:0!important;
  }

  .grocery-hub-list{
    min-height:180px;
  }

  .sync-foundation-card{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .sync-foundation-status,
  .sync-foundation-metrics,
  .sync-foundation-actions{
    grid-column:1!important;
    grid-row:auto!important;
  }

  .sync-foundation-actions{
    min-width:0!important;
  }
}

@media (min-width:900px) and (max-height:650px){
  .contextual-topbar{
    min-height:82px!important;
    padding-top:14px!important;
    padding-bottom:10px!important;
  }

  .context-header-copy h1{
    font-size:27px!important;
  }

  .modal-backdrop{
    padding-top:12px!important;
    padding-bottom:12px!important;
  }

  .modal{
    max-height:calc(100dvh - 24px)!important;
  }
}


/* =========================================================
   Spendly v5.2 — Automatic two-way sync
   ========================================================= */
.sync-foundation-card[data-sync-state="syncing"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="resolving"] .sync-foundation-dot{
  background:#e3bd67;
  box-shadow:0 0 0 5px rgba(227,189,103,.10);
  animation:syncPulse 1.2s ease-in-out infinite;
}
.sync-foundation-card[data-sync-state="pending"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="deferred"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="setup-review"] .sync-foundation-dot{
  background:#e3bd67;
  box-shadow:0 0 0 5px rgba(227,189,103,.10);
}
.sync-foundation-card[data-sync-state="conflict"] .sync-foundation-dot{
  background:#ee9b69;
  box-shadow:0 0 0 5px rgba(238,155,105,.11);
}
.sync-foundation-card[data-sync-state="idle"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="match"] .sync-foundation-dot,
.sync-foundation-card[data-sync-state="restored"] .sync-foundation-dot{
  background:#7beb8f;
  box-shadow:0 0 0 5px rgba(123,235,143,.11);
}
.sync-foundation-actions .sync-resolve-btn{
  grid-column:1 / -1;
  min-height:48px;
  border:1px solid rgba(231,190,104,.25);
  background:linear-gradient(145deg,rgba(70,57,31,.92),rgba(47,40,25,.96));
  color:#f2d794;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-weight:820;
}
.sync-foundation-actions .sync-resolve-btn:hover{
  border-color:rgba(231,190,104,.36);
  filter:brightness(1.05);
}
.sync-foundation-actions .sync-resolve-btn:active{
  transform:translateY(1px) scale(.995);
}
.desktop-nav-footer[data-sync-state="offline"] span,
.desktop-nav-footer[data-sync-state="conflict"] span,
.desktop-nav-footer[data-sync-state="error"] span,
.desktop-nav-footer span.is-warning{
  background:#e3bd67!important;
  box-shadow:0 0 0 4px rgba(227,189,103,.09)!important;
}

.sync-resolution-backdrop{
  position:fixed;
  inset:0;
  z-index:130;
  display:grid;
  place-items:end center;
  padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.sync-resolution-backdrop[hidden]{display:none!important}
.sync-resolution-dialog{
  width:min(100%,520px);
  border:1px solid rgba(226,231,225,.11);
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 0%,rgba(105,191,129,.11),transparent 36%),
    linear-gradient(160deg,#191d20,#111416);
  padding:12px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035);
}
.sync-resolution-handle{
  width:42px;
  height:4px;
  margin:0 auto 17px;
  border-radius:999px;
  background:rgba(225,230,226,.18);
}
.sync-resolution-copy{display:grid;gap:7px}
.sync-resolution-kicker{
  color:#7beb8f;
  font-size:10px;
  font-weight:820;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.sync-resolution-copy h3{
  margin:0;
  color:#f2f3f0;
  font-size:22px;
  line-height:1.12;
  letter-spacing:-.03em;
}
.sync-resolution-copy p{
  margin:0;
  color:#92999e;
  font-size:12px;
  font-weight:620;
  line-height:1.55;
}
.sync-resolution-actions{
  display:grid;
  gap:10px;
  margin-top:20px;
}
.sync-resolution-actions .btn{
  min-height:49px;
  margin:0;
  border-radius:15px;
}
.sync-resolution-cancel{
  min-height:42px;
  border:0;
  background:transparent;
  color:#8d9499;
  font-size:12px;
  font-weight:760;
}
.sync-resolution-cancel:hover{color:#d7dad7}
body.sync-resolution-open{overflow:hidden}

@media (min-width:700px){
  .sync-resolution-backdrop{
    place-items:center;
    padding:24px;
  }
  .sync-resolution-dialog{
    border-radius:28px;
    padding:16px 22px 22px;
  }
  .sync-resolution-actions{
    grid-template-columns:1fr 1fr;
  }
  .sync-resolution-cancel{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  .sync-foundation-card[data-sync-state="syncing"] .sync-foundation-dot,
  .sync-foundation-card[data-sync-state="resolving"] .sync-foundation-dot{
    animation:none;
  }
}


/* =========================================================
   Spendly v5.3 — Stable multi-device sync polish
   ========================================================= */
.sync-foundation-device-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.sync-foundation-device-meta>span{
  min-width:0;
  display:grid;
  gap:3px;
  padding:10px 11px;
  border:1px solid rgba(202,236,199,.07);
  border-radius:13px;
  background:rgba(0,0,0,.11);
}
.sync-foundation-device-meta small{
  color:#717981;
  font-size:9px;
  font-weight:780;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.sync-foundation-device-meta strong{
  overflow:hidden;
  color:#dfe4df;
  font-size:11px;
  font-weight:760;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sync-foundation-badge{
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.sync-foundation-badge[data-sync-state="offline"]{
  border-color:rgba(150,158,165,.18);
  background:rgba(120,128,136,.08);
  color:#aeb5ba;
}
.sync-foundation-badge[data-sync-state="auth"],
.sync-foundation-badge[data-sync-state="error"]{
  border-color:rgba(238,130,125,.22);
  background:rgba(238,130,125,.08);
  color:#f0a09b;
}
.sync-foundation-badge[data-sync-state="conflict"],
.sync-foundation-badge[data-sync-state="setup-review"],
.sync-foundation-badge[data-sync-state="pending"],
.sync-foundation-badge[data-sync-state="deferred"]{
  border-color:rgba(227,189,103,.23);
  background:rgba(227,189,103,.08);
  color:#e8c873;
}
.sync-foundation-actions:not(.show-connect) #syncNowBtn{
  grid-column:1 / -1;
}
.sync-foundation-actions.show-connect #syncConnectBtn,
.sync-foundation-actions.show-connect #syncNowBtn{
  grid-column:auto;
}
.sync-foundation-actions #syncConnectBtn[hidden]{display:none!important}
.desktop-nav-footer[data-sync-state="auth"] span{
  background:#e3bd67!important;
  box-shadow:0 0 0 4px rgba(227,189,103,.09)!important;
}
@media (min-width:900px){
  .sync-foundation-device-meta{
    grid-column:1;
    margin-top:0;
    max-width:560px;
  }
  .sync-foundation-actions{
    grid-row:1 / span 3;
  }
}
@media (min-width:900px) and (max-width:1120px){
  .sync-foundation-device-meta{
    grid-column:1!important;
  }
}
@media (max-width:350px){
  .sync-foundation-device-meta{grid-template-columns:1fr}
}

/* =========================================================
   Spendly v5.4 — Today Overview
   ========================================================= */
.context-header-meta[type="button"]{
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.context-header-meta[type="button"]:active{transform:scale(.94)}
.context-header-meta[type="button"]:focus-visible{
  outline:2px solid rgba(120,223,146,.72);
  outline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .context-header-meta[type="button"]:hover{
    border-color:rgba(120,223,146,.24);
    background:linear-gradient(145deg,#1c2420,#111614);
    box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.045);
  }
}

.modal-backdrop[data-kind="today-overview"] .modal{max-width:520px!important}
.modal-backdrop[data-kind="today-overview"] .modal-body{padding-top:14px}
.today-overview-sheet{display:grid;gap:14px;min-width:0}
.today-overview-balance{
  display:grid;
  gap:6px;
  padding:21px 20px;
  overflow:hidden;
  border:1px solid rgba(120,223,146,.14);
  border-radius:24px;
  background:radial-gradient(circle at 88% 10%,rgba(120,223,146,.14),transparent 34%),linear-gradient(145deg,#17241b,#101512);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.today-overview-balance.watch{
  border-color:rgba(230,173,101,.18);
  background:radial-gradient(circle at 88% 10%,rgba(230,173,101,.12),transparent 34%),linear-gradient(145deg,#211b14,#15120f);
}
.today-overview-balance.over{
  border-color:rgba(237,133,141,.20);
  background:radial-gradient(circle at 88% 10%,rgba(237,133,141,.13),transparent 34%),linear-gradient(145deg,#241719,#151011);
}
.today-overview-balance>span{color:#8d9690;font-size:11px;font-weight:760;letter-spacing:.075em;text-transform:uppercase}
.today-overview-balance>strong{color:#82e69a;font-size:clamp(42px,13vw,56px);line-height:.94;font-weight:820;letter-spacing:-.075em;font-variant-numeric:tabular-nums}
.today-overview-balance.watch>strong{color:#edbd78}
.today-overview-balance.over>strong{color:#ef959d}
.today-overview-balance>small{color:#81878b;font-size:12px;font-weight:610}

.today-overview-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(223,228,224,.09);
  border-radius:20px;
  background:linear-gradient(155deg,#171a1d,#111416);
}
.today-overview-stats>div{min-width:0;padding:15px 13px;display:grid;gap:6px;border-right:1px solid rgba(223,228,224,.075)}
.today-overview-stats>div:last-child{border-right:0}
.today-overview-stats span{overflow:hidden;color:#777d82;font-size:10px;font-weight:720;text-overflow:ellipsis;white-space:nowrap}
.today-overview-stats strong{overflow:hidden;color:#ecebe6;font-size:18px;line-height:1;font-weight:790;letter-spacing:-.045em;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}

.today-overview-progress-card{
  padding:17px 17px 16px;
  border:1px solid rgba(223,228,224,.085);
  border-radius:20px;
  background:rgba(255,255,255,.018);
}
.today-overview-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#91969a;font-size:12px;font-weight:690}
.today-overview-progress-head strong{color:#c6cbc7;font-variant-numeric:tabular-nums}
.today-overview-progress{height:9px;margin-top:12px;overflow:hidden;border-radius:999px;background:#25292d}
.today-overview-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#62d681,#83e39a)}
.today-overview-progress span.watch{background:linear-gradient(90deg,#d99a4f,#edbd73)}
.today-overview-progress span.over{background:linear-gradient(90deg,#d86973,#ef939b)}
.today-overview-progress-card p{margin:12px 0 0;color:#868c90;font-size:12px;line-height:1.45;font-weight:590}

.today-overview-trip{
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid rgba(223,228,224,.085);
  border-radius:19px;
  background:rgba(255,255,255,.015);
}
.today-overview-trip-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:15px;background:rgba(120,223,146,.11);color:#78df92}
.today-overview-trip-icon .app-icon{width:21px;height:21px;stroke-width:1.8}
.today-overview-trip-copy{min-width:0;display:grid;gap:4px}
.today-overview-trip-copy strong{overflow:hidden;color:#e9e8e3;font-size:14px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.today-overview-trip-copy small{overflow:hidden;color:#777d82;font-size:11px;font-weight:610;text-overflow:ellipsis;white-space:nowrap}
.today-overview-trip-days{max-width:112px;color:#99a09b;font-size:11px;line-height:1.25;font-weight:700;text-align:right}

.today-overview-activity{min-height:52px!important;margin-top:1px!important;display:flex!important;align-items:center;justify-content:center;gap:8px}
.today-overview-activity .app-icon{width:18px;height:18px;stroke-width:2}

@media (max-width:370px){
  .today-overview-balance{padding:18px 17px}
  .today-overview-stats>div{padding:13px 9px}
  .today-overview-stats strong{font-size:16px}
  .today-overview-trip{grid-template-columns:38px minmax(0,1fr)}
  .today-overview-trip-icon{width:38px;height:38px;border-radius:13px}
  .today-overview-trip-days{grid-column:2;max-width:none;text-align:left}
}

@media (min-width:900px){
  .context-header-meta[data-open-modal="today-overview"]{
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    flex-basis:54px!important;
    padding:0!important;
    border-radius:50%!important;
  }
  .modal-backdrop[data-kind="today-overview"] .modal{width:min(520px,calc(100vw - 72px))!important}
  .today-overview-sheet{gap:15px}
  .today-overview-balance>strong{font-size:52px}
}


/* Preserved visual refinements and later compatibility overrides. */

/* =========================================================
   Spendly v6.2 — Device Fit & Seamless Updates
   Visual system only. Existing data, sync and feature logic
   remain unchanged.
   ========================================================= */

:root {
  color-scheme: dark;

  /* Core palette */
  --v6-bg: #070a0d;
  --v6-bg-elevated: #0a0e12;
  --v6-surface-1: #0e1317;
  --v6-surface-2: #12181d;
  --v6-surface-3: #171e23;
  --v6-surface-hover: #1b2329;
  --v6-text-1: #f2f2ed;
  --v6-text-2: #c0c5c2;
  --v6-text-3: #858c91;
  --v6-text-4: #5f676d;
  --v6-line: rgba(229, 235, 231, .085);
  --v6-line-strong: rgba(229, 235, 231, .14);
  --v6-accent: #67dd88;
  --v6-accent-strong: #81e69c;
  --v6-accent-deep: #2ca34f;
  --v6-accent-soft: rgba(103, 221, 136, .11);
  --v6-accent-softer: rgba(103, 221, 136, .065);
  --v6-warning: #efb663;
  --v6-danger: #f0848e;
  --v6-info: #7daef2;

  /* Shape and spacing */
  --v6-radius-xs: 10px;
  --v6-radius-sm: 14px;
  --v6-radius-md: 18px;
  --v6-radius-lg: 24px;
  --v6-radius-xl: 30px;
  --v6-space-1: 4px;
  --v6-space-2: 8px;
  --v6-space-3: 12px;
  --v6-space-4: 16px;
  --v6-space-5: 20px;
  --v6-space-6: 24px;
  --v6-space-7: 32px;
  --v6-space-8: 40px;

  /* Elevation */
  --v6-shadow-card: 0 18px 48px rgba(0, 0, 0, .25);
  --v6-shadow-float: 0 28px 80px rgba(0, 0, 0, .50);
  --v6-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, .03);

  /* Compatibility bridge for the existing component layer */
  --bg: var(--v6-bg);
  --bg-soft: var(--v6-bg-elevated);
  --surface: var(--v6-surface-1);
  --surface-raised: var(--v6-surface-2);
  --surface-soft: #0b1014;
  --card: var(--v6-surface-1);
  --card-strong: var(--v6-surface-2);
  --text: var(--v6-text-1);
  --text-strong: var(--v6-text-1);
  --muted: var(--v6-text-3);
  --text-muted: var(--v6-text-3);
  --text-faint: var(--v6-text-4);
  --line: var(--v6-line);
  --hairline: var(--v6-line);
  --green: var(--v6-accent);
  --green-dark: var(--v6-accent-deep);
  --accent: var(--v6-accent);
  --accent-soft: var(--v6-accent-soft);
  --mint: var(--v6-accent-soft);
  --mint-strong: rgba(103, 221, 136, .18);
  --amber: var(--v6-warning);
  --rose: var(--v6-danger);
  --blue: var(--v6-info);
  --radius-xl: var(--v6-radius-xl);
  --radius-lg: var(--v6-radius-lg);
  --radius-md: var(--v6-radius-md);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, ui-sans-serif, system-ui, sans-serif;
}

html {
  background: var(--v6-bg);
  text-rendering: optimizeLegibility;
}

body {
  color: var(--v6-text-1);
  background:
    radial-gradient(circle at 82% -8%, rgba(78, 182, 108, .085), transparent 27%),
    radial-gradient(circle at -8% 48%, rgba(74, 105, 125, .035), transparent 30%),
    linear-gradient(180deg, #070a0d 0%, #090d10 46%, #070a0d 100%);
  font-feature-settings: "tnum" 1, "kern" 1;
}

body::before {
  opacity: .42;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.008) 46%, transparent 76%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  touch-action: manipulation;
}

::selection {
  color: #07100a;
  background: var(--v6-accent-strong);
}

/* ---------- Responsive shell ---------- */
.app-shell {
  width: min(100%, 560px);
  padding-left: clamp(14px, 4vw, 20px);
  padding-right: clamp(14px, 4vw, 20px);
}

main {
  min-width: 0;
}

.page.active {
  min-width: 0;
}

.section {
  margin-top: clamp(18px, 5vw, 26px);
}

.contextual-topbar {
  min-height: 92px;
  padding: 15px 3px 14px;
  gap: 16px;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(7,10,13,.985) 0%, rgba(7,10,13,.94) 72%, rgba(7,10,13,.20) 100%);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

.context-header-copy h1 {
  color: var(--v6-text-1);
  font-size: clamp(32px, 9vw, 42px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.062em;
}

.context-header-copy p {
  margin-top: 8px;
  color: var(--v6-text-3);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
}

.context-header-meta,
.context-header-meta[type="button"] {
  width: 50px;
  min-width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-color: var(--v6-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 48%),
    var(--v6-surface-1);
  color: var(--v6-accent);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), var(--v6-inset-highlight);
}

.context-header-meta .app-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.85;
}

/* ---------- Type hierarchy ---------- */
.hero h2,
.section-head h3,
.history-section-title,
.grocery-hub-title,
.settings-section-title,
.insights-card-head h2 {
  color: var(--v6-text-1);
  font-weight: 760;
  letter-spacing: -.04em;
}

.hero p,
.section-head span,
.settings-section-subtitle,
.soft-note,
.empty-state p {
  color: var(--v6-text-3);
}

.section-head {
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 12px;
}

.section-head h3 {
  font-size: 19px;
}

.section-link {
  color: var(--v6-accent);
}

/* ---------- Calm surfaces ---------- */
.card,
.home-week-card,
.home-hero,
.home-activity,
.home-glance,
.home-insights-entry,
.home-details,
.home-budget-focus,
.history-overview,
.activity-tools,
.history-opening-note,
.history-day-group,
.grocery-hub-list-card,
.grocery-hub-hero,
.grocery-recent-section,
.grocery-other-plans,
.settings-group,
.advanced-settings,
.sync-foundation-card,
.insights-card,
.insights-metric,
.today-overview-balance,
.today-overview-stats,
.today-overview-progress-card,
.today-overview-trip {
  border-color: var(--v6-line);
  background:
    linear-gradient(150deg, rgba(255,255,255,.018), transparent 36%),
    linear-gradient(155deg, var(--v6-surface-2), var(--v6-surface-1));
  box-shadow: var(--v6-shadow-card), var(--v6-inset-highlight);
}

.home-week-card,
.home-hero,
.home-activity,
.home-glance,
.home-insights-entry,
.home-details,
.home-budget-focus,
.grocery-hub-list-card,
.grocery-hub-hero,
.grocery-recent-section,
.grocery-other-plans,
.sync-foundation-card {
  border-radius: var(--v6-radius-lg);
}

/* Let related information breathe instead of making every line a card. */
.settings-row,
.history-transaction-row,
.plan-row,
.grocery-plan-row,
.grocery-hub-item-row,
.grocery-recent-row {
  border-color: rgba(229,235,231,.065);
}

/* ---------- Primary controls ---------- */
.btn {
  min-height: 48px;
  border-radius: var(--v6-radius-sm);
  padding: 0 17px;
  font-size: 14px;
  font-weight: 740;
  letter-spacing: -.012em;
  transition:
    transform .14s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.btn.primary,
.sync-foundation-actions .sync-restore-btn {
  border-color: rgba(129,230,156,.28);
  background: linear-gradient(145deg, var(--v6-accent-strong), #55cb73);
  color: #07120a;
  box-shadow: 0 12px 28px rgba(56,177,87,.19), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn.secondary,
.btn.ghost {
  border-color: var(--v6-line);
  background: rgba(255,255,255,.025);
  color: var(--v6-text-2);
}

.btn.danger {
  border-color: rgba(240,132,142,.18);
  background: rgba(240,132,142,.07);
  color: #f2a0a8;
}

.btn:focus-visible,
.nav-btn:focus-visible,
.close-btn:focus-visible,
.settings-row:focus-visible,
.plan-row:focus-visible,
.history-transaction-row:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(103,221,136,.72) !important;
  outline-offset: 3px !important;
}

@media (hover:hover) and (pointer:fine) {
  .btn:hover {
    opacity: 1;
    transform: translateY(-1px);
  }

  .btn.primary:hover {
    filter: brightness(1.035);
    box-shadow: 0 15px 32px rgba(56,177,87,.23), inset 0 1px 0 rgba(255,255,255,.30);
  }

  .btn.secondary:hover,
  .btn.ghost:hover {
    border-color: var(--v6-line-strong);
    background: rgba(255,255,255,.045);
  }
}

/* ---------- Inputs ---------- */
.field label,
.native-group > .field label {
  color: var(--v6-text-3);
  font-weight: 680;
}

.field input,
.field select,
.field textarea,
.native-group > .field input,
.native-group > .field select,
.native-group > .field textarea,
.activity-search input {
  border-color: var(--v6-line);
  background: rgba(255,255,255,.025);
  color: var(--v6-text-1);
  caret-color: var(--v6-accent);
}

.field input::placeholder,
.field textarea::placeholder,
.native-group > .field input::placeholder,
.native-group > .field textarea::placeholder,
.activity-search input::placeholder {
  color: #626b71;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.activity-search input:focus {
  border-color: rgba(103,221,136,.32);
  background: rgba(255,255,255,.035);
  box-shadow: 0 0 0 4px rgba(103,221,136,.07);
}

.native-group {
  border-color: var(--v6-line);
  border-radius: var(--v6-radius-md);
  background: var(--v6-surface-1);
  box-shadow: var(--v6-inset-highlight);
}

.native-group > .field + .field {
  border-top-color: rgba(229,235,231,.065);
}

/* ---------- Mobile navigation ---------- */
.nav {
  padding: 0 10px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(7,10,13,.86) 22%, rgba(7,10,13,.98) 58%);
}

.nav-inner {
  border-color: var(--v6-line);
  background: rgba(14,19,23,.92);
  box-shadow: 0 20px 56px rgba(0,0,0,.48), var(--v6-inset-highlight);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav-btn {
  color: #7d858b;
  font-weight: 680;
}

.nav-btn.active {
  color: var(--v6-accent);
}

.nav-btn .ico {
  border-radius: 12px;
}

.nav-add-btn .nav-add-orb {
  background: linear-gradient(145deg, var(--v6-accent-strong), #54c973);
  color: #07120a;
  box-shadow: 0 10px 26px rgba(56,177,87,.20), inset 0 1px 0 rgba(255,255,255,.24);
}

/* ---------- Home foundations (layout retained for v6.1) ---------- */
.home-week-card {
  padding: 20px 18px 18px;
}

.home-week-card-head h3 {
  font-weight: 760;
}

.week-status-pill {
  border-color: rgba(103,221,136,.16);
  background: var(--v6-accent-soft);
  color: var(--v6-accent-strong) !important;
}

.home-week-progress,
.home-today-progress,
.bar-track,
.today-overview-progress {
  background: #242b30;
}

.home-week-progress span,
.home-today-progress span,
.bar-fill,
.today-overview-progress span {
  background: linear-gradient(90deg, #56ca75, var(--v6-accent-strong));
}

.week-percent-pill {
  background: linear-gradient(145deg, var(--v6-accent-strong), #55ca74);
}

.home-hero {
  overflow: hidden;
}

.home-safe-value,
.home-budget-focus strong,
.home-glance-value,
.history-overview strong,
.insights-metric strong {
  font-variant-numeric: tabular-nums;
}

.home-today-icon,
.home-insights-icon,
.settings-icon,
.plan-row-icon,
.history-transaction-icon {
  background: var(--v6-accent-soft);
  color: var(--v6-accent);
}

.home-budget-focus {
  background:
    radial-gradient(circle at 82% 4%, rgba(103,221,136,.085), transparent 40%),
    linear-gradient(145deg, #122019, #0e1512);
}

.home-insights-entry {
  transition: border-color .18s ease, background .18s ease, transform .14s ease;
}

@media (hover:hover) and (pointer:fine) {
  .home-insights-entry:hover {
    border-color: var(--v6-line-strong);
    background:
      linear-gradient(150deg, rgba(255,255,255,.025), transparent 38%),
      linear-gradient(155deg, var(--v6-surface-hover), var(--v6-surface-1));
    transform: translateY(-1px);
  }
}

/* ---------- Activity, groceries and settings foundations ---------- */
.history-overview,
.activity-tools,
.history-opening-note,
.grocery-hub-list-card,
.grocery-hub-hero,
.grocery-recent-section,
.grocery-other-plans,
.settings-group,
.advanced-settings,
.sync-foundation-card {
  overflow: hidden;
}

.history-day-label,
.settings-section-label,
.grocery-section-label {
  color: var(--v6-text-3);
  letter-spacing: .07em;
}

.history-transaction-row,
.settings-row,
.plan-row,
.grocery-plan-row,
.grocery-hub-item-row,
.grocery-recent-row {
  transition: background .16s ease, color .16s ease;
}

@media (hover:hover) and (pointer:fine) {
  .history-transaction-row:hover,
  .settings-row:hover,
  .plan-row:hover,
  .grocery-plan-row:hover,
  .grocery-hub-item-row:hover,
  .grocery-recent-row:hover {
    background: rgba(255,255,255,.027);
  }
}

.sync-foundation-card {
  background:
    radial-gradient(circle at 90% 0%, rgba(103,221,136,.075), transparent 36%),
    linear-gradient(155deg, var(--v6-surface-2), var(--v6-surface-1));
}

.sync-foundation-metrics > span,
.sync-foundation-device-meta > span {
  border-color: rgba(229,235,231,.065);
  background: rgba(0,0,0,.10);
}

/* ---------- Sheets and dialogs ---------- */
.modal-backdrop,
.sync-resolution-backdrop {
  background: rgba(0,0,0,.73);
  backdrop-filter: blur(13px) saturate(110%);
  -webkit-backdrop-filter: blur(13px) saturate(110%);
}

.modal {
  border-color: var(--v6-line-strong);
  border-radius: 28px 28px 24px 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(103,221,136,.045), transparent 30%),
    linear-gradient(180deg, #171d21 0%, #0e1317 100%);
  box-shadow: var(--v6-shadow-float), var(--v6-inset-highlight);
}

.modal-head {
  border-bottom-color: rgba(229,235,231,.065);
  background: rgba(23,29,33,.965);
}

.modal-head h3 {
  color: var(--v6-text-1);
  font-weight: 770;
  letter-spacing: -.038em;
}

.close-btn {
  border-color: var(--v6-line);
  background: rgba(255,255,255,.035);
  color: var(--v6-text-3);
}

.close-btn:active {
  background: rgba(255,255,255,.055);
}

.today-overview-balance {
  border-color: rgba(103,221,136,.14);
  background:
    radial-gradient(circle at 88% 8%, rgba(103,221,136,.12), transparent 34%),
    linear-gradient(145deg, #142219, #0e1511);
}

.today-overview-balance > strong {
  color: var(--v6-accent-strong);
}

/* ---------- Tablet ---------- */
@media (min-width: 700px) and (max-width: 899px) {
  :root {
    --nav-h: 82px;
  }

  .app-shell {
    width: min(100%, 820px);
    padding-left: 28px;
    padding-right: 28px;
  }

  .contextual-topbar {
    min-height: 104px;
    padding-top: 20px;
  }

  .context-header-copy h1 {
    font-size: 40px;
  }

  .section {
    margin-top: 24px;
  }

  .field-row {
    gap: 14px;
  }

  .modal {
    width: min(640px, calc(100vw - 48px));
    border-radius: 28px;
  }

  .modal-head::before {
    display: none;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root {
    --desktop-sidebar-width: 240px;
    --desktop-content-max: 1320px;
  }

  body {
    background:
      radial-gradient(circle at 80% -12%, rgba(78,182,108,.085), transparent 31%),
      radial-gradient(circle at 8% 72%, rgba(72,104,124,.03), transparent 28%),
      var(--v6-bg);
  }

  .app-shell {
    inset: 0 0 0 var(--desktop-sidebar-width) !important;
    padding: 0 clamp(28px, 3vw, 48px) 72px !important;
  }

  .contextual-topbar {
    min-height: 104px !important;
    margin-bottom: 18px !important;
    padding: 23px 4px 17px !important;
    border-bottom: 1px solid rgba(229,235,231,.05);
    background:
      linear-gradient(180deg, rgba(7,10,13,.99) 0%, rgba(7,10,13,.97) 80%, rgba(7,10,13,.84) 100%) !important;
    box-shadow: none;
  }

  .context-header-copy h1 {
    font-size: 34px;
  }

  .context-header-copy p {
    font-size: 12px;
  }

  .context-header-meta[data-open-modal="today-overview"] {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  main {
    max-width: var(--desktop-content-max);
  }

  .nav {
    width: var(--desktop-sidebar-width) !important;
    padding: 16px 12px !important;
    border-right-color: rgba(229,235,231,.05);
    background: linear-gradient(90deg, #090d10 0%, rgba(9,13,16,.985) 86%, rgba(9,13,16,.72) 100%) !important;
  }

  .nav-inner {
    gap: 6px !important;
    padding: 12px !important;
    border-color: rgba(229,235,231,.075) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(155deg, rgba(20,27,31,.98), rgba(12,17,20,.98)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.32), var(--v6-inset-highlight) !important;
  }

  .desktop-nav-brand {
    min-height: 64px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom-color: rgba(229,235,231,.065);
  }

  .desktop-nav-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 13px;
  }

  .desktop-nav-brand strong {
    color: var(--v6-text-1);
    font-size: 16px;
    font-weight: 760;
  }

  .desktop-nav-brand small {
    color: var(--v6-text-3);
  }

  .nav-btn {
    height: 52px !important;
    grid-template-columns: 36px minmax(0,1fr) !important;
    gap: 9px !important;
    padding: 7px 10px !important;
    border-radius: 15px !important;
    color: #828b91 !important;
    font-weight: 700 !important;
  }

  .nav-btn:hover {
    color: var(--v6-text-2) !important;
    background: rgba(255,255,255,.027) !important;
  }

  .nav-btn.active {
    color: var(--v6-accent-strong) !important;
    background: var(--v6-accent-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(103,221,136,.055) !important;
  }

  .nav-btn .ico,
  .nav-add-btn .nav-add-orb {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
  }

  .nav-add-btn .nav-add-orb {
    background: linear-gradient(145deg, var(--v6-accent-strong), #54c973) !important;
  }

  .desktop-nav-footer {
    color: var(--v6-text-3);
  }

  #page-home.page.active,
  #page-insights.page.active,
  #page-buy.page.active,
  #page-more.page.active {
    gap: 20px !important;
  }

  #page-home.page.active {
    grid-template-columns: minmax(0,1.34fr) minmax(340px,.66fr);
  }

  #page-buy.page.active {
    grid-template-columns: minmax(0,1.30fr) minmax(340px,.70fr);
  }

  .home-activity {
    padding-right: 8px;
  }

  .modal {
    border-radius: 28px !important;
  }

  .modal-head {
    background: rgba(23,29,33,.98);
  }

  .app-shell,
  .home-activity,
  .grocery-hub-list,
  .grocery-recent-runs,
  .modal-body,
  .edit-expense-scroll,
  .insights-subpage-body,
  .grocery-run-body {
    scrollbar-color: rgba(103,221,136,.40) rgba(255,255,255,.025) !important;
  }

  .app-shell::-webkit-scrollbar-thumb,
  .home-activity::-webkit-scrollbar-thumb,
  .grocery-hub-list::-webkit-scrollbar-thumb,
  .grocery-recent-runs::-webkit-scrollbar-thumb,
  .modal-body::-webkit-scrollbar-thumb,
  .edit-expense-scroll::-webkit-scrollbar-thumb,
  .insights-subpage-body::-webkit-scrollbar-thumb,
  .grocery-run-body::-webkit-scrollbar-thumb {
    background: rgba(103,221,136,.35) !important;
    background-clip: padding-box !important;
  }
}

/* Compact laptops: retain the proven one-column fallback. */
@media (min-width: 900px) and (max-width: 1120px) {
  :root {
    --desktop-sidebar-width: 214px;
  }

  .app-shell {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1280px) {
  .app-shell {
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}

/* ---------- Motion and accessibility ---------- */
@keyframes v6SurfaceIn {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.active > .section,
.page.active > .hero,
.page.active > .settings-section,
.page.active > .sync-foundation-section,
.page.active > .advanced-settings {
  animation: v6SurfaceIn .32s cubic-bezier(.22,.8,.22,1) both;
}

.page.active > :nth-child(2) { animation-delay: 25ms; }
.page.active > :nth-child(3) { animation-delay: 50ms; }
.page.active > :nth-child(4) { animation-delay: 75ms; }
.page.active > :nth-child(5) { animation-delay: 100ms; }

@media (prefers-reduced-motion: reduce) {
  .page.active > .section,
  .page.active > .hero,
  .page.active > .settings-section,
  .page.active > .sync-foundation-section,
  .page.active > .advanced-settings {
    animation: none !important;
  }
}

/* =========================================================
   Spendly v6.0.1 — Prototype Alignment & Activity Repair (preserved)
   Corrects the mobile density regression and applies the
   approved "one clear answer first" Home hierarchy.
   ========================================================= */

.home-quick-grid {
  min-width: 0;
}

.home-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-explore-action {
  min-width: 0;
  min-height: 92px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--v6-line);
  border-radius: var(--v6-radius-md);
  background:
    linear-gradient(150deg, rgba(255,255,255,.018), transparent 42%),
    linear-gradient(155deg, var(--v6-surface-2), var(--v6-surface-1));
  color: var(--v6-text-1);
  text-align: left;
  box-shadow: var(--v6-inset-highlight);
}

.home-explore-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--v6-accent-soft);
  color: var(--v6-accent);
}

.home-explore-icon .app-icon {
  width: 19px;
  height: 19px;
}

.home-explore-action > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.home-explore-action strong {
  overflow: hidden;
  color: var(--v6-text-1);
  font-size: 13px;
  font-weight: 730;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-explore-action small {
  overflow: hidden;
  color: var(--v6-text-3);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
}

@media (hover:hover) and (pointer:fine) {
  .home-explore-action:hover {
    border-color: var(--v6-line-strong);
    background:
      linear-gradient(150deg, rgba(255,255,255,.027), transparent 42%),
      linear-gradient(155deg, var(--v6-surface-hover), var(--v6-surface-1));
    transform: translateY(-1px);
  }
}

/* Phone: restore density, then implement the approved hierarchy. */
@media (max-width: 699px) {
  :root {
    --nav-h: 86px;
  }

  .app-shell {
    width: 100%;
    max-width: 520px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  }

  .contextual-topbar {
    min-height: 78px;
    padding: 10px 0 12px;
    gap: 12px;
    background: linear-gradient(180deg, rgba(7,10,13,.99), rgba(7,10,13,.93) 76%, rgba(7,10,13,.12));
  }

  .context-header-copy h1 {
    font-size: 30px;
    line-height: 1;
    font-weight: 780;
    letter-spacing: -.052em;
  }

  .context-header-copy p {
    margin-top: 6px;
    max-width: calc(100vw - 96px);
    font-size: 12px;
    font-weight: 590;
  }

  .context-header-meta,
  .context-header-meta[type="button"] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .context-header-meta .app-icon {
    width: 20px;
    height: 20px;
  }

  .section {
    margin-top: 18px;
  }

  .section-head {
    margin: 0 3px 10px;
  }

  .section-head h3 {
    font-size: 18px;
  }

  .section-head span,
  .section-link {
    font-size: 11px;
  }

  /* Home: today first, quick context second. */
  #page-home.page.active {
    display: block;
    padding-top: 0;
  }

  #page-home:not(.active) {
    display: none;
  }

  #page-home .home-today-section {
    margin-top: 4px;
  }

  .home-hero {
    padding: 18px;
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(0,0,0,.22), var(--v6-inset-highlight);
  }

  .home-today-top {
    grid-template-columns: minmax(0,1fr) 28px;
    grid-template-areas:
      "copy action"
      "value value";
    gap: 10px 8px;
  }

  .home-today-icon {
    display: none;
  }

  .home-today-copy {
    grid-area: copy;
    gap: 3px;
  }

  .home-question {
    font-size: 13px;
    font-weight: 650;
    color: var(--v6-text-2);
    letter-spacing: -.015em;
  }

  .home-today-subtitle {
    font-size: 10px;
    color: var(--v6-text-3);
  }

  .home-safe-value {
    grid-area: value;
    margin-top: 1px;
    font-size: clamp(46px, 13.8vw, 58px);
    line-height: .94;
    font-weight: 790;
    letter-spacing: -.072em;
  }

  .home-today-add {
    grid-area: action;
    width: 28px;
    height: 28px;
    justify-self: end;
    align-self: start;
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    color: var(--v6-text-3);
  }

  .home-today-add .app-icon {
    width: 17px;
    height: 17px;
  }

  .home-today-progress {
    height: 7px;
    margin-top: 17px;
  }

  .home-today-foot {
    margin-top: 10px;
    font-size: 11px;
  }

  .home-today-foot-label {
    margin-right: 3px;
    color: var(--v6-text-3);
    font-weight: 590;
  }

  .home-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .home-quick-grid > .section {
    min-width: 0;
    margin-top: 0;
  }

  .home-week-card,
  .home-budget-focus {
    height: 100%;
    min-height: 124px;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.16), var(--v6-inset-highlight);
  }

  .home-week-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px;
  }

  .home-week-card-head h3 {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.015em;
  }

  .week-status-pill,
  .home-week-date-row,
  .week-percent-pill,
  .home-week-foot strong {
    display: none !important;
  }

  .home-week-primary {
    display: block;
  }

  .home-week-amount-line {
    display: grid;
    gap: 3px;
  }

  .home-week-amount-line strong {
    font-size: clamp(22px, 7vw, 28px);
    line-height: 1;
    font-weight: 750;
    letter-spacing: -.055em;
  }

  .home-week-amount-line span {
    color: var(--v6-text-3);
    font-size: 9px;
    font-weight: 590;
  }

  .home-week-progress-row {
    display: block;
    margin-top: auto;
  }

  .home-week-progress {
    height: 5px;
  }

  .home-week-foot {
    display: block;
    padding: 0;
    color: var(--v6-text-3);
    font-size: 9px;
    white-space: nowrap;
  }

  .home-budget-focus {
    display: block;
    background:
      radial-gradient(circle at 85% 0%, rgba(103,221,136,.08), transparent 42%),
      linear-gradient(145deg, #122019, #0e1512);
  }

  .home-budget-focus-main {
    min-height: 124px;
    justify-content: flex-start;
    padding: 14px;
  }

  .home-budget-focus-side {
    display: none;
  }

  .home-budget-focus span {
    font-size: 9px;
  }

  .home-budget-focus strong {
    margin-top: 10px;
    font-size: clamp(22px, 6.7vw, 27px);
    letter-spacing: -.055em;
  }

  .home-budget-focus small {
    margin-top: auto;
    padding-top: 10px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
  }

  .home-recent-section {
    margin-top: 24px;
  }

  .home-activity {
    border-radius: 19px;
    box-shadow: 0 12px 28px rgba(0,0,0,.15), var(--v6-inset-highlight);
  }

  .home-activity-row {
    min-height: 58px;
    grid-template-columns: 36px minmax(0,1fr) auto;
    gap: 10px;
    padding: 9px 11px;
  }

  .home-activity-icon {
    width: 36px;
    height: 36px;
  }

  .home-activity-icon .app-icon {
    width: 18px;
    height: 18px;
  }

  .home-activity-copy,
  .home-activity-side {
    gap: 3px;
  }

  .home-activity-title,
  .home-activity-amount {
    font-size: 13px;
  }

  .home-activity-meta,
  .home-activity-side small {
    font-size: 10px;
  }

  .home-explore-section {
    margin-top: 22px;
  }

  .home-explore-grid {
    gap: 8px;
  }

  .home-explore-action {
    min-height: 88px;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 16px;
  }

  .home-explore-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .home-explore-icon .app-icon {
    width: 17px;
    height: 17px;
  }

  .home-explore-action strong {
    font-size: 11px;
  }

  .home-explore-action small {
    display: none;
  }

  .home-secondary-section {
    margin-top: 20px;
  }

  .home-glance {
    border-radius: 18px;
    box-shadow: none;
  }

  .home-glance-item {
    min-height: 70px;
    padding: 13px 10px;
  }

  .home-glance-value {
    font-size: 17px;
  }

  /* Activity: compact, scannable and no oversized strips. */
  #page-insights {
    padding-top: 2px;
  }

  #page-insights .history-overview {
    grid-template-columns: minmax(0,1.35fr) minmax(92px,.65fr);
    gap: 0;
    margin-top: 4px;
    border-radius: 18px;
    background: linear-gradient(155deg, var(--v6-surface-2), var(--v6-surface-1));
    box-shadow: 0 12px 28px rgba(0,0,0,.15), var(--v6-inset-highlight);
  }

  #page-insights .history-overview-item {
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #page-insights .history-overview-item + .history-overview-item {
    border-left: 1px solid var(--v6-line);
  }

  #page-insights .history-overview-item span {
    font-size: 9px;
  }

  #page-insights .history-overview-item strong,
  #page-insights .history-overview-item.compact strong {
    margin-top: 6px;
    font-size: clamp(22px, 7vw, 27px);
    letter-spacing: -.052em;
  }

  #page-insights .activity-tools {
    gap: 8px;
    margin: 12px 0 0;
  }

  #page-insights .activity-search,
  #page-insights .activity-filter-button {
    min-height: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: none;
  }

  #page-insights .activity-search {
    grid-template-columns: 18px minmax(0,1fr);
    gap: 8px;
    padding: 0 12px;
  }

  #page-insights .activity-search input {
    height: 42px;
    font-size: 13px;
  }

  #page-insights .activity-filter-button {
    padding: 0 11px;
    font-size: 11px;
  }

  #page-insights .history-opening-note {
    min-height: 54px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--v6-line);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
    box-shadow: none;
  }

  #page-insights .history-opening-note span {
    font-size: 10px;
  }

  #page-insights .history-opening-note small {
    max-width: 230px;
    font-size: 8px;
  }

  #page-insights .history-opening-note strong {
    font-size: 12px;
  }

  #page-insights .history-section {
    margin-top: 20px;
  }

  #page-insights .history-section .section-head {
    margin-bottom: 12px;
  }

  #page-insights .history-feed {
    gap: 18px;
  }

  #page-insights .history-day-group {
    display: grid;
    gap: 7px;
  }

  #page-insights .history-day-head {
    margin: 0 5px;
    padding: 0;
    background: transparent;
  }

  #page-insights .history-day-head h4,
  #page-insights .history-day-head span {
    color: var(--v6-text-3);
    font-size: 10px;
    font-weight: 680;
  }

  #page-insights .history-day-card {
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.13), var(--v6-inset-highlight);
  }

  #page-insights .history-transaction-row {
    min-height: 58px;
    grid-template-columns: 36px minmax(0,1fr) auto 8px;
    gap: 10px;
    padding: 9px 11px;
  }

  #page-insights .history-transaction-icon {
    width: 36px;
    height: 36px;
  }

  #page-insights .history-transaction-icon .app-icon {
    width: 18px;
    height: 18px;
  }

  #page-insights .history-transaction-copy > strong {
    font-size: 13px;
  }

  #page-insights .history-transaction-copy small {
    margin-top: 3px;
    font-size: 9px;
  }

  #page-insights .history-transaction-amount {
    font-size: 12px;
  }

  #page-insights .history-transaction-chevron .app-icon {
    width: 14px;
    height: 14px;
  }

  .nav-inner {
    border-radius: 24px;
  }

  .nav-btn {
    font-size: 10px;
  }

  .nav-btn .ico {
    width: 34px;
    height: 34px;
  }

  .nav-add-btn .nav-add-orb {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 370px) {
  .home-quick-grid {
    gap: 8px;
  }

  .home-week-card,
  .home-budget-focus-main {
    min-height: 116px;
  }

  .home-week-card,
  .home-budget-focus-main {
    padding: 12px;
  }

  .home-week-amount-line strong,
  .home-budget-focus strong {
    font-size: 22px;
  }

  .home-explore-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .home-explore-action {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Desktop: purpose-built placement for the reordered Home markup. */
@media (min-width: 900px) {
  #page-home.page.active {
    grid-template-columns: minmax(0,1.22fr) minmax(340px,.78fr) !important;
    align-items: start;
  }

  #page-home .home-today-section {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  #page-home .home-quick-grid {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }

  #page-home .home-quick-grid > .section {
    min-width: 0;
    margin: 0;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  #page-home .home-week-card,
  #page-home .home-budget-focus {
    min-height: 178px;
  }

  #page-home .home-week-card {
    padding: 18px;
    gap: 12px;
  }

  #page-home .home-week-amount-line strong {
    font-size: 36px;
  }

  #page-home .home-week-date-row {
    display: none;
  }

  #page-home .home-budget-focus-main,
  #page-home .home-budget-focus-side {
    min-height: 178px;
    padding: 18px;
  }

  #page-home .home-recent-section {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  #page-home .home-activity {
    max-height: 430px;
    overflow-y: auto;
  }

  #page-home .home-explore-section {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }

  #page-home .home-overview-section {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
  }

  #page-home .home-details-section {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 0;
  }

  #page-home .home-hero {
    min-height: 246px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
  }

  #page-home .home-today-top {
    grid-template-columns: minmax(0,1fr) auto 28px;
  }

  #page-home .home-today-icon {
    display: none;
  }

  #page-home .home-safe-value {
    font-size: 60px;
  }

  .home-explore-action {
    min-height: 106px;
  }
}

/* ================================================================
   Spendly v6.0.2 — Activity wrapper cleanup (preserved)
   Keep structural wrappers invisible so only the intentional rounded
   controls and transaction cards read as surfaces.
   ================================================================ */
#page-insights .activity-tools,
#page-insights .history-day-group {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#page-insights .activity-tools {
  overflow: visible !important;
}

#page-insights .history-day-group {
  padding: 0 !important;
}

/* ================================================================
   Spendly v6.1 — Home overhaul + core icon refresh
   Approved Calm Premium hierarchy: today first, support second.
   ================================================================ */

:root {
  --v61-card: linear-gradient(150deg, rgba(20,27,32,.98), rgba(13,18,22,.98));
  --v61-card-soft: linear-gradient(150deg, rgba(18,24,29,.92), rgba(12,17,21,.96));
  --v61-card-green: linear-gradient(150deg, rgba(20,39,29,.96), rgba(12,24,18,.98));
}

.app-icon {
  stroke-width: 1.75;
}

/* Cleaner contextual headers across the refreshed experience. */
@media (max-width: 899px) {
  .contextual-topbar {
    min-height: 82px;
    padding: 11px 3px 12px;
  }

  .context-header-copy {
    gap: 4px;
  }

  .context-header-copy h1 {
    font-size: clamp(34px, 9.2vw, 39px);
    line-height: 1;
    letter-spacing: -.06em;
  }

  .context-header-copy p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.25;
  }

  .context-header-meta,
  .context-header-meta[type="button"] {
    width: 46px;
    min-width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/* ---------------- Home: one clear answer first ---------------- */
#page-home .home-today-section {
  margin-top: 8px;
}

#page-home .home-hero {
  min-height: 218px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--v6-line-strong);
  border-radius: 25px;
  background:
    radial-gradient(circle at 90% 0%, rgba(103,221,136,.09), transparent 37%),
    var(--v61-card);
  box-shadow: 0 20px 46px rgba(0,0,0,.24), var(--v6-inset-highlight);
}

.home-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#page-home .home-question {
  color: var(--v6-text-2);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.015em;
}

#page-home .home-safe-status {
  min-height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px;
  border: 1px solid rgba(103,221,136,.16);
  border-radius: 999px;
  background: rgba(103,221,136,.09);
  color: var(--v6-accent-strong);
  font-size: 10px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: .005em;
}

#page-home .home-safe-status::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(103,221,136,.06);
}

#page-home .home-safe-status.warn {
  border-color: rgba(239,182,99,.22);
  background: rgba(239,182,99,.09);
  color: var(--v6-warning);
}

#page-home .home-safe-status.bad {
  border-color: rgba(240,132,142,.22);
  background: rgba(240,132,142,.09);
  color: var(--v6-danger);
}

#page-home .home-safe-value {
  display: block;
  margin-top: 14px;
  color: var(--v6-accent);
  font-size: clamp(52px, 14.2vw, 62px);
  line-height: .92;
  font-weight: 780;
  letter-spacing: -.072em;
  font-variant-numeric: tabular-nums;
}

#page-home .home-today-progress {
  height: 7px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(216,225,220,.10);
}

#page-home .home-today-progress > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #36b85f, #75e795);
  box-shadow: 0 0 14px rgba(103,221,136,.16);
}

#page-home .home-today-progress > span.warn {
  background: linear-gradient(90deg, #d28b39, #efbe6e);
}

#page-home .home-today-progress > span.bad {
  background: linear-gradient(90deg, #d65765, #f0848e);
}

#page-home .home-today-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
}

#page-home .home-today-foot > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#page-home .home-today-foot > span:last-child {
  justify-items: end;
  text-align: right;
}

#page-home .home-today-foot small {
  color: var(--v6-text-3);
  font-size: 9px;
  line-height: 1;
  font-weight: 620;
}

#page-home .home-today-foot strong {
  color: var(--v6-text-1);
  font-size: 12px;
  line-height: 1;
  font-weight: 720;
}

#page-home .home-today-meta {
  margin-top: auto;
  padding-top: 13px;
  color: var(--v6-text-4);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 570;
}

/* Compact supporting answers. */
#page-home .home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

#page-home .home-quick-grid > .section {
  min-width: 0;
  margin-top: 0;
}

#page-home .home-week-card,
#page-home .home-budget-focus {
  min-height: 130px;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--v6-line);
  border-radius: 19px;
  background: var(--v61-card-soft);
  box-shadow: 0 12px 28px rgba(0,0,0,.14), var(--v6-inset-highlight);
}

#page-home .home-week-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px;
}

#page-home .home-week-card-head {
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#page-home .home-week-card-head h3,
#page-home .home-support-card-head > span {
  color: var(--v6-text-2);
  font-size: 10px;
  line-height: 1;
  font-weight: 660;
  letter-spacing: -.01em;
}

#page-home .week-status-pill,
#page-home .home-week-date-row,
#page-home .week-percent-pill,
#page-home .home-week-foot strong {
  display: none !important;
}

#page-home .home-week-primary {
  display: block;
  margin-top: 13px;
}

#page-home .home-week-amount-line {
  display: grid;
  gap: 5px;
}

#page-home .home-week-amount-line strong,
#page-home .home-budget-focus-main > strong {
  color: var(--v6-text-1);
  font-size: clamp(22px, 6.8vw, 28px);
  line-height: .96;
  font-weight: 740;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

#page-home .home-week-amount-line span,
#page-home .home-budget-focus-main > small {
  color: var(--v6-text-3);
  font-size: 9px;
  line-height: 1.1;
  font-weight: 580;
}

#page-home .home-week-progress-row {
  display: block;
  margin-top: auto;
  padding-top: 12px;
}

#page-home .home-week-progress,
#page-home .home-support-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(216,225,220,.09);
}

#page-home .home-week-progress > span,
#page-home .home-support-progress > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #39bb62, #6de18d);
}

#page-home .home-week-progress > span.near,
#page-home .home-support-progress > span.warn {
  background: linear-gradient(90deg, #d28b39, #efbe6e);
}

#page-home .home-week-progress > span.over,
#page-home .home-support-progress > span.bad {
  background: linear-gradient(90deg, #d65765, #f0848e);
}

#page-home .home-week-foot {
  display: block;
  margin-top: 8px;
  padding: 0;
  color: var(--v6-text-4);
  font-size: 9px;
  line-height: 1;
  font-weight: 570;
}

#page-home .home-budget-focus {
  display: block;
  background:
    radial-gradient(circle at 95% 0%, rgba(103,221,136,.08), transparent 44%),
    var(--v61-card-green);
}

#page-home .home-budget-focus-main {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px;
}

#page-home .home-support-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#page-home .home-support-card-head small {
  color: var(--v6-accent);
  font-size: 8px;
  line-height: 1;
  font-weight: 690;
  white-space: nowrap;
}

#page-home .home-budget-focus-main > strong {
  margin-top: 14px;
  color: var(--v6-accent-strong);
}

#page-home .home-budget-focus-main > small {
  margin-top: 5px;
  padding: 0;
}

#page-home .home-support-progress {
  margin-top: auto;
}

#page-home .home-budget-focus-side {
  display: none;
}

/* Recent activity remains visible but secondary to today's answer. */
#page-home .home-recent-section {
  margin-top: 24px;
}

#page-home .home-recent-section .section-head,
#page-home .home-explore-section .section-head {
  margin-bottom: 10px;
}

#page-home .home-recent-section .section-head h3,
#page-home .home-explore-section .section-head h3 {
  font-size: 18px;
}

#page-home .home-activity {
  overflow: hidden;
  border: 1px solid var(--v6-line);
  border-radius: 20px;
  background: var(--v61-card-soft);
  box-shadow: 0 14px 32px rgba(0,0,0,.14), var(--v6-inset-highlight);
}

#page-home .home-activity-row {
  min-height: 58px;
  grid-template-columns: 36px minmax(0,1fr) auto;
  gap: 10px;
  padding: 9px 12px;
}

#page-home .home-activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

#page-home .home-activity-title,
#page-home .home-activity-amount {
  font-size: 12px;
}

#page-home .home-activity-meta,
#page-home .home-activity-side small {
  font-size: 9px;
}

#page-home .home-activity-count {
  display: none;
}

/* Shortcuts use a lighter, icon-led treatment. */
#page-home .home-explore-section {
  margin-top: 22px;
}

#page-home .home-explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

#page-home .home-explore-action {
  min-width: 0;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--v6-line);
  border-radius: 17px;
  background: rgba(255,255,255,.018);
  box-shadow: none;
}

#page-home .home-explore-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103,221,136,.10);
  border-radius: 10px;
  background: var(--v6-accent-softer);
  color: var(--v6-accent);
}

#page-home .home-explore-icon .app-icon {
  width: 17px;
  height: 17px;
}

#page-home .home-explore-action > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}

#page-home .home-explore-action strong {
  color: var(--v6-text-2);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 680;
  white-space: nowrap;
}

#page-home .home-explore-action small {
  display: none;
}

#page-home .home-secondary-section {
  margin-top: 22px;
}

/* ---------------- Activity search surface cleanup ---------------- */
#page-insights .activity-search {
  overflow: hidden !important;
  background: var(--v61-card-soft) !important;
}

#page-insights .activity-search input,
#page-insights .activity-search input:hover,
#page-insights .activity-search input:focus,
#page-insights .activity-search input:active {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

#page-insights .activity-search input::-webkit-search-decoration,
#page-insights .activity-search input::-webkit-search-results-button,
#page-insights .activity-search input::-webkit-search-results-decoration {
  display: none;
}

/* Refreshed navigation/icon presence without adding visual noise. */
.nav-btn .ico,
.nav-add-btn .nav-add-orb {
  border-radius: 12px;
}

.nav-btn .ico .app-icon {
  stroke-width: 1.72;
}

.nav-btn.active .ico {
  border-color: rgba(103,221,136,.12);
  background: rgba(103,221,136,.09);
}

@media (hover:hover) and (pointer:fine) {
  #page-home .home-explore-action:hover {
    border-color: rgba(103,221,136,.15);
    background: rgba(103,221,136,.045);
    transform: translateY(-1px);
  }
}

@media (max-width: 350px) {
  #page-home .home-hero {
    min-height: 205px;
    padding: 17px;
  }

  #page-home .home-safe-value {
    font-size: 49px;
  }

  #page-home .home-week-card,
  #page-home .home-budget-focus,
  #page-home .home-budget-focus-main {
    min-height: 122px;
  }

  #page-home .home-week-card,
  #page-home .home-budget-focus-main {
    padding: 12px;
  }

  #page-home .home-week-amount-line strong,
  #page-home .home-budget-focus-main > strong {
    font-size: 21px;
  }

  #page-home .home-explore-action {
    min-height: 74px;
    padding: 9px;
  }
}

/* Desktop keeps the same hierarchy with purpose-built use of width. */
@media (min-width: 900px) {
  #page-home.page.active {
    grid-template-columns: minmax(0,1.18fr) minmax(340px,.82fr) !important;
    gap: 18px !important;
  }

  #page-home .home-hero {
    min-height: 252px;
    padding: 24px;
  }

  #page-home .home-safe-value {
    margin-top: 18px;
    font-size: clamp(62px, 5vw, 76px);
  }

  #page-home .home-today-meta {
    font-size: 11px;
  }

  #page-home .home-quick-grid {
    gap: 12px;
    margin-top: 0;
  }

  #page-home .home-week-card,
  #page-home .home-budget-focus,
  #page-home .home-budget-focus-main {
    min-height: 160px;
  }

  #page-home .home-week-card,
  #page-home .home-budget-focus-main {
    padding: 18px;
  }

  #page-home .home-week-amount-line strong,
  #page-home .home-budget-focus-main > strong {
    font-size: 34px;
  }

  #page-home .home-budget-focus {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(110px,.75fr);
  }

  #page-home .home-budget-focus-side {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px;
    border-left: 1px solid var(--v6-line);
  }

  #page-home .home-budget-focus-side > span {
    color: var(--v6-text-3);
    font-size: 10px;
    font-weight: 650;
  }

  #page-home .home-budget-focus-side > strong {
    margin-top: 8px;
    color: var(--v6-text-1);
    font-size: 32px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -.05em;
  }

  #page-home .home-budget-focus-side > small {
    margin-top: 7px;
    color: var(--v6-text-3);
    font-size: 9px;
  }

  #page-home .home-recent-section {
    margin-top: 0;
  }

  #page-home .home-activity {
    max-height: 454px;
  }

  #page-home .home-explore-action {
    min-height: 92px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px;
  }

  #page-home .home-explore-action small {
    display: block;
    overflow: hidden;
    color: var(--v6-text-4);
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ======================================================================
   Spendly v6.2 — iPhone 17 Pro Max fit, Activity cleanup and nav polish
   ====================================================================== */

/* Give every phone tab a slightly calmer edge gutter, while still fitting
   compact iPhones and respecting landscape safe areas. */
@media (max-width: 699px) {
  .app-shell {
    padding-left: max(clamp(18px, 4.8vw, 22px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(18px, 4.8vw, 22px), env(safe-area-inset-right)) !important;
  }

  .nav {
    padding-left: max(clamp(10px, 3vw, 14px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(10px, 3vw, 14px), env(safe-area-inset-right)) !important;
  }

  /* One predictable Add control: the orb moves, the label stays centred. */
  .nav-inner {
    height: 68px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .nav-btn {
    height: 60px !important;
    grid-template-rows: 36px 14px !important;
  }

  .nav-add-btn {
    height: 60px !important;
    grid-template-rows: 44px 14px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 1px !important;
    transform: none !important;
  }

  .nav-add-btn .nav-add-orb {
    width: 50px !important;
    height: 50px !important;
    margin: -8px auto 0 !important;
    border-radius: 50% !important;
    transform: none !important;
  }

  .nav-add-btn .nav-add-orb .app-icon {
    width: 24px !important;
    height: 24px !important;
    transform: none !important;
    stroke-width: 2 !important;
  }

  .nav-add-btn > span:last-child {
    align-self: center !important;
    margin: 0 !important;
    color: var(--v6-text-2) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

@media (max-width: 370px) {
  .app-shell {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .nav-inner {
    height: 62px !important;
  }

  .nav-btn {
    height: 54px !important;
    grid-template-rows: 32px 13px !important;
  }

  .nav-add-btn {
    height: 54px !important;
    grid-template-rows: 40px 13px !important;
  }

  .nav-add-btn .nav-add-orb {
    width: 46px !important;
    height: 46px !important;
    margin-top: -7px !important;
  }

  .nav-add-btn > span:last-child {
    font-size: 9px !important;
  }
}

/* The Activity page now moves straight from tools into the transaction list. */
#page-insights .history-section {
  margin-top: 22px;
}

/* ======================================================================
   Spendly v6.2 — Global Mobile Shell & Add Expense Overhaul
   ====================================================================== */

/* A single, uninterrupted canvas. The previous sticky header gradient and
   negative full-bleed margins made the title area read as a separate box. */
@media (max-width: 699px) {
  html,
  body {
    background: #070a0d !important;
  }

  body {
    background-image: none !important;
  }

  body::before {
    display: none !important;
  }

  .app-shell {
    width: 100% !important;
    max-width: 560px !important;
    padding-left: max(clamp(20px, 5.8vw, 26px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(20px, 5.8vw, 26px), env(safe-area-inset-right)) !important;
    background: transparent !important;
  }

  main,
  .page,
  .page.active {
    background: transparent !important;
  }

  .contextual-topbar {
    min-height: 82px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 2px 13px !important;
    border: 0 !important;
    background: #070a0d !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .contextual-topbar::before,
  .contextual-topbar::after {
    display: none !important;
  }

  .context-header-copy h1,
  .context-header-copy p {
    margin-left: 0 !important;
  }

  .section-head {
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Keep the navigation aligned with the calmer content gutter. */
  .nav {
    padding-left: max(clamp(14px, 4vw, 18px), env(safe-area-inset-left)) !important;
    padding-right: max(clamp(14px, 4vw, 18px), env(safe-area-inset-right)) !important;
  }
}

@media (max-width: 370px) {
  .app-shell {
    padding-left: max(17px, env(safe-area-inset-left)) !important;
    padding-right: max(17px, env(safe-area-inset-right)) !important;
  }

  .nav {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
}

/* ---------------- Add Expense: amount first, category second ---------------- */
.modal-backdrop[data-kind="spend"] .modal {
  border-color: rgba(224, 232, 227, .10);
  background:
    radial-gradient(circle at 84% -8%, rgba(103, 221, 136, .055), transparent 30%),
    linear-gradient(180deg, #151a1e 0%, #0d1114 100%);
}

.modal-backdrop[data-kind="spend"] .modal-head {
  background: rgba(19, 24, 28, .985);
}

.modal-backdrop[data-kind="spend"] .modal-body {
  padding-top: 12px;
}

.native-spend-form {
  gap: 14px;
}

.native-spend-form .spend-sheet-summary {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(103, 221, 136, .11);
  background: rgba(103, 221, 136, .065);
  color: var(--v6-text-3);
}

.native-spend-form .spend-sheet-summary strong {
  color: var(--v6-accent-strong);
}

.native-spend-form .spend-amount-field {
  padding: 2px 0 4px;
}

.native-spend-form .spend-amount-field > label {
  margin-bottom: 4px;
  color: var(--v6-text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.native-spend-form .spend-amount-input {
  min-height: 84px;
}

.native-spend-form .spend-amount-input > span {
  color: var(--v6-accent);
  font-size: 29px;
}

.native-spend-form .spend-amount-input input {
  height: 78px;
  color: var(--v6-text-1);
  font-size: clamp(46px, 14.8vw, 58px);
  font-weight: 760;
}

.expense-category-field {
  min-width: 0;
}

.expense-category-field > label {
  margin: 0 0 9px 2px;
  color: var(--v6-text-3);
  font-size: 11px;
  font-weight: 690;
}

.expense-category-picker {
  min-width: 0;
}

.expense-category-native {
  display: none !important;
}

.expense-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.expense-category-choice {
  min-width: 0;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0 11px;
  overflow: hidden;
  border: 1px solid rgba(229, 235, 231, .075);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
  color: var(--v6-text-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .12s ease;
}

.expense-category-choice .app-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

.expense-category-choice span {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-category-choice.active {
  border-color: rgba(103, 221, 136, .22);
  background: rgba(103, 221, 136, .105);
  color: var(--v6-accent-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 8px 20px rgba(0, 0, 0, .12);
}

.expense-category-choice:active {
  transform: scale(.985);
}

.native-spend-form .native-expense-main,
.edit-expense-form .native-expense-main {
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(229, 235, 231, .08);
  border-radius: 17px;
  background: rgba(255, 255, 255, .022);
}

.native-spend-form .native-expense-main > .field,
.edit-expense-form .native-expense-main > .field {
  padding: 11px 13px 12px;
}

.native-spend-form .native-expense-main input,
.edit-expense-form .native-expense-main input {
  min-height: 30px;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.native-spend-form .native-expense-main input:focus,
.edit-expense-form .native-expense-main input:focus {
  border: 0;
  box-shadow: none;
}

.native-spend-form .expense-grocery-entry,
.edit-expense-form .expense-grocery-entry {
  border-radius: 17px;
}

.spend-save-note {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 1px 4px -2px;
  color: var(--v6-text-4);
  text-align: center;
}

.spend-save-note > span {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--v6-accent);
  box-shadow: 0 0 0 4px rgba(103, 221, 136, .055);
}

.spend-save-note small {
  min-width: 0;
  font-size: 9px;
  line-height: 1.35;
  font-weight: 570;
}

.native-spend-form .spend-save-btn {
  min-height: 54px !important;
  border-radius: 17px;
  font-weight: 740;
  box-shadow: 0 14px 32px rgba(55, 172, 87, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Edit Expense receives the same category system and spacing without
   disturbing its separate scrollable footer architecture. */
.edit-expense-scroll > .expense-category-field {
  margin-top: 14px;
}

.edit-expense-scroll > .native-expense-main {
  margin-top: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .expense-category-choice:hover {
    border-color: rgba(229, 235, 231, .14);
    background: rgba(255, 255, 255, .04);
    color: var(--v6-text-2);
  }

  .expense-category-choice.active:hover {
    border-color: rgba(103, 221, 136, .30);
    background: rgba(103, 221, 136, .13);
    color: var(--v6-accent-strong);
  }
}

@media (min-width: 700px) {
  .modal-backdrop[data-kind="spend"] .modal {
    width: min(680px, calc(100vw - 64px)) !important;
    max-width: 680px !important;
  }

  .modal-backdrop[data-kind="spend"] .modal-body {
    padding: 18px 24px 24px;
  }

  .expense-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .expense-category-choice {
    min-height: 48px;
  }

  .native-spend-form .spend-amount-input input {
    font-size: 58px;
  }
}

@media (max-width: 350px) {
  .expense-category-grid {
    gap: 7px;
  }

  .expense-category-choice {
    min-height: 40px;
    padding: 0 9px;
  }

  .expense-category-choice span {
    font-size: 10px;
  }
}

/* =========================================================
   Spendly v6.2.1 — Add Expense simplification
   ========================================================= */

/* The amount is one visual unit rather than a browser input box plus
   a detached currency mark. */
.native-spend-form .spend-amount-field {
  padding: 4px 0 8px;
}

.native-spend-form .spend-amount-field > label {
  margin-bottom: 8px;
  text-align: center;
}

.native-spend-form .spend-amount-input {
  position: relative;
  width: max-content;
  max-width: 100%;
  min-height: 88px;
  display: grid;
  grid-template-columns: max-content minmax(0, 6.4ch);
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0 auto;
  padding: 0 8px 13px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.native-spend-form .spend-amount-input::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 1px;
  border-radius: 999px;
  background: rgba(229, 235, 231, .12);
  transition: background .16s ease, box-shadow .16s ease;
}

.native-spend-form .spend-amount-input:focus-within::after {
  background: rgba(103, 221, 136, .62);
  box-shadow: 0 0 0 3px rgba(103, 221, 136, .055);
}

.native-spend-form .spend-amount-input > span {
  align-self: baseline;
  color: var(--v6-accent-strong);
  font-size: clamp(38px, 10.5vw, 47px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.045em;
  transform: none;
}

.native-spend-form .spend-amount-input input {
  width: 6.4ch;
  max-width: 6.4ch;
  min-width: 0;
  height: auto;
  min-height: 72px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v6-text-1);
  font-size: clamp(52px, 15.5vw, 64px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: -.07em;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.native-spend-form .spend-amount-input input:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.native-spend-form .spend-amount-input input::placeholder {
  color: rgba(174, 183, 179, .38);
  opacity: 1;
}

/* One compact category control. iOS opens its familiar native picker,
   while desktop keeps a keyboard-accessible dropdown. */
.expense-category-field > label {
  margin-bottom: 8px;
}

.expense-category-picker {
  width: 100%;
}

.expense-category-select-shell {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 11px;
  padding: 0 15px;
  overflow: hidden;
  border: 1px solid rgba(229, 235, 231, .09);
  border-radius: 17px;
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.expense-category-select-shell:focus-within {
  border-color: rgba(103, 221, 136, .30);
  background: rgba(103, 221, 136, .055);
  box-shadow: 0 0 0 3px rgba(103, 221, 136, .07), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.expense-category-select-icon,
.expense-category-select-chevron {
  display: grid;
  place-items: center;
  color: var(--v6-accent-strong);
  pointer-events: none;
}

.expense-category-select-chevron {
  color: var(--v6-text-4);
}

.expense-category-select-icon .app-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.expense-category-select-chevron .app-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

.expense-category-native {
  display: block !important;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v6-text-1);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 680;
  letter-spacing: -.015em;
  -webkit-appearance: none;
  appearance: none;
}

.expense-category-native:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.expense-category-grid,
.expense-category-choice {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .expense-category-select-shell:hover {
    border-color: rgba(229, 235, 231, .15);
    background: rgba(255, 255, 255, .04);
  }
}

@media (min-width: 700px) {
  .native-spend-form .spend-amount-input input {
    font-size: 64px;
  }
}

@media (max-width: 350px) {
  .native-spend-form .spend-amount-input {
    grid-template-columns: max-content minmax(0, 5.9ch);
  }

  .native-spend-form .spend-amount-input input {
    width: 5.9ch;
    max-width: 5.9ch;
    font-size: 50px;
  }
}


/* =========================================================
   Spendly v6.3 — Activity + Groceries overhaul
   ========================================================= */

/* Pending v6.2.1 amount-field correction: keyboard-safe width and
   optical centring on the largest iPhones. */
.native-spend-form .spend-amount-input {
  width: min(100%, 310px);
  grid-template-columns: max-content minmax(0, 5.55ch);
  justify-content: start;
  gap: 5px;
  margin-inline: auto;
  padding-inline: 2px;
  transform: translateX(-7px);
}
.native-spend-form .spend-amount-input::after { left: 4px; right: 4px; }
.native-spend-form .spend-amount-input input {
  width: 5.55ch;
  max-width: 5.55ch;
  font-size: clamp(48px, 13.6vw, 60px);
}
@media (max-width: 370px) {
  .native-spend-form .spend-amount-input {
    width: min(100%, 270px);
    grid-template-columns: max-content minmax(0, 5.25ch);
    transform: translateX(-5px);
  }
  .native-spend-form .spend-amount-input input {
    width: 5.25ch;
    max-width: 5.25ch;
    font-size: 47px;
  }
}
@media (min-width: 700px) {
  .native-spend-form .spend-amount-input { width: 350px; transform: none; }
  .native-spend-form .spend-amount-input input { font-size: 60px; }
}

/* Activity: fast scan first, deeper filters second. */
#page-insights .history-overview {
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.085);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(23,29,32,.92), rgba(13,18,20,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
}
#page-insights .history-overview-item {
  min-height: 104px;
  padding: 20px 22px;
}
#page-insights .activity-tools {
  gap: 10px;
  margin-top: 16px;
  padding: 0;
  background: transparent !important;
}
#page-insights .activity-search,
#page-insights .activity-filter-button {
  min-height: 54px;
  border-color: rgba(229,235,231,.085);
  background: rgba(255,255,255,.026);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
#page-insights .activity-search:focus-within {
  border-color: rgba(103,221,136,.26);
  background: rgba(103,221,136,.045);
  box-shadow: 0 0 0 3px rgba(103,221,136,.06);
}
#page-insights .activity-quick-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid rgba(229,235,231,.065);
  border-radius: 17px;
  background: rgba(255,255,255,.018);
}
#page-insights .activity-quick-periods button {
  min-width: 0;
  min-height: 36px;
  padding: 0 7px;
  border-radius: 12px;
  color: var(--v6-text-4);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  transition: background .16s ease,color .16s ease,transform .12s ease;
}
#page-insights .activity-quick-periods button.active {
  background: rgba(103,221,136,.12);
  color: var(--v6-accent-strong);
  box-shadow: inset 0 0 0 1px rgba(103,221,136,.10);
}
#page-insights .activity-quick-periods button:active { transform: scale(.98); }
#page-insights .activity-filter-chips { margin-top: 9px; }
#page-insights .history-section { margin-top: 24px; }
#page-insights .history-section .section-head { padding-inline: 4px; }
#page-insights .history-feed { gap: 22px; }
#page-insights .history-day-group { display: grid; gap: 9px; }
#page-insights .history-day-head {
  min-height: 22px;
  padding: 0 7px;
  background: transparent !important;
}
#page-insights .history-day-head h4,
#page-insights .history-day-head span {
  color: var(--v6-text-4);
  font-size: 11px;
  font-weight: 790;
  letter-spacing: .01em;
}
#page-insights .history-day-card {
  overflow: hidden;
  border-color: rgba(229,235,231,.085);
  border-radius: 23px;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}
#page-insights .history-transaction-row {
  min-height: 72px;
  grid-template-columns: 44px minmax(0,1fr) auto 16px;
  gap: 11px;
  padding: 10px 14px;
}
#page-insights .history-transaction-row:hover { background: rgba(255,255,255,.026); }
#page-insights .history-transaction-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}
#page-insights .history-transaction-copy > strong { font-size: 14px; }
#page-insights .history-transaction-copy small {
  margin-top: 4px;
  color: var(--v6-text-4);
  font-size: 10px;
}
#page-insights .history-transaction-amount { font-size: 14px; font-weight: 800; }
#page-insights .history-empty {
  min-height: 250px;
  padding: 34px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.018);
}

/* Groceries: a compact command centre around the next shop. */
#page-buy.grocery-hub-page { gap: 16px; }
#page-buy .grocery-hub-hero {
  padding: 19px;
  border-color: rgba(103,221,136,.16);
  border-radius: 27px;
  background:
    radial-gradient(circle at 92% 8%, rgba(82,199,114,.13), transparent 38%),
    linear-gradient(145deg, rgba(20,36,27,.96), rgba(12,18,15,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#page-buy .grocery-hub-hero-top { gap: 10px; }
#page-buy .grocery-hub-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
}
#page-buy .grocery-hub-copy { margin-top: 15px; }
#page-buy .grocery-hub-copy h2 { font-size: clamp(25px,7vw,31px); }
#page-buy .grocery-hub-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 17px;
}
#page-buy .grocery-hub-summary > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(229,235,231,.07);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
#page-buy .grocery-hub-summary span { color: var(--v6-text-4); font-size: 11px; font-weight: 750; }
#page-buy .grocery-hub-summary strong { color: var(--v6-text-1); font-size: 19px; font-weight: 820; }
#page-buy .grocery-hub-progress { margin-top: 14px; }
#page-buy .grocery-hub-start {
  min-height: 59px;
  margin-top: 14px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(74,196,109,.16);
}
#page-buy .grocery-hub-start-icon { width: 36px; height: 36px; border-radius: 12px; }
#page-buy .grocery-hub-list-card,
#page-buy .grocery-recent-section,
#page-buy .grocery-other-plans {
  border-color: rgba(229,235,231,.08);
  border-radius: 25px;
  background: rgba(255,255,255,.020);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
#page-buy .grocery-hub-list-card { padding: 17px; }
#page-buy .grocery-hub-section-head h3 { font-size: 20px; }
#page-buy .grocery-hub-section-head p { font-size: 11px; }
#page-buy .grocery-hub-detail-add {
  min-height: 36px;
  border-radius: 13px;
  background: rgba(103,221,136,.065);
}
#page-buy .grocery-hub-quick-add {
  min-height: 54px;
  margin-top: 14px;
  border: 1px solid rgba(229,235,231,.085);
  border-radius: 17px;
  background: rgba(255,255,255,.026);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
#page-buy .grocery-hub-quick-add:focus-within {
  border-color: rgba(103,221,136,.26);
  box-shadow: 0 0 0 3px rgba(103,221,136,.055);
}
#page-buy .grocery-hub-quick-add input { min-width: 0; padding-left: 15px; color: var(--v6-text-1); }
#page-buy .grocery-hub-quick-add input::placeholder { color: var(--v6-text-5); opacity: 1; }
#page-buy .grocery-hub-quick-add button {
  width: 42px;
  height: 42px;
  margin-right: 5px;
  border-radius: 13px;
  background: var(--v6-accent);
  color: #061009;
}
#page-buy .grocery-hub-toolbar { margin-top: 8px; }
#page-buy .grocery-plan-groups { display: grid; gap: 12px; }
#page-buy .grocery-plan-group { display: grid; gap: 8px; }
#page-buy .grocery-plan-group-head { padding: 0 5px; }
#page-buy .grocery-plan-group-head span,
#page-buy .grocery-plan-group-head small { color: var(--v6-text-4); font-size: 10px; font-weight: 780; }
#page-buy .grocery-plan-group .plan-list {
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 20px;
  background: rgba(5,9,10,.20);
}
#page-buy .grocery-plan-row {
  min-height: 68px;
  padding: 9px 12px;
}
#page-buy .grocery-quantity-badge {
  min-width: 45px;
  height: 43px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 11px;
}
#page-buy .grocery-plan-row .plan-row-copy strong { font-size: 14px; }
#page-buy .grocery-plan-row .plan-row-copy small { margin-top: 4px; font-size: 9px; }
#page-buy .grocery-purchased-section { opacity: .94; }
#page-buy .grocery-hub-section-head.compact { padding: 16px 16px 10px; }
#page-buy .grocery-recent-row {
  min-height: 61px;
  padding: 9px 13px;
}
#page-buy .grocery-recent-icon { width: 38px; height: 38px; border-radius: 13px; }
#page-buy .grocery-recent-copy strong { font-size: 13px; }
#page-buy .grocery-recent-copy small { margin-top: 3px; font-size: 9px; }
#page-buy .grocery-recent-amount { font-size: 13px; }
#page-buy .grocery-list-empty,
#page-buy .grocery-recent-empty {
  min-height: 170px;
  border: 1px dashed rgba(229,235,231,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.012);
}

/* Store Mode: preserve every action while improving scanability and keyboard fit. */
.grocery-run-subpage { background: #080c0d; }
.grocery-run-header {
  min-height: calc(62px + env(safe-area-inset-top));
  padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  border-bottom-color: rgba(229,235,231,.07);
  background: rgba(8,12,13,.92);
  backdrop-filter: blur(18px);
}
.grocery-run-header strong { font-size: 16px; letter-spacing: -.025em; }
.grocery-run-body {
  width: min(100%, 760px);
  margin-inline: auto;
  padding: 14px max(16px, env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.grocery-run-store-card,
.grocery-run-quick-add,
.grocery-run-item,
.grocery-run-shop-footer {
  border-color: rgba(229,235,231,.08);
  background: rgba(255,255,255,.025);
}
.grocery-run-store-card { border-radius: 20px; }
.grocery-run-quick-add { min-height: 52px; border-radius: 17px; }
.grocery-run-group-head { padding-inline: 5px; }
.grocery-run-list { gap: 9px; }
.grocery-run-item {
  padding: 12px;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
.grocery-run-item.selected {
  border-color: rgba(103,221,136,.22);
  background: rgba(103,221,136,.055);
}
.grocery-run-check { width: 35px; height: 35px; border-radius: 12px; }
.grocery-run-item-controls { gap: 9px; }
.grocery-run-price { min-width: 0; }
.grocery-run-shop-footer {
  bottom: calc(5px + env(safe-area-inset-bottom));
  margin-inline: 0;
  padding: 10px;
  border-radius: 19px;
}

@media (max-width: 370px) {
  #page-insights .activity-quick-periods { gap: 4px; padding: 4px; }
  #page-insights .activity-quick-periods button { padding-inline: 4px; font-size: 9px; }
  #page-insights .history-transaction-row { grid-template-columns: 40px minmax(0,1fr) auto 14px; padding-inline: 10px; }
  #page-buy .grocery-hub-summary > div { padding-inline: 10px; }
}

@media (min-width: 760px) {
  #page-insights .activity-quick-periods { width: min(520px,100%); }
  #page-insights .history-feed { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  #page-buy.grocery-hub-page {
    grid-template-columns: minmax(0,1.5fr) minmax(300px,.75fr);
    align-items: start;
  }
  #page-buy .grocery-hub-hero { grid-column: 2; grid-row: 1; position: sticky; top: 18px; }
  #page-buy .grocery-hub-list-card { grid-column: 1; grid-row: 1 / span 3; }
  #page-buy .grocery-purchased-section { grid-column: 2; grid-row: 2; }
  #page-buy .grocery-recent-section:not(.grocery-purchased-section) { grid-column: 2; grid-row: 3; }
  #page-buy .grocery-other-plans { grid-column: 1 / -1; }
}

/* Ensure inactive quick-range controls stay quiet instead of inheriting the
   global button fill on desktop browsers. */
#page-insights .activity-quick-periods button:not(.active) {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* v6.3.1 — Store Mode footer visibility and immersive layout.
   Store Mode is a focused workflow, so the main navigation must never sit
   above its subtotal / confirmation footer. */
body.grocery-run-open .nav {
  display: none !important;
}

body.grocery-run-open .grocery-run-subpage {
  left: 0 !important;
  width: 100% !important;
  padding-bottom: 0 !important;
  z-index: 120;
}

body.grocery-run-open .grocery-run-body {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

body.grocery-run-open .grocery-run-shop-footer {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 12;
  width: min(calc(100% - 32px), 728px);
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 -16px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.025);
}

@media (max-width: 370px) {
  body.grocery-run-open .grocery-run-shop-footer {
    width: calc(100% - 22px);
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 760px) {
  body.grocery-run-open .grocery-run-header,
  body.grocery-run-open .grocery-run-body {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin-inline: auto;
  }

  body.grocery-run-open .grocery-run-shop-footer {
    width: min(calc(100% - 56px), 900px);
  }
}

/* =========================================================
   Spendly v6.4 — Insights, Plan and Settings overhaul
   Keeps all budgeting, grocery, sync and storage behaviour intact.
   ========================================================= */

/* ---------- Insights: one clear story, then drill-down ---------- */
.insights-subpage {
  background:
    radial-gradient(circle at 50% -20%, rgba(83, 207, 119, .075), transparent 34%),
    #080b0d;
}

.insights-subpage-header {
  min-height: calc(72px + env(safe-area-inset-top));
  align-items: end;
  padding: calc(10px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  border-bottom-color: rgba(229,235,231,.065);
  background: rgba(8,11,13,.91);
  box-shadow: 0 10px 34px rgba(0,0,0,.18);
}

.insights-header-copy h1 {
  font-size: 23px;
  font-weight: 820;
  letter-spacing: -.05em;
}

.insights-header-copy p {
  margin-top: 3px;
  color: var(--v6-text-4);
  font-size: 10px;
  font-weight: 650;
}

.insights-period-label {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(103,221,136,.13);
  border-radius: 999px;
  background: rgba(103,221,136,.055);
  color: var(--v6-accent);
  font-size: 10px;
  font-weight: 800;
}

.insights-subpage-body {
  width: min(100%, 1120px);
  padding: 14px max(18px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.insights-controls {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 9px;
  padding: 2px 0 12px;
  background: linear-gradient(180deg, #080b0d 72%, rgba(8,11,13,0));
}

.insights-scope-switch,
.insights-section-tabs {
  border: 1px solid rgba(229,235,231,.075);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.insights-scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 15px;
}

.insights-scope-btn,
.insights-section-btn {
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--v6-text-4);
  font-size: 10px;
  font-weight: 780;
}

.insights-scope-btn.active,
.insights-section-btn.active {
  background: rgba(255,255,255,.07);
  color: var(--v6-text-1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 4px 12px rgba(0,0,0,.16);
}

.insights-panel {
  display: grid;
  gap: 12px;
  animation: insightsPanelV64 .18s ease both;
}

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

.insights-overview-hero {
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(103,221,136,.15);
  border-radius: 27px;
  background:
    radial-gradient(circle at 88% 5%, rgba(103,221,136,.13), transparent 37%),
    linear-gradient(145deg, #132019, #0d1411 70%);
  box-shadow: 0 20px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
}

.insights-overview-hero-head,
.insights-overview-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.insights-overview-hero-head > span {
  color: var(--v6-text-3);
  font-size: 12px;
  font-weight: 760;
}

.insights-overview-hero-head > strong {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(103,221,136,.16);
  border-radius: 999px;
  background: rgba(103,221,136,.075);
  color: var(--v6-accent);
  font-size: 10px;
  font-weight: 820;
}

.insights-overview-hero-head > strong.watch {
  border-color: rgba(240,179,95,.22);
  background: rgba(240,179,95,.09);
  color: #f0bd75;
}

.insights-overview-hero-head > strong.over {
  border-color: rgba(239,125,125,.22);
  background: rgba(239,125,125,.09);
  color: #f09696;
}

.insights-overview-hero-value {
  margin-top: 16px;
  color: var(--v6-accent);
  font-size: clamp(44px, 13vw, 66px);
  line-height: .95;
  font-weight: 850;
  letter-spacing: -.072em;
  font-variant-numeric: tabular-nums;
}

.insights-overview-progress {
  height: 8px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
}

.insights-overview-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fca72, #7ae79a);
  transition: width .28s ease;
}

.insights-overview-progress > span.watch { background: linear-gradient(90deg, #da9142, #f2c06f); }
.insights-overview-progress > span.over { background: linear-gradient(90deg, #dd676f, #f08a91); }

.insights-overview-hero-foot {
  margin-top: 11px;
  color: var(--v6-text-4);
  font-size: 10px;
  font-weight: 680;
}

.insights-overview-hero-foot strong {
  color: var(--v6-text-2);
  font-weight: 780;
}

.insights-metrics-refined {
  gap: 9px;
}

.insights-metrics-refined .insights-metric {
  min-height: 98px;
  padding: 14px;
  border-color: rgba(229,235,231,.075);
  border-radius: 20px;
  background: rgba(255,255,255,.023);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.insights-metrics-refined .insights-metric span {
  color: var(--v6-text-4);
  font-size: 9px;
  letter-spacing: .055em;
}

.insights-metrics-refined .insights-metric strong {
  font-size: clamp(19px, 5.7vw, 25px);
}

.insights-context-note {
  padding: 0 5px;
  color: var(--v6-text-5);
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.insights-card {
  padding: 18px;
  border-color: rgba(229,235,231,.075);
  border-radius: 26px;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.insights-card-head {
  align-items: end;
}

.insights-card-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--v6-accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.insights-card-head h2 {
  font-size: 21px;
}

.insights-card-head > strong {
  color: var(--v6-text-1);
  font-size: 17px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.insights-donut-layout {
  gap: 22px;
}

.insights-category-row {
  min-height: 34px;
  border-bottom-color: rgba(229,235,231,.055);
}

.insights-chart-svg {
  margin-top: 8px;
}

/* ---------- Plan: dedicated workspace, removed from Groceries clutter ---------- */
.grocery-plan-entry {
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 23px;
  background: rgba(255,255,255,.019);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}

.grocery-plan-entry-button {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 0;
  background: transparent;
  color: var(--v6-text-1);
  text-align: left;
}

.grocery-plan-entry-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--v6-accent-soft);
  color: var(--v6-accent);
}

.grocery-plan-entry-icon .app-icon { width: 21px; height: 21px; }
.grocery-plan-entry-copy { min-width: 0; display: grid; gap: 4px; }
.grocery-plan-entry-copy strong { font-size: 14px; font-weight: 780; }
.grocery-plan-entry-copy small { overflow: hidden; color: var(--v6-text-4); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.grocery-plan-entry-summary { color: var(--v6-text-3); font-size: 10px; font-weight: 760; white-space: nowrap; }
.grocery-plan-entry-chevron { color: var(--v6-text-5); }
.grocery-plan-entry-chevron .app-icon { width: 17px; height: 17px; }

.plan-subpage {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(103,221,136,.065), transparent 31%),
    #080b0d;
  color: var(--v6-text-1);
}

.plan-subpage.show {
  display: flex;
  animation: insightsPageIn .2s ease both;
}

.plan-subpage-header {
  flex: 0 0 auto;
  min-height: calc(72px + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: end;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(229,235,231,.065);
  background: rgba(8,11,13,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.plan-subpage-back,
.insights-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,235,231,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--v6-text-3);
}

.plan-subpage-header-copy h1 {
  margin: 0;
  font-size: 23px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: -.05em;
}

.plan-subpage-header-copy p {
  margin: 4px 0 0;
  color: var(--v6-text-4);
  font-size: 10px;
  font-weight: 650;
}

.plan-subpage-badge {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(103,221,136,.13);
  border-radius: 999px;
  background: rgba(103,221,136,.055);
  color: var(--v6-accent);
  font-size: 10px;
  font-weight: 800;
}

.plan-subpage-body {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 16px max(18px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.plan-overview {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}

.plan-overview article {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 21px;
  background: rgba(255,255,255,.023);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.plan-overview article span,
.plan-overview article small {
  overflow: hidden;
  color: var(--v6-text-4);
  font-size: 9px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-overview article strong {
  color: var(--v6-text-1);
  font-size: clamp(22px,6.5vw,29px);
  font-weight: 830;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.plan-overview-total {
  grid-column: 1 / -1;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  border: 1px solid rgba(103,221,136,.14);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(21,40,28,.88), rgba(12,20,15,.88));
}

.plan-overview-total span { color: var(--v6-text-3); font-size: 11px; font-weight: 730; }
.plan-overview-total strong { color: var(--v6-accent); font-size: 22px; font-weight: 840; letter-spacing: -.04em; }

.plan-workspace {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.plan-workspace-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 24px;
  background: rgba(255,255,255,.019);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}

.plan-workspace-card .plan-panel-head {
  min-height: 52px;
  margin: 0 1px 12px;
}

.plan-workspace-card .plan-panel-head h2 {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.04em;
}

.plan-card-kicker {
  color: var(--v6-accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.plan-workspace-card .plan-list {
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.07);
  border-radius: 20px;
  background: rgba(5,8,10,.22);
}

.plan-workspace-card .plan-row {
  min-height: 68px;
  padding: 10px 12px;
}

.plan-workspace-card .plan-empty {
  min-height: 220px;
}

body.plan-open .nav { display: none !important; }
body.plan-open .plan-subpage { left: 0 !important; width: 100% !important; }

/* ---------- Settings: calmer hierarchy, technical data on demand ---------- */
#page-more {
  gap: 18px;
}

.settings-overview {
  min-height: 86px;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid rgba(103,221,136,.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 0%, rgba(103,221,136,.11), transparent 35%),
    linear-gradient(145deg, #121c17, #0d1411);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
}

.settings-overview-mark {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.settings-overview-mark img { width: 100%; height: 100%; object-fit: cover; }
.settings-overview-copy { min-width: 0; display: grid; gap: 4px; }
.settings-overview-copy strong { font-size: 16px; font-weight: 800; }
.settings-overview-copy span { overflow: hidden; color: var(--v6-text-4); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.settings-overview-value { display: grid; justify-items: end; gap: 4px; }
.settings-overview-value small { color: var(--v6-text-4); font-size: 8px; font-weight: 740; text-transform: uppercase; letter-spacing: .05em; }
.settings-overview-value strong { color: var(--v6-accent); font-size: 18px; font-weight: 830; letter-spacing: -.04em; }

#page-more .settings-section {
  margin-top: 0;
}

#page-more .settings-section-title {
  margin: 0 7px 8px;
  color: var(--v6-text-4);
  font-size: 9px;
  letter-spacing: .09em;
}

#page-more .settings-list,
#page-more .advanced-settings {
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 22px;
  background: rgba(255,255,255,.019);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.016);
}

#page-more .settings-row {
  min-height: 68px;
  padding: 10px 13px;
}

#page-more .settings-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
}

#page-more .settings-copy strong { font-size: 13px; }
#page-more .settings-copy small { margin-top: 4px; font-size: 9px; }

.sync-foundation-card {
  padding: 15px;
  border-radius: 23px;
}

.sync-foundation-status {
  align-items: flex-start;
}

.sync-foundation-copy strong { font-size: 14px; }
.sync-foundation-copy small { margin-top: 4px; font-size: 9px; line-height: 1.35; }

.sync-foundation-compact-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
  margin-top: 13px;
}

.sync-foundation-compact-row > span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(229,235,231,.06);
  border-radius: 14px;
  background: rgba(0,0,0,.1);
}

.sync-foundation-compact-row small { color: var(--v6-text-5); font-size: 8px; font-weight: 720; text-transform: uppercase; letter-spacing: .04em; }
.sync-foundation-compact-row strong { overflow: hidden; color: var(--v6-text-2); font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }

.sync-foundation-details {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(229,235,231,.06);
  border-radius: 15px;
  background: rgba(0,0,0,.08);
}

.sync-foundation-details > summary {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  color: var(--v6-text-4);
  font-size: 10px;
  font-weight: 740;
  list-style: none;
  cursor: pointer;
}
.sync-foundation-details > summary::-webkit-details-marker { display: none; }
.sync-foundation-details[open] > summary .settings-chevron { transform: rotate(90deg); }
.sync-foundation-details-body { padding: 0 10px 10px; border-top: 1px solid rgba(229,235,231,.05); }
.sync-foundation-details .sync-foundation-metrics { margin-top: 10px; }
.sync-foundation-details .settings-footnote { margin: 9px 2px 0; }

.sync-foundation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sync-foundation-actions .btn {
  min-height: 40px;
  flex: 1 1 130px;
  border-radius: 13px;
  font-size: 11px;
}

.sync-now-quiet {
  background: rgba(255,255,255,.025) !important;
  color: var(--v6-text-3) !important;
}

#page-more .settings-footnote {
  margin: 8px 7px 0;
  color: var(--v6-text-5);
  font-size: 8px;
  line-height: 1.4;
}

#page-more .advanced-settings {
  margin-top: 0;
}

/* ---------- Responsive refinement ---------- */
@media (max-width: 370px) {
  .insights-subpage-body,
  .plan-subpage-body { padding-left: 14px; padding-right: 14px; }
  .insights-overview-hero { padding: 17px; }
  .insights-overview-hero-value { font-size: 45px; }
  .plan-overview article { padding: 13px; }
  .grocery-plan-entry-button { grid-template-columns: 40px minmax(0,1fr) 16px; }
  .grocery-plan-entry-summary { display: none; }
  .settings-overview { grid-template-columns: 44px minmax(0,1fr); }
  .settings-overview-value { grid-column: 2; justify-items: start; }
}

@media (min-width: 760px) {
  .insights-controls {
    grid-template-columns: minmax(240px,.65fr) minmax(380px,1fr);
    align-items: center;
  }
  .insights-panel[data-insights-panel="overview"].active {
    grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr);
    align-items: start;
  }
  .insights-overview-hero { grid-row: 1 / span 2; min-height: 308px; display: flex; flex-direction: column; }
  .insights-overview-progress { margin-top: auto; }
  .insights-metrics-refined { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .insights-context-note { grid-column: 2; }
  .insights-card { padding: 24px; }
  .insights-donut-layout { grid-template-columns: minmax(220px,.7fr) minmax(280px,1fr); }

  .plan-workspace { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .plan-overview { grid-template-columns: repeat(2,minmax(0,1fr)) minmax(280px,.8fr); }
  .plan-overview-total { grid-column: auto; min-height: 112px; flex-direction: column; align-items: flex-start; justify-content: center; }

  #page-more {
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-items: start;
  }
  #page-more .settings-overview { grid-column: 1 / -1; }
  #page-more .settings-section,
  #page-more .advanced-settings { min-width: 0; }
  #page-more .sync-foundation-section { grid-column: 1 / -1; }
  #page-more .advanced-settings { grid-column: 1 / -1; }
}

@media (min-width: 1180px) {
  .insights-subpage,
  .plan-subpage {
    left: var(--desktop-sidebar-width, 236px);
    width: calc(100% - var(--desktop-sidebar-width, 236px));
  }
  body.insights-open .nav,
  body.plan-open .nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-subpage.show,
  .insights-panel { animation: none !important; }
  .insights-overview-progress > span { transition: none !important; }
}

@media (min-width: 900px) {
  #page-more > .settings-section,
  #page-more > .advanced-settings,
  #page-more > .settings-overview {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #page-more > .settings-overview,
  #page-more > .sync-foundation-section,
  #page-more > .advanced-settings {
    grid-column: 1 / -1 !important;
  }
}

.insights-panel[hidden] {
  display: none !important;
}

.sync-foundation-actions .btn[hidden] {
  display: none !important;
}

@media (min-width: 900px) {
  #page-more > .settings-overview { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  #page-more > .settings-budget-section { grid-column: 1 !important; grid-row: 2 !important; }
  #page-more > .settings-app-section { grid-column: 2 !important; grid-row: 2 !important; }
  #page-more > .sync-foundation-section { grid-column: 1 / -1 !important; grid-row: 3 !important; }
  #page-more > .settings-backup-section { grid-column: 1 !important; grid-row: 4 !important; }
  #page-more > .advanced-settings { grid-column: 2 !important; grid-row: 4 !important; align-self: start; }
}

/* =========================================================
   Spendly v6.4.1 — Settings spacing repair
   The v6.4 mobile page was still display:block, so its `gap`
   value never separated the settings sections. Use a real
   one-column layout and restore deliberate vertical rhythm.
   ========================================================= */
@media (max-width: 759px) {
  #page-more.page.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 24px;
  }

  #page-more.page.active > .settings-overview,
  #page-more.page.active > .settings-section,
  #page-more.page.active > .sync-foundation-section,
  #page-more.page.active > .advanced-settings {
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  #page-more .settings-section-title {
    margin: 0 8px 10px;
  }

  #page-more .settings-backup-section .settings-footnote {
    margin-top: 12px;
    margin-bottom: 0;
  }

  #page-more .advanced-settings {
    margin-top: 2px;
  }
}

@media (max-width: 370px) {
  #page-more.page.active {
    row-gap: 20px;
  }
}

/* =========================================================
   Spendly v6.5 — Final UX polish and accessibility
   Refines feedback, focus, motion, touch targets, contrast and
   responsive resilience without changing feature or data logic.
   ========================================================= */

:root {
  --v6-text-3: #969da1;
  --v6-text-4: #747d82;
  --v6-text-5: #5f686e;
  --v6-focus-ring: rgba(129, 230, 156, .88);
  --v6-touch-target: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

main:focus,
.page:focus,
.insights-subpage:focus,
.plan-subpage:focus,
.grocery-run-subpage:focus,
.modal:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width: auto;
  height: auto;
  padding: 10px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border: 1px solid var(--v6-focus-ring);
  border-radius: 12px;
  background: #10171b;
  color: var(--v6-text-1);
  font-size: 13px;
  font-weight: 800;
}

/* Consistent and clearly visible keyboard focus. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--v6-focus-ring) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(103, 221, 136, .11) !important;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .48;
}

/* Comfortable touch targets without inflating dense content rows. */
.context-header-meta,
.close-btn,
.insights-back,
.plan-subpage-back,
.grocery-run-back,
.grocery-run-reset,
.activity-filter-button,
.activity-quick-periods button,
.activity-filter-chip,
.section-link,
.grocery-hub-detail-add,
.grocery-clear-bought,
.plan-add-action,
.sync-foundation-details > summary,
.advanced-settings > summary {
  min-height: var(--v6-touch-target);
}

.nav-btn {
  min-height: 58px;
}

.settings-row:not(.static),
.history-transaction-row,
.grocery-plan-row,
.grocery-recent-row,
.home-activity-row,
.home-explore-action,
.grocery-plan-entry-button {
  cursor: pointer;
}

/* Pressed and hover feedback stays restrained and native-like. */
:where(.settings-row:not(.static), .history-transaction-row, .grocery-plan-row, .grocery-recent-row, .home-activity-row, .home-explore-action, .grocery-plan-entry-button, .activity-filter-button, .grocery-hub-start, .btn, .nav-btn) {
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}

@media (pointer: coarse) {
  :where(.settings-row:not(.static), .history-transaction-row, .grocery-plan-row, .grocery-recent-row, .home-activity-row, .home-explore-action, .grocery-plan-entry-button, .activity-filter-button, .grocery-hub-start, .btn):active {
    transform: scale(.985);
  }

  .nav-btn:active .ico,
  .nav-btn:active .nav-add-orb {
    transform: scale(.94);
  }
}

@media (hover: hover) and (pointer: fine) {
  :where(.settings-row:not(.static), .history-transaction-row, .grocery-plan-row, .grocery-recent-row, .home-activity-row, .home-explore-action, .grocery-plan-entry-button):hover {
    border-color: rgba(229, 235, 231, .12);
    background-color: rgba(255, 255, 255, .03);
  }
}

/* Better readability for supporting text introduced throughout v6. */
.context-header-copy p,
.home-today-meta,
.home-activity-meta,
.history-transaction-copy small,
.grocery-plan-row .plan-row-copy small,
.grocery-recent-row small,
.settings-copy small,
.settings-overview-copy span,
.sync-foundation-copy small,
.settings-footnote,
.plan-row-copy small,
.insights-metric small {
  color: var(--v6-text-3);
}

#page-more .settings-copy small,
#page-more .sync-foundation-copy small,
#page-more .settings-overview-copy span,
#page-more .settings-footnote {
  font-size: max(10px, .68rem);
  line-height: 1.38;
}

#page-more .settings-section-title,
.plan-card-kicker,
.insights-card-kicker,
.grocery-section-label {
  color: var(--v6-text-4);
}

/* Stable layout when labels, amounts or system text become wider. */
.settings-copy,
.history-transaction-copy,
.home-activity-copy,
.grocery-plan-entry-copy,
.plan-row-copy,
.sync-foundation-copy {
  min-width: 0;
}

.settings-copy strong,
.settings-copy small,
.history-transaction-copy strong,
.history-transaction-copy small,
.home-activity-title,
.home-activity-meta,
.grocery-plan-entry-copy strong,
.grocery-plan-entry-copy small,
.plan-row-copy strong,
.plan-row-copy small {
  overflow-wrap: anywhere;
}

.home-safe-value,
.home-week-amount-line strong,
.home-budget-focus strong,
.history-overview strong,
.insights-overview-hero-value,
.plan-overview strong {
  font-variant-numeric: tabular-nums;
}

/* Page and surface rhythm. */
.page.active {
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}

.page.active > :last-child {
  margin-bottom: 0;
}

.section-head {
  align-items: center;
  gap: 12px;
}

.section-head h3,
.section-head span {
  min-width: 0;
}

/* Empty and filtered states now share one calm treatment. */
:where(.history-empty, .plan-empty, .empty-state, .grocery-empty, .grocery-hub-empty) {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  border: 1px dashed rgba(229, 235, 231, .11);
  border-radius: 20px;
  background: rgba(255, 255, 255, .012);
  color: var(--v6-text-3);
  text-align: center;
}

:where(.history-empty, .plan-empty, .empty-state, .grocery-empty, .grocery-hub-empty) strong {
  color: var(--v6-text-2);
}

/* Modal and full-screen workspace feedback. */
.modal-backdrop {
  opacity: 0;
  transition: opacity .2s ease;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal {
  transform: translateY(18px) scale(.985);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .82, .25, 1), opacity .2s ease;
}

.modal-backdrop.show .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.insights-subpage,
.plan-subpage,
.grocery-run-subpage {
  transition: transform .28s cubic-bezier(.2, .82, .25, 1), opacity .22s ease, visibility 0s linear .28s;
}

.insights-subpage.show,
.plan-subpage.show,
.grocery-run-subpage.show {
  transition-delay: 0s;
}

.modal-body.can-scroll::after,
.edit-expense-scroll.can-scroll::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 18px;
  margin-top: -18px;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(14, 19, 23, .94));
}

/* Clearer transient feedback that respects the bottom safe area. */
.toast {
  max-width: min(calc(100vw - 32px), 430px);
  min-height: 46px;
  bottom: calc(98px + env(safe-area-inset-bottom));
  padding: 11px 14px;
  border: 1px solid rgba(229, 235, 231, .12);
  border-radius: 15px;
  background: rgba(19, 25, 29, .96);
  color: var(--v6-text-1);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.toast-action {
  min-height: 36px;
  padding-inline: 10px;
  color: var(--v6-accent-strong);
  font-weight: 820;
}

body.grocery-run-open .toast,
body.insights-open .toast,
body.plan-open .toast,
body.modal-open .toast {
  bottom: calc(18px + env(safe-area-inset-bottom));
}

/* Syncing should feel alive without adding visual noise. */
.sync-foundation-card[aria-busy="true"] .sync-foundation-dot,
.desktop-nav-footer[data-sync-state="syncing"] > span {
  animation: v65SyncPulse 1.15s ease-in-out infinite;
}

@keyframes v65SyncPulse {
  0%, 100% { opacity: .45; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Improve tablet and desktop navigation / scrolling. */
@media (min-width: 900px) {
  .app-shell,
  .modal-body,
  .insights-subpage-body,
  .plan-subpage-body,
  .grocery-run-body {
    scrollbar-gutter: stable;
  }

  .nav-btn[aria-current="page"] {
    border-color: rgba(103, 221, 136, .12);
  }

  .modal {
    transform: translateY(8px) scale(.98);
  }
}

/* Short screens and landscape remain fully usable. */
@media (max-height: 640px) and (orientation: landscape) {
  .contextual-topbar {
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .context-header-copy h1 {
    font-size: 30px;
  }

  .modal {
    max-height: calc(var(--spendly-visual-height, 100dvh) - 16px);
  }
}

@media (max-width: 370px) {
  #page-more .settings-copy small,
  #page-more .sync-foundation-copy small,
  #page-more .settings-overview-copy span,
  #page-more .settings-footnote {
    font-size: 10px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --v6-text-2: #d5d9d7;
    --v6-text-3: #abb1b4;
    --v6-text-4: #8d959a;
    --v6-line: rgba(238, 242, 239, .17);
    --v6-line-strong: rgba(238, 242, 239, .25);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .modal,
  .modal-backdrop,
  .insights-subpage,
  .plan-subpage,
  .grocery-run-subpage {
    transform: none !important;
  }
}

/* Spendly v7.0D.3 — sync diagnostics */
.sync-diagnostics-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(229,235,231,.06);
}
.sync-diagnostics-panel[hidden] { display: none !important; }
.sync-diagnostics-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
}
.sync-diagnostics-header strong {
  color: var(--v6-text-2, #e7eae6);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .01em;
}
.sync-diagnostics-header small {
  color: var(--v6-text-5, #717981);
  font-size: 8px;
  font-weight: 720;
}
.sync-diagnostics-list {
  display: grid;
  gap: 7px;
}
.sync-diagnostic-item {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgba(229,235,231,.07);
  border-radius: 12px;
  background: rgba(0,0,0,.12);
}
.sync-diagnostic-item.is-blocked {
  border-color: rgba(238,130,125,.18);
  background: rgba(238,130,125,.035);
}
.sync-diagnostic-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sync-diagnostic-item-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--v6-text-2, #e7eae6);
  font-size: 9px;
  font-weight: 770;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-diagnostic-item-top small {
  flex: 0 0 auto;
  color: #e3bd67;
  font-size: 8px;
  font-weight: 760;
}
.sync-diagnostic-item.is-blocked .sync-diagnostic-item-top small { color: #ee827d; }
.sync-diagnostic-item code {
  overflow: hidden;
  color: #7f8a90;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync-diagnostic-item p {
  margin: 0;
  color: #8c9499;
  font-size: 8px;
  font-weight: 620;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.sync-diagnostics-more {
  margin: 2px 2px 0;
  color: #747d82;
  font-size: 8px;
  font-weight: 650;
}


/* v7.3.1 — Home Polish */
.home-vnext{padding-top:2px}
.home-vnext .home-clean-section{margin-top:30px}
.home-balance-card{position:relative;overflow:hidden;padding:24px 21px 19px;border:1px solid rgba(255,255,255,.075);border-radius:24px;background:linear-gradient(150deg,#171b18 0%,#111512 64%,#0f1210 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 20px 54px rgba(0,0,0,.22)}
.home-balance-card::after{content:"";position:absolute;right:-88px;top:-92px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(120,223,146,.10),rgba(120,223,146,0) 68%);pointer-events:none}
.home-balance-card>*{position:relative;z-index:1}
.home-balance-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#92989a;font-size:11px;font-weight:720;letter-spacing:.045em;text-transform:uppercase}
.home-balance-status{display:inline-flex;align-items:center;min-height:27px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.045);color:#a7aca9;font-size:10px;font-weight:760;letter-spacing:.015em;text-transform:none}
.home-balance-status.safe{background:rgba(120,223,146,.11);color:#91e6a5}
.home-balance-status.close{background:rgba(230,173,101,.11);color:#ebbb78}
.home-balance-status.above{background:rgba(237,133,141,.11);color:#ef969d}
.home-balance-value{display:block;margin-top:18px;color:#f1f1ec;font-size:clamp(48px,14.5vw,68px);line-height:.92;font-weight:760;letter-spacing:-.078em;font-variant-numeric:tabular-nums}
.home-balance-caption{display:block;margin-top:8px;color:#8d9391;font-size:14px;font-weight:620;letter-spacing:-.018em}
.home-balance-progress{height:7px;margin-top:22px;overflow:hidden;border-radius:999px;background:#262b28}
.home-balance-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#68d487,#8ee5a4);transition:width .24s ease}
.home-balance-progress span.close{background:linear-gradient(90deg,#d89b55,#ecbd76)}
.home-balance-progress span.above{background:linear-gradient(90deg,#d86d77,#ed9399)}
.home-balance-guidance{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.home-balance-guidance>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-balance-guidance .home-balance-days{text-align:right;align-items:flex-end}
.home-balance-guidance strong{color:#ebece7;font-size:16px;font-weight:720;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.home-balance-guidance small{color:#777f7a;font-size:10px;font-weight:680;text-transform:uppercase;letter-spacing:.055em}
.home-planned-balance{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:20px -4px -4px;padding:16px 4px 4px;border-top:1px solid rgba(255,255,255,.07)}
.home-planned-balance>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-planned-balance span{color:#a8adaa;font-size:12px;font-weight:680}
.home-planned-balance small{color:#686f6b;font-size:10px;font-weight:620}
.home-planned-balance strong{flex:0 0 auto;color:#91e6a5;font-size:20px;font-weight:760;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.home-clean-section{padding:0 2px}
.home-clean-section+.home-clean-section{padding-top:29px;border-top:1px solid rgba(255,255,255,.065)}
.home-clean-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:13px}
.home-clean-section-head>div{min-width:0}
.home-section-kicker{display:block;margin-bottom:7px;color:#737a77;font-size:10px;font-weight:760;text-transform:uppercase;letter-spacing:.09em}
.home-clean-section-head h2{margin:0;color:#edede8;font-size:20px;line-height:1.08;font-weight:720;letter-spacing:-.045em}
.home-text-action{flex:0 0 auto;padding:6px 0;background:transparent;color:#7edb95;font-size:12px;font-weight:680}
.home-clean-activity{border-top:0}
.home-vnext .home-activity-row{min-height:63px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055);border-radius:0;background:transparent;box-shadow:none}
.home-vnext .home-activity-row:last-child{border-bottom:0}
.home-vnext .home-activity-icon{width:38px;height:38px;border-radius:13px}
.home-vnext .home-activity-icon .app-icon{width:19px;height:19px}
.home-vnext .home-activity-title{color:#e8e8e3;font-size:14px;font-weight:680}
.home-vnext .home-activity-meta{margin-top:4px;color:#717775;font-size:11px;font-weight:600}
.home-vnext .home-activity-side{align-self:center}
.home-vnext .home-activity-amount{color:#e8e9e4;font-size:14px;font-weight:720;letter-spacing:-.025em}
.home-clean-empty{padding:14px 0 4px;color:#6f7672;font-size:12px;font-weight:610;line-height:1.45}
.home-outlook-title{display:flex;align-items:center;gap:9px}
.home-outlook-dot{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#727976;box-shadow:0 0 0 4px rgba(114,121,118,.08)}
.home-outlook-dot.safe{background:#78df92;box-shadow:0 0 0 4px rgba(120,223,146,.09)}
.home-outlook-dot.close{background:#e6ad65;box-shadow:0 0 0 4px rgba(230,173,101,.09)}
.home-outlook-dot.above{background:#ed858d;box-shadow:0 0 0 4px rgba(237,133,141,.09)}
.home-outlook-copy{max-width:430px;margin:11px 0 0;color:#828986;font-size:12px;font-weight:600;line-height:1.55}
.home-outlook-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;overflow:hidden;border:1px solid rgba(255,255,255,.065);border-radius:17px;background:rgba(255,255,255,.055)}
.home-outlook-metrics>div{min-width:0;padding:13px 11px;background:#111411}
.home-outlook-metrics span{display:block;color:#696f6d;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.055em}
.home-outlook-metrics strong{display:block;margin-top:6px;color:#e1e3de;font-size:13px;font-weight:710;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.home-outlook-metrics strong.negative{color:#ed939a}
.home-upcoming-list{display:grid}
.home-upcoming-row{width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;text-align:left}
.home-upcoming-row:last-child{border-bottom:0}
.home-upcoming-row>span:first-child{min-width:0;display:flex;flex-direction:column;gap:4px}
.home-upcoming-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e8e8e3;font-size:14px;font-weight:680}
.home-upcoming-row small{color:#717775;font-size:11px;font-weight:600}
.home-upcoming-amount{flex:0 0 auto;color:#e7e8e3;font-size:14px;font-weight:720;font-variant-numeric:tabular-nums}
.home-upcoming-empty{padding-bottom:0}
.home-grocery-snapshot{padding-bottom:6px}
.home-grocery-meta{margin:0;color:#747b78;font-size:12px;font-weight:600}
.contextual-topbar[data-page="home"] .context-header-meta{width:39px;height:39px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.065);border-radius:14px;background:#121613;color:#909793}
.contextual-topbar[data-page="home"] .context-header-meta .app-icon{width:19px;height:19px;stroke-width:1.75}
@media(max-width:370px){
  .home-balance-card{padding:21px 18px 17px}
  .home-balance-value{font-size:46px}
  .home-balance-guidance{gap:10px}
  .home-outlook-metrics{grid-template-columns:1fr}
  .home-outlook-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px}
  .home-outlook-metrics strong{margin-top:0}
}


/* v7.3.1 — Home polish */
.home-vnext .home-clean-section{margin-top:26px}
.home-clean-section+.home-clean-section{padding-top:24px}
.home-planned-balance[hidden]{display:none!important}
.home-clean-activity{
  overflow:visible!important;
  max-height:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.home-vnext .home-activity-row{padding-left:0;padding-right:0}
.home-outlook-metrics>div{display:grid;grid-template-rows:24px auto;align-content:start}
.home-outlook-metrics span{min-height:24px;line-height:1.25}
.home-outlook-metrics strong{margin-top:5px;align-self:start}
.home-upcoming-empty{padding-top:3px;padding-bottom:0}
.home-upcoming-section:has(.home-upcoming-empty) .home-clean-section-head{margin-bottom:5px}
.home-grocery-snapshot{padding-bottom:2px}
@media(max-width:370px){
  .home-outlook-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .home-outlook-metrics span{min-height:0}
}

/* v7.3.2 — Hide empty Coming Up section on Home */


/* =========================================================
   Spendly v7.4.0 — Add Expense Redesign
   Fast default flow: Amount → Category → optional description → Save.
   Grocery and backdating controls appear only when relevant.
   ========================================================= */
.modal-backdrop[data-kind="spend"] .modal {
  width: min(calc(100vw - (var(--sheet-side-gap) * 2)), 520px);
  border-color: rgba(255,255,255,.075);
  background:
    radial-gradient(circle at 86% -10%, rgba(112, 220, 143, .085), transparent 30%),
    linear-gradient(180deg, #141816 0%, #0b0e0d 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.035);
}
.modal-backdrop[data-kind="spend"] .modal-head {
  min-height: 58px;
  padding-top: 12px;
  padding-bottom: 6px;
  border-bottom-color: rgba(255,255,255,.055);
  background: rgba(18,22,20,.985);
}
.modal-backdrop[data-kind="spend"] .modal-head h3 {
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.035em;
}
.modal-backdrop[data-kind="spend"] .modal-body {
  padding: 12px 18px max(14px, env(safe-area-inset-bottom));
  scroll-padding-bottom: 96px;
}
.native-spend-form {
  gap: 13px;
}
.native-spend-form .spend-sheet-summary,
.native-spend-form .spend-save-note {
  display: none !important;
}
.native-spend-form .spend-amount-field {
  display: grid;
  justify-items: center;
  padding: 1px 0 7px;
}
.native-spend-form .spend-amount-field > label {
  margin: 0 0 3px;
  color: #767e79;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.native-spend-form .spend-amount-input {
  width: min(100%, 300px) !important;
  min-height: 78px;
  grid-template-columns: max-content minmax(0, 5.45ch) !important;
  justify-content: center !important;
  gap: 7px;
  padding: 0 8px 10px;
}
.native-spend-form .spend-amount-input::after {
  left: 22px;
  right: 22px;
  bottom: 2px;
  background: rgba(255,255,255,.11);
}
.native-spend-form .spend-amount-input > span {
  color: #74dc91;
  font-size: clamp(36px, 10vw, 44px);
  font-weight: 720;
}
.native-spend-form .spend-amount-input input {
  width: 5.45ch !important;
  max-width: 5.45ch !important;
  min-height: 66px;
  color: #f0f2ef;
  font-size: clamp(49px, 14vw, 60px) !important;
  font-weight: 730;
  letter-spacing: -.065em;
}
.native-spend-form .expense-category-field > label,
.native-spend-form .native-expense-main label,
.native-spend-form .expense-supermarket-field > label {
  color: #8b938e;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: -.005em;
}
.native-spend-form label small,
.edit-expense-form label small {
  margin-left: 4px;
  color: #626963;
  font-size: 9px;
  font-weight: 650;
}
.native-spend-form .expense-category-select-shell {
  min-height: 52px;
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.native-spend-form .expense-category-select-icon {
  color: #75dc91;
}
.native-spend-form .native-expense-main {
  margin: 0;
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
}
.native-spend-form .native-expense-main > .field {
  padding: 10px 14px 11px;
}
.native-spend-form .native-expense-main input {
  min-height: 34px;
  color: #eef1ed;
  font-size: 15px;
}
.native-spend-form .native-expense-main input::placeholder {
  color: #555d57;
}
.expense-grocery-context {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(114,220,145,.105);
  border-radius: 18px;
  background: rgba(114,220,145,.035);
}
.expense-grocery-context[hidden] { display: none !important; }
.expense-supermarket-field {
  min-width: 0;
}
.expense-supermarket-field > label {
  display: block;
  margin: 0 0 7px 2px;
}
.expense-supermarket-input-shell {
  min-height: 50px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(0,0,0,.12);
}
.expense-supermarket-input-shell > span {
  display: grid;
  place-items: center;
  color: #75dc91;
}
.expense-supermarket-input-shell .app-icon {
  width: 18px;
  height: 18px;
}
.expense-supermarket-input-shell input {
  min-width: 0;
  min-height: 48px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #eef1ed;
  font-size: 14px;
  font-weight: 650;
}
.expense-supermarket-input-shell input:focus {
  border: 0 !important;
  box-shadow: none !important;
}
.expense-supermarket-input-shell:focus-within {
  border-color: rgba(114,220,145,.28);
  box-shadow: 0 0 0 3px rgba(114,220,145,.055);
}
.native-spend-form .expense-grocery-entry {
  gap: 8px;
}
.native-spend-form .expense-grocery-toggle {
  min-height: 50px;
  border-color: rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(0,0,0,.10);
  color: #dfe5df;
  font-size: 12px;
  font-weight: 690;
}
.native-spend-form .native-more-details {
  border-color: rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.native-spend-form .native-more-details summary {
  min-height: 48px;
  padding: 0 14px;
  color: #b8c0ba;
  font-size: 12px;
  font-weight: 680;
}
.native-spend-form .native-more-details summary small {
  display: inline;
  color: #626a64;
  font-size: 9px;
  font-weight: 620;
}
.native-spend-form .spend-more-body {
  padding: 0;
}
.native-spend-form .spend-more-body > .field,
.native-spend-form .spend-date-time-row > .field {
  padding: 10px 12px 11px;
}
.native-spend-form .spend-date-time-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.72fr);
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.native-spend-form .spend-date-time-row > .field + .field {
  border-left: 1px solid rgba(255,255,255,.06);
}
.native-spend-form .spend-date-time-row input,
.native-spend-form .spend-more-body textarea {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.native-spend-form .spend-more-body textarea {
  min-height: 66px;
  resize: none;
}
.native-spend-form .spend-save-btn {
  position: sticky;
  bottom: 0;
  z-index: 3;
  min-height: 55px !important;
  margin-top: 1px;
  border-radius: 16px;
  color: #07110b;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(78,190,108,.20), inset 0 1px 0 rgba(255,255,255,.25);
}
.edit-expense-form .expense-grocery-context {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(114,220,145,.10);
  border-radius: 18px;
  background: rgba(114,220,145,.03);
}
.edit-expense-form .expense-grocery-context[hidden] { display: none !important; }
.edit-expense-form .spend-date-time-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.72fr);
  gap: 0;
}
.edit-expense-form .spend-date-time-row > .field + .field {
  border-left: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 360px) {
  .modal-backdrop[data-kind="spend"] .modal-body { padding-left: 14px; padding-right: 14px; }
  .native-spend-form .spend-amount-input { width: min(100%, 268px) !important; }
  .native-spend-form .spend-amount-input input { font-size: 48px !important; }
  .native-spend-form .native-more-details summary small { display: none; }
}

/* =========================================================
   Spendly v7.4.1 — Add Expense Polish
   ========================================================= */

/* App-wide typography: premium, softer geometry on Apple devices while
   retaining reliable system fallbacks everywhere else. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
}
html, body, button, input, select, textarea, summary {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
}

/* The Add sheet owns its scrolling and its action footer. */
.modal-backdrop[data-kind="spend"] .modal {
  max-height: min(790px, calc(var(--spendly-visual-height) - max(14px, env(safe-area-inset-top)) - 10px));
}
.modal-backdrop[data-kind="spend"] .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  padding: 0;
  overflow: hidden !important;
  scroll-padding: 0;
}
.native-spend-form {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.spend-form-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 13px 18px 15px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 16px 0 34px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.spend-form-scroll::-webkit-scrollbar,
.expense-grocery-panel-scroll::-webkit-scrollbar { display: none; }
.spend-form-scroll[hidden],
.spend-form-footer[hidden],
.expense-grocery-panel[hidden] { display: none !important; }

.spend-form-footer {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  padding: 10px 18px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(12,15,14,.97);
  box-shadow: 0 -14px 34px rgba(0,0,0,.20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.native-spend-form .spend-save-btn {
  position: static;
  min-height: 54px !important;
  margin: 0;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Amount: no browser-style focus rectangle, only a restrained accent line. */
.native-spend-form .spend-amount-field {
  padding: 2px 0 4px;
}
.native-spend-form .spend-amount-field > label {
  margin-bottom: 2px;
  color: #747c77;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}
.native-spend-form .spend-amount-input {
  width: min(100%, 278px) !important;
  min-height: 76px;
  grid-template-columns: max-content minmax(0, 5.2ch) !important;
  gap: 5px;
  padding: 0 6px 10px;
}
.native-spend-form .spend-amount-input::after {
  left: 25px;
  right: 25px;
  bottom: 2px;
  background: rgba(255,255,255,.10);
  box-shadow: none;
}
.native-spend-form .spend-amount-input:focus-within::after {
  background: rgba(111,224,142,.54);
  box-shadow: 0 2px 16px rgba(95,210,126,.10);
}
.native-spend-form .spend-amount-input > span {
  color: #72dc90;
  font-size: clamp(34px, 9.5vw, 42px);
  font-weight: 600;
  letter-spacing: -.045em;
}
.native-spend-form .spend-amount-input input {
  width: 5.2ch !important;
  max-width: 5.2ch !important;
  min-height: 62px;
  font-size: clamp(48px, 13.4vw, 58px) !important;
  font-weight: 600;
  letter-spacing: -.065em;
  caret-color: #77df94;
}
.native-spend-form .spend-amount-input input:focus,
.native-spend-form .spend-amount-input input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Main fields use less boxing and slightly tighter proportions. */
.native-spend-form .expense-category-field > label,
.native-spend-form .native-expense-main label,
.native-spend-form .expense-supermarket-field > label {
  color: #8a918d;
  font-size: 10.5px;
  font-weight: 600;
}
.native-spend-form label small {
  color: #626963;
  font-size: 8.5px;
  font-weight: 600;
}
.native-spend-form .expense-category-select-shell {
  min-height: 50px;
  border-radius: 16px;
  background: rgba(255,255,255,.022);
}
.native-spend-form .expense-category-native {
  font-weight: 650;
}
.native-spend-form .native-expense-main {
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.native-spend-form .native-expense-main > .field {
  padding: 9px 14px 10px;
}
.native-spend-form .native-expense-main input {
  min-height: 32px;
  font-size: 14.5px;
  font-weight: 500;
}

/* Grocery controls are contextual rows, not a large green box. */
.expense-grocery-context {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.expense-supermarket-field {
  padding: 10px 12px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.expense-supermarket-field > label {
  margin: 0 0 4px 1px;
}
.expense-supermarket-input-shell {
  min-height: 36px;
  grid-template-columns: 19px minmax(0,1fr);
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.expense-supermarket-input-shell input {
  min-height: 34px;
  font-size: 14px;
  font-weight: 500;
}
.expense-supermarket-input-shell:focus-within {
  border-color: transparent;
  box-shadow: none;
}
.expense-supermarket-input-shell input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.expense-grocery-launcher {
  display: block;
}
.expense-grocery-launcher-button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
  text-align: left;
}
.expense-grocery-launcher-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.expense-grocery-launcher-copy strong {
  color: #e4e7e3;
  font-size: 13px;
  font-weight: 650;
}
.expense-grocery-launcher-copy small {
  overflow: hidden;
  color: #727a75;
  font-size: 10px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense-grocery-launcher-chevron {
  display: grid;
  place-items: center;
  color: #818985;
}
.expense-grocery-launcher-chevron .app-icon {
  width: 18px;
  height: 18px;
}

/* More details remains low-emphasis and compact when expanded. */
.native-spend-form .native-more-details {
  border-radius: 16px;
  background: rgba(255,255,255,.014);
}
.native-spend-form .native-more-details summary {
  min-height: 48px;
  padding: 0 13px;
  font-size: 11.5px;
  font-weight: 600;
}
.native-spend-form .native-more-details summary small {
  color: #676e69;
  font-size: 8.5px;
  font-weight: 550;
}
.native-spend-form .spend-date-time-row > .field,
.native-spend-form .spend-more-body > .field {
  padding: 9px 11px 10px;
}
.native-spend-form .spend-date-time-row input,
.native-spend-form .spend-more-body textarea {
  font-size: 14px;
  font-weight: 500;
}
.native-spend-form .spend-more-body textarea {
  min-height: 54px;
}

/* Dedicated grocery-item editor view. */
.expense-grocery-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(18,22,20,.99), rgba(10,13,12,.99));
}
.expense-grocery-panel-toolbar {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.expense-grocery-panel-toolbar > span {
  color: #747c77;
  font-size: 10px;
  font-weight: 550;
}
.expense-grocery-panel-toolbar button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 11px;
  background: rgba(112,220,143,.10);
  color: #83e39d;
  font-size: 11px;
  font-weight: 700;
}
.expense-grocery-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 18px max(16px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 14px 0 80px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.native-spend-form .expense-grocery-items-panel {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.native-spend-form .expense-grocery-list {
  display: grid;
  gap: 8px;
}
.native-spend-form .expense-grocery-line {
  display: grid;
  grid-template-columns: minmax(0,1fr) 104px 38px;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}
.native-spend-form .expense-grocery-line .field label {
  margin: 0 0 4px 1px;
  color: #777f7a;
  font-size: 9px;
  font-weight: 600;
}
.native-spend-form .expense-grocery-line input {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.13);
  color: #e8ebe7;
  font-size: 13px;
  font-weight: 500;
}
.native-spend-form .expense-grocery-price-input {
  min-height: 39px;
  display: grid;
  grid-template-columns: 16px minmax(0,1fr);
  align-items: center;
  gap: 2px;
  padding-left: 9px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.13);
}
.native-spend-form .expense-grocery-price-input > span {
  color: #808783;
  font-size: 12px;
}
.native-spend-form .expense-grocery-price-input input {
  min-height: 37px;
  padding: 0 7px 0 0;
  border: 0;
  background: transparent;
}
.native-spend-form .expense-grocery-line input:focus,
.native-spend-form .expense-grocery-line input:focus-visible {
  outline: 0 !important;
  border-color: rgba(112,220,143,.24) !important;
  box-shadow: 0 0 0 3px rgba(112,220,143,.05) !important;
}
.native-spend-form .expense-grocery-remove {
  width: 38px;
  height: 39px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: #777f7a;
  font-size: 22px;
  font-weight: 400;
}
.native-spend-form .expense-grocery-add {
  min-height: 47px;
  border: 1px dashed rgba(112,220,143,.18);
  border-radius: 15px;
  background: rgba(112,220,143,.035);
  color: #83e19b;
  font-size: 12px;
  font-weight: 650;
}
.native-spend-form .expense-grocery-summary {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 0;
  border-top: 1px solid rgba(255,255,255,.055);
  color: #777f7a;
  font-size: 11px;
  font-weight: 550;
}
.native-spend-form .expense-grocery-summary strong {
  color: #e5e8e4;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.native-spend-form .expense-grocery-balance {
  margin-top: -4px;
  color: #777f7a;
  font-size: 10px;
  font-weight: 550;
  text-align: right;
}

/* Keep focused fields above the keyboard, but never let the Save footer cover them. */
.modal-backdrop[data-kind="spend"] input,
.modal-backdrop[data-kind="spend"] textarea,
.modal-backdrop[data-kind="spend"] select {
  scroll-margin-bottom: 72px;
}

@media (max-width: 380px) {
  .spend-form-scroll,
  .expense-grocery-panel-scroll { padding-left: 14px; padding-right: 14px; }
  .spend-form-footer { padding-left: 14px; padding-right: 14px; }
  .native-spend-form .spend-amount-input { width: min(100%, 252px) !important; }
  .native-spend-form .spend-amount-input input { font-size: 48px !important; }
  .native-spend-form .expense-grocery-line { grid-template-columns: minmax(0,1fr) 92px 36px; gap: 7px; padding: 9px; }
  .native-spend-form .expense-grocery-remove { width: 36px; }
}

@media (max-height: 650px) {
  .spend-form-scroll { gap: 10px; padding-top: 9px; }
  .native-spend-form .spend-amount-input { min-height: 64px; }
  .native-spend-form .spend-amount-input input { min-height: 54px; font-size: 45px !important; }
  .native-spend-form .spend-amount-input > span { font-size: 32px; }
}


/* =========================================================
   Spendly v7.4.2 — SF Pro + Add Expense interaction polish
   ========================================================= */

/* Apple platforms resolve -apple-system/BlinkMacSystemFont to SF Pro.
   Keep the same system-first stack everywhere so the UI does not drift
   into a different typeface when a named font is unavailable. */
:root,
html,
body,
button,
input,
select,
textarea,
summary {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
}

/* Shift the Amount unit as one optical group, including its label, rather
   than moving only the numeric input. This keeps the label and value aligned. */
.native-spend-form .spend-amount-field {
  width: min(100%, 278px);
  margin-inline: auto;
  transform: translateX(-13px);
}
.native-spend-form .spend-amount-field > label {
  width: 100%;
  text-align: center;
}
.native-spend-form .spend-amount-input {
  width: 100% !important;
  margin-inline: 0;
  transform: none !important;
}

/* The optional description is intentionally blank until the user types. */
.native-spend-form input[name="expenseText"]::placeholder {
  color: transparent;
  opacity: 0;
}

@media (max-width: 370px) {
  .native-spend-form .spend-amount-field {
    width: min(100%, 266px);
    transform: translateX(-9px);
  }
}

@media (min-width: 700px) {
  .native-spend-form .spend-amount-field {
    width: 350px;
    transform: none;
  }
}


/* =========================================================
   Spendly v7.4.3 — Public Sans + Title Case + Amount Alignment
   ========================================================= */

/* Public Sans trial. If the web font is unavailable (for example offline
   before it has ever been cached), Spendly falls back to the native system. */
:root,
html,
body,
button,
input,
select,
textarea,
summary {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
}

/* The amount field and its label share the same centre line. The number input
   now sizes to the characters actually visible instead of reserving a wide
   fixed column, so €0.00 sits optically underneath Amount. */
.native-spend-form .spend-amount-field {
  width: 100% !important;
  margin-inline: 0 !important;
  transform: none !important;
  display: grid;
  justify-items: center;
}
.native-spend-form .spend-amount-field > label {
  width: auto !important;
  text-align: center;
}
.native-spend-form .spend-amount-input {
  width: auto !important;
  max-width: calc(100% - 12px) !important;
  min-width: 0 !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-inline: auto !important;
  padding-inline: 5px !important;
  transform: none !important;
}
.native-spend-form .spend-amount-input::after {
  left: 2px !important;
  right: 2px !important;
}
.native-spend-form .spend-amount-input input {
  flex: 0 0 auto !important;
  width: calc(var(--spend-amount-ch, 4) * 1ch + .12ch) !important;
  max-width: 10.2ch !important;
  min-width: 4.12ch !important;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
}

/* Title Case for the app's UI chrome. User-entered form text remains exactly
   as typed; amounts/units are also left untouched. */
:is(
  h1, h2, h3, h4,
  .eyebrow,
  .section-head,
  .field > label,
  .home-section-kicker,
  .home-balance-topline,
  .home-balance-caption,
  .home-balance-guidance small,
  .home-planned-balance span,
  .home-planned-balance small,
  .home-outlook-metric span,
  .context-header-copy p,
  .nav-btn > span:last-child,
  button,
  summary
) {
  text-transform: capitalize;
}
:is(
  .home-balance-value,
  .home-balance-guidance strong,
  .home-outlook-metric strong,
  .home-activity-amount,
  .amount-pill,
  input,
  textarea,
  select,
  option
) {
  text-transform: none !important;
}

/* =========================================================
   Spendly v7.4.5 — Saved Supermarket Picker Final Polish
   ========================================================= */
.expense-supermarket-field {
  position: relative;
  z-index: 8;
}
.expense-supermarket-input-shell {
  grid-template-columns: 19px minmax(0,1fr) 30px !important;
}
.expense-supermarket-input-shell input[readonly] {
  cursor: pointer;
}
.expense-supermarket-toggle {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #858c88;
}
.expense-supermarket-toggle .app-icon {
  width: 17px;
  height: 17px;
  transform: rotate(90deg); /* source icon points right; closed state points down */
  transition: transform .16s ease;
}
.expense-supermarket-toggle[aria-expanded="true"] .app-icon {
  transform: rotate(-90deg); /* open state points up */
}
.expense-supermarket-dropdown {
  position: static;
  width: 100%;
  margin-top: 8px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 238px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(18, 22, 20, .985);
  box-shadow: 0 13px 32px rgba(0,0,0,.28);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.expense-supermarket-dropdown[hidden] {
  display: none !important;
}
.expense-supermarket-dropdown > span {
  flex: 0 0 auto;
  display: block;
  padding: 4px 9px 6px;
  color: #767d79;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.expense-supermarket-options {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.expense-supermarket-options::-webkit-scrollbar {
  display: none;
}
.expense-supermarket-options > button,
.expense-supermarket-type-new {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #eceeea;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.expense-supermarket-options > button:active,
.expense-supermarket-type-new:active {
  background: rgba(255,255,255,.055);
}
.expense-supermarket-type-new {
  flex: 0 0 auto;
  min-height: 42px;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 0 0 10px 10px;
  color: var(--green);
}

@media (max-height: 720px) {
  .expense-supermarket-dropdown {
    max-height: 200px;
  }
}

/* =========================================================
   Spendly v7.5.1 — Activity Polish
   Clean search, lightweight category shortcuts and flat history rows.
   ========================================================= */
#page-insights.activity-vnext {
  padding-top: 2px;
}

#page-insights.activity-vnext .activity-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 7px 0 12px;
}

#page-insights.activity-vnext .activity-search,
#page-insights.activity-vnext .activity-filter-button {
  min-height: 52px;
  height: 52px;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

#page-insights.activity-vnext .activity-search {
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 10px;
  padding-inline: 14px;
  color: #818991;
}

#page-insights.activity-vnext .activity-search input {
  min-height: 0;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--v6-text-1);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}

#page-insights.activity-vnext .activity-search input::placeholder {
  color: #686f76;
}

#page-insights.activity-vnext .activity-filter-button {
  min-width: 88px;
  padding-inline: 13px;
  color: #a5abb1;
  font-size: 12px;
  font-weight: 750;
}

#page-insights.activity-vnext .activity-filter-button strong {
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  background: var(--v6-accent);
  color: #08100b;
  font-size: 9px;
}

.activity-category-shortcuts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 0 4px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.activity-category-shortcuts::-webkit-scrollbar { display: none; }

.activity-category-shortcuts button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(229,235,231,.07);
  border-radius: 999px;
  background: transparent;
  color: #858c92;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: none;
}

.activity-category-shortcuts button.active {
  border-color: rgba(103,221,136,.18);
  background: rgba(103,221,136,.105);
  color: #86e89f;
}

.activity-category-shortcuts .activity-category-more {
  color: #a3a9ae;
}

#page-insights.activity-vnext .activity-filter-chips {
  gap: 7px;
  margin-top: 8px;
  padding-bottom: 0;
}

#page-insights.activity-vnext .activity-filter-chip {
  min-height: 32px;
  padding-inline: 10px;
  border-color: rgba(103,221,136,.13);
  background: rgba(103,221,136,.065);
  color: #9adfab;
  font-size: 10px;
  font-weight: 720;
}

.activity-history-section {
  margin-top: 25px;
}

.activity-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 11px;
}

.activity-section-head h2 {
  margin: 0;
  color: var(--v6-text-1);
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -.035em;
}

.activity-results-meta {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}

.activity-results-meta span {
  color: #717980;
  font-size: 10px;
  font-weight: 690;
}

.activity-results-meta strong {
  color: #aab0b5;
  font-size: 11px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

#page-insights.activity-vnext .history-feed {
  display: grid;
  gap: 27px;
}

#page-insights.activity-vnext .history-day-group {
  display: grid;
  gap: 4px;
}

#page-insights.activity-vnext .history-day-head {
  min-height: 25px;
  margin: 0;
  padding: 0 3px;
  background: transparent;
}

#page-insights.activity-vnext .history-day-head h4,
#page-insights.activity-vnext .history-day-head span {
  color: #737b81;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .015em;
}

#page-insights.activity-vnext .history-day-rows {
  display: grid;
  border-top: 1px solid rgba(229,235,231,.055);
}

#page-insights.activity-vnext .history-transaction-row {
  min-height: 70px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 10px 3px;
  border: 0;
  border-bottom: 1px solid rgba(229,235,231,.055);
  border-radius: 0;
  background: transparent;
}

#page-insights.activity-vnext .history-transaction-row:last-child {
  border-bottom: 1px solid rgba(229,235,231,.055);
}

#page-insights.activity-vnext .history-transaction-row:active {
  transform: scale(.992);
  background: rgba(255,255,255,.018);
}

#page-insights.activity-vnext .history-transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

#page-insights.activity-vnext .history-transaction-icon .app-icon {
  width: 19px;
  height: 19px;
}

#page-insights.activity-vnext .history-transaction-copy > strong {
  color: #eceeea;
  font-size: 14px;
  font-weight: 740;
  letter-spacing: -.018em;
}

#page-insights.activity-vnext .history-transaction-copy small {
  margin-top: 5px;
  color: #777f84;
  font-size: 10px;
  font-weight: 610;
}

#page-insights.activity-vnext .history-transaction-amount {
  color: #e4e7e3;
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

#page-insights.activity-vnext .history-empty {
  min-height: 230px;
  margin-top: 5px;
  padding: 30px 18px;
  border: 1px solid rgba(229,235,231,.06);
  border-radius: 22px;
  background: rgba(255,255,255,.015);
}

/* Activity filter sheet */
.activity-filter-form {
  gap: 13px;
}

.activity-filter-group {
  gap: 10px;
}

.activity-filter-range {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(229,235,231,.075);
  border-radius: 18px;
  background: rgba(255,255,255,.018);
}

.activity-filter-range-title {
  color: #8a9196;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .035em;
}

.activity-filter-form .field-row {
  gap: 9px;
}

.activity-filter-form .native-money-input {
  min-height: 50px;
}

.activity-filter-actions {
  gap: 9px;
  margin-top: 2px;
}

/* Transaction detail sheet follows the same flat Activity language. */
.activity-transaction-detail {
  gap: 15px;
}

.activity-transaction-detail .transaction-detail-hero {
  display: grid;
  gap: 7px;
  padding: 5px 2px 17px;
  border: 0;
  border-bottom: 1px solid rgba(229,235,231,.065);
  border-radius: 0;
  background: transparent;
}

.activity-transaction-detail .transaction-detail-hero span {
  color: #858d92;
  font-size: 12px;
  font-weight: 680;
}

.activity-transaction-detail .transaction-detail-hero strong {
  color: #f0f1ee;
  font-size: 40px;
  font-weight: 780;
  letter-spacing: -.055em;
}

.activity-transaction-detail .transaction-detail-list {
  border-radius: 18px;
  background: rgba(255,255,255,.018);
}

.activity-transaction-detail .transaction-detail-row {
  min-height: 48px;
  padding: 13px 14px;
}

.activity-transaction-detail .transaction-detail-row > span {
  color: #7f878c;
  font-size: 10px;
  font-weight: 690;
}

.activity-transaction-detail .transaction-detail-row > strong {
  color: #dfe2de;
  font-size: 11px;
  font-weight: 720;
}

.activity-transaction-detail .transaction-detail-actions {
  gap: 9px;
}

@media (max-width: 370px) {
  #page-insights.activity-vnext .activity-tools {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
  #page-insights.activity-vnext .activity-filter-button {
    min-width: 52px;
    padding: 0;
  }
  #page-insights.activity-vnext .activity-filter-button > span { display: none; }
  .activity-category-shortcuts { gap: 6px; }
  .activity-category-shortcuts button { padding-inline: 12px; }
  .activity-filter-form .field-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Spendly v7.5.2 — Grocery Price Input Fix
   ========================================================= */

/* Give Store Mode price entry real usable width. Earlier native-form
   styling capped the input itself to 6.4ch, which made entered prices
   easy to clip even when the surrounding control had room. */
.grocery-run-item-controls {
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 10px !important;
}
.grocery-run-control-group {
  min-width: 0;
}
.grocery-run-price-group {
  min-width: 0;
  width: 100%;
}
.grocery-run-price {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  gap: 6px !important;
  padding: 0 10px !important;
  overflow: hidden;
}
.grocery-run-price input,
.grocery-run-price.empty input,
.grocery-run-price:not(.empty) input {
  display: block;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 36px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
  font-size: 17px !important;
  font-weight: 720 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.grocery-run-price:focus-within {
  background: #121814 !important;
  box-shadow: inset 0 0 0 1px rgba(120,223,146,.28), 0 0 0 3px rgba(120,223,146,.055) !important;
}

@media (max-width: 370px) {
  .grocery-run-item-controls {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .grocery-run-control-group { padding-inline: 7px; }
  .grocery-run-price { padding-inline: 8px !important; }
  .grocery-run-price input,
  .grocery-run-price.empty input,
  .grocery-run-price:not(.empty) input { font-size: 16px !important; }
}


/* =========================================================
   Spendly v7.5.3 — Add Expense Grocery Price Prefix Fix
   ========================================================= */

/* The legacy price-prefix rule positioned the euro symbol absolutely.
   In the newer Grocery Items editor that caused typed digits to render
   beneath the prefix. Make prefix and number true sibling columns. */
.native-spend-form .expense-grocery-line {
  grid-template-columns: minmax(0, 1fr) minmax(128px, 34%) 38px;
  gap: 8px;
}

.native-spend-form .expense-grocery-price,
.native-spend-form .expense-grocery-price-input {
  min-width: 0;
}

.native-spend-form .expense-grocery-price-input {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: 42px;
  padding: 0 8px 0 7px;
  overflow: hidden;
}

.native-spend-form .expense-grocery-price-input > span {
  position: static !important;
  inset: auto !important;
  width: 24px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #808783;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  pointer-events: none;
}

.native-spend-form .expense-grocery-price-input input,
.native-spend-form .expense-grocery-price-input input:focus,
.native-spend-form .expense-grocery-price-input input:focus-visible {
  position: static !important;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 4px 0 6px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f0f1ee;
  text-align: right;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.native-spend-form .expense-grocery-price-input:focus-within {
  border-color: rgba(112,220,143,.28);
  box-shadow: 0 0 0 3px rgba(112,220,143,.055);
}

@media (max-width: 390px) {
  .native-spend-form .expense-grocery-line {
    grid-template-columns: minmax(0, 1fr) 118px 36px;
    gap: 7px;
    padding: 9px;
  }
  .native-spend-form .expense-grocery-price-input {
    grid-template-columns: 22px minmax(0, 1fr);
    padding-inline: 6px;
  }
  .native-spend-form .expense-grocery-price-input > span {
    width: 22px;
    font-size: 15px;
  }
  .native-spend-form .expense-grocery-price-input input {
    font-size: 16px;
    padding-left: 4px !important;
  }
}


/* =========================================================
   Spendly v7.6.0 — Groceries Redesign
   ========================================================= */

#page-buy.grocery-vnext {
  display: none;
  gap: 26px;
  padding-top: 8px;
}
#page-buy.grocery-vnext.active { display: grid; }

.grocery-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 5px 4px 0;
}
.grocery-page-header h1 {
  margin: 0;
  color: #f3f4f1;
  font-size: clamp(43px, 11vw, 58px);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.065em;
}
.grocery-page-header p {
  margin: 12px 0 0;
  color: #858d92;
  font-size: 13px;
  font-weight: 650;
}
.grocery-page-add {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229,235,231,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  color: #75e092;
}
.grocery-page-add .app-icon { width: 23px; height: 23px; }

#page-buy .grocery-run-overview {
  padding: 20px;
  border: 1px solid rgba(103,221,136,.13);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 4%, rgba(103,221,136,.105), transparent 34%),
    linear-gradient(145deg, rgba(17,27,21,.95), rgba(11,16,13,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 18px 44px rgba(0,0,0,.14);
}
.grocery-run-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.grocery-run-overview-kicker {
  display: block;
  margin-bottom: 7px;
  color: #79e096;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.grocery-run-overview-head h2 {
  margin: 0;
  color: #f0f2ee;
  font-size: 25px;
  line-height: 1.05;
  font-weight: 780;
  letter-spacing: -.045em;
}
.grocery-run-overview-head > strong {
  padding-top: 17px;
  color: #cfd4d0;
  font-size: 13px;
  font-weight: 710;
  white-space: nowrap;
}
#page-buy .grocery-run-overview .grocery-hub-progress {
  height: 6px;
  margin-top: 20px;
  background: rgba(229,235,231,.07);
}
.grocery-run-overview-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  margin-top: 15px;
  border-top: 1px solid rgba(229,235,231,.065);
  border-bottom: 1px solid rgba(229,235,231,.065);
}
.grocery-run-overview-stats > div {
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
}
.grocery-run-overview-stats > div + div { border-left: 1px solid rgba(229,235,231,.065); }
.grocery-run-overview-stats span { color: #7f8883; font-size: 10px; font-weight: 690; }
.grocery-run-overview-stats strong { color: #ecefeb; font-size: 19px; font-weight: 790; }
#page-buy .grocery-run-overview .grocery-hub-start {
  min-height: 58px;
  margin-top: 16px;
  border-radius: 18px;
  background: #69da87;
  box-shadow: 0 14px 30px rgba(73,198,108,.14);
}
#page-buy .grocery-run-overview .grocery-hub-start:disabled {
  background: rgba(255,255,255,.055);
  color: #646d68;
  opacity: 1;
}
#page-buy .grocery-run-overview .grocery-hub-start:disabled .grocery-hub-start-icon { background: rgba(255,255,255,.035); }

.grocery-shopping-section,
.grocery-flat-section {
  min-width: 0;
  display: grid;
  gap: 14px;
}
.grocery-section-head {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px;
}
.grocery-section-head h2 {
  margin: 0;
  color: #eef0ed;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.04em;
}
.grocery-section-head p {
  margin: 5px 0 0;
  color: #7c858a;
  font-size: 11px;
  font-weight: 650;
}
.grocery-section-head.compact { padding: 0 4px; }
.grocery-section-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(103,221,136,.12);
  border-radius: 13px;
  background: rgba(103,221,136,.05);
  color: #79df96;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}
.grocery-section-action .app-icon { width: 16px; height: 16px; }

#page-buy .grocery-shopping-section .grocery-hub-quick-add {
  min-height: 56px;
  margin: 0;
  border-color: rgba(229,235,231,.09);
  border-radius: 18px;
  background: #0d1214;
}
#page-buy .grocery-shopping-section .grocery-hub-quick-add input { font-size: 15px; }
.grocery-list-toolbar {
  min-height: 0;
  display: flex;
  justify-content: flex-end;
  margin-top: -5px;
}
#page-buy .grocery-shopping-section .grocery-plan-groups { gap: 18px; margin: 0; }
#page-buy .grocery-shopping-section .grocery-plan-group { gap: 5px; }
#page-buy .grocery-shopping-section .grocery-plan-group-head { padding: 0 4px 4px; }
#page-buy .grocery-shopping-section .grocery-plan-group-head span,
#page-buy .grocery-shopping-section .grocery-plan-group-head small {
  color: #727b80;
  font-size: 10px;
  font-weight: 690;
}
#page-buy .grocery-shopping-section .grocery-plan-group .plan-list {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
#page-buy .grocery-shopping-section .grocery-plan-row {
  min-height: 66px;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 10px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid rgba(229,235,231,.065);
  background: transparent !important;
}
#page-buy .grocery-shopping-section .grocery-plan-row:first-child { border-top: 1px solid rgba(229,235,231,.065); }
#page-buy .grocery-shopping-section .grocery-quantity-badge {
  min-width: 38px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 5px;
  border-radius: 13px;
  background: rgba(103,221,136,.085);
  color: #83e39d;
  font-size: 10px;
}
#page-buy .grocery-shopping-section .grocery-plan-main { padding: 0; }
#page-buy .grocery-shopping-section .grocery-plan-row .plan-row-copy strong {
  color: #e7eae6;
  font-size: 15px;
  font-weight: 730;
}
#page-buy .grocery-shopping-section .grocery-plan-row .plan-row-copy small {
  margin-top: 4px;
  color: #788187;
  font-size: 10px;
  font-weight: 610;
}
#page-buy .grocery-shopping-section .plan-row-chevron { color: #626b70; }
#page-buy .grocery-shopping-section .grocery-list-empty {
  min-height: 144px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed rgba(229,235,231,.08);
  border-radius: 20px;
  background: rgba(255,255,255,.012);
  text-align: center;
}

.grocery-flat-section {
  padding-top: 21px;
  border-top: 1px solid rgba(229,235,231,.07);
}
#page-buy .grocery-flat-section .grocery-recent-runs { display: grid; }
#page-buy .grocery-flat-section .grocery-recent-row {
  min-height: 65px;
  padding: 10px 4px;
  grid-template-columns: 39px minmax(0,1fr) auto 16px;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid rgba(229,235,231,.06);
  background: transparent;
}
#page-buy .grocery-flat-section .grocery-recent-row:first-child { border-top: 1px solid rgba(229,235,231,.06); }
#page-buy .grocery-flat-section .grocery-recent-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(103,221,136,.075);
}
#page-buy .grocery-flat-section .grocery-recent-copy strong { color: #e5e8e4; font-size: 14px; font-weight: 720; }
#page-buy .grocery-flat-section .grocery-recent-copy small { color: #778087; font-size: 10px; font-weight: 610; }
#page-buy .grocery-flat-section .grocery-recent-amount { color: #e5e8e4; font-size: 14px; font-weight: 750; }
#page-buy .grocery-flat-section .grocery-recent-empty {
  min-height: 130px;
  border: 0;
  border-top: 1px solid rgba(229,235,231,.06);
  border-bottom: 1px solid rgba(229,235,231,.06);
  border-radius: 0;
  background: transparent;
}
#page-buy .grocery-flat-section .grocery-recent-empty strong { color: #dfe3df; }
#page-buy .grocery-flat-section .grocery-recent-empty span { color: #747d82; }
#page-buy .grocery-purchased-section .grocery-recent-row { grid-template-columns: 39px minmax(0,1fr) 16px; }

/* Store Mode refresh — keep proven workflow, make the active shop feel focused. */
.grocery-run-subpage { background: #070a0c; }
.grocery-run-header {
  min-height: calc(68px + env(safe-area-inset-top));
  grid-template-columns: 42px minmax(0,1fr) 56px;
  align-items: end;
  background: rgba(7,10,12,.94);
}
.grocery-run-header > div:nth-child(2) { padding-bottom: 9px; text-align: center; }
.grocery-run-header strong { color: #eff1ee; font-size: 17px; font-weight: 760; }
.grocery-run-reset { color: #858e93; font-size: 10px; }
.grocery-run-body { padding-top: 18px; }
.grocery-run-store-card {
  padding: 14px;
  border-radius: 21px;
  background: rgba(255,255,255,.022);
}
.grocery-run-store-field label > span { color: #8a9390; font-size: 10px; font-weight: 680; }
.grocery-run-store-input-shell { min-height: 51px; border-radius: 16px; }
.grocery-run-quick-add { margin-top: 12px; }
.grocery-run-group-head { margin-top: 17px; }
.grocery-run-group-head span { color: #dce0dc; font-size: 13px; font-weight: 720; }
.grocery-run-group-head small { color: #778087; }
.grocery-run-list { gap: 8px; }
.grocery-run-item {
  padding: 13px;
  border-radius: 20px;
  background: rgba(255,255,255,.021);
}
.grocery-run-item.selected {
  border-color: rgba(103,221,136,.20);
  background: rgba(103,221,136,.045);
}
.grocery-run-item-title strong { color: #e8ebe7; font-size: 15px; font-weight: 730; }
.grocery-run-item-title-actions > span,
.grocery-run-item-hint { color: #788187; font-size: 10px; }
.grocery-run-check { width: 38px; height: 38px; border-radius: 13px; }
.grocery-run-item-controls { margin-top: 11px; }
.grocery-run-control-label { color: #737c81; font-size: 9px; font-weight: 680; }
.grocery-run-calculation { border-top-color: rgba(229,235,231,.055); }
.grocery-run-calculation span { color: #747d82; }
.grocery-run-calculation strong { color: #dfe3df; }
.grocery-run-shop-footer {
  border-color: rgba(229,235,231,.10);
  background: rgba(13,18,20,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
}
.grocery-run-shop-footer > div span { color: #818a8f; }
.grocery-run-shop-footer > div strong { color: #f0f2ef; }
.grocery-run-shop-footer button[data-state="ready"] { background: #69da87; color: #061009; }

@media (max-width: 390px) {
  #page-buy.grocery-vnext { gap: 22px; }
  .grocery-page-header h1 { font-size: 43px; }
  #page-buy .grocery-run-overview { padding: 17px; }
  .grocery-run-overview-head h2 { font-size: 22px; }
  .grocery-section-action span { display: none; }
  .grocery-section-action { width: 38px; padding: 0; justify-content: center; }
}


/* =========================================================
   Spendly v7.6.1 — Groceries State + iPhone Polish
   ========================================================= */
.grocery-run-stepper button {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  color: #8fe3a4 !important;
  font-size: 19px !important;
  font-weight: 620 !important;
  line-height: 1 !important;
}
.grocery-run-stepper button:last-child { visibility: visible !important; opacity: 1 !important; }
.grocery-run-overview-stats span { white-space: nowrap; }
#page-buy .grocery-purchased-section .grocery-section-head p { color:#747d82; }


/* =========================================================
   Spendly v7.6.2 — Store Mode Quantity + Price Entry Fix
   ========================================================= */
.grocery-run-item-controls {
  grid-template-columns: 118px minmax(0, 1fr) !important;
  gap: 10px !important;
}
.grocery-run-quantity-group {
  min-width: 0 !important;
  overflow: visible !important;
}
.grocery-run-stepper {
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(229,235,231,.07) !important;
  border-radius: 12px !important;
  background: #15191c !important;
}
.grocery-run-stepper button,
.grocery-run-stepper span {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}
.grocery-run-stepper button {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.018) !important;
  color: #8fe3a4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.grocery-run-stepper button:first-child { border-right: 1px solid rgba(229,235,231,.06) !important; }
.grocery-run-stepper button:last-child { border-left: 1px solid rgba(229,235,231,.06) !important; }
.grocery-run-stepper span {
  border: 0 !important;
  color: #e4e8e4 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  font-variant-numeric: tabular-nums;
}
.grocery-step-icon {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.grocery-run-price {
  min-height: 40px !important;
}
.grocery-run-price input,
.grocery-run-price.empty input,
.grocery-run-price:not(.empty) input {
  height: 38px !important;
  font-size: 18px !important;
  font-weight: 740 !important;
  text-align: right !important;
  caret-color: #83e39d !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}
.grocery-run-price:focus-within {
  border-color: transparent !important;
  background: #121814 !important;
  box-shadow: inset 0 0 0 1.5px rgba(120,223,146,.36), 0 0 0 3px rgba(120,223,146,.055) !important;
}
@media (max-width: 390px) {
  .grocery-run-item-controls {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}


/* =========================================================
   Spendly v7.6.3 — Store Mode Keyboard-Aware Save Footer
   ========================================================= */
/* Keep the action footer hidden for ordinary text-entry keyboards, but when
   editing a unit price make it behave like an iOS keyboard accessory. */
.grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
  display: grid !important;
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 30px), 490px) !important;
  z-index: 90 !important;
  margin: 0 !important;
}
.grocery-run-subpage.price-keyboard-active .grocery-run-body {
  padding-bottom: 118px !important;
  scroll-padding-bottom: 118px !important;
}
@media (max-width: 390px) {
  .grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
    width: calc(100% - 22px) !important;
  }
}


/* =========================================================
   Spendly v7.6.4 — Stable Store Mode + Keyboard Save Bar
   =========================================================
   Keep Store Mode anchored to the layout viewport. iOS may pan the
   visual viewport while a field is focused; using visualViewport.offsetTop
   as the subpage top causes the whole screen to jump and leave a blank band. */
body.grocery-run-open .grocery-run-subpage {
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

/* In the normal shopping state the summary belongs to the content instead of
   floating at the physical bottom of a mostly empty screen. */
body.grocery-run-open .grocery-run-body {
  padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
}
body.grocery-run-open .grocery-run-shop-footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 18px 0 2px !important;
  transform: none !important;
  z-index: 4 !important;
}

/* While editing a Unit Price, promote the same footer into an iOS-style
   keyboard accessory. --grocery-keyboard-offset is the part of the layout
   viewport obscured beneath the current visual viewport. */
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
  display: grid !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--grocery-keyboard-offset, 0px) + 8px) !important;
  width: min(calc(100% - 22px), 740px) !important;
  max-width: 740px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 180 !important;
  box-shadow: 0 -14px 38px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-body {
  padding-bottom: 112px !important;
  scroll-padding-bottom: 124px !important;
}

@media (max-width: 390px) {
  body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
    width: calc(100% - 18px) !important;
  }
}


/* =========================================================
   Spendly v7.6.5 — Store Mode Keyboard Geometry Final Fix
   ========================================================= */
/* Position the compact save bar from the actual visual viewport bottom.
   This avoids deriving a keyboard height from the layout viewport, which
   can drift when iOS pans the visual viewport around a focused control. */
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
  top: var(--grocery-keyboard-footer-top, auto) !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Keep just enough breathing room for the focused item; do not reserve a
   giant artificial keyboard gap inside the scrolling content. */
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-body {
  padding-bottom: 96px !important;
  scroll-padding-bottom: 96px !important;
}


/* =========================================================
   Spendly v7.6.9 — Supermarket-Specific Price Memory
   =========================================================
   Prefer a predictable fixed-bottom action bar over iOS visualViewport
   repositioning. Keyboard state must never strand the footer in the page. */
body.grocery-run-open .grocery-run-subpage .grocery-run-shop-footer {
  display: grid !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: min(calc(100% - 32px), 728px) !important;
  max-width: 728px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 190 !important;
}
body.grocery-run-open .grocery-run-subpage .grocery-run-body {
  padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
}
@media (max-width: 390px) {
  body.grocery-run-open .grocery-run-subpage .grocery-run-shop-footer {
    width: calc(100% - 18px) !important;
  }
}

/* ==========================================================
   Spendly v7.6.9 — Store Mode Animation Stability
   Keep Grocery Run rows mounted visually. State changes use
   border/background transitions without replaying entry/pop animations.
   ========================================================== */
.grocery-run-item,
.grocery-run-item.selected,
.grocery-run-item.in-cart {
  animation: none !important;
}
.grocery-run-item {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
.grocery-run-check {
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .14s ease;
}
.grocery-run-check:active { transform: scale(.94); }
.grocery-store-dropdown { animation: none !important; }

/* v7.8.3 Clean Insights Rebuild */
.insights-v780 .insights-section-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.insights-v780 .insights-section-btn{font-size:9.5px}
.insights-v780 .insights-panel.active{gap:12px}
.insights-v780 .insights-overview-hero{border-color:rgba(102,232,143,.18);background:radial-gradient(circle at 85% 8%,rgba(88,224,131,.11),transparent 34%),linear-gradient(145deg,rgba(17,38,26,.97),rgba(8,21,14,.98))}
.insights-v780 .insights-overview-hero-value{font-variant-numeric:tabular-nums}
.insights-v780 .insights-overview-categories{margin-top:1px}
.insights-v780 .insights-chart-empty.compact{min-height:92px;padding:16px}
.insights-category-bars{display:grid;gap:12px}
.insights-category-bar-row{display:grid;gap:6px}
.insights-category-bar-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.insights-category-bar-head span{min-width:0;overflow:hidden;color:#a3b1a5;font-size:10.5px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.insights-category-bar-head strong{flex:0 0 auto;color:#eaf4e9;font-size:11px;font-weight:950}
.insights-category-bar-track{height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.045)}
.insights-category-bar-track i{display:block;height:100%;border-radius:999px;background:var(--bar-color,#67e891)}
.insights-category-bar-row small{color:#68796b;font-size:8.5px;font-weight:800}
.insights-grocery-hero{display:grid;gap:15px;padding:18px;border:1px solid rgba(103,232,145,.20);border-radius:24px;background:radial-gradient(circle at 88% 4%,rgba(103,232,145,.16),transparent 38%),linear-gradient(145deg,rgba(15,39,25,.98),rgba(7,22,14,.99));box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)}
.insights-grocery-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.insights-grocery-hero-head>div{display:grid;gap:4px}
.insights-grocery-hero-head>div>span{color:#78ea99;font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.insights-grocery-hero-head small{color:#718374;font-size:9px;font-weight:800}
.insights-grocery-badge{padding:7px 9px;border:1px solid rgba(103,232,145,.13);border-radius:999px;background:rgba(103,232,145,.07);color:#85eaa0;font-size:8px;font-weight:900;white-space:nowrap}
.insights-grocery-hero>strong{color:#f0f8ef;font-size:clamp(39px,12vw,54px);line-height:.95;font-weight:950;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.insights-grocery-hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:14px;border-top:1px solid rgba(202,236,199,.08)}
.insights-grocery-hero-foot span{display:grid;gap:4px;color:#788a7a;font-size:9px;font-weight:800}
.insights-grocery-hero-foot b{color:#dceadb;font-size:13px;font-weight:950}
.insights-grocery-metrics{grid-template-columns:1.15fr .85fr}
.insights-store-breakdown{display:grid;gap:13px}
.insights-store-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:end}
.insights-store-row>div:first-child{min-width:0;display:grid;gap:3px}
.insights-store-row strong{overflow:hidden;color:#dce9db;font-size:11px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.insights-store-row small{color:#718374;font-size:8.5px;font-weight:800}
.insights-store-row>span{color:#dce9db;font-size:11px;font-weight:950}
.insights-store-bar{grid-column:1/-1;height:7px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.045)}
.insights-store-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#55c978,#78efa0)}
.insights-grocery-item-list{display:grid}
.insights-grocery-item-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(202,236,199,.065)}
.insights-grocery-item-row:first-child{padding-top:2px}
.insights-grocery-item-row:last-child{padding-bottom:2px;border-bottom:0}
.insights-grocery-item-row>div{min-width:0;display:grid;gap:4px}
.insights-grocery-item-row strong{overflow:hidden;color:#e2eee0;font-size:11.5px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.insights-grocery-item-row small{color:#718374;font-size:8.5px;font-weight:800}
.insights-grocery-item-row>span{color:#91e9a8;font-size:11px;font-weight:950;white-space:nowrap}
.insights-price-comparisons{display:grid;gap:10px}
.insights-price-row{display:grid;gap:9px;padding:11px;border:1px solid rgba(202,236,199,.07);border-radius:15px;background:rgba(255,255,255,.018)}
.insights-price-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.insights-price-title strong{min-width:0;overflow:hidden;color:#e3eee1;font-size:11.5px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.insights-price-title>span{flex:0 0 auto;color:#819384;font-size:8px;font-weight:850}
.insights-price-store-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.insights-price-store{min-width:0;display:flex;justify-content:space-between;gap:7px;padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.025);border:1px solid rgba(202,236,199,.055)}
.insights-price-store span{min-width:0;overflow:hidden;color:#849687;font-size:8.5px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.insights-price-store strong{color:#dce9db;font-size:9.5px;font-weight:950;white-space:nowrap}
.insights-price-store.best{border-color:rgba(103,232,145,.19);background:rgba(103,232,145,.055)}
.insights-price-store.best span,.insights-price-store.best strong{color:#82e99d}
.insights-v780 .insights-chart-grid{stroke:rgba(202,236,199,.08)}
.insights-v780 .insights-chart-line{stroke:#67e891}
.insights-v780 .insights-chart-dot{fill:#0c1e13;stroke:#72ed98}
.insights-v780 .insights-chart-label{fill:#718374}
.insights-v780 .insights-week-bar{background:linear-gradient(180deg,#5fae72,#397f4f)}
@media(max-width:360px){.insights-grocery-badge{display:none}.insights-grocery-metrics{grid-template-columns:1fr 1fr}.insights-price-store-list{grid-template-columns:1fr}.insights-v780 .insights-section-btn{font-size:9px}}



/* Spendly v7.8.4 — Insights data accuracy + crisp iOS header
   Scope only: Insights. Stable PWA/auth/navigation behaviour is unchanged. */
.insights-subpage.show {
  animation: insightsPageFadeV784 .16s ease-out both;
}
@keyframes insightsPageFadeV784 {
  from { opacity: 0; }
  to { opacity: 1; }
}
.insights-subpage-header {
  background: #080a0c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.insights-header-copy,
.insights-header-copy h1,
.insights-header-copy p {
  filter: none !important;
  text-shadow: none !important;
}
.insights-header-copy h1 {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* =========================================================
   Spendly v7.8.5 — iOS Crisp Insights Header
   Deliberately removes all compositing/raster effects from the
   Insights shell/header. No data, navigation or PWA logic changes.
   ========================================================= */
body.insights-open .insights-subpage,
body.insights-open .insights-subpage.show {
  animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  perspective: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
body.insights-open .insights-subpage-header {
  position: relative !important;
  z-index: 5 !important;
  background: #080a0c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
  contain: none !important;
}
body.insights-open .insights-header-copy,
body.insights-open .insights-header-copy h1,
body.insights-open .insights-header-copy p {
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
  will-change: auto !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
body.insights-open .insights-header-copy h1 {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  font-synthesis: none !important;
}

/* =========================================================
   Spendly v7.8.7 — Global iOS Crisp Rendering Fix
   Removes forced compositing from page/header layers. WebKit can
   rasterise transformed/sticky layers softly on Retina displays.
   ========================================================= */
@media (max-width: 699px) {
  html,
  body {
    text-rendering: auto !important;
  }

  /* The shared Home / Activity / Groceries / Settings header must
     remain a normal painted layer on iOS — not sticky/composited. */
  .topbar,
  .contextual-topbar,
  #appHeader {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    will-change: auto !important;
    perspective: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    contain: none !important;
    opacity: 1 !important;
  }

  .context-header-copy,
  .context-header-copy h1,
  .context-header-copy p,
  .context-header-meta,
  .context-header-meta .app-icon {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    will-change: auto !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .context-header-copy h1 {
    font-weight: 800 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: auto !important;
    font-synthesis: none !important;
  }

  /* Do not promote whole pages into transformed/filter layers. These
     layers sit beside the shared header and are the most likely source
     of WebKit's soft rasterisation. */
  .page,
  .page.active,
  .page.slide-forward,
  .page.slide-back {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    animation: none !important;
    will-change: auto !important;
    perspective: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  /* Full-screen app subpages receive the same treatment so their own
     headers are painted directly rather than as transformed bitmaps. */
  .insights-subpage,
  .insights-subpage.show,
  .grocery-run-subpage,
  .grocery-run-subpage.show {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    animation: none !important;
    will-change: auto !important;
    perspective: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .insights-subpage-header,
  .grocery-run-header {
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    will-change: auto !important;
    contain: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .insights-header-copy,
  .insights-header-copy h1,
  .insights-header-copy p,
  .grocery-run-header > * {
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  .insights-header-copy h1 {
    font-weight: 800 !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: auto !important;
    font-synthesis: none !important;
  }
}


/* =========================================================
   Spendly v7.8.7 — iPhone Header Pixel Alignment
   Move headers slightly below the safe-area boundary and keep
   their mobile geometry on whole CSS-pixel values.
   ========================================================= */
@media (max-width: 699px) {
  .app-shell {
    padding-left: max(24px, env(safe-area-inset-left)) !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
  }

  .topbar,
  .contextual-topbar,
  #appHeader {
    min-height: 96px !important;
    margin-top: 12px !important;
    padding: 16px 0 16px !important;
    gap: 16px !important;
    align-items: center !important;
  }

  .context-header-copy {
    gap: 6px !important;
  }

  .context-header-copy h1 {
    margin: 0 !important;
    font-size: 38px !important;
    line-height: 40px !important;
    letter-spacing: -2px !important;
    font-weight: 800 !important;
  }

  .context-header-copy p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
  }

  .contextual-topbar[data-page="home"] .context-header-meta,
  .context-header-meta,
  .context-header-meta[type="button"] {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 16px !important;
  }

  .contextual-topbar[data-page="home"] .context-header-meta .app-icon,
  .context-header-meta .app-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .insights-subpage-header,
  .grocery-run-header {
    min-height: calc(env(safe-area-inset-top) + 88px) !important;
    padding: calc(env(safe-area-inset-top) + 18px) 24px 16px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .insights-header-copy {
    gap: 5px !important;
  }

  .insights-header-copy h1 {
    font-size: 24px !important;
    line-height: 26px !important;
    letter-spacing: -1px !important;
  }

  .insights-header-copy p {
    font-size: 11px !important;
    line-height: 14px !important;
    letter-spacing: 0 !important;
  }
}

@media (max-width: 370px) {
  .app-shell {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }

  .context-header-copy h1 {
    font-size: 34px !important;
    line-height: 36px !important;
  }

  .insights-subpage-header,
  .grocery-run-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   Spendly v7.8.8 — Insights Header Alignment
   Reuses the proven v7.8.7 crisp mobile header geometry for
   the full-screen Insights workspace. Insights-only patch.
   ========================================================= */
@media (max-width: 699px) {
  .insights-subpage-header {
    min-height: calc(env(safe-area-inset-top) + 112px) !important;
    padding: calc(env(safe-area-inset-top) + 28px) 24px 16px !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    background: #080a0c !important;
    border-bottom: 1px solid rgba(223, 228, 224, .07) !important;
  }

  .insights-back {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .insights-back:active {
    transform: none !important;
    -webkit-transform: none !important;
  }

  .insights-back .app-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .insights-header-copy {
    display: grid !important;
    gap: 6px !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  .insights-header-copy h1 {
    margin: 0 !important;
    color: #f2f4f6 !important;
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 38px !important;
    line-height: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    font-synthesis: none !important;
  }

  .insights-header-copy p {
    margin: 0 !important;
    color: #747c86 !important;
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .insights-period-label {
    align-self: center !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
  }
}

@media (max-width: 370px) {
  .insights-subpage-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
  }
  .insights-header-copy h1 {
    font-size: 34px !important;
    line-height: 36px !important;
  }
  .insights-period-label {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* v7.9.2 — Local Lucide-based icon system. */
.spendly-icon-sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none!important}
.app-icon use{fill:none;stroke:inherit;stroke-width:inherit;stroke-linecap:inherit;stroke-linejoin:inherit}
.nav-btn .ico .app-icon{width:22px;height:22px;stroke-width:2}
.nav-add-orb .app-icon{width:25px;height:25px;stroke-width:2}
.context-header-meta .app-icon{stroke-width:2}
.settings-icon .app-icon{stroke-width:2}


/* =========================================================
   Spendly v7.9.3 — Insights Width Polish
   Use more of the iPhone canvas for Insights while preserving
   a comfortable 16px mobile edge gutter. Header geometry, data,
   navigation, icons and PWA behaviour are intentionally untouched.
   ========================================================= */
@media (max-width: 699px) {
  #page-analytics.insights-primary-page {
    --insights-edge-bleed: 8px;
    overflow: visible !important;
  }

  #page-analytics .insights-primary-body {
    width: calc(100% + (var(--insights-edge-bleed) * 2)) !important;
    max-width: none !important;
    margin-left: calc(var(--insights-edge-bleed) * -1) !important;
    margin-right: calc(var(--insights-edge-bleed) * -1) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-analytics .insights-controls,
  #page-analytics .insights-panel,
  #page-analytics .insights-scope-switch,
  #page-analytics .insights-section-tabs,
  #page-analytics .insights-overview-hero,
  #page-analytics .insights-grocery-hero,
  #page-analytics .insights-card,
  #page-analytics .insights-metrics {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 370px) {
  #page-analytics.insights-primary-page {
    --insights-edge-bleed: 6px;
  }
}


/* =========================================================
   Spendly v7.9.5 — Insights Segmented Control Fix
   Keep the v7.9.3 content/card width exactly as-is. The legacy
   Insights stylesheet still declared four columns for a control
   that now contains three tabs, leaving an empty fourth column.
   Force the final three-view selector to consume the full row.
   ========================================================= */
#page-analytics .insights-section-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

#page-analytics .insights-section-tabs > .insights-section-btn {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

#page-analytics .insights-scope-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

#page-analytics .insights-scope-switch > .insights-scope-btn {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}


/* =========================================================
   Spendly v7.10.0 — Final Product Polish
   Small, low-risk consistency pass only. No budget, sync,
   navigation architecture or PWA/auth behaviour changes.
   ========================================================= */

/* Finish the Lucide migration inside grocery editors/detail sheets. */
.expense-grocery-remove .app-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}
.expense-grocery-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.expense-grocery-add .app-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}
.grocery-quantity-stepper button,
.grocery-detail-stepper button {
  display: grid;
  place-items: center;
}
.grocery-quantity-stepper button .app-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.15;
}
.grocery-detail-stepper button .app-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.15;
}

/* Give the supermarket manager a little more breathing room while
   preserving its existing responsive structure. */
.supermarket-manager-list {
  padding-top: 8px;
  padding-bottom: 8px;
}
.supermarket-manager-row {
  min-height: 72px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.supermarket-manager-actions {
  gap: 9px;
}
.supermarket-manager-action,
.supermarket-manager-edit button {
  min-height: 44px;
}

/* Consistent touch targets for the compact controls users hit often. */
.close-btn,
.activity-filter-button,
.grocery-section-action,
.grocery-clear-bought,
.home-text-action {
  min-height: 44px;
}

/* Make sheet content feel consistent without changing sheet behaviour. */
.modal-body > .form-grid,
.modal-body > .transaction-detail,
.modal-body > .supermarket-manager,
.modal-body > .activity-filter-form {
  width: 100%;
}

/* Prevent the floating nav from visually crowding the final content row. */
@media (max-width: 699px) {
  .page.active {
    padding-bottom: 10px;
  }
  #page-analytics.page.active {
    padding-bottom: 16px;
  }
}


/* =========================================================
   Spendly v7.10.1 — Add Expense Keyboard Safety
   Keep modal entry fields inside the iOS visual viewport and
   never leave the primary navigation underneath the keyboard.
   ========================================================= */

/* A modal owns the screen while it is open. The tab bar behind it adds
   visual clutter on iOS and can sit inside the keyboard accessory area. */
body.modal-open .nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Let the Add sheet consume the keyboard-safe visual viewport. */
.modal-backdrop[data-kind="spend"].keyboard-active {
  align-items: flex-end;
  padding-top: 4px;
  padding-bottom: 4px;
}
.modal-backdrop[data-kind="spend"].keyboard-active .modal {
  max-height: calc(var(--spendly-visual-height) - 8px) !important;
}
.modal-backdrop[data-kind="spend"].keyboard-active .spend-form-scroll {
  scroll-padding-top: 18px;
  scroll-padding-bottom: 26px;
}

/* Keep the action inside the sheet, above the keyboard, without allowing
   the footer itself to steal scrolling space from the focused field. */
.modal-backdrop[data-kind="spend"].keyboard-active .spend-form-footer {
  flex: 0 0 auto;
  padding-bottom: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-backdrop[data-kind="spend"] #expenseText,
.modal-backdrop[data-kind="spend"] textarea,
.modal-backdrop[data-kind="spend"] input[type="text"] {
  scroll-margin-top: 18px;
  scroll-margin-bottom: 18px;
}


/* =========================================================
   Spendly v7.10.3 — Add Expense Description Focus Dock
   iOS can pan a focused text input out of a nested sheet during the
   keyboard animation. Keep the real field in the same DOM, but make
   it the first visible form row while it is being edited.
   ========================================================= */
.modal-backdrop[data-kind="spend"].description-keyboard-active .spend-form-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-content: initial !important;
  gap: 10px !important;
  overflow-y: auto !important;
  scroll-padding-top: 8px !important;
  padding-top: 8px !important;
}

/* While typing the description, Amount + Category are already known and
   only consume scarce keyboard-height. Temporarily collapse them; they
   return instantly when the keyboard closes. */
.modal-backdrop[data-kind="spend"].description-keyboard-active .spend-amount-field,
.modal-backdrop[data-kind="spend"].description-keyboard-active .expense-category-field {
  display: none !important;
}

/* The focused What Was It? row becomes the guaranteed first element. */
.modal-backdrop[data-kind="spend"].description-keyboard-active .native-expense-main {
  order: -100 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: block !important;
  flex: 0 0 auto !important;
  min-height: 64px !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-color: rgba(112,220,143,.23) !important;
  background: #151a17 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 3px rgba(112,220,143,.045) !important;
}
.modal-backdrop[data-kind="spend"].description-keyboard-active .native-expense-main [data-expense-description-field] {
  display: block !important;
  min-height: 62px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.modal-backdrop[data-kind="spend"].description-keyboard-active #expenseText {
  display: block !important;
  min-height: 34px !important;
  visibility: visible !important;
  opacity: 1 !important;
  caret-color: #77df94 !important;
}

/* Make the keyboard state less cramped without changing the closed sheet. */
.modal-backdrop[data-kind="spend"].description-keyboard-active .spend-form-footer {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
.modal-backdrop[data-kind="spend"].description-keyboard-active .spend-save-btn {
  min-height: 49px !important;
}


/* =========================================================
   Spendly v7.10.5 — Global Input Focus Stability
   Store Mode no longer follows visualViewport with its Save footer.
   A stale keyboard class must not move layout beneath a focused input.
   ========================================================= */
body.grocery-run-open .grocery-run-subpage.keyboard-active .grocery-run-shop-footer,
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-shop-footer {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  width: min(calc(100% - 32px), 728px) !important;
  max-width: 728px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}
body.grocery-run-open .grocery-run-subpage.keyboard-active .grocery-run-body,
body.grocery-run-open .grocery-run-subpage.price-keyboard-active .grocery-run-body {
  padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important;
}


/* =========================================================
   Spendly v8.1.0 — Barcode Scanner Foundation
   Scanner UI is isolated above Store Mode; it never rebuilds or writes to
   the active grocery run in this release.
   ========================================================= */
.grocery-run-quick-add.grocery-run-quick-add-scanner{grid-template-columns:minmax(0,1fr) 46px 46px!important}
.grocery-run-quick-add .grocery-run-scan-btn{display:grid;place-items:center;width:46px;min-width:46px;height:46px;padding:0;border:1px solid rgba(113,236,148,.17);border-radius:15px;background:rgba(99,226,137,.075);color:#88eca5}
.grocery-run-quick-add .grocery-run-scan-btn .app-icon{width:20px;height:20px}
.grocery-run-quick-add .grocery-run-scan-btn:active{transform:scale(.96)}
.barcode-scanner-subpage{position:fixed;inset:0;z-index:260;display:none;grid-template-rows:auto minmax(0,1fr);width:100%;height:100dvh;overflow:hidden;background:#050806;color:#edf7ed;outline:none}
.barcode-scanner-subpage.show{display:grid}
body.barcode-scanner-open{overflow:hidden!important;touch-action:none}
body.barcode-scanner-open .nav{visibility:hidden!important;pointer-events:none!important}
.barcode-scanner-header{position:relative;z-index:5;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:calc(76px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 18px 12px;border-bottom:1px solid rgba(211,239,211,.08);background:#070c08}
.barcode-scanner-close{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(211,239,211,.08);border-radius:16px;background:rgba(255,255,255,.025);color:#dcebdc}
.barcode-scanner-close .app-icon{width:20px;height:20px}
.barcode-scanner-header>div{min-width:0;display:grid;gap:3px}.barcode-scanner-header strong{font-size:20px;line-height:24px;font-weight:800;letter-spacing:-.4px}.barcode-scanner-header small{color:#728274;font-size:10px;font-weight:800}
.barcode-scanner-stage-badge{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid rgba(102,232,143,.14);border-radius:999px;background:rgba(102,232,143,.06);color:#79e899;font-size:9px;font-weight:950}
.barcode-scanner-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 14px calc(24px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#050806,#070b08 55%,#050806)}
.barcode-camera-shell{position:relative;aspect-ratio:3/4;max-height:min(58dvh,650px);overflow:hidden;border:1px solid rgba(217,241,218,.09);border-radius:26px;background:#020302;box-shadow:0 24px 60px rgba(0,0,0,.32)}
#barcodeScannerVideo{width:100%;height:100%;object-fit:cover;background:#020302}
.barcode-camera-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 22%,transparent 70%,rgba(0,0,0,.30))}
.barcode-scan-frame{position:absolute;left:8%;right:8%;top:36%;height:27%;border:1.5px solid rgba(118,239,151,.78);border-radius:20px;box-shadow:0 0 0 999px rgba(0,0,0,.17),0 0 28px rgba(104,232,140,.08);pointer-events:none;opacity:.92}
.barcode-scan-frame::before,.barcode-scan-frame::after{content:"";position:absolute;width:34px;height:34px;border-color:#7cf09b}.barcode-scan-frame::before{left:-2px;top:-2px;border-left:3px solid;border-top:3px solid;border-radius:19px 0 0 0}.barcode-scan-frame::after{right:-2px;bottom:-2px;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 19px 0}
.barcode-scan-frame i{position:absolute;left:7%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#75ef98 18%,#75ef98 82%,transparent);box-shadow:0 0 12px rgba(117,239,152,.75);animation:spendlyBarcodeSweep 1.9s ease-in-out infinite alternate}
@keyframes spendlyBarcodeSweep{from{transform:translateY(-42px)}to{transform:translateY(42px)}}
@media (prefers-reduced-motion:reduce){.barcode-scan-frame i{animation:none}}
.barcode-camera-state{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:8px;padding:24px;text-align:center;background:rgba(3,6,4,.83)}.barcode-camera-state[hidden]{display:none!important}
.barcode-camera-state-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(104,234,143,.14);border-radius:18px;background:rgba(104,234,143,.07);color:#7ceb9b}.barcode-camera-state-icon .app-icon{width:25px;height:25px}
.barcode-camera-state strong{font-size:15px;font-weight:950}.barcode-camera-state span{max-width:280px;color:#869689;font-size:10.5px;font-weight:750;line-height:1.5}
.barcode-scanner-panel{display:grid;gap:12px;margin-top:12px;padding:16px;border:1px solid rgba(213,240,214,.075);border-radius:22px;background:rgba(255,255,255,.018)}
.barcode-scanner-instructions{display:grid;gap:5px}.barcode-scanner-kicker,.barcode-scanner-result>span{color:#75e995;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.barcode-scanner-instructions>strong{font-size:13px;font-weight:950}.barcode-scanner-instructions>small,.barcode-scanner-error>small{color:#7e8e80;font-size:10px;font-weight:750;line-height:1.5}
.barcode-scanner-result{display:grid;gap:8px}.barcode-scanner-result>strong{overflow-wrap:anywhere;color:#f0f8ef;font-size:28px;line-height:1;font-weight:950;letter-spacing:.04em;font-variant-numeric:tabular-nums}.barcode-scanner-result>small{color:#849487;font-size:10px;font-weight:850}
.barcode-result-note{display:flex;align-items:center;gap:8px;padding:10px 11px;border-radius:13px;background:rgba(100,231,139,.055);color:#84d99c;font-size:9.5px;font-weight:800}.barcode-result-note .app-icon{width:16px;height:16px;flex:0 0 auto}
.barcode-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:3px}.barcode-result-actions .btn{width:100%;min-height:44px}.barcode-scanner-error{display:grid;gap:8px}.barcode-scanner-error>strong{font-size:13px;font-weight:950}
.barcode-manual-form{display:grid;gap:12px}.barcode-manual-form label{display:grid;gap:7px}.barcode-manual-form label>span{color:#91a194;font-size:9px;font-weight:900}.barcode-manual-form input{min-height:48px;border:1px solid rgba(205,236,208,.10);border-radius:15px;background:rgba(255,255,255,.025);color:#edf5ec;padding:0 13px;font-size:17px;font-weight:850;letter-spacing:.04em}
.barcode-scanner-subpage.result-ready .barcode-scan-frame,.barcode-scanner-subpage.scanner-error .barcode-scan-frame,.barcode-scanner-subpage.manual-entry .barcode-scan-frame{opacity:.22}
@media (min-width:700px){.barcode-scanner-body{width:min(100%,760px);margin:0 auto}.barcode-camera-shell{aspect-ratio:4/3}}
@media (max-width:390px){.barcode-scanner-header{grid-template-columns:46px minmax(0,1fr) auto;padding-left:12px;padding-right:12px}.barcode-scanner-body{padding-left:10px;padding-right:10px}.grocery-run-quick-add.grocery-run-quick-add-scanner{grid-template-columns:minmax(0,1fr) 44px 44px!important}.grocery-run-quick-add .grocery-run-scan-btn{width:44px;min-width:44px;height:44px}}


/* =========================================================
   Spendly v8.1.1 — Scanner Reliability + No Header Blur
   ========================================================= */
.grocery-run-quick-add.grocery-run-quick-add-scanner {
  grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  gap: 9px !important;
}
.grocery-run-quick-add.grocery-run-quick-add-scanner .grocery-run-scan-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
}
.grocery-run-quick-add.grocery-run-quick-add-scanner > button[type="submit"] {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
}
.barcode-scan-frame {
  left: 10% !important;
  right: 10% !important;
  top: 29% !important;
  height: 42% !important;
}
.barcode-scanner-result .barcode-result-actions {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important;
}

/* The user prefers completely solid headers. Never use glass/backdrop blur
   on page, Store Mode, scanner or sheet headers. */
.topbar,
.contextual-topbar,
#appHeader,
.grocery-run-header,
.barcode-scanner-header,
.modal-head {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.topbar,
.contextual-topbar,
#appHeader {
  background: #080a0c !important;
}
.grocery-run-header {
  background: #080a0c !important;
}
.barcode-scanner-header {
  background: #070c08 !important;
}
.modal-head {
  background: #1b1f22 !important;
}
.topbar::before, .topbar::after,
.contextual-topbar::before, .contextual-topbar::after,
.grocery-run-header::before, .grocery-run-header::after,
.barcode-scanner-header::before, .barcode-scanner-header::after,
.modal-head::before, .modal-head::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
@media (max-width: 390px) {
  .grocery-run-quick-add.grocery-run-quick-add-scanner {
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 8px !important;
  }
  .grocery-run-quick-add.grocery-run-quick-add-scanner .grocery-run-scan-btn,
  .grocery-run-quick-add.grocery-run-quick-add-scanner > button[type="submit"] {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

/* =========================================================
   Spendly v8.2.0 — Product Recognition
   Scanner-only recognition UI. No Store Mode/footer changes.
   ========================================================= */
.barcode-product-result{gap:10px}
.barcode-product-result>.barcode-product-name{overflow-wrap:anywhere;color:#f0f8ef;font-size:21px;line-height:1.15;font-weight:900;letter-spacing:-.025em;font-variant-numeric:normal}
.barcode-product-meta{color:#9caaa0;font-size:11px;font-weight:800;line-height:1.45}
.barcode-product-code{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 10px;padding:10px 11px;border:1px solid rgba(205,236,208,.075);border-radius:14px;background:rgba(255,255,255,.018)}
.barcode-product-code>span{grid-row:1 / span 2;color:#718176;font-size:8px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.barcode-product-code>strong{overflow-wrap:anywhere;color:#dfe9df;font-size:15px;line-height:18px;font-weight:900;letter-spacing:.035em;font-variant-numeric:tabular-nums}
.barcode-product-code>small{color:#748278;font-size:8.5px;font-weight:850}
.barcode-recognition-copy{color:#89978d;font-size:10.5px;font-weight:750;line-height:1.5}
.barcode-recognition-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.barcode-product-manual-form{gap:14px}
.barcode-product-manual-head{display:grid;gap:5px;padding:11px 12px;border:1px solid rgba(205,236,208,.075);border-radius:14px;background:rgba(255,255,255,.018)}
.barcode-product-manual-head>span{color:#75e995;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}
.barcode-product-manual-head>strong{overflow-wrap:anywhere;color:#e8f1e7;font-size:15px;font-weight:900;letter-spacing:.035em;font-variant-numeric:tabular-nums}
.barcode-product-manual-head>small{color:#7f8e82;font-size:9.5px;font-weight:750;line-height:1.45}
.barcode-product-manual-form input{letter-spacing:0;font-size:15px}
@media (max-width:390px){
  .barcode-product-result>.barcode-product-name{font-size:19px}
  .barcode-recognition-actions{gap:8px!important}
}


/* =========================================================
   Spendly v8.2.1 — Scanner Torch Polish
   Shows a camera-local flashlight control only when the active rear camera
   advertises torch support. Scanner recognition/write isolation is unchanged.
   ========================================================= */
.barcode-camera-torch {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(216, 241, 218, .16);
  border-radius: 14px;
  background: rgba(5, 10, 7, .78);
  color: #dcebdc;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.barcode-camera-torch[hidden] { display: none !important; }
.barcode-camera-torch .app-icon { width: 17px; height: 17px; }
.barcode-camera-torch.is-on {
  border-color: rgba(117, 239, 152, .34);
  background: rgba(96, 226, 135, .16);
  color: #85eda2;
}
.barcode-camera-torch:active { transform: scale(.97); }
.barcode-scanner-subpage:not(.camera-live) .barcode-camera-torch { display: none !important; }


/* =========================================================
   Spendly v8.3.0 — Product Memory
   Barcode catalogue only. Store Mode quantities/prices/Selected Total remain
   isolated until v8.4.0.
   ========================================================= */
.barcode-scanner-header{grid-template-columns:48px minmax(0,1fr)!important}
.barcode-scanner-stage-badge{display:none!important}
.barcode-scanner-instructions{gap:0!important}
.barcode-scanner-instructions>strong{font-size:12px!important;color:#a6b3a8!important}
.barcode-external-name{color:#78867b;font-size:9.5px;font-weight:750;line-height:1.45}
.barcode-recognition-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.barcode-product-manual-head{padding:9px 11px!important}
.barcode-product-manual-head>span{font-size:8px!important}
.barcode-product-manual-head>strong{font-size:13px!important}
@media(max-width:390px){.barcode-scanner-header{grid-template-columns:46px minmax(0,1fr)!important}}

/* v8.3 scanner copy cleanup: hide technical EAN/UPC format from normal UI. */
.barcode-product-code>small{display:none!important}


/* =========================================================
   Spendly v8.3.2 — Barcode Scanner Redesign
   Clean state-driven scanner built from the v8.3.0 Product Memory baseline.
   One state per screen. No Store Mode writes.
   ========================================================= */
.barcode-scanner-subpage{
  background:#060907!important;
}
.barcode-scanner-header{
  min-height:calc(78px + env(safe-area-inset-top))!important;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
  border-bottom:1px solid rgba(214,239,215,.075)!important;
  background:#080b09!important;
}
.barcode-scanner-header strong{
  font-size:20px!important;
  letter-spacing:-.035em!important;
}
.barcode-scanner-header small{
  color:#768379!important;
  font-size:10px!important;
  font-weight:750!important;
}
.barcode-scanner-body{
  display:block!important;
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:16px 16px calc(26px + env(safe-area-inset-bottom))!important;
  background:#060907!important;
}
.barcode-scanner-view[hidden]{display:none!important}
.barcode-scanner-view{
  width:min(100%,560px);
  margin:0 auto;
}
.barcode-camera-view{
  display:grid;
  gap:12px;
}
.barcode-camera-shell{
  aspect-ratio:3/4!important;
  max-height:min(68dvh,680px)!important;
  border-radius:28px!important;
  border:1px solid rgba(217,241,218,.085)!important;
  background:#020302!important;
  box-shadow:none!important;
}
.barcode-camera-hint{
  margin:0;
  color:#8a988d;
  text-align:center;
  font-size:11px;
  line-height:1.4;
  font-weight:750;
}
.barcode-camera-state{
  background:rgba(3,6,4,.87)!important;
}
.barcode-camera-state strong{
  font-size:16px!important;
}
.barcode-camera-state span{
  color:#879489!important;
  font-size:11px!important;
}
.barcode-result-view{
  display:grid;
  gap:14px;
  padding-top:8px;
}
.barcode-result-card,
.barcode-manage-card{
  display:grid;
  gap:9px;
  padding:22px 20px;
  border:1px solid rgba(211,238,213,.085);
  border-radius:24px;
  background:#0a0f0b;
}
.barcode-result-kicker,
.barcode-manage-card>span{
  color:#75e995;
  font-size:9px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.barcode-product-result>.barcode-product-name,
.barcode-manage-card>strong{
  color:#eff7ee!important;
  font-size:27px!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  font-variant-numeric:normal!important;
}
.barcode-product-meta,
.barcode-manage-card>small{
  color:#9aa79d!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:750!important;
}
.barcode-external-name{
  color:#6f7d72!important;
  font-size:10px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
.barcode-product-code{
  margin-top:4px;
  padding:10px 0 0!important;
  border:0!important;
  border-top:1px solid rgba(210,236,212,.07)!important;
  border-radius:0!important;
  background:transparent!important;
  grid-template-columns:auto minmax(0,1fr)!important;
}
.barcode-product-code>span{
  color:#657267!important;
  font-size:8px!important;
}
.barcode-product-code>strong{
  color:#aeb9b0!important;
  font-size:12px!important;
  line-height:16px!important;
  letter-spacing:.025em!important;
}
.barcode-product-code>small{display:none!important}
.barcode-recognition-copy{
  margin-top:2px;
  color:#8f9b91!important;
  font-size:11px!important;
  line-height:1.5!important;
  font-weight:700!important;
}
.barcode-recognition-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0!important;
}
.barcode-recognition-actions>.btn:only-child{
  grid-column:1/-1;
}
.barcode-recognition-actions .btn{
  min-height:50px!important;
  border-radius:17px!important;
}
.barcode-manage-link{
  justify-self:center;
  min-height:38px;
  padding:0 10px;
  border:0;
  background:transparent;
  color:#7e8b81;
  font-size:10px;
  font-weight:850;
}
.barcode-manage-link[hidden]{display:none!important}
.barcode-manage-link:active{color:#9dac9f}
.barcode-scanner-error{
  display:grid;
  gap:18px;
  padding-top:32px;
}
.barcode-simple-state{
  display:grid;
  justify-items:center;
  gap:9px;
  padding:28px 18px;
  text-align:center;
}
.barcode-simple-icon{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:4px;
  border:1px solid rgba(115,233,147,.12);
  border-radius:18px;
  background:rgba(115,233,147,.055);
  color:#79e899;
}
.barcode-simple-icon .app-icon{width:24px;height:24px}
.barcode-simple-state>strong{
  color:#edf5ec;
  font-size:22px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.035em;
}
.barcode-simple-state>small{
  max-width:310px;
  color:#879489;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
}
.barcode-manual-form{
  gap:16px!important;
  padding-top:16px;
}
.barcode-form-head{
  display:grid;
  gap:7px;
  padding:0 2px;
}
.barcode-form-head>span{
  color:#75e995;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.barcode-form-head>strong{
  color:#eef6ed;
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.04em;
}
.barcode-manual-form label{
  gap:8px!important;
}
.barcode-manual-form label>span{
  color:#849187!important;
  font-size:10px!important;
  font-weight:850!important;
}
.barcode-manual-form input{
  min-height:54px!important;
  padding:0 15px!important;
  border:1px solid rgba(210,236,212,.10)!important;
  border-radius:17px!important;
  background:#0a0f0b!important;
  color:#edf5ec!important;
  font-size:17px!important;
}
.barcode-product-manage{
  display:grid;
  gap:14px;
  padding-top:8px;
}
.barcode-manage-actions{
  overflow:hidden;
  border:1px solid rgba(211,238,213,.085);
  border-radius:20px;
  background:#0a0f0b;
}
.barcode-manage-row{
  width:100%;
  min-height:72px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:0;
  border-bottom:1px solid rgba(211,238,213,.065);
  background:transparent;
  color:#e8f1e7;
  text-align:left;
}
.barcode-manage-row:last-child{border-bottom:0}
.barcode-manage-row>span{
  display:grid;
  gap:4px;
}
.barcode-manage-row strong{
  font-size:13px;
  font-weight:900;
}
.barcode-manage-row small{
  color:#7f8c82;
  font-size:10px;
  line-height:1.35;
  font-weight:700;
}
.barcode-manage-row>.app-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:#6f7d72;
}
.barcode-manage-row.danger strong,
.barcode-manage-row.danger>.app-icon{
  color:#e47777;
}
.barcode-camera-torch{
  top:14px!important;
  right:14px!important;
  min-height:40px!important;
  border-radius:999px!important;
  background:rgba(5,10,7,.88)!important;
}
.barcode-scanner-subpage:not(.camera-live) .barcode-camera-torch{display:none!important}
@media(max-width:390px){
  .barcode-scanner-body{padding-left:12px!important;padding-right:12px!important}
  .barcode-product-result>.barcode-product-name,
  .barcode-manage-card>strong{font-size:24px!important}
  .barcode-result-card,.barcode-manage-card{padding:19px 17px}
}


/* =========================================================
   Spendly v8.3.3 — Scanner Result Polish
   ========================================================= */

/* Result actions are deliberately balanced. Earlier scanner CSS used a
   1.25fr/.75fr split; the redesign uses equal columns instead. */
.barcode-scanner-result .barcode-result-actions,
.barcode-recognition-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.barcode-recognition-actions .btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Author .btn display rules can otherwise override the browser's hidden
   attribute. Hidden scanner actions must genuinely disappear. */
.barcode-recognition-actions .btn[hidden] {
  display: none !important;
}

/* If a state has one action, keep it compact instead of stretching it into
   an oversized full-row CTA. */
.barcode-recognition-actions > .btn:only-child,
.barcode-recognition-actions > .btn:not([hidden]):only-of-type {
  grid-column: auto !important;
}

/* Product naming is a normal text field, not a contact/person identity field. */
#barcodeProductManualName {
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* =========================================================
   Spendly v8.4.0 — Store Mode Barcode Integration, Attempt 2
   Built from the approved v8.3.3 scanner. Product management and shopping
   remain separate states: Scan → Product → Store Mode → Success → Scan.
   ========================================================= */

.barcode-scanner-header{
  grid-template-columns:48px minmax(0,1fr) auto!important;
}
.barcode-scanner-header-done{
  min-width:54px;
  min-height:40px;
  padding:0 10px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#84e89f;
  font-size:11px;
  font-weight:900;
}
.barcode-scanner-header-done:active{opacity:.72}

.barcode-store-mode-view{
  display:grid;
  gap:14px;
  padding-top:8px;
}
.barcode-store-card{
  display:grid;
  gap:14px;
  padding:22px 20px;
  border:1px solid rgba(211,238,213,.085);
  border-radius:24px;
  background:#0a0f0b;
}
.barcode-store-card>strong{
  color:#eff7ee;
  font-size:27px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.045em;
}
.barcode-store-card>small{
  color:#9aa79d;
  font-size:12px;
  line-height:1.45;
  font-weight:750;
}
.barcode-store-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.barcode-store-summary>div{
  min-width:0;
  display:grid;
  gap:5px;
  padding:12px 13px;
  border:1px solid rgba(211,238,213,.07);
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.barcode-store-summary span,
.barcode-store-price-field>span{
  color:#748177;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.barcode-store-summary strong{
  overflow-wrap:anywhere;
  color:#cbd6cd;
  font-size:11px;
  line-height:1.35;
  font-weight:850;
}
.barcode-store-price-field{
  display:grid;
  gap:8px;
}
.barcode-store-price-input{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:56px;
  padding:0 15px;
  border:1px solid rgba(210,236,212,.10);
  border-radius:17px;
  background:#070b08;
}
.barcode-store-price-input>span{
  color:#75e995;
  font-size:20px;
  line-height:1;
  font-weight:900;
}
.barcode-store-price-input input{
  width:100%;
  min-width:0;
  height:54px;
  padding:0;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#eef6ed!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.035em!important;
}
.barcode-store-price-field>small{
  color:#7d8a80;
  font-size:10px;
  line-height:1.4;
  font-weight:700;
}
.barcode-store-main-action{
  min-height:52px!important;
  border-radius:17px!important;
}
.barcode-store-success{
  min-height:min(58dvh,520px);
  display:grid;
  place-content:center;
  justify-items:center;
  gap:10px;
  padding:26px 18px;
  text-align:center;
}
.barcode-store-success-icon{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  margin-bottom:6px;
  border:1px solid rgba(117,233,149,.16);
  border-radius:21px;
  background:rgba(100,228,138,.08);
  color:#7bec99;
}
.barcode-store-success-icon .app-icon{width:27px;height:27px}
.barcode-store-success>strong{
  color:#eff7ee;
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.045em;
}
.barcode-store-success>small{
  max-width:320px;
  color:#8d9a90;
  font-size:12px;
  line-height:1.5;
  font-weight:750;
}
.barcode-scanner-subpage.store-step .barcode-camera-torch,
.barcode-scanner-subpage.store-success .barcode-camera-torch{
  display:none!important;
}

@media(max-width:390px){
  .barcode-scanner-header{
    grid-template-columns:46px minmax(0,1fr) auto!important;
  }
  .barcode-scanner-header-done{
    min-width:48px;
    padding:0 7px;
  }
  .barcode-store-card{
    padding:19px 17px;
  }
  .barcode-store-card>strong{
    font-size:24px;
  }
}


/* =========================================================
   Spendly v8.5.4 — Mobile Shell Stability
   Mobile-first shell: no sticky/blur compositing on phone headers or nav.
   Store Mode footer/keyboard geometry is intentionally untouched.
   ========================================================= */
@media (max-width: 699px) {
  .topbar,
  .contextual-topbar,
  #appHeader {
    position: relative !important;
    top: auto !important;
    background: #070a0d !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    isolation: auto !important;
    contain: none !important;
    will-change: auto !important;
  }

  /* Fixed mobile navigation remains above the safe area, but is painted as
     an opaque layer instead of a WebKit backdrop-filter composition. */
  .nav {
    bottom: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  .nav-inner {
    background: #0e1317 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* Richer shell treatment is opt-in only beyond the phone breakpoint. */
@media (min-width: 700px) {
  .topbar {
    position: sticky;
    top: 0;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .contextual-topbar {
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }

  .nav-inner {
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
  }
}