:root {
    --ink:#173e36;
    --muted:#687a74;
    --green:#20634f;
    --lime:#d9e8b4;
    --paper:#f6f7f2;
    --line:#e0e7df;
    --bs-primary:#20634f;
    --bs-success:#20634f;
    --bs-body-color:#203d35;
    --bs-body-bg:#f6f7f2;
    --bs-link-color:#20634f
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    font-family:Tahoma,"Segoe UI",Arial,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.75
}
a {
    color:var(--green);
    text-underline-offset:4px
}
button,input,select {
    font:inherit
}
h1,h2,h3,h4,h5 {
    color:var(--ink);
    line-height:1.45;
    letter-spacing:-.025em
}
h1 {
    font-size:clamp(2rem,3vw,3.2rem);
    font-weight:700
}
h2 {
    font-size:1.8rem;
    font-weight:700
}
button,a,input,select {
    touch-action:manipulation
}
:focus-visible {
    outline:3px solid #a87920!important;
    outline-offset:4px
}
.text-muted {
    color:var(--muted)!important
}
.eyebrow {
    display:block;
    color:var(--green);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.12em;
    margin-bottom:12px
}
.app-shell {
    display:flex;
    min-height:100vh
}
.app-sidebar {
    width:240px;
    flex-shrink:0;
    background:#fff;
    border-inline-end:1px solid var(--line);
    padding:30px 22px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    color:var(--ink);
    text-decoration:none;
    margin-bottom:38px
}
.brand-mark {
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:15px;
    background:var(--green);
    color:#fff;
    font-size:1.8rem
}
.brand strong {
    display:block;
    font-size:1.3rem
}
.brand small {
    display:block;
    color:var(--muted);
    font-size:.65rem
}
.nav-caption {
    font-size:.65rem;
    color:var(--muted);
    padding-inline:13px
}
.main-nav {
    display:flex;
    flex-direction:column;
    gap:7px
}
.main-nav a,.nav-logout {
    padding:11px 14px;
    text-decoration:none;
    color:#66766f;
    border-radius:10px;
    font-size:.84rem;
    display:flex;
    gap:12px;
    align-items:center;
    border:0;
    background:transparent;
    text-align:start
}
.main-nav a span {
    font-size:1.2rem;
    width:20px
}
.main-nav a.active {
    background:#edf3e6;
    color:#20593e;
    font-weight:700
}
.main-nav a:hover {
    background:#f1f5ee
}
.nav-logout {
    margin-top:22px;
    color:#995345;
    cursor:pointer
}
.sidebar-note {
    margin-top:auto;
    padding:22px 14px 0
}
.sidebar-note p {
    font-size:.8rem;
    color:var(--muted)
}
.note-line {
    display:block;
    width:42px;
    height:3px;
    background:var(--lime)
}
.app-workspace {
    flex:1;
    min-width:0
}
.app-topbar {
    height:94px;
    padding:22px 42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    background:#fafbf7
}
.app-topbar .eyebrow {
    font-size:.58rem;
    margin-bottom:3px
}
.app-topbar strong {
    font-size:.85rem;
    font-weight:400
}
.session-chip {
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:30px;
    font-size:.73rem;
    display:flex;
    align-items:center;
    gap:8px;
    background:white
}
.status-dot {
    width:6px;
    height:6px;
    background:#598448;
    border-radius:50%
}
.workspace-content {
    padding:40px;
    min-height:calc(100vh - 168px)
}
.app-footer {
    padding:20px 42px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    gap:16px;
    color:var(--muted);
    font-size:.65rem
}
.auth-grid {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    max-width:1120px;
    margin:30px auto
}
.auth-story {
    padding:12px 0
}
.auth-story h1 {
    margin:20px 0;
    font-size:clamp(2rem,3.2vw,3.6rem)
}
.auth-story>p {
    max-width:390px;
    color:var(--muted);
    font-size:.9rem
}
.auth-panel {
    background:white;
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px;
    align-self:center;
    box-shadow:0 14px 60px #1e493207
}
.auth-panel>p {
    font-size:.8rem;
    margin:8px 0 28px
}
.auth-panel h2 {
    margin:0
}
.auth-panel .eyebrow {
    font-size:.65rem
}
.form-label {
    font-size:.8rem;
    font-weight:700
}
.form-control,.form-select {
    border:1px solid #d8e1d8;
    border-radius:9px;
    background:#fdfefb;
    padding:11px 13px;
    font-size:.87rem;
    min-height:45px
}
.form-control:focus,.form-select:focus {
    border-color:#54866c;
    box-shadow:0 0 0 3px #20634f12;
    background:#fff
}
.form-control[dir=ltr] {
    text-align:left
}
.btn {
    border-radius:9px;
    font-size:.8rem;
    padding:10px 17px;
    font-weight:600
}
.btn-primary,.btn-success {
    background:var(--green);
    border-color:var(--green);
    color:#fff
}
.btn-primary:hover,.btn-success:hover {
    background:#164a3c;
    border-color:#164a3c
}
.btn-primary:disabled,.btn-success:disabled {
    background:#637c70;
    border-color:#637c70
}
.btn-outline-primary,.btn-outline-success {
    color:var(--green);
    border-color:#b9cbbc
}
.btn-outline-primary:hover,.btn-outline-success:hover {
    background:var(--green);
    border-color:var(--green)
}
.auth-submit {
    width:100%;
    padding:13px
}
.auth-panel .auth-switch {
    text-align:center;
    font-size:.75rem;
    margin:25px 0
}
.auth-switch a {
    font-weight:700
}
.auth-footnote {
    border-top:1px solid var(--line);
    padding-top:20px;
    color:var(--muted);
    font-size:.67rem;
    text-align:center
}
.auth-benefits {
    display:flex;
    gap:22px;
    font-size:.61rem;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:20px
}
.pantry-art {
    height:240px;
    position:relative;
    margin:25px 0;
    overflow:hidden;
    border-radius:20px;
    background:#e9efdf
}
.art-orbit {
    position:absolute;
    width:230px;
    height:230px;
    border:1px solid #cedbbe;
    border-radius:50%;
    left:25%;
    top:10px
}
.art-jar {
    position:absolute;
    border:1px solid #a4b696;
    background:#fafbf1;
    border-radius:18px 18px 30px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:8px 18px 24px #5e794a19
}
.art-jar:before {
    content:"";
    position:absolute;
    top:-12px;
    width:85%;
    height:19px;
    background:#385e40;
    border-radius:5px
}
.jar-one {
    width:115px;
    height:140px;
    right:20%;
    top:50px;
    transform:rotate(-7deg)
}
.jar-two {
    width:100px;
    height:115px;
    right:52%;
    top:80px;
    transform:rotate(9deg);
    background:#e1cc9b
}
.art-jar span {
    font-size:1.1rem
}
.art-jar b {
    font-size:.5rem;
    color:#597057;
    margin-top:10px
}
.art-leaf {
    position:absolute;
    background:#718c50;
    width:45px;
    height:80px;
    border-radius:80% 0;
    left:10%;
    top:35px;
    transform:rotate(25deg)
}
.art-caption {
    position:absolute;
    bottom:13px;
    right:20px;
    font-size:.56rem;
    color:#5a7250
}
.onboarding-steps {
    margin-top:40px
}
.onboarding-steps>div {
    display:flex;
    align-items:center;
    gap:18px;
    margin:25px 0;
    font-size:.87rem
}
.onboarding-steps b {
    color:#798e5e;
    font-size:1.5rem;
    font-weight:400
}
.card {
    border:1px solid var(--line)!important;
    border-radius:15px!important;
    background:#fff;
    box-shadow:0 4px 20px #203d3504!important
}
.card-header,.card-footer {
    background:transparent
}
.card-header {
    padding:20px
}
.card-body {
    padding:23px
}
.table {
    --bs-table-bg:#fff;
    font-size:.8rem
}
.table th {
    background:#f1f4ec;
    font-size:.72rem;
    color:#5e7465;
    padding:17px
}
.table td {
    padding:17px;
    border-color:#edf0e9
}
.nav-pills {
    gap:7px;
    flex-wrap:wrap
}
.nav-pills .nav-link {
    color:var(--muted);
    border-radius:8px;
    font-size:.8rem
}
.nav-pills .nav-link.active {
    background:var(--green)
}
.badge {
    font-weight:500;
    border-radius:6px
}
.bg-success {
    background-color:var(--green)!important
}
.bg-light {
    background-color:#f0f3ea!important
}
.alert {
    border-radius:10px;
    font-size:.8rem;
    border:1px solid
}
.alert-info {
    background:#eef4f2;
    border-color:#d4e4de;
    color:#36594c
}
.alert-danger {
    background:#fbefeb;
    border-color:#e9cdc3;
    color:#873d2b
}
.alert-success {
    background:#edf4e7;
    border-color:#d7e6c8;
    color:#34563c
}
.alert-warning {
    background:#fbf5e5;
    border-color:#e9dfb8;
    color:#78612f
}
.validation-message {
    font-size:.72rem;
    color:#a03b29;
    margin-top:5px
}
.invalid {
    border-color:#a03b29
}
.modal-content {
    border:1px solid var(--line);
    border-radius:16px;
    background:white
}
.modal-body {
    max-height:70vh;
    overflow-y:auto
}
.modal-header,.modal-footer {
    border-color:var(--line);
    padding:20px
}
.empty-state {
    text-align:center;
    padding:70px 20px;
    max-width:700px;
    margin:auto
}
.empty-state p {
    color:var(--muted);
    margin:20px 0 30px
}
.skip-link {
    position:fixed;
    top:-100px;
    z-index:2000;
    padding:12px;
    background:var(--green);
    color:white
}
.skip-link:focus {
    top:5px
}
#blazor-error-ui {
    display:none;
    position:fixed;
    bottom:0;
    background:#fbf5e5;
    width:100%;
    padding:15px;
    z-index:2000;
    border-top:1px solid #d1c49b
}
.dismiss {
    border:0;
    background:transparent;
    margin-inline-start:15px
}
.dashboard-hero {
    padding:30px 0 40px;
    border-bottom:1px solid var(--line);
    margin-bottom:30px
}
.dashboard-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.feature-card {
    padding:27px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    text-decoration:none;
    color:var(--ink)
}
.feature-card:hover {
    border-color:#7f9d7c;
    transform:translateY(-2px)
}
.feature-card strong {
    display:block;
    font-size:1.2rem;
    margin:15px 0
}
.feature-card p {
    font-size:.8rem;
    color:var(--muted)
}
.feature-number {
    color:#8c9b7c;
    font-size:.75rem
}
.page-heading {
    margin-bottom:28px
}
.page-heading p {
    color:var(--muted);
    font-size:.85rem
}
.household-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px
}
.form-text {
    font-size:.7rem
}
@media(min-width:1500px) {
    .workspace-content {
        padding:55px 65px
    }
    .auth-grid {
        margin-top:60px
    }
}
@media(max-width:1100px) {
    .app-sidebar {
        width:200px;
        padding:25px 15px
    }
    .workspace-content {
        padding:28px
    }
    .auth-grid {
        gap:25px
    }
    .auth-panel {
        padding:27px
    }
    .auth-benefits {
        gap:10px;
        font-size:.54rem
    }
    .app-topbar {
        padding-inline:28px
    }
}
@media(max-width:760px) {
    .app-shell {
        display:block
    }
    .app-sidebar {
        position:static;
        width:auto;
        height:auto;
        padding:16px 20px;
        border-inline-end:0;
        border-bottom:1px solid var(--line)
    }
    .brand {
        margin-bottom:12px
    }
    .brand-mark {
        width:35px;
        height:35px;
        font-size:1.3rem
    }
    .brand strong {
        font-size:1.1rem
    }
    .brand small,.nav-caption,.sidebar-note {
        display:none
    }
    .main-nav {
        flex-direction:row;
        flex-wrap:wrap;
        gap:4px
    }
    .main-nav a,.nav-logout {
        padding:7px 9px;
        font-size:.7rem
    }
    .main-nav a span {
        display:none
    }
    .nav-logout {
        margin:0
    }
    .app-topbar {
        height:70px;
        padding:15px 20px
    }
    .session-chip {
        max-width:160px;
        overflow:hidden;
        white-space:nowrap
    }
    .workspace-content {
        padding:22px 16px
    }
    .auth-grid {
        grid-template-columns:1fr;
        margin:0;
        gap:24px
    }
    .auth-story h1 {
        font-size:2rem
    }
    .auth-story>p {
        max-width:none
    }
    .pantry-art,.auth-benefits {
        display:none
    }
    .auth-story {
        padding:0
    }
    .auth-panel {
        padding:26px 22px
    }
    .app-footer {
        padding:16px;
        font-size:.56rem
    }
    .app-footer span:last-child {
        display:none
    }
    .dashboard-grid,.household-grid {
        grid-template-columns:1fr
    }
    .d-flex.justify-content-between {
        flex-wrap:wrap;
        gap:15px
    }
    .modal-dialog {
        margin:12px
    }
    .btn-group {
        flex-wrap:wrap
    }
    .table-responsive {
        border-radius:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important
    }
}
h1:focus {
    outline:none!important
}
.phone-entry {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.phone-entry .country-select {
    flex: 0 0 145px;
    max-width: 145px;
    font-size: .73rem;
}
.phone-entry input {
    flex: 1;
    min-width: 0;
}