/* Marketplace screens are isolated from the marketing page. */
:root {
    --app-green: #153e2f;
    --app-border: #e3eae5;
    --app-bg: #f7faf8;
    --app-muted: #586b60
}

.marketplace-hidden {
    display: none !important
}

#app-root {
    min-height: calc(100vh - 70px);
    background: var(--app-bg);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #162920
}

#app-root * {
    box-sizing: border-box
}

#app-root button,
#app-root input,
#app-root select,
#app-root textarea {
    font: inherit
}

#app-root button {
    cursor: pointer
}

.app-container {
    max-width: 1190px;
    margin: auto;
    padding: 32px 28px 80px
}

.auth-shell {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    max-width: 1160px;
    margin: auto;
    gap: 72px;
    align-items: center;
    padding: 40px 28px
}

.auth-intro .eyebrow,
.app-eyebrow {
    font-size: 12px;
    letter-spacing: .13em;
    font-weight: 800;
    color: #397751;
    text-transform: uppercase
}

.auth-intro h1,
.app-hero h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(31px, 4vw, 53px);
    line-height: 1.17;
    margin: 15px 0;
    color: #173928;
    letter-spacing: -.04em
}

.auth-intro p {
    max-width: 530px;
    line-height: 1.8;
    font-size: 17px;
    color: #56665b
}

.auth-highlights {
    display: grid;
    gap: 14px;
    margin-top: 32px
}

.auth-highlights div {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 650;
    color: #254b36
}

.auth-highlights span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: #e9f4eb;
    color: #1c7743
}

.app-panel {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(16, 51, 32, .055)
}

.auth-card {
    padding: 31px
}

.app-card-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 25px;
    line-height: 1.35;
    color: #183b2a;
    margin: 0 0 7px
}

.app-muted {
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1.65
}

.role-tabs,
.auth-tabs,
.view-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: #f0f5f0;
    border-radius: 11px;
    margin: 19px 0
}

.role-tabs button,
.auth-tabs button,
.view-tabs button {
    flex: 1;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 11px 9px;
    color: #486451;
    font-weight: 750
}

.role-tabs button.active,
.auth-tabs button.active,
.view-tabs button.active {
    background: #fff;
    color: #123e2a;
    box-shadow: 0 2px 8px #16362414
}

.app-form {
    display: grid;
    gap: 15px;
    margin-top: 20px
}

.app-field {
    display: grid;
    gap: 7px;
    text-align: left;
    font-size: 13px;
    font-weight: 750;
    color: #304837
}

.app-field input,
.app-field select,
.app-field textarea,
.app-filter-input {
    background: #fff;
    border: 1px solid #cad9cf;
    border-radius: 9px;
    padding: 12px 13px;
    min-height: 47px;
    color: #183528;
    width: 100%;
    outline-color: #38835b
}

.app-field textarea {
    min-height: 95px;
    resize: vertical
}

.app-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.app-primary,
.app-secondary,
.app-quiet {
    border-radius: 9px;
    border: 1px solid #154a34;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
    padding: 12px 18px;
    min-height: 46px
}

.app-primary {
    background: #145338;
    color: white
}

.app-primary:hover {
    background: #246c4b
}

.app-secondary {
    background: white;
    color: #145338
}

.app-secondary:hover {
    background: #eaf4eb
}

.app-quiet {
    border-color: #e0e8df;
    background: #fff;
    color: #395841
}

.app-small {
    font-size: 13px;
    padding: 8px 12px;
    min-height: 36px
}

.app-link {
    background: transparent;
    border: 0;
    color: #176543;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px
}

.app-alert {
    background: #f0f8ee;
    border: 1px solid #c5dfc9;
    padding: 13px 15px;
    border-radius: 10px;
    color: #1b5834;
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.5
}

.app-alert.error {
    background: #fff4f1;
    border-color: #f2c9c0;
    color: #913c2b
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px
}

.app-topbar strong {
    font-size: 16px;
    color: #245637
}

.app-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap
}

.app-hero {
    background: linear-gradient(115deg, #17613d, #16432f);
    color: white;
    border-radius: 17px;
    padding: 32px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    overflow: hidden
}

.app-hero h1 {
    color: #fff;
    font-size: clamp(28px, 3.5vw, 40px);
    margin: 5px 0 10px
}

.app-hero p {
    color: #d7eadd;
    font-size: 15px
}

.app-hero .app-primary {
    background: #fff;
    color: #144631;
    border-color: white
}

.app-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 750;
    padding: 6px 10px;
    background: #e9f4e9;
    color: #236342
}

