:root {
    --client-bg: #fbf7ef;
    --client-surface: #fffdf8;
    --client-surface-soft: #f5ecdc;
    --client-text: #34261f;
    --client-muted: #76665c;
    --client-line: #eadfce;
    --client-accent: #aa6b22;
    --client-accent-dark: #774313;
    --client-accent-soft: #f2dfbd;
    --client-success: #4c7a60;
    --client-shadow: 0 14px 36px rgba(70, 45, 25, .08);
    color-scheme: light;
}
html.auth-checking body { visibility: hidden; }
html.client-workspace-loading .client-shell { visibility: hidden; }

html[data-client-theme="dark"] {
    --client-bg: #1d1815;
    --client-surface: #29221e;
    --client-surface-soft: #352b25;
    --client-text: #fff8ed;
    --client-muted: #c7b7aa;
    --client-line: #4b3d34;
    --client-accent-soft: #503a22;
    --client-shadow: 0 14px 36px rgba(0, 0, 0, .22);
    color-scheme: dark;
}

html[data-client-accent="sage"] { --client-accent: #607b61; --client-accent-dark: #3d573f; --client-accent-soft: #dce7d8; }
html[data-client-accent="ocean"] { --client-accent: #47758b; --client-accent-dark: #2b5365; --client-accent-soft: #d9e8ee; }
html[data-client-accent="berry"] { --client-accent: #8a5368; --client-accent-dark: #65394b; --client-accent-soft: #eedce3; }
html[data-client-theme="dark"][data-client-accent="sage"] { --client-accent-soft: #334536; }
html[data-client-theme="dark"][data-client-accent="ocean"] { --client-accent-soft: #293f49; }
html[data-client-theme="dark"][data-client-accent="berry"] { --client-accent-soft: #49313a; }

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--client-bg); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 90% 0, var(--client-accent-soft), transparent 30rem), var(--client-bg); color: var(--client-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.client-shell { min-height: 100vh; }
.client-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 76px; padding: 12px max(24px, calc((100vw - 1180px)/2)); border-bottom: 1px solid color-mix(in srgb, var(--client-line) 75%, transparent); background: color-mix(in srgb, var(--client-bg) 88%, transparent); backdrop-filter: blur(16px); }
.client-brand { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.client-brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: var(--client-accent); color: white; font-family: Georgia, serif; font-weight: 800; }
.client-brand strong,.client-brand small { display: block; }
.client-brand small { margin-top: 1px; color: var(--client-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.client-navigation { display: flex; justify-content: center; gap: 4px; }
.client-nav-button { padding: 9px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--client-muted); font-size: 13px; font-weight: 650; }
.client-nav-button:hover,.client-nav-button.active { background: var(--client-accent-soft); color: var(--client-accent-dark); }
.client-account-button,.client-icon-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--client-line); border-radius: 50%; background: var(--client-surface); color: var(--client-text); font-weight: 750; }
.client-icon-button { display: none; }
.client-content { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 100px; }
.client-page { display: grid; gap: 24px; }
.client-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .7fr); gap: 18px; align-items: stretch; }
.client-hero-main,.client-card { border: 1px solid var(--client-line); border-radius: 24px; background: color-mix(in srgb, var(--client-surface) 94%, transparent); box-shadow: var(--client-shadow); }
.client-hero-main { min-height: 260px; padding: clamp(28px, 5vw, 58px); background: linear-gradient(145deg, var(--client-surface), color-mix(in srgb, var(--client-accent-soft) 58%, var(--client-surface))); }
.client-eyebrow { margin: 0 0 8px; color: var(--client-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 12px; font-family: Georgia, serif; font-size: clamp(34px, 6vw, 58px); line-height: 1.04; font-weight: 600; }
h2 { font-family: Georgia, serif; font-size: clamp(25px, 4vw, 35px); font-weight: 600; }
h3 { font-size: 16px; }
.client-muted { color: var(--client-muted); }
.client-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.client-primary,.client-secondary,.client-text-button { min-height: 44px; padding: 10px 16px; border-radius: 12px; font-weight: 750; }
.client-primary { border: 1px solid var(--client-accent); background: var(--client-accent); color: white; }
.client-secondary { border: 1px solid var(--client-line); background: var(--client-surface); color: var(--client-text); }
.client-text-button { border: 0; background: transparent; color: var(--client-accent-dark); }
.client-card { padding: 22px; }
.client-card.warm { background: linear-gradient(145deg, var(--client-accent-soft), var(--client-surface)); }
.client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.client-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.client-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.client-section-heading h2,.client-section-heading h3 { margin-bottom: 2px; }
.client-records { display: grid; gap: 11px; }
.client-record { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px; border: 1px solid var(--client-line); border-radius: 16px; background: var(--client-surface); }
.client-record strong,.client-record span { display: block; }
.client-record p { margin: 4px 0 0; color: var(--client-muted); font-size: 13px; }
.client-pill { display: inline-flex !important; width: fit-content; margin-top: 7px; padding: 4px 9px; border-radius: 999px; background: var(--client-accent-soft); color: var(--client-accent-dark); font-size: 11px; font-weight: 750; }
.client-empty { padding: 30px 18px; border: 1px dashed var(--client-line); border-radius: 18px; color: var(--client-muted); text-align: center; }
.client-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.client-field { display: grid; gap: 6px; }
.client-field.full { grid-column: 1/-1; }
.client-field label { color: var(--client-muted); font-size: 12px; font-weight: 750; }
.client-plan-history { display: grid; gap: 16px; min-width: 0; }
.client-plan-history > div > h3,.client-plan-history > h3 { margin-bottom: 5px; }
.client-plan-history > div > p { margin-bottom: 0; }
.client-plan-section-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.client-plan-group { display: grid; align-content: start; gap: 14px; min-width: 0; border-left: 5px solid var(--client-plan-color); background: color-mix(in srgb, var(--client-plan-tint) 50%, var(--client-surface)); }
.client-plan-group-menu { --client-plan-color: #b47c37; --client-plan-tint: #f5e8ce; }
.client-plan-group-event { --client-plan-color: #63866d; --client-plan-tint: #e1efdf; }
.client-plan-group-food-service { --client-plan-color: #6a83a0; --client-plan-tint: #e2ebf5; }
.client-plan-group-quote { --client-plan-color: #9b7188; --client-plan-tint: #f2e5ed; }
.client-plan-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--client-line); }
.client-plan-group h4 { margin: 0; color: var(--client-text); font-size: 17px; }
.client-plan-group-heading span { color: var(--client-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.client-plan-group .client-record { background: var(--client-surface); }
.client-plan-group .client-show-more { margin-top: 0; }
.client-plans-page { gap: 24px; }
.client-plans-hero { position: relative; isolation: isolate; min-height: 285px; overflow: hidden; border: 1px solid #6b4a2b; border-radius: 22px; background: #2d211b; color: #fff; }
.client-plans-hero::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(28,20,15,.94) 0%,rgba(34,23,17,.8) 52%,rgba(34,23,17,.12) 100%),var(--client-home-plan-image, url("assets/client-login-food.png")) center 56% / cover no-repeat; content: ""; }
.client-plans-hero-copy { display: grid; align-content: center; justify-items: start; gap: 16px; width: min(100%,580px); min-height: 285px; padding: 30px; }
.client-plans-hero .client-eyebrow { margin: 0; color: #e8b77a; letter-spacing: .14em; }
.client-plans-hero h1 { margin: 0; color: #fff; font: 600 clamp(31px,5vw,47px)/1.09 Georgia,serif; }
.client-plans-hero .client-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 185px; border-color: #a87138; background: #a87138; color: #fff; }
.client-plans-hero .client-primary .client-svg-icon { width: 21px; height: 21px; }
.client-plans-section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.client-plans-section-title h2,.client-plans-all h2 { margin: 0 0 4px; font: 600 clamp(25px,3vw,32px)/1.15 Georgia,serif; }
.client-plans-section-title p,.client-plans-all>p { margin: 0; font-size: 13px; }
.client-plans-section-title .client-text-button { flex: 0 0 auto; padding-inline: 4px; }
.client-plans-recent-list,.client-plans-status-list { display: grid; gap: 10px; }
.client-plans-recent-row { display: grid; grid-template-columns: 72px minmax(0,1fr) auto 18px; align-items: center; gap: 15px; width: 100%; min-height: 102px; padding: 12px; border: 1px solid var(--client-line); border-radius: 17px; background: var(--client-surface); color: var(--client-text); text-align: left; box-shadow: 0 3px 12px rgba(30,25,20,.04); }
.client-plans-recent-row:hover,.client-plans-recent-row:focus-visible { border-color: var(--client-accent); box-shadow: var(--client-shadow); }
.client-plans-date { display: grid; align-content: center; justify-items: center; gap: 2px; width: 72px; min-height: 74px; padding: 6px; border-radius: 12px; background: #ebd9bd; color: #5b3d22; text-align: center; text-transform: uppercase; }
.client-plans-date strong { font-size: 27px; line-height: 1; }
.client-plans-date small { font-size: 10px; font-weight: 800; }
.client-plans-date.undated { background: var(--client-surface-soft); color: var(--client-muted); }
.client-plans-date.undated .client-svg-icon { width: 23px; height: 23px; }
.client-plans-recent-info { display: grid; gap: 5px; min-width: 0; }
.client-plans-recent-info strong { overflow: hidden; color: var(--client-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.client-plans-recent-info small { overflow: hidden; color: var(--client-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.client-plans-status { max-width: 102px; padding: 5px 9px; border-radius: 999px; background: var(--client-accent-soft); color: var(--client-accent-dark); font-size: 11px; font-weight: 800; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-plans-row-arrow { color: var(--client-muted); font-size: 25px; }
.client-plans-all { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--client-line); scroll-margin-top: 128px; }
.client-plans-all>p { margin-top: -9px; }
.client-plans-status-group { overflow: hidden; border: 1px solid var(--client-line); border-radius: 16px; background: var(--client-surface); }
.client-plans-status-group summary { display: flex; align-items: center; gap: 13px; min-height: 70px; padding: 12px 16px; list-style: none; cursor: pointer; }
.client-plans-status-group summary::-webkit-details-marker { display: none; }
.client-plans-status-group summary:focus-visible { outline: 2px solid var(--client-accent); outline-offset: -3px; }
.client-plans-status-group summary strong { font-size: 16px; }
.client-plans-status-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 12px; background: #f3e1ca; color: #7c4f25; }
.client-plans-status-icon .client-svg-icon { width: 22px; height: 22px; }
.client-plans-status-submitted .client-plans-status-icon { background: #e2ebf5; color: #416688; }
.client-plans-status-active .client-plans-status-icon { background: #dcecdf; color: #477452; }
.client-plans-status-finished .client-plans-status-icon { background: #eee6e2; color: #776456; }
.client-plans-status-count { padding: 4px 9px; border-radius: 9px; background: var(--client-surface-soft); color: var(--client-text); font-size: 12px; font-weight: 800; }
.client-plans-status-chevron { margin-left: auto; color: var(--client-muted); font-size: 23px; transition: transform .18s; }
.client-plans-status-group[open] .client-plans-status-chevron { transform: rotate(180deg); }
.client-plans-status-body { padding: 0 14px 15px; }
.client-plans-status-body>.client-muted { margin: 0; padding: 12px; }
.client-plans-status-body .client-plan-section-grid { grid-template-columns: minmax(0,1fr); }
.client-plans-status-body .client-plan-group { gap: 10px; padding: 15px; }
html[data-client-theme="dark"] .client-plans-date { background: #523d29; color: #f4dbb7; }
html[data-client-theme="dark"] .client-plans-status-icon { background: #5a402b; color: #f4c993; }
html[data-client-theme="dark"] .client-plans-status-submitted .client-plans-status-icon { background: #30475c; color: #bbdcfa; }
html[data-client-theme="dark"] .client-plans-status-active .client-plans-status-icon { background: #304d39; color: #bce4c5; }
@media (max-width: 600px) { .client-plans-hero,.client-plans-hero-copy { min-height: 235px; } .client-plans-hero-copy { padding: 20px; } .client-plans-hero h1 { max-width: 260px; } .client-plans-recent-row { grid-template-columns: 60px minmax(0,1fr) auto 10px; gap: 9px; min-height: 90px; padding: 9px; } .client-plans-date { width: 60px; min-height: 68px; } .client-plans-date strong { font-size: 24px; } .client-plans-date small { font-size: 9px; } .client-plans-recent-info strong { font-size: 13px; } .client-plans-recent-info small { font-size: 10px; } .client-plans-status { max-width: 70px; padding: 4px 6px; font-size: 10px; } .client-plans-section-title p { max-width: 260px; } }
@media (max-width: 380px) { .client-plans-recent-row { grid-template-columns: 58px minmax(0,1fr) 10px; } .client-plans-status { grid-column: 2; grid-row: 2; justify-self: start; } .client-plans-row-arrow { grid-column: 3; grid-row: 1 / 3; } .client-plans-status-group summary { gap: 9px; padding-inline: 11px; } }
html[data-client-theme="dark"] .client-plan-group-menu { --client-plan-tint: #4c3824; }
html[data-client-theme="dark"] .client-plan-group-event { --client-plan-tint: #2c4635; }
html[data-client-theme="dark"] .client-plan-group-food-service { --client-plan-tint: #293f55; }
html[data-client-theme="dark"] .client-plan-group-quote { --client-plan-tint: #4b3241; }
@media (max-width: 760px) { .client-plan-section-grid { grid-template-columns: minmax(0,1fr); } }
#client-plan-form .client-field label { color: var(--client-text); font-size: 14px; }
#client-plan-form .client-field small { color: var(--client-muted); font-size: 13px; }
.client-plan-step { margin: 0; color: var(--client-accent); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.client-plan-flow-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.client-plan-flow-actions button { min-width: 0; white-space: normal; }
.client-plan-flow-actions button:first-child { grid-column: 1 / -1; }
.client-request-actions .client-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.client-field input,.client-field select,.client-field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--client-line); border-radius: 12px; outline: none; background: var(--client-surface); color: var(--client-text); }
.client-field textarea { min-height: 100px; resize: vertical; }
.client-subscription-products{display:grid;gap:8px;max-height:330px;padding:8px;border:1px solid var(--client-line);border-radius:14px;overflow:auto}.client-subscription-product{display:grid;grid-template-columns:auto minmax(0,1fr) 76px;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--client-surface-soft)}.client-subscription-product>input[type="number"]{min-height:38px}.client-subscription-product strong,.client-subscription-product small{display:block}.client-subscription-product small{margin-top:3px;color:var(--client-muted)}.client-record-highlight{border-color:var(--client-accent);box-shadow:0 0 0 3px var(--client-accent-soft)}
.client-subscriptions-page{gap:20px}
.client-subscriptions-hero{position:relative;isolation:isolate;min-height:390px;overflow:hidden;border:1px solid var(--client-line);border-radius:24px;background:var(--client-surface)}
.client-subscriptions-hero::before{position:absolute;inset:0 0 0 auto;width:58%;background:var(--client-home-subscription-image, url("assets/client-subscription-jollof-packs.png")) center 61% / cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 58%);mask-image:linear-gradient(90deg,transparent 0%,#000 58%);content:""}
.client-subscriptions-hero-copy{position:relative;z-index:1;display:grid;align-content:center;justify-items:start;gap:17px;width:min(61%,650px);min-height:390px;padding:36px}
.client-subscriptions-hero .client-eyebrow{margin:0;color:var(--client-accent-dark);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.client-subscriptions-hero h1{margin:0;color:var(--client-text);font-family:Georgia,serif;font-size:clamp(36px,4.6vw,58px);line-height:1.08}
.client-subscriptions-hero-copy>p:not(.client-eyebrow){max-width:490px;margin:0;color:var(--client-muted);font-size:clamp(15px,1.6vw,18px);line-height:1.5}
.client-subscriptions-start{display:flex;align-items:center;gap:15px;width:min(100%,430px);min-height:64px;margin-top:8px;padding:12px 17px;border:1px solid var(--client-accent);border-radius:15px;background:var(--client-accent);color:#fff;font:inherit;text-align:left;cursor:pointer}
.client-subscriptions-start:hover{background:var(--client-accent-dark)}
.client-subscriptions-start strong{flex:1;font-size:18px}
.client-subscriptions-start-icon{display:grid;width:32px;height:32px;flex:0 0 auto;place-items:center;border:2px solid rgba(255,255,255,.8);border-radius:50%}
.client-subscriptions-start-icon .client-svg-icon{width:19px;height:19px}
.client-subscriptions-start>.client-svg-icon{width:22px;height:22px}
.client-subscriptions-panel{position:relative;z-index:1;margin-top:-36px;padding:26px;background:var(--client-surface)!important}
.client-subscriptions-panel h2,.client-subscriptions-deliveries h2{margin:0 0 18px;font-family:Georgia,serif;font-size:clamp(25px,3vw,34px)}
.client-subscription-list{display:grid;gap:12px}
.client-subscription-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:16px;min-width:0;padding:17px;border:1px solid var(--client-line);border-radius:17px;background:var(--client-surface)}
.client-subscription-row-icon{display:grid;width:56px;height:56px;place-items:center;border-radius:50%;background:var(--client-accent-soft);color:var(--client-accent-dark)}
.client-subscription-row-icon .client-svg-icon{width:29px;height:29px}
.client-subscription-row-copy{min-width:0}
.client-subscription-row-copy strong{display:block;color:var(--client-text);font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.client-subscription-row-copy p{margin:5px 0 0;color:var(--client-muted);font-size:13px;line-height:1.35}
.client-subscription-row-actions{display:grid;justify-items:end;gap:6px}
.client-subscription-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 13px;border:1px solid var(--client-line);border-radius:11px;background:var(--client-surface);color:var(--client-text);font:inherit;font-weight:750;cursor:pointer}
.client-subscription-open:hover{border-color:var(--client-accent);color:var(--client-accent-dark)}
.client-subscription-open .client-svg-icon{width:16px;height:16px}
.client-subscription-row-actions .client-secondary{min-height:30px;padding:4px 8px;font-size:11px}
@media(max-width:650px){.client-subscriptions-hero{min-height:430px}.client-subscriptions-hero::before{width:84%;opacity:.75;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 82%);mask-image:linear-gradient(90deg,transparent 0%,#000 82%)}.client-subscriptions-hero-copy{width:84%;min-height:430px;padding:26px 20px;gap:14px}.client-subscriptions-hero h1{font-size:clamp(32px,8.7vw,45px)}.client-subscriptions-hero-copy>p:not(.client-eyebrow){font-size:14px}.client-subscriptions-hero-icon{top:18px;right:18px;width:44px;height:44px}.client-subscriptions-hero-icon .client-svg-icon{width:24px;height:24px}.client-subscriptions-start{min-height:60px}.client-subscriptions-start strong{font-size:16px}.client-subscriptions-panel{margin-top:-28px;padding:18px}.client-subscription-row{grid-template-columns:48px minmax(0,1fr) auto;gap:9px;padding:12px}.client-subscription-row-icon{width:44px;height:44px}.client-subscription-row-icon .client-svg-icon{width:24px;height:24px}.client-subscription-row-copy strong{font-size:14px}.client-subscription-row-copy p{font-size:11px}.client-subscription-open{min-height:38px;padding:6px 9px;font-size:12px}}
.client-field input:focus,.client-field select:focus,.client-field textarea:focus { border-color: var(--client-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--client-accent) 14%, transparent); }
.client-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.client-product { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--client-line); border-radius: 16px; background: var(--client-surface); }
.client-product button { width: 100%; }
.client-product,.client-product-grid,.client-product>div { min-width: 0; }
.client-product strong,.client-product-description,.client-product-portion { overflow-wrap: anywhere; }
.client-product .client-actions { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; margin-top: 8px; }
.client-product .client-actions button { min-width: 0; white-space: normal; }
.client-product .client-add-quantity { justify-content: space-between; min-width: 0; }
.client-product .client-add-quantity input { flex: 0 0 84px; }
.client-product .client-added-button { border-color: #d7ad19; background: #f4d24f; color: #3e3005; }
.client-product .client-added-button:hover,.client-product .client-added-button:focus-visible { border-color: #a87b00; background: #f8dc69; }
.client-planner-browse { display: grid; gap: 14px; min-width: 0; margin-top: 22px; }
.client-product-search { display: grid; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--client-line); border-radius: 16px; background: color-mix(in srgb, var(--client-accent-soft) 48%, var(--client-surface)); }
.client-product-search label { font-size: .9rem; font-weight: 750; }
.client-product-search>div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.client-product-search input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--client-line); border-radius: 10px; background: var(--client-surface); color: var(--client-text); font: inherit; }
.client-category-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.client-category-filter { min-height: 38px; padding: 7px 12px; border: 1px solid var(--client-line); border-radius: 999px; background: var(--client-surface); color: var(--client-text); font: inherit; font-weight: 700; cursor: pointer; }
.client-category-filter.active { border-color: var(--client-accent); background: var(--client-accent-soft); color: var(--client-accent-dark); }
.client-product-category { display: grid; gap: 12px; min-width: 0; padding: 18px; border: 1px solid var(--client-line); border-left: 5px solid var(--client-accent); border-radius: 18px; background: color-mix(in srgb, var(--client-accent-soft) 34%, var(--client-surface)); }
.client-product-category h4 { margin: 0; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--client-accent) 24%, var(--client-line)); color: var(--client-text); font-size: 1.08rem; }
.client-product-category:nth-of-type(3n+1) { border-left-color: #a67e35; background: color-mix(in srgb, #f3e8c9 47%, var(--client-surface)); }
.client-product-category:nth-of-type(3n+2) { border-left-color: #64806b; background: color-mix(in srgb, #deecdd 45%, var(--client-surface)); }
.client-product-category:nth-of-type(3n) { border-left-color: #b2705f; background: color-mix(in srgb, #f5e0d8 44%, var(--client-surface)); }
html[data-client-theme="dark"] .client-product-category:nth-of-type(3n+1) { background: color-mix(in srgb, #5b492f 38%, var(--client-surface)); }
html[data-client-theme="dark"] .client-product-category:nth-of-type(3n+2) { background: color-mix(in srgb, #354d3e 38%, var(--client-surface)); }
html[data-client-theme="dark"] .client-product-category:nth-of-type(3n) { background: color-mix(in srgb, #573d38 38%, var(--client-surface)); }
.client-product-category .client-product { box-shadow: 0 4px 12px rgba(44,31,22,.035); }
.client-product-category[hidden],.client-product[hidden],.client-planner-browse [hidden] { display: none; }
.client-records > [hidden],.client-calendar-list > [hidden],.client-product-grid > [hidden],.client-benefit-list > [hidden] { display: none; }
.client-chat-card { width: min(100%, 850px); margin-inline: auto; padding: 0; overflow: hidden; }
.client-chat-thread { min-height: 230px; padding: 22px; gap: 5px; background: color-mix(in srgb, var(--client-accent-soft) 22%, var(--client-surface)); }
.client-chat-entry { display: grid; gap: 5px; }
.client-chat-day { display: flex; justify-content: center; margin: 12px 0; }
.client-chat-day span { padding: 5px 11px; border-radius: 999px; background: var(--client-surface); color: var(--client-muted); font-size: 11px; font-weight: 700; }
.client-chat-row { display: flex; width: 100%; }
.client-chat-row.outgoing { justify-content: flex-end; }
.client-chat-row.incoming { justify-content: flex-start; }
.client-chat-bubble { max-width: min(78%, 520px); min-width: 90px; padding: 10px 13px 7px; border: 1px solid var(--client-line); border-radius: 5px 15px 15px 15px; background: var(--client-surface); box-shadow: 0 2px 6px rgba(20,35,20,.04); overflow-wrap: anywhere; }
.client-chat-row.outgoing .client-chat-bubble { border-color: color-mix(in srgb, var(--client-accent) 20%, var(--client-line)); border-radius: 15px 5px 15px 15px; background: color-mix(in srgb, var(--client-accent-soft) 66%, var(--client-surface)); }
.client-chat-sender { display: block; margin-bottom: 3px; color: var(--client-accent-dark); font-size: 11px; }
.client-chat-bubble p { margin: 0; white-space: pre-wrap; line-height: 1.5; font-size: 14px; }
.client-chat-bubble small { display: block; margin-top: 4px; color: var(--client-muted); font-size: 10px; text-align: right; }
.client-chat-context { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--client-line); font-size: 11px; }
.client-chat-context button { min-height: 28px; padding: 4px 7px; font-size: 11px; }
.client-chat-composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--client-line); background: var(--client-surface); }
.client-chat-composer .client-chat-input { min-width: 0; }
.client-chat-card > .client-show-more { width: calc(100% - 44px); margin: 14px 22px 0; }
.client-messages-page { display: flex; flex-direction: column; min-height: calc(100dvh - 180px); }
.client-messages-page .client-chat-card { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.client-messages-page .client-chat-thread { flex: 1; min-height: 230px; max-height: min(65dvh, 720px); overflow-y: auto; }
.client-messages-page .client-chat-composer { flex: 0 0 auto; }
@media (max-width: 820px) {
    body:has(.client-messages-page) .client-header { display: none; }
    body:has(.client-messages-page) .client-back-bar:not([hidden]) { top: 0; padding-top: max(7px, env(safe-area-inset-top)); }
    body:has(.client-messages-page) .client-content { width: 100%; padding: 0; }
    .client-messages-page { height: calc(100dvh - 59px); min-height: calc(100dvh - 59px); gap: 0; }
    .client-messages-page .client-section-heading { display: none; }
    .client-messages-page .client-chat-card { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
    .client-messages-page .client-chat-thread { max-height: none; }
}
@media (max-width: 600px) {
    .client-messages-page { height: calc(100dvh - 59px - env(safe-area-inset-top)); min-height: calc(100dvh - 59px - env(safe-area-inset-top)); }
}
@media (max-width: 600px) { .client-chat-thread { padding: 14px 10px; } .client-chat-bubble { max-width: 86%; } .client-chat-composer { padding: 10px; } }
.client-show-more { display: block; width: 100%; margin-top: 12px; text-align: center; cursor: pointer; }
.client-show-more + .client-records { margin-top: 12px; }
.client-previous-plans-toggle { margin: 18px 0 4px; }
.client-previous-plans-toggle + h3 { margin-top: 22px; }
.client-add-quantity,.client-menu-quantity { display:inline-flex; align-items:center; gap:8px; color:var(--client-text); font-size:.88rem; font-weight:700; }
.client-add-quantity input,.client-menu-quantity input { width:72px; min-height:36px; border:1px solid var(--client-line); border-radius:8px; padding:4px 8px; background:var(--client-surface); color:var(--client-text); font:inherit; }
.client-product-description { margin: 10px 0; color: var(--client-text); line-height: 1.5; }
.client-product-portion { margin: 0 0 10px; color: var(--client-muted); font-size: .88rem; font-weight: 650; }
.client-product-detail-brand { color: var(--client-muted); font-weight: 700; }
.client-product-detail-description { font-size: 1.03rem; line-height: 1.65; }
.client-inclusion-list { margin: 10px 0 20px; padding-left: 22px; display: grid; gap: 7px; }
.client-allergen-note { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--client-line); border-radius: 14px; background: var(--client-accent-soft); }
.client-allergen-note p { margin: 6px 0 0; }
.client-product-detail-price { margin: 18px 0 8px; color: var(--client-accent-dark); font-size: 1.2rem; font-weight: 800; }
.client-calendar-list { display: grid; gap: 12px; }
.client-calendar-date { display: grid; min-width: 64px; min-height: 64px; place-items: center; border-radius: 16px; background: var(--client-accent-soft); color: var(--client-accent-dark); font-weight: 800; text-align: center; }
.client-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--client-line); }
.client-toggle input { width: 20px; height: 20px; accent-color: var(--client-accent); }
.client-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.client-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(20,13,9,.58); }
.client-modal-card { position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border: 1px solid var(--client-line); border-radius: 24px; background: var(--client-surface); box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.client-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.client-modal-header h2 { margin: 0; }
.client-modal-header button { border: 0; background: transparent; color: var(--client-text); font-size: 28px; }
.client-menu-planner-open .client-modal-header { position: sticky; top: -22px; z-index: 3; margin: -22px -22px 12px; padding: 15px 22px; border-bottom: 1px solid var(--client-line); background: var(--client-surface); }
.client-menu-planner-open .client-modal-header button { min-width: 42px; min-height: 42px; border-radius: 10px; cursor: pointer; }
.client-menu-planner-open .client-menu-toolbar { position: sticky; top: 60px; z-index: 2; padding: 12px 15px; border: 1px solid var(--client-line); box-shadow: var(--client-shadow); }
.client-menu-toolbar .client-actions { margin-top: 9px; }
.client-plan-total { display: grid; gap: 5px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--client-line); border-radius: 12px; background: var(--client-accent-soft); color: var(--client-text); }
.client-plan-total small { color: var(--client-muted); line-height: 1.45; }
.client-plan-view-open .client-modal-card { width: min(660px,100%); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border-color: #384047; border-radius: 23px; background: #142027; color: #f8f2e9; }
.client-plan-view-open .client-modal-header { position: sticky; top: 12px; z-index: 4; justify-content: flex-end; height: 0; margin: 0; padding-right: 18px; }
.client-plan-view-open .client-modal-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.client-plan-view-open .client-modal-header button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #ffffff45; border-radius: 50%; background: #293239b8; color: #fff; font-size: 27px; }
.client-plan-view-open .client-modal-header button:hover,.client-plan-view-open .client-modal-header button:focus-visible { background: #495059; outline: 2px solid #d4a467; }
.client-plan-view { --plan-warm: #b9854f; --plan-muted: #b9bbb9; }
.client-plan-view-hero { min-height: 195px; padding: 32px 70px 26px 25px; border-bottom: 1px solid #ffffff27; background: radial-gradient(ellipse at 90% 0%,#78553970,transparent 52%),linear-gradient(125deg,#1a262d,#17232a 65%,#342c25); }
.client-plan-view-status { display: inline-block; margin-bottom: 12px; padding: 5px 13px; border-radius: 999px; background: #694e35; color: #ffe0ae; font-size: 12px; font-weight: 800; }
.client-plan-view-hero h2 { max-width: 510px; margin: 0 0 17px; font: 600 clamp(28px,5vw,39px)/1.1 Georgia,serif; overflow-wrap: anywhere; }
.client-plan-view-meta { display: flex; flex-wrap: wrap; gap: 9px 17px; color: #e3e1da; font-size: 13px; }
.client-plan-view-meta span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.client-plan-view-meta .client-svg-icon { width: 17px; height: 17px; flex: 0 0 auto; color: #d2a169; }
.client-plan-view-content { display: grid; gap: 12px; padding: 16px; }
.client-plan-view-panel,.client-plan-view-details,.client-plan-view-row,.client-plan-view-note,.client-plan-view-final { border: 1px solid #ffffff1d; border-radius: 16px; background: #222c32; }
.client-plan-view-panel { padding: 17px; }
.client-plan-view-panel-heading,.client-plan-view-estimate,.client-plan-view-row,.client-plan-view-note { display: flex; align-items: flex-start; gap: 14px; }
.client-plan-view-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 13px; background: #695138; color: #f2c998; }
.client-plan-view-icon .client-svg-icon { width: 22px; height: 22px; }
.client-plan-view-panel-heading h3 { margin: 0 0 5px; font: 600 22px/1.2 Georgia,serif; }
.client-plan-view-panel-heading p { margin: 0; color: var(--plan-muted); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.client-plan-view-items { margin-top: 15px; }
.client-plan-view-items .client-plan-item { border: 1px solid #ffffff17; background: #2b3439; color: #f8f2e9; }
.client-plan-view-items .client-plan-item p { color: var(--plan-muted); }
.client-plan-view-items .client-plan-item button { border-color: #906f59; background: #3d3635; color: #f5d6c6; }
.client-plan-view-items .client-menu-quantity { color: #f4e8d9; }
.client-plan-view-menu-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px; }
.client-plan-view-menu-actions .client-primary { flex: 1 1 180px; background: #a97946; border-color: #a97946; color: #fff; }
.client-plan-view-menu-actions .client-secondary { flex: 1 1 130px; border-color: #8d755d; background: #3b3530; color: #f6e8d7; }
.client-plan-view-estimate { background: #342e29; }
.client-plan-view-estimate .client-plan-total { gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: #fff; }
.client-plan-view-estimate .client-plan-total>span { font-size: 13px; font-weight: 700; }
.client-plan-view-estimate .client-plan-total strong { font-size: 25px; line-height: 1.2; }
.client-plan-view-estimate .client-plan-total small { color: #cdc4bc; font-size: 12px; }
.client-plan-view-details summary { display: flex; align-items: center; gap: 14px; padding: 12px 16px; list-style: none; cursor: pointer; }
.client-plan-view-details summary::-webkit-details-marker { display: none; }
.client-plan-view-details summary>span:nth-child(2),.client-plan-view-row>span:nth-child(2),.client-plan-view-note>span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.client-plan-view-details strong,.client-plan-view-row strong,.client-plan-view-note strong { color: #f8f2e9; font-size: 14px; }
.client-plan-view-details small,.client-plan-view-row small,.client-plan-view-note small { color: var(--plan-muted); font-size: 12px; line-height: 1.4; }
.client-plan-view-chevron { color: #e4d8c9; font-size: 28px; transition: transform .18s; }
.client-plan-view-details[open] .client-plan-view-chevron { transform: rotate(90deg); }
.client-plan-view-details dl { display: grid; gap: 0; margin: 0 16px 13px; border-top: 1px solid #ffffff21; }
.client-plan-view-details dl>div { display: grid; grid-template-columns: minmax(100px,35%) minmax(0,1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid #ffffff17; }
.client-plan-view-details dt { color: var(--plan-muted); font-size: 12px; }
.client-plan-view-details dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13px; }
.client-plan-view-details>.client-secondary { margin: 0 16px 16px; border-color: #8d755d; background: #3b3530; color: #f6e8d7; }
.client-plan-view-row,.client-plan-view-note { align-items: center; padding: 12px 16px; }
.client-plan-view-row { width: 100%; color: inherit; text-align: left; }
.client-plan-view-row:hover,.client-plan-view-final:hover { border-color: #b9854f; background: #2d363b; }
.client-plan-view-row:focus-visible,.client-plan-view-final:focus-visible,.client-plan-view-details summary:focus-visible { outline: 2px solid #d4a467; outline-offset: 2px; }
.client-plan-view-submit { display: grid; gap: 7px; text-align: center; }
.client-plan-view-submit .client-primary { min-height: 54px; background: #a97946; border-color: #a97946; color: #fff; font-size: 16px; }
.client-plan-view-submit small { color: var(--plan-muted); font-size: 12px; line-height: 1.45; }
.client-plan-view-note .client-plan-view-icon { background: #554638; }
.client-plan-view-final { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 16px; color: #efaaa2; text-align: left; }
.client-plan-view-final>span:nth-child(2) { flex: 1; font-weight: 750; }
.client-plan-view-final .client-plan-view-icon { background: #423137; color: #efaaa2; }
@media (max-width: 600px) { .client-modal.client-plan-view-open { padding: 7px; align-items: center; } .client-plan-view-open .client-modal-card { width: 100%; height: calc(100dvh - 14px); max-height: calc(100dvh - 14px); border-radius: 19px; } .client-plan-view-hero { padding: 35px 67px 24px 19px; } .client-plan-view-content { padding: 12px; } .client-plan-view-panel { padding: 15px; } .client-plan-view-meta { font-size: 12px; } .client-plan-view-row,.client-plan-view-note,.client-plan-view-details summary { padding: 11px; } }
@media (max-width: 600px) { .client-menu-planner-open .client-menu-toolbar { top: 59px; } .client-menu-planner-open .client-menu-toolbar .client-actions { flex-wrap: nowrap; } .client-menu-planner-open .client-menu-toolbar button { flex: 1; padding-inline: 8px; } .client-plan-item { flex-wrap: wrap; } }
@media (max-width: 600px) { .client-menu-planner-open .client-modal-card { width: 100%; max-width: 100%; overflow-x: hidden; padding: 16px; } .client-menu-planner-open .client-modal-header { top: -16px; margin: -16px -16px 12px; padding: 10px 16px; } .client-menu-planner-open #clientModalBody { min-width: 0; width: 100%; } .client-menu-planner-open .client-product-grid { grid-template-columns: minmax(0,1fr); width: 100%; } .client-menu-planner-open .client-menu-toolbar { top: 57px; min-width: 0; padding: 10px; } .client-menu-planner-open .client-menu-toolbar .client-actions { min-width: 0; gap: 6px; } .client-menu-planner-open .client-menu-toolbar button { min-width: 0; white-space: normal; } .client-menu-planner-open .client-record { flex-wrap: wrap; min-width: 0; } .client-menu-planner-open .client-record>div { min-width: 0; overflow-wrap: anywhere; } .client-menu-planner-open input[type="number"] { font-size: 16px; } }
@media (max-width: 600px) { .client-menu-planner-open .client-product-search input { font-size: 16px; } .client-menu-planner-open .client-product-search>div { grid-template-columns: minmax(0,1fr) auto; } .client-menu-planner-open .client-product-search button { padding-inline: 10px; } .client-menu-planner-open .client-category-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .client-menu-planner-open .client-category-filter { min-width: 0; white-space: normal; } }
.client-toast { position: fixed; right: 20px; bottom: 24px; z-index: 120; display: grid; gap: 3px; max-width: 360px; padding: 15px 18px; border-radius: 14px; background: var(--client-text); color: var(--client-bg); box-shadow: var(--client-shadow); }
.client-toast span { font-size: 12px; opacity: .82; }
.client-mobile-navigation { display: none; }

@media (max-width: 900px) {
    .client-header { grid-template-columns: auto 1fr auto; padding-inline: 18px; }
    .client-navigation { position: fixed; inset: 76px 16px auto; display: none; padding: 12px; border: 1px solid var(--client-line); border-radius: 18px; background: var(--client-surface); box-shadow: var(--client-shadow); }
    .client-navigation.open { display: grid; }
    .client-icon-button { display: grid; justify-self: end; }
    .client-account-button { display: none; }
    .client-hero { grid-template-columns: 1fr; }
    .client-grid.three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .client-header { min-height: 68px; }
    .client-brand-mark { width: 38px; height: 38px; }
    .client-content { width: min(100% - 28px, 1120px); padding-top: 25px; padding-bottom: 100px; }
    .client-hero-main,.client-card { border-radius: 20px; }
    .client-grid,.client-grid.three,.client-form-grid,.client-product-grid { grid-template-columns: 1fr; }
    .client-record { align-items: flex-start; }
    .client-mobile-navigation { position: fixed; inset: auto 10px 10px; z-index: 30; display: grid; grid-template-columns: repeat(5,1fr); padding: 7px; border: 1px solid var(--client-line); border-radius: 18px; background: color-mix(in srgb, var(--client-surface) 94%, transparent); box-shadow: var(--client-shadow); backdrop-filter: blur(16px); }
    .client-mobile-navigation .client-nav-button { min-width: 0; padding: 8px 3px; border-radius: 12px; font-size: 10px; }
    .client-modal { padding: 10px; align-items: end; }
    .client-modal-card { max-height: 92vh; border-radius: 22px 22px 12px 12px; }
}

/* DAOS-aligned client shell — preserves the existing components and forms. */
:root {
    --client-bg:#f5f7f5;--client-surface:#fff;--client-surface-soft:#f8faf8;--client-text:#202620;--client-muted:#677067;
    --client-line:#dfe5df;--client-accent:#4f6851;--client-accent-dark:#344a37;--client-accent-soft:#e6eee5;
    --client-sidebar:#222922;--client-sidebar-soft:#313a31;--client-sidebar-text:#e7ece7;--client-sidebar-muted:#aeb9ae;
    --client-shadow:0 10px 30px rgba(20,35,20,.09);--client-sidebar-width:254px;
}
html[data-client-theme="dark"]{--client-bg:#161b1f;--client-surface:#20282d;--client-surface-soft:#273137;--client-text:#eef3f0;--client-muted:#b7c2bc;--client-line:#3b4742;--client-accent:#77a17d;--client-accent-dark:#b7d4bb;--client-accent-soft:#28402b;--client-sidebar:#11171a;--client-sidebar-soft:#1d282d;--client-sidebar-text:#edf3ef;--client-sidebar-muted:#aebbb3}
html[data-client-accent="ocean"]{--client-accent:#28789c;--client-accent-dark:#1b5775;--client-accent-soft:#e5f2f8;--client-sidebar:#162c3a;--client-sidebar-soft:#203d4e}
html[data-client-accent="berry"]{--client-accent:#815b96;--client-accent-dark:#5f4072;--client-accent-soft:#f2eaf6;--client-sidebar:#302538;--client-sidebar-soft:#43334e}
html[data-client-accent="amber"]{--client-accent:#ad6243;--client-accent-dark:#81462f;--client-accent-soft:#fceedf;--client-sidebar:#382820;--client-sidebar-soft:#4c362c}
html[data-client-accent="culinary"]{--client-accent:#9c6828;--client-accent-dark:#704719;--client-accent-soft:#f4e7cf;--client-sidebar:#31291f;--client-sidebar-soft:#44382a}
html[data-client-theme="dark"][data-client-accent="ocean"]{--client-accent-soft:#1d4052;--client-accent-dark:#9ed4ed}html[data-client-theme="dark"][data-client-accent="berry"]{--client-accent-soft:#422f4d;--client-accent-dark:#d7b9e7}html[data-client-theme="dark"][data-client-accent="amber"]{--client-accent-soft:#4a3025;--client-accent-dark:#edb59d}
html[data-client-theme="dark"][data-client-accent="culinary"]{--client-accent:#986626;--client-accent-dark:#e9c995;--client-accent-soft:#493822;--client-sidebar:#1d1a17;--client-sidebar-soft:#30271f}
html[data-client-theme="dark"][data-client-accent="sage"]{--client-accent:#607b61}
body{background:var(--client-bg);font-size:14px;line-height:1.45}.client-shell{display:grid;grid-template-columns:var(--client-sidebar-width) minmax(0,1fr);min-height:100vh}.client-main{min-width:0}.client-sidebar{position:sticky;top:0;z-index:40;display:flex;flex-direction:column;width:var(--client-sidebar-width);height:100vh;padding:18px 14px;background:var(--client-sidebar);color:var(--client-sidebar-text);overflow-y:auto}.client-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.client-brand-mark{border-radius:12px}.client-brand small{color:var(--client-sidebar-muted)}.client-sidebar-close{display:none;border:0;background:transparent;color:var(--client-sidebar-text);font-size:26px}.client-nav-label{margin:30px 10px 8px;color:var(--client-sidebar-muted);font-size:10px;font-weight:800;letter-spacing:.12em}.client-navigation{display:grid;justify-content:stretch;gap:5px}.client-nav-button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border-radius:10px;color:var(--client-sidebar-muted);text-align:left}.client-nav-button:hover{background:var(--client-sidebar-soft);color:var(--client-sidebar-text);transform:translateX(2px)}.client-nav-button.active{background:var(--client-accent);color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.14)}.client-svg-icon{width:20px;height:20px;flex:0 0 auto}.client-sidebar-account{display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:var(--client-sidebar-soft);color:var(--client-sidebar-text);text-align:left}.client-sidebar-account>span:first-child{display:grid;width:36px;height:36px;place-items:center;border-radius:10px;background:var(--client-accent);color:#fff;font-weight:800}.client-sidebar-account strong,.client-sidebar-account small{display:block}.client-sidebar-account small{color:var(--client-sidebar-muted);font-size:11px}.client-sidebar-backdrop{display:none}
.client-header{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:10px 28px;border-bottom:1px solid var(--client-line);background:color-mix(in srgb,var(--client-surface) 94%,transparent)}.client-header>div{display:grid}.client-header small{color:var(--client-muted);font-size:10px;letter-spacing:.1em}.client-header strong{font-size:16px}.client-account-button,.client-icon-button{border-radius:11px}.client-icon-button{display:none}.client-content{width:min(1180px,calc(100% - 48px));padding:32px 0 72px}.client-page{gap:20px}.client-welcome{padding:8px 2px 2px}.client-welcome h1{margin:0 0 6px;font-family:inherit;font-size:clamp(28px,4vw,40px);line-height:1.12}.client-welcome p:last-child{max-width:670px;margin:0;color:var(--client-muted);font-size:15px}.client-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.client-quick-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:112px;padding:18px;border:1px solid var(--client-line);border-radius:16px;background:var(--client-surface);color:var(--client-text);text-align:left;box-shadow:0 2px 8px rgba(20,35,20,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.client-quick-card:hover{transform:translateY(-4px);box-shadow:var(--client-shadow);border-color:color-mix(in srgb,var(--client-accent) 45%,var(--client-line))}.client-quick-card strong,.client-quick-card small{display:block}.client-quick-card small{margin-top:4px;color:var(--client-muted);font-size:11px}.client-quick-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--client-accent-soft);color:var(--client-accent-dark)}.client-quick-icon .client-svg-icon{width:22px;height:22px}.client-quick-arrow{color:var(--client-muted);opacity:.55}.client-quick-arrow .client-svg-icon{width:16px;height:16px}.client-quick-card.blue .client-quick-icon{background:#eaf2f8;color:#3f6f91}.client-quick-card.amber .client-quick-icon{background:#fff5dc;color:#a16a12}.client-quick-card.green .client-quick-icon{background:#e8f5ed;color:#2f7d50}.client-quick-card.purple .client-quick-icon{background:#f0eaf5;color:#765a8e}.client-card,.client-hero-main{border-radius:16px;box-shadow:0 2px 8px rgba(20,35,20,.04)}.client-record{border-radius:12px;background:var(--client-surface-soft)}.client-section-heading .client-muted:empty{display:none}.client-benefit-compact{display:flex;align-items:center;gap:14px;padding:17px;border-radius:12px;background:var(--client-accent-soft);color:var(--client-accent-dark)}.client-benefit-compact>.client-svg-icon{width:26px;height:26px}.client-benefit-compact p{margin:4px 0 0;color:var(--client-muted);font-size:12px}.client-chat-input{flex:1;min-height:46px;padding:10px 12px;border:1px solid var(--client-line);border-radius:12px;background:var(--client-surface);color:var(--client-text)}
@media(max-width:1080px){.client-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.client-shell{display:block}.client-sidebar{position:fixed;left:0;top:0;transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 18px 60px rgba(0,0,0,.28)}.client-sidebar.open{transform:translateX(0)}.client-sidebar-close{display:block}.client-sidebar-backdrop{position:fixed;inset:0;z-index:35;display:block;border:0;background:rgba(12,18,13,.45)}.client-menu-open{overflow:hidden}.client-icon-button{display:grid}.client-header{padding-inline:16px}.client-content{width:min(100% - 28px,1180px);padding-top:24px}.client-navigation{position:static;inset:auto;display:grid;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.client-account-button{display:grid}}
@media(max-width:600px){.client-content{padding-bottom:60px}.client-header{min-height:64px}.client-header>div{justify-items:center}.client-quick-grid,.client-grid,.client-grid.three,.client-form-grid,.client-product-grid{grid-template-columns:1fr}.client-quick-card{min-height:92px}.client-home-details{gap:14px}.client-modal{padding:8px}.client-modal-card{border-radius:16px 16px 10px 10px}}
.client-quick-card{min-height:142px;padding:22px;border-width:1.5px}
.client-quick-card.blue{background:color-mix(in srgb,#dcecf6 54%,var(--client-surface));border-color:#c8dce9}
.client-quick-card.amber{background:color-mix(in srgb,#fff0cb 58%,var(--client-surface));border-color:#eedbb0}
.client-quick-card.green{background:color-mix(in srgb,#dceedd 56%,var(--client-surface));border-color:#c9e0ca}
.client-quick-card.purple{background:color-mix(in srgb,#eadff4 55%,var(--client-surface));border-color:#dccce9}
html[data-client-theme="dark"] .client-quick-card.blue{background:color-mix(in srgb,#294452 40%,var(--client-surface));border-color:#3b5663}
html[data-client-theme="dark"] .client-quick-card.amber{background:color-mix(in srgb,#57422b 40%,var(--client-surface));border-color:#69513a}
html[data-client-theme="dark"] .client-quick-card.green{background:color-mix(in srgb,#304b3c 40%,var(--client-surface));border-color:#41604e}
html[data-client-theme="dark"] .client-quick-card.purple{background:color-mix(in srgb,#493950 40%,var(--client-surface));border-color:#5f4a67}
@media(max-width:600px){.client-quick-card{min-height:124px;padding:20px}}

/* Client homepage: food-led welcome and clearer action hierarchy. */
body { background: radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--client-accent-soft) 55%, transparent), transparent 30rem), var(--client-bg); }
html[data-client-theme="dark"] body { background: radial-gradient(circle at 88% 2%, color-mix(in srgb, #7a5635 18%, transparent), transparent 30rem), var(--client-bg); }
.client-page > .client-card { background: color-mix(in srgb, var(--client-accent-soft) 9%, var(--client-surface)); }
.client-home { gap: 18px; }
.client-home-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 290px; overflow: hidden; padding: clamp(26px, 4vw, 52px); border: 1px solid #eadfce; border-radius: 22px; background: linear-gradient(105deg, #fbf5e9 0%, #f8eddb 62%, #ebd5b9 100%); box-shadow: var(--client-shadow); }
.client-home-hero-photo { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 58%; background: var(--client-home-hero-image, url("assets/client-login-food.png")) center 69% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
.client-home-hero-copy { position: relative; z-index: 1; max-width: min(53%, 540px); }
.client-home-hero-copy p:first-child { margin: 0 0 2px; color: #78614e; font-size: 19px; letter-spacing: .03em; }
.client-home-hero h1 { margin: 0 0 16px; color: #2d241e; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 66px); line-height: 1.02; }
.client-home-hero-copy p:last-child { max-width: 450px; margin: 0; color: #50443c; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; }
.client-home-hero-copy .client-home-hero-secondary { margin-top: 7px; font-size: 14px; }
.client-home-services,.client-home-space { min-width: 0; }
.client-home-service-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.client-home-service { position: relative; display: grid; grid-template-rows: auto auto 1fr; justify-items: start; align-content: start; gap: 8px; min-width: 0; min-height: 152px; padding: 18px; border: 1px solid var(--client-line); border-radius: 17px; background: color-mix(in srgb, #f4e8d5 40%, var(--client-surface)); color: var(--client-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.client-home-service:hover,.client-home-service:focus-visible { transform: translateY(-2px); border-color: var(--client-accent); box-shadow: var(--client-shadow); }
.client-home-service.plan { background: color-mix(in srgb, #f4e5d3 42%, var(--client-surface)); }
.client-home-service.subscription { background: color-mix(in srgb, #e8eee0 48%, var(--client-surface)); }
.client-home-service.quote { background: color-mix(in srgb, #eee9df 54%, var(--client-surface)); }
.client-home-service-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--client-accent) 18%, var(--client-surface)); color: var(--client-accent-dark); }
.client-home-service-icon .client-svg-icon { width: 21px; height: 21px; }
.client-home-service strong { max-width: 100%; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.client-home-service small { max-width: 100%; padding-right: 14px; color: var(--client-muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.client-home-service-arrow { position: absolute; right: 14px; bottom: 13px; color: var(--client-accent-dark); }
.client-home-service-arrow .client-svg-icon { width: 16px; height: 16px; }
.client-home-activity { grid-template-columns: 48px minmax(0,1fr) auto auto; }
.client-home-activity-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--client-accent) 16%, var(--client-surface)); color: var(--client-accent-dark); }
.client-home-activity-icon .client-svg-icon { width: 22px; height: 22px; }
.client-home-activity-links { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.client-home-activity-links .client-text-button { min-height: 30px; font-size: 11px; }
.client-home-space .client-home-shortcuts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.client-home-shortcut.requests { background: color-mix(in srgb, #f2e9db 45%, var(--client-surface)); }
.client-home-shortcut.requests .client-home-shortcut-icon { background: #efe3d1; color: #74512e; }
.client-home-start,.client-home-inspire,.client-home-shortcut,.client-home-plan { font: inherit; cursor: pointer; }
.client-home-start { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; width: 100%; min-height: 100px; padding: 22px 26px; border: 1px solid var(--client-accent); border-radius: 18px; background: linear-gradient(115deg, var(--client-accent-dark), var(--client-accent) 65%, var(--client-accent-dark)); color: #fff; text-align: left; box-shadow: 0 10px 22px rgba(99,58,22,.15); transition: transform .18s ease, box-shadow .18s ease; }
html[data-client-theme="dark"] .client-home-start { background: linear-gradient(115deg, color-mix(in srgb, var(--client-accent) 65%, #161b1f), var(--client-accent) 65%, color-mix(in srgb, var(--client-accent) 75%, #161b1f)); border-color: var(--client-accent); }
.client-home-start:hover,.client-home-inspire:hover,.client-home-shortcut:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(55,40,25,.14); }
.client-home-start-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.44); border-radius: 12px; }
.client-home-start-icon .client-svg-icon { width: 28px; height: 28px; }
.client-home-start strong,.client-home-start small,.client-home-inspire strong,.client-home-inspire small,.client-home-shortcut strong,.client-home-shortcut small { display: block; }
.client-home-start strong { font-size: clamp(19px, 2vw, 24px); }
.client-home-start small { margin-top: 3px; color: #fff5e7; font-size: 13px; }
.client-home-start-arrow .client-svg-icon { width: 24px; height: 24px; }
.client-home-feature-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 18px; }
.client-home-plans { min-width: 0; padding: 22px; background: color-mix(in srgb, #fff9ef 55%, var(--client-surface)) !important; }
.client-home-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.client-home-card-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(23px, 2.5vw, 30px); }
.client-home-card-heading .client-text-button { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 6px; white-space: nowrap; }
.client-home-card-heading .client-svg-icon { width: 15px; height: 15px; }
.client-home-plan-list { display: grid; gap: 8px; }
.client-home-plan { display: grid; grid-template-columns: 68px minmax(0,1fr) auto auto; align-items: center; gap: 13px; width: 100%; padding: 10px; border: 1px solid var(--client-line); border-radius: 13px; background: var(--client-surface); color: var(--client-text); text-align: left; }
.client-home-plan:hover { border-color: #cda776; background: color-mix(in srgb, #f8eedb 23%, var(--client-surface)); }
.client-home-plan-date { display: grid; place-items: center; min-height: 66px; padding: 6px; border-radius: 10px; background: #f7ead2; color: #5e462b; text-transform: uppercase; }
.client-home-plan-date strong { font-size: 26px; line-height: 1.05; }
.client-home-plan-date small { font-size: 9px; font-weight: 800; }
.client-home-plan-info { min-width: 0; }
.client-home-plan-info strong,.client-home-plan-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-home-plan-info strong { font-size: 14px; }
.client-home-plan-info small { margin-top: 4px; color: var(--client-muted); font-size: 11px; }
.client-home-plan-status { max-width: 82px; padding: 5px 8px; border-radius: 999px; background: #e5efe4; color: #396843; font-size: 10px; font-weight: 800; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-home-plan-arrow { color: var(--client-muted); }
.client-home-plan-arrow .client-svg-icon { width: 16px; height: 16px; }
.client-home-empty { display: grid; gap: 4px; padding: 22px; border: 1px dashed var(--client-line); border-radius: 12px; color: var(--client-muted); }
.client-home-empty strong { color: var(--client-text); }
.client-home-inspire { position: relative; isolation: isolate; display: flex; align-items: end; justify-content: space-between; gap: 15px; min-height: 240px; overflow: hidden; padding: 26px; border: 1px solid #6a4b2c; border-radius: 18px; background-image: linear-gradient(0deg, rgba(30,23,18,.8), rgba(30,23,18,.08) 75%), var(--client-home-inspire-image, url("assets/client-login-food.png")); background-position: center, center 76%; background-size: cover; background-repeat: no-repeat; color: #fff; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.client-home-inspire strong { font-family: Georgia, serif; font-size: 31px; }
.client-home-inspire small { max-width: 240px; margin-top: 7px; color: #fff4e9; font-size: 13px; line-height: 1.4; }
.client-home-inspire-arrow { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fffaf1; color: #50361e; }
.client-home-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.client-home-shortcut { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; min-height: 108px; padding: 18px; border: 1px solid var(--client-line); border-radius: 16px; background: color-mix(in srgb, #e3f1e7 44%, var(--client-surface)); color: var(--client-text); text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.client-home-shortcut.chat { background: color-mix(in srgb, #eee4f4 48%, var(--client-surface)); }
.client-home-shortcut-icon { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 50%; background: #e1efe4; color: #39764f; }
.client-home-shortcut.chat .client-home-shortcut-icon { background: #eddef3; color: #76508c; }
.client-home-shortcut strong { font-size: 15px; }
.client-home-shortcut small { margin-top: 4px; color: var(--client-muted); font-size: 11px; line-height: 1.35; }
.client-home-shortcut-arrow { color: var(--client-muted); }
.client-home-shortcut-arrow .client-svg-icon { width: 16px; height: 16px; }
.client-home-notices { border-left: 4px solid #d1a869; }
.client-plan-reminder-list{border-left:4px solid var(--client-accent);background:var(--client-surface)}
.client-plan-reminder-list h2{margin:0 0 10px;font-size:1.1rem}
.client-plan-reminder{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 4px;border:0;border-top:1px solid var(--client-line);background:transparent;color:var(--client-text);text-align:left;cursor:pointer}
.client-plan-reminder>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.client-plan-reminder strong,.client-plan-reminder small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-plan-reminder small{color:var(--client-muted)}
.client-plan-reminder .client-svg-icon{width:21px;height:21px;color:var(--client-accent)}
html[data-client-theme="dark"] .client-home-hero { border-color: #56412c; background: linear-gradient(105deg, #28231e 0%, #393028 66%, #59412b); }
html[data-client-theme="dark"] .client-home-hero-copy p:first-child { color: #e1c9aa; }
html[data-client-theme="dark"] .client-home-hero h1 { color: #fff6e8; }
html[data-client-theme="dark"] .client-home-hero-copy p:last-child { color: #e4d7c9; }
html[data-client-theme="dark"] .client-home-plans { background: color-mix(in srgb, #463a2c 24%, var(--client-surface)) !important; }
html[data-client-theme="dark"] .client-home-plan-date { background: #4d3d2b; color: #f2dcb8; }
html[data-client-theme="dark"] .client-home-plan-status { background: #2e4b38; color: #c2e4c9; }
html[data-client-theme="dark"] .client-home-shortcut { background: color-mix(in srgb, #294638 34%, var(--client-surface)); }
html[data-client-theme="dark"] .client-home-shortcut.chat { background: color-mix(in srgb, #493752 34%, var(--client-surface)); }
html[data-client-theme="dark"] .client-home-hero-copy .client-home-hero-secondary { color: #e4d7c9; }
html[data-client-theme="dark"] .client-home-service,html[data-client-theme="dark"] .client-home-shortcut.requests { background: color-mix(in srgb, var(--client-accent) 9%, var(--client-surface)); }
html[data-client-theme="dark"] .client-home-shortcut.requests .client-home-shortcut-icon { background: #4d3d2b; color: #f2dcb8; }
@media (max-width: 900px) { .client-home-feature-grid { grid-template-columns: minmax(0,1fr); } .client-home-inspire { min-height: 210px; } }
@media (max-width: 900px) { .client-home-service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .client-home-space .client-home-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .client-home-service-grid { gap: 10px; } .client-home-service { min-height: 145px; padding: 13px; } .client-home-service strong { font-size: 14px; } .client-home-service small { font-size: 11px; } .client-home-plans .client-home-card-heading { align-items: start; flex-direction: column; } .client-home-activity { grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px; } .client-home-activity .client-home-plan-status { grid-column: 2; grid-row: 2; justify-self: start; } .client-home-activity .client-home-plan-arrow { grid-column: 3; grid-row: 1/3; } }
@media (max-width: 600px) { .client-home-hero { min-height: 270px; padding: 25px 20px; } .client-home-hero-photo { width: 72%; opacity: .76; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, #000 62%); } .client-home-hero-copy { max-width: 72%; } .client-home-hero-copy p:first-child { font-size: 16px; } .client-home-hero-copy p:last-child { font-size: 14px; } .client-home-start { gap: 12px; min-height: 90px; padding: 16px; } .client-home-start-icon { width: 42px; height: 42px; } .client-home-shortcuts { gap: 10px; } .client-home-shortcut { grid-template-columns: 1fr auto; align-content: start; gap: 8px; min-height: 135px; padding: 13px; } .client-home-shortcut-icon { grid-column: 1/-1; width: 39px; height: 39px; } .client-home-shortcut-arrow { grid-column: 2; grid-row: 2; } .client-home-plan { grid-template-columns: 64px minmax(0,1fr) auto auto; gap: 8px; } .client-home-plan-status { grid-column: 3; grid-row: 1/2; } .client-home-plan-arrow { grid-column: 4; grid-row: 1/2; } }
@media (max-width: 420px) { .client-home-plan { grid-template-columns: 64px minmax(0,1fr) auto; } .client-home-plan-status { grid-column: 2; grid-row: 2; justify-self: start; } .client-home-plan-arrow { grid-column: 3; grid-row: 1/3; } }

/* Compact phone proportions for the existing Client Portal homepage only. */
@media (max-width: 480px) {
    .client-content { width: calc(100% - 32px); padding-top: 16px; }
    .client-home { gap: 18px; min-width: 0; }
    .client-home-feature-grid { gap: 18px; min-width: 0; }
    .client-home-hero { min-height: 250px; padding: 22px; border-radius: 24px; }
    .client-home-hero-copy { max-width: 72%; }
    .client-home-hero h1 { margin-bottom: 10px; font-size: clamp(36px, 10vw, 44px); overflow-wrap: anywhere; }
    .client-home-hero-copy p:last-child { font-size: 13px; line-height: 1.45; }
    .client-home-start { min-height: 92px; padding: 16px 18px; gap: 12px; }
    .client-home-start-icon { width: 44px; height: 44px; }
    .client-home-start > span:nth-child(2), .client-home-shortcut > span:nth-child(2) { min-width: 0; }
    .client-home-start strong { font-size: clamp(18px, 5vw, 21px); }
    .client-home-plans { padding: 14px; }
    .client-home-card-heading { margin-bottom: 8px; }
    .client-home-card-heading h2 { font-size: 23px; }
    .client-home-plan-list { gap: 6px; }
    .client-home-plan { grid-template-columns: 58px minmax(0,1fr) minmax(0,auto) 12px; gap: 7px; min-height: 96px; padding: 8px; }
    .client-home-plan-date { width: 58px; height: 70px; min-height: 70px; padding: 5px; }
    .client-home-plan-date strong { font-size: 23px; }
    .client-home-plan-info strong { font-size: 13px; }
    .client-home-plan-info small { font-size: 10px; }
    .client-home-plan-status { grid-column: 3; grid-row: 1; max-width: 70px; padding: 4px 6px; font-size: 9px; }
    .client-home-plan-arrow { grid-column: 4; grid-row: 1; }
    .client-home-plan-arrow .client-svg-icon { width: 12px; height: 12px; }
    .client-home-inspire { min-height: 150px; padding: 18px; }
    .client-home-inspire strong { font-size: 26px; }
    .client-home-inspire small { font-size: 12px; }
    .client-home-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    .client-home-shortcut { min-width: 0; min-height: 128px; padding: 16px; gap: 7px; }
    .client-home-shortcut-icon { width: 38px; height: 38px; }
    .client-home-shortcut strong { font-size: 14px; }
    .client-home-shortcut small { font-size: 10px; }
}
.client-back-bar { display: none; }
.client-back-bar[hidden] { display: none; }
@media (max-width: 820px) { .client-back-bar:not([hidden]) { position: sticky; top: 70px; z-index: 24; display: block; padding: 7px 16px; border-bottom: 1px solid var(--client-line); background: color-mix(in srgb, var(--client-surface) 94%, transparent); backdrop-filter: blur(12px); } .client-back-bar button { min-height: 44px; padding: 6px 12px; border: 0; border-radius: 9px; background: var(--client-accent-soft); color: var(--client-accent-dark); font-weight: 800; } }
@media (max-width: 600px) { .client-back-bar:not([hidden]) { top: 64px; } }

/* Calendar month/list views */
.client-calendar-actions{display:flex;align-items:center;gap:10px}.client-view-switch{display:flex;padding:3px;border:1px solid var(--client-line);border-radius:11px;background:var(--client-surface-soft)}.client-view-switch button{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 11px;border:0;border-radius:8px;background:transparent;color:var(--client-muted);font-weight:700}.client-view-switch button.active{background:var(--client-surface);color:var(--client-accent-dark);box-shadow:0 2px 8px rgba(20,35,20,.08)}.client-view-switch .client-svg-icon{width:16px;height:16px}.client-calendar-card{overflow:hidden}.client-calendar-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-bottom:18px}.client-calendar-toolbar>.client-secondary:last-child{justify-self:end}.client-month-controls{display:flex;align-items:end;gap:7px}.client-month-controls label{display:grid;gap:3px;color:var(--client-muted);font-size:10px;font-weight:750;text-transform:uppercase}.client-month-controls input{min-height:38px;padding:6px 9px;border:1px solid var(--client-line);border-radius:9px;background:var(--client-surface);color:var(--client-text)}.client-month-controls .client-secondary{min-width:38px;padding:7px;font-size:20px}.client-month-title{font-size:17px;text-align:center}.client-calendar-weekdays,.client-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.client-calendar-weekdays{border:1px solid var(--client-line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--client-surface-soft)}.client-calendar-weekdays span{padding:9px 4px;color:var(--client-muted);font-size:11px;font-weight:800;text-align:center}.client-calendar-grid{border-top:1px solid var(--client-line);border-left:1px solid var(--client-line)}.client-calendar-cell{min-width:0;min-height:112px;padding:8px;border-right:1px solid var(--client-line);border-bottom:1px solid var(--client-line);background:var(--client-surface);overflow:hidden}.client-calendar-cell.outside{background:var(--client-surface-soft)}.client-calendar-cell.has-plan{background:color-mix(in srgb,var(--client-accent-soft) 48%,var(--client-surface))}.client-day-number{display:grid;width:25px;height:25px;place-items:center;margin-bottom:5px;border-radius:50%;font-size:12px;font-weight:750}.client-calendar-cell.has-plan .client-day-number{background:var(--client-accent);color:#fff}.client-calendar-plan{display:block;width:100%;margin-top:4px;padding:5px 6px;border:0;border-left:3px solid var(--client-accent);border-radius:5px;background:var(--client-surface);color:var(--client-text);text-align:left;overflow:hidden}.client-calendar-plan:hover{box-shadow:0 3px 9px rgba(20,35,20,.1);transform:translateY(-1px)}.client-calendar-plan strong,.client-calendar-plan small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-calendar-plan strong{font-size:10px}.client-calendar-plan small,.client-more-plans{color:var(--client-muted);font-size:9px}.client-more-plans{display:block;margin-top:4px}.client-calendar-help{margin:13px 0 0;color:var(--client-muted);font-size:11px;text-align:center}
@media(max-width:760px){.client-section-heading{align-items:stretch;flex-direction:column}.client-calendar-actions{justify-content:space-between}.client-calendar-toolbar{grid-template-columns:1fr auto}.client-month-title{grid-column:1/-1;grid-row:1;text-align:left}.client-month-controls{grid-column:1;grid-row:2}.client-calendar-toolbar>.client-secondary:last-child{grid-column:2;grid-row:2}.client-calendar-cell{min-height:78px;padding:5px}.client-calendar-plan{height:8px;padding:0;border:0;border-radius:999px;background:var(--client-accent)}.client-calendar-plan strong,.client-calendar-plan small{display:none}.client-calendar-help{font-size:10px}}
@media(max-width:430px){.client-calendar-card{padding:12px 8px}.client-calendar-actions{align-items:stretch;flex-direction:column}.client-view-switch{width:100%}.client-view-switch button{flex:1;justify-content:center}.client-calendar-toolbar{gap:8px}.client-month-controls input{width:135px}.client-calendar-weekdays span{padding:7px 1px;font-size:9px}.client-calendar-cell{min-height:64px}.client-day-number{width:21px;height:21px;font-size:10px}}
.client-nav-count{margin-left:auto;min-width:1.55em;padding:2px 5px;border-radius:999px;background:#d88d20;color:#fff;text-align:center;font-size:11px;font-weight:800;line-height:1.2}
@media(max-width:900px),(hover:none) and (pointer:coarse){input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea{font-size:17px!important}}

/* Compact Client Portal announcements, using the existing theme tokens. */
.client-home-announcement{display:grid;gap:7px}.client-home-announcement>.client-text-button{justify-self:end}.client-announcement-list{display:grid;gap:12px}.client-announcement-card{display:flex;gap:16px;width:100%;padding:18px;border:1px solid var(--client-line);border-radius:18px;background:var(--client-surface);color:inherit;text-align:left;box-shadow:0 3px 16px rgba(40,30,20,.06);cursor:pointer}.client-announcement-card.priority{border-left:4px solid var(--client-accent)}.client-announcement-card.compact{padding:12px 16px;border-radius:14px}.client-announcement-card:hover{border-color:var(--client-accent)}.client-announcement-text{display:grid;gap:5px;min-width:0;flex:1}.client-announcement-text strong{font-size:17px}.client-announcement-text>span:not(.client-announcement-meta){color:var(--client-muted);overflow-wrap:anywhere}.client-announcement-meta{font-size:11px;font-weight:750;color:var(--client-accent-dark)}.client-announcement-text small{font-weight:800;color:var(--client-accent-dark)}.client-announcement-card img{width:96px;height:76px;object-fit:cover;border-radius:11px}.client-announcement-detail img{display:block;max-width:100%;max-height:320px;object-fit:contain;border-radius:12px;margin:12px 0}.client-announcement-detail>p:last-child{line-height:1.6;overflow-wrap:anywhere}.client-hero-notice{display:grid;gap:3px;max-width:420px;margin-top:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.65);border-radius:10px;background:rgba(22,18,15,.6);color:#fff;text-align:left;cursor:pointer}.client-hero-notice strong,.client-hero-notice span,.client-hero-notice small{color:#fff;font-size:12px}.client-hero-notice small{font-weight:750}@media(max-width:480px){.client-announcement-card{padding:14px}.client-announcement-card img{width:70px;height:70px}.client-hero-notice{max-height:78px;overflow:hidden}}
.client-home-hero-copy>p:nth-of-type(2){max-width:450px;margin:0;color:#50443c;font-size:clamp(15px,1.5vw,18px);line-height:1.55}html[data-client-theme="dark"] .client-home-hero-copy>p:nth-of-type(2){color:#e4d7c9}@media(max-width:600px){.client-home-hero-copy>p:nth-of-type(2){font-size:14px}}@media(max-width:480px){.client-home-hero-copy>p:nth-of-type(2){font-size:13px;line-height:1.45}}

/* Contact details in Client Space. */
.client-contact-card{max-width:780px}

/* Approved Client Space welcome treatment: the photo and dark overlay are identical in every theme. */
.client-home-hero,html[data-client-theme="dark"] .client-home-hero{border-color:#48372b;background:#281c16}
.client-home-hero-photo{inset:0;width:100%;opacity:1;-webkit-mask-image:none;mask-image:none}
.client-home-hero::before{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(19,14,12,.94) 0%,rgba(21,15,12,.83) 43%,rgba(21,15,12,.47) 72%,rgba(21,15,12,.22) 100%);content:""}
.client-home-hero-copy{z-index:2;text-shadow:0 1px 8px #140d0a66}
.client-home-hero-copy p:first-child,html[data-client-theme="dark"] .client-home-hero-copy p:first-child{color:#f2dabc}
.client-home-hero h1,html[data-client-theme="dark"] .client-home-hero h1{color:#fff}
.client-home-hero-copy p:last-child,.client-home-hero-copy>p:nth-of-type(2),.client-home-hero-copy .client-home-hero-secondary,html[data-client-theme="dark"] .client-home-hero-copy p:last-child{color:#fff}
@media(max-width:600px){.client-home-hero-photo{inset:0;width:100%;opacity:1;-webkit-mask-image:none;mask-image:none}}
.client-contact-card h3{margin:0 0 14px}
.client-contact-list{display:grid;gap:9px}
.client-contact-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--client-line);border-radius:12px;background:var(--client-surface-soft);color:var(--client-text);text-decoration:none}
.client-contact-row[href]:hover,.client-contact-row[href]:focus-visible{border-color:var(--client-accent);background:var(--client-accent-soft)}
.client-contact-row span:first-child{display:grid;gap:4px;min-width:0}
.client-contact-row strong{font-size:14px}
.client-contact-row small{color:var(--client-muted);font-size:13px;overflow-wrap:anywhere}
.client-contact-row>span:last-child:not(:first-child){color:var(--client-accent-dark);font-size:21px}

/* Client Mail: compact list; full correspondence stays in the existing modal. */
.client-mail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.client-mail-heading h2{margin:2px 0 0;font-size:clamp(25px,3vw,32px)}.client-mail-heading .client-eyebrow{margin:0}.client-mail-card{padding:0;overflow:hidden}.client-mail-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--client-line)}.client-mail-tabs button{display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 15px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--client-muted);font-weight:750;cursor:pointer}.client-mail-tabs button.active{border-bottom-color:var(--client-accent);color:var(--client-accent-dark)}.client-mail-tabs button span{min-width:22px;padding:2px 6px;border-radius:999px;background:var(--client-surface-soft);font-size:11px;text-align:center}.client-mail-list{display:grid}.client-mail-list>.client-empty{padding:35px 18px}.client-mail-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto 12px;align-items:center;gap:13px;width:100%;min-height:78px;padding:13px 18px;border:0;border-bottom:1px solid var(--client-line);background:var(--client-surface);color:var(--client-text);text-align:left;cursor:pointer}.client-mail-row:last-child{border-bottom:0}.client-mail-row:hover,.client-mail-row:focus-visible{background:var(--client-surface-soft)}.client-mail-row-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--client-accent-soft);color:var(--client-accent-dark)}.client-mail-row-icon .client-svg-icon{width:20px;height:20px}.client-mail-row-copy{display:grid;gap:4px;min-width:0}.client-mail-row-copy strong,.client-mail-row-copy>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.client-mail-row-copy strong{font-size:14px}.client-mail-row-copy>span,.client-mail-row-date,.client-mail-row-arrow{color:var(--client-muted);font-size:12px}.client-mail-row-arrow{font-size:22px}.client-mail-detail{display:grid;gap:18px}.client-mail-detail-meta{display:flex;justify-content:space-between;gap:12px;color:var(--client-muted);font-size:13px}.client-mail-detail-meta span{font-weight:750;color:var(--client-text)}.client-mail-detail-body{padding:17px 0;border-top:1px solid var(--client-line);border-bottom:1px solid var(--client-line);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.client-mail-detail-actions{display:flex;justify-content:flex-end}
@media(max-width:480px){.client-mail-heading{align-items:center}.client-mail-heading .client-primary{min-height:40px;padding:8px 11px;font-size:12px}.client-mail-row{grid-template-columns:36px minmax(0,1fr) 10px;gap:10px;min-height:72px;padding:11px 13px}.client-mail-row-icon{width:36px;height:36px}.client-mail-row-date{grid-column:2;grid-row:2;margin-top:-8px;font-size:11px}.client-mail-row-arrow{grid-column:3;grid-row:1/3}.client-mail-detail-meta{flex-direction:column;gap:3px}}

/* A verified account can explore the Client Space while staff review continues. */
.client-review-banner{padding:17px 20px;border:1px solid var(--client-line);border-left:4px solid var(--client-accent);border-radius:16px;background:var(--client-surface-soft);color:var(--client-text)}

/* First sign-in uses the existing per-user appearance tokens, not a second theme. */
html.client-onboarding-active .client-shell{display:block}
html.client-onboarding-active .client-sidebar,html.client-onboarding-active .client-sidebar-backdrop,html.client-onboarding-active #clientMenuButton,html.client-onboarding-active #clientAccountButton{display:none!important}
html.client-onboarding-active .client-main{min-height:100vh}
html.client-onboarding-active .client-content{width:min(720px,calc(100% - 32px));margin-inline:auto;padding:24px 0 48px}
.client-onboarding{min-width:0;display:grid;gap:16px}
.client-setup-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.client-setup-progress span,.client-setup-progress button{min-width:0;padding:9px 6px;border:0;border-radius:10px;background:var(--client-surface-soft);color:var(--client-muted);font:inherit;font-size:12px;font-weight:750;text-align:center}
.client-setup-progress button{cursor:pointer}
.client-setup-progress button:focus-visible{outline:2px solid var(--client-accent);outline-offset:2px}
.client-setup-progress span.active,.client-setup-progress button.active{background:var(--client-accent-soft);color:var(--client-accent-dark)}
.client-setup-card{display:grid;gap:17px;padding:clamp(20px,4vw,34px)}
.client-setup-card h1,.client-setup-card h2,.client-setup-card p{margin:0}
.client-setup-card h1{font-family:Georgia,serif;font-size:clamp(29px,5vw,40px);line-height:1.12}
.client-setup-card h2{font-size:17px}
.client-setup-card>p:not(.client-eyebrow),.client-setup-tour-item p{color:var(--client-muted);line-height:1.55}
.client-setup-options{display:flex;flex-wrap:wrap;gap:9px}
.client-setup-option{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 13px;border:1px solid var(--client-line);border-radius:12px;background:var(--client-surface);color:var(--client-text);font:inherit;font-weight:650;cursor:pointer}
.client-setup-option.is-selected{border:2px solid var(--client-accent-dark);background:var(--client-accent-soft);color:var(--client-accent-dark)}
.client-setup-option:focus-visible,.client-setup-tour-actions button:focus-visible{outline:3px solid var(--client-accent-dark);outline-offset:2px}
.client-setup-swatch{width:20px;height:20px;flex:none;border:1px solid rgba(0,0,0,.12);border-radius:50%}
.client-setup-swatch-culinary{background:#9c6828}.client-setup-swatch-amber{background:#ad6243}.client-setup-swatch-sage{background:#607b61}.client-setup-swatch-ocean{background:#28789c}.client-setup-swatch-berry{background:#815b96}
.client-setup-preview,.client-setup-tour-item{display:grid;gap:7px;padding:18px;border:1px solid var(--client-line);border-radius:16px;background:var(--client-surface-soft)}
.client-setup-preview strong{font-size:17px}.client-setup-preview p{color:var(--client-muted)}
.client-setup-preview .client-primary{justify-self:start;pointer-events:none}
.client-setup-next{justify-self:start;min-height:48px}
.client-setup-tour-item{min-height:135px;align-content:center;background:color-mix(in srgb,var(--client-accent-soft) 35%,var(--client-surface))}
.client-setup-tour-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.client-setup-tour-actions button{min-height:44px}
@media(max-width:480px){.client-setup-card{gap:15px}.client-setup-option{flex:1 1 calc(50% - 9px)}.client-setup-next{width:100%}.client-setup-tour-actions{justify-content:space-between}.client-setup-progress span,.client-setup-progress button{font-size:11px}}
.client-review-banner strong{display:block;margin-bottom:5px;font-size:16px}.client-review-banner p{margin:0;color:var(--client-muted);line-height:1.5}
.client-limited-page>.client-card{max-width:680px;padding:24px}.client-limited-page h1{margin:15px 0 10px}.client-limited-page p{max-width:52ch;line-height:1.55}.client-limited-page .client-actions{margin-top:20px}
@media(max-width:480px){.client-review-banner{padding:15px 16px}.client-limited-page>.client-card{padding:20px}.client-limited-page .client-actions{display:grid}.client-limited-page .client-actions>*{justify-content:center}}