.app-hero .app-chip {
    background: #ffffff21;
    color: #fff
}

.app-section {
    margin-top: 30px
}

.app-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px
}

.app-section-head h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 24px;
    color: #163b2b;
    margin: 0 0 4px
}

.app-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 23px
}

.app-stat {
    padding: 20px;
    min-height: 113px
}

.app-stat .app-muted {
    font-size: 13px
}

.app-stat strong {
    font-size: 28px;
    display: block;
    color: #145237;
    margin-top: 7px
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

.app-action-card {
    background: white;
    border: 1px solid var(--app-border);
    border-radius: 14px;
    padding: 21px;
    min-height: 158px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    transition: box-shadow .2s, transform .2s
}

.app-action-card:hover {
    box-shadow: 0 10px 28px #173e2416;
    transform: translateY(-3px)
}

.app-action-card .tile-icon {
    width: 42px;
    height: 42px;
    background: #edf6ef;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #21613d
}

.app-action-card strong {
    font-size: 17px;
    color: #1a3125
}

.app-action-card small {
    font-size: 14px;
    color: #60756a;
    line-height: 1.55
}

.app-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 17px
}

.app-toolbar>* {
    flex: 1;
    min-width: 140px
}

.app-toolbar .app-primary {
    flex: 0
}

.app-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: white
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 660px
}

.app-table th {
    background: #174532;
    color: #fff;
    font-size: 13px;
    padding: 15px
}

.app-table td {
    padding: 16px 15px;
    border-top: 1px solid #e8eee9;
    font-size: 14px;
    color: #34473b;
    vertical-align: middle
}

.app-table td strong {
    color: #163c2a
}

.app-empty {
    text-align: center;
    padding: 46px 20px;
    border: 1px dashed #bed4c3;
    background: #fff;
    border-radius: 14px;
    color: #456455
}

.app-empty h3 {
    margin: 5px 0;
    font-size: 19px
}

.app-empty p {
    margin-bottom: 16px
}

.app-rows {
    display: grid;
    gap: 12px
}

.app-row {
    padding: 19px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center
}

.app-row h3 {
    font-size: 16px;
    margin: 0 0 5px
}

.app-row p {
    font-size: 13px
}

.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: #112a1db7;
    z-index: 150;
    display: grid;
    place-items: center;
    padding: 15px
}

.app-modal {
    background: #fff;
    width: min(100%, 570px);
    border-radius: 16px;
    max-height: min(92vh, 850px);
    overflow: auto;
    padding: 24px;
    box-shadow: 0 30px 100px #051d115e
}

.app-modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.app-close {
    background: #f1f6f2;
    border: 0;
    border-radius: 9px;
    font-size: 25px;
    width: 38px;
    height: 38px;
    color: #1c422b
}

.app-toast {
    position: fixed;
    right: 22px;
    bottom: 23px;
    z-index: 160;
    padding: 14px 20px;
    background: #174b35;
    color: white;
    border-radius: 9px;
    box-shadow: 0 14px 34px #102e1c2c;
    max-width: 350px
}

@media(max-width:850px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: 25px;
        max-width: 600px
    }

    .app-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .app-stats {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:600px) {
    .auth-shell {
        padding: 22px 16px 55px;
        gap: 22px;
        min-height: auto
    }

    .auth-intro h1 {
        font-size: 31px
    }

    .auth-intro p {
        font-size: 15px
    }

    .auth-highlights {
        margin-top: 17px;
        gap: 8px
    }

    .auth-card {
        padding: 21px 17px
    }

    .app-container {
        padding: 19px 15px 85px
    }

    .app-hero {
        padding: 23px 19px;
        display: grid
    }

    .app-hero h1 {
        font-size: 26px
    }

    .app-hero .app-primary {
        width: 100%
    }

    .app-section-head {
        align-items: start
    }

    .app-section-head h2 {
        font-size: 21px
    }

    .app-stats {
        gap: 9px
    }

    .app-stat {
        padding: 14px;
        min-height: 95px
    }

    .app-stat strong {
        font-size: 23px
    }

    .app-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .app-action-card {
        min-height: 0;
        padding: 17px
    }

    .app-form-grid {
        grid-template-columns: 1fr
    }

    .app-row {
        align-items: start;
        flex-direction: column
    }

    .app-row .app-actions {
        width: 100%
    }

    .app-row .app-actions button {
        flex: 1
    }

    .app-modal {
        padding: 18px
    }

    .app-toolbar>* {
        min-width: 100%
    }

    .app-toolbar .app-primary {
        flex: 1
    }

    .app-topbar {
        align-items: start
    }

    .app-topbar .app-actions {
        width: 100%
    }

    .app-topbar .app-actions button {
        flex: 1
    }
}
/* 2026 Makhana Today dashboard shell — isolated from landing page */
#app-root { --app-green:#153e2f; --app-bg:#f7f8f3; background:#f7f8f3; font-family:'DM Sans',sans-serif; }
#app-root .app-container { max-width:1320px; padding:28px clamp(16px,3vw,42px) 85px; }
#app-root .app-site-header { position:relative; z-index:5; background:#fff; border-bottom:1px solid #e4e9e0; box-shadow:0 5px 22px rgba(13,53,34,.035); margin:-28px calc(-1 * clamp(16px,3vw,42px)) 29px; }
#app-root .app-site-header-inner { max-width:1390px; margin:auto; min-height:86px; padding:12px clamp(16px,3vw,42px); display:flex; align-items:center; gap:28px; justify-content:space-between; }
#app-root .app-brand { background:transparent; border:0; display:flex; align-items:center; gap:12px; color:#173f2e; font-family:'Libre Baskerville',serif; font-size:20px; font-weight:700; text-align:left; white-space:nowrap; }
#app-root .app-brand em {font-style:normal;color:#ab7b36}
#app-root .app-brand small {display:block;font:700 10px 'DM Sans',sans-serif;letter-spacing:.14em;margin-top:5px;color:#77917c}
#app-root .app-brand-symbol { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf1e4;color:#2a6a45;font-size:28px; }
#app-root .app-nav {display:flex;align-items:center;gap:4px;flex-wrap:wrap}
#app-root .app-nav button {background:transparent;border:0;border-radius:9px;padding:11px 13px;color:#607268;font-size:13px;font-weight:700;white-space:nowrap}
#app-root .app-nav button.active,#app-root .app-nav button:hover {background:#eaf1e7;color:#195036}
#app-root .app-user-controls {display:flex;align-items:center;gap:11px}
#app-root .app-user-avatar {display:grid;place-items:center;width:37px;height:37px;border-radius:50%;background:#e5eddf;color:#27553b;font-weight:800}
#app-root .app-user-details {display:flex;flex-direction:column;gap:3px;font-size:12px;max-width:125px}
#app-root .app-user-details small {color:#738178;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-root .app-logout {border:1px solid #dbe6dc;background:white;color:#234e36;padding:10px 13px;border-radius:9px;font-weight:700;font-size:12px;white-space:nowrap}
#app-root .app-hero {border-radius:22px;background:linear-gradient(110deg,#15412e,#286044);padding:clamp(24px,4vw,46px);box-shadow:0 20px 40px rgba(20,63,42,.12)}
#app-root .app-hero h1 {font-family:'Libre Baskerville',serif;letter-spacing:-.04em}
#app-root .app-panel,#app-root .app-action-card,#app-root .app-stat {border-radius:16px;box-shadow:0 9px 26px rgba(25,56,35,.035)}
#app-root .auth-shell {padding-block:70px}
#app-root .auth-card {box-shadow:0 28px 70px rgba(21,63,43,.09)}
@media(max-width:1050px){#app-root .app-site-header-inner{flex-wrap:wrap}#app-root .app-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}#app-root .app-user-details{display:none}}
@media(max-width:600px){#app-root .app-site-header-inner{gap:10px}#app-root .app-brand{font-size:16px}#app-root .app-brand-symbol{width:35px;height:35px}#app-root .app-logout{padding:8px}#app-root .app-user-avatar{display:none}#app-root .app-nav button{font-size:12px;padding:9px}}

.app-legal-footer{text-align:center;padding:24px 16px;color:#52665c;font:14px/1.8 "DM Sans",Arial,sans-serif}.app-legal-footer a{color:#005341;margin:0 5px;text-underline-offset:3px}