/* =====================================================================
   YEKFI v8.4.0 — APPROVED BRAND IDENTITY APPLICATION
   Actual runtime application layer — not a concept board.
   Source of truth: approved YEKFI Master Symbol + Light App Design System.
   Core planning / price / nutrition / basket logic is intentionally untouched.
   ===================================================================== */

:root{
  --yi-deep:#2E4D2B;
  --yi-olive:#516B3A;
  --yi-olive-light:#8CA373;
  --yi-gold:#D4AF37;
  --yi-gold-deep:#A87B20;
  --yi-gold-soft:#F1DE9B;
  --yi-cream:#F9F6ED;
  --yi-paper:#FFFEFB;
  --yi-paper-2:#F6F1E6;
  --yi-ink:#1D2B20;
  --yi-muted:#6A7269;
  --yi-line:#E6DFD1;
  --yi-line-green:rgba(46,77,43,.15);
  --yi-shadow:0 12px 30px rgba(34,48,34,.08),0 2px 7px rgba(34,48,34,.04);
  --yi-shadow-strong:0 20px 48px rgba(25,43,29,.15),0 4px 12px rgba(25,43,29,.07);
}

html{background:var(--yi-cream)!important}
body.yekfi-signature{
  background:var(--yi-cream)!important;
  color:var(--yi-ink)!important;
  isolation:isolate;
}
body.yekfi-signature::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:url("./assets/identity/background-light.webp") center top/cover fixed no-repeat;
  opacity:.16;
}
body.yekfi-signature::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(249,246,237,.78),rgba(249,246,237,.95) 26%,rgba(249,246,237,.97));
}
body.yekfi-signature .app-shell{max-width:760px;position:relative}
@media(min-width:900px){
  body.yekfi-signature .app-shell::before,
  body.yekfi-signature .app-shell::after{
    content:"";position:fixed;width:220px;height:460px;pointer-events:none;z-index:-1;
    background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;opacity:.11;
  }
  body.yekfi-signature .app-shell::before{left:max(6px,calc(50% - 620px));top:150px;transform:rotate(180deg)}
  body.yekfi-signature .app-shell::after{right:max(6px,calc(50% - 620px));bottom:80px}
}

/* ---- Persistent header matching approved light system ---- */
body.yekfi-signature .topbar{
  min-height:76px!important;padding:max(8px,env(safe-area-inset-top)) 12px 9px!important;
  background:rgba(255,254,251,.94)!important;
  border-bottom:1px solid var(--yi-line)!important;
  box-shadow:0 6px 22px rgba(40,55,41,.055)!important;
}
body.yekfi-signature .topbar::before{
  content:"";position:absolute;left:-20px;top:-35px;width:150px;height:125px;
  background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;opacity:.055;pointer-events:none;
}
body.yekfi-signature .topbar::after{
  height:1px!important;opacity:.68!important;
  background:linear-gradient(90deg,transparent 4%,rgba(212,175,55,.1),var(--yi-gold) 48%,rgba(212,175,55,.12),transparent 96%)!important;
}
body.yekfi-signature .brand{gap:8px!important;align-items:center!important}
body.yekfi-signature .brand-icon{
  width:43px!important;height:43px!important;object-fit:contain!important;
  filter:drop-shadow(0 5px 9px rgba(37,51,36,.14))!important;
}
body.yekfi-signature .brand-copy{gap:0!important;direction:rtl!important;text-align:right!important}
body.yekfi-signature .brand-copy strong{
  color:var(--yi-deep)!important;font-size:18px!important;font-weight:950!important;line-height:1.06!important;
}
body.yekfi-signature .brand-copy strong i{
  color:var(--yi-gold-deep)!important;font-size:9px!important;font-style:normal!important;letter-spacing:1.2px!important;margin-right:4px!important;
}
body.yekfi-signature .brand-copy small{
  color:#5F6A5E!important;font-size:9.1px!important;font-weight:700!important;line-height:1.2!important;
}
body.yekfi-signature .budget-pill{
  min-width:116px!important;max-width:138px!important;border-radius:15px!important;
  border:1px solid var(--yi-line)!important;background:#fff!important;
  box-shadow:0 3px 12px rgba(39,53,40,.055)!important;padding:7px 10px!important;
}
body.yekfi-signature .budget-pill small{color:#798078!important}
body.yekfi-signature .budget-pill b{color:var(--yi-deep)!important;font-size:14px!important}
body.yekfi-signature .budget-pill em{color:var(--yi-gold-deep)!important}
body.yekfi-signature .round-icon{
  border:1px solid var(--yi-line)!important;background:#fff!important;color:var(--yi-deep)!important;
  box-shadow:0 3px 10px rgba(39,53,40,.045)!important;
}

/* ---- Main spacing / botanical spirit ---- */
body.yekfi-signature .content{padding:14px 12px calc(100px + env(safe-area-inset-bottom))!important}
body.yekfi-signature .sig-page{gap:24px!important;position:relative}
body.yekfi-signature .sig-page::after{
  content:"";position:absolute;left:-28px;bottom:9%;width:116px;height:116px;z-index:-1;
  background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;opacity:.045;transform:rotate(180deg);pointer-events:none;
}

/* ---- Compact dashboard shortcuts, mapping concept cards to real YEKFI capabilities ---- */
body.yekfi-signature .yi-quick-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:-2px;
}
body.yekfi-signature .yi-quick{
  min-width:0;min-height:78px;border:1px solid var(--yi-line)!important;border-radius:17px!important;
  background:rgba(255,254,251,.96)!important;box-shadow:0 5px 15px rgba(40,54,41,.045)!important;
  padding:9px 5px!important;display:grid!important;place-items:center!important;align-content:center!important;gap:5px!important;text-align:center!important;
}
body.yekfi-signature .yi-quick i{
  width:31px;height:31px;border-radius:11px;background:#F4E7BD;color:var(--yi-deep);display:grid;place-items:center;font-style:normal;
}
body.yekfi-signature .yi-quick .ui-svg{width:17px;height:17px}
body.yekfi-signature .yi-quick b{font-size:10.7px;color:var(--yi-deep);line-height:1.15}
body.yekfi-signature .yi-quick small{font-size:8px;color:var(--yi-muted);line-height:1.1}
@media(max-width:380px){
  body.yekfi-signature .yi-quick-grid{gap:5px}
  body.yekfi-signature .yi-quick{min-height:72px;padding-inline:3px!important}
  body.yekfi-signature .yi-quick b{font-size:9.6px}
}

/* ---- Section typography ---- */
body.yekfi-signature .sig-section{gap:10px!important}
body.yekfi-signature .sig-section-head{padding-inline:3px!important}
body.yekfi-signature .sig-section-head::before{width:34px!important;height:2px!important;background:var(--yi-gold)!important}
body.yekfi-signature .sig-section-head h2{font-size:19px!important;color:var(--yi-deep)!important}
body.yekfi-signature .sig-section-head small{color:var(--yi-muted)!important;font-size:10.4px!important}
body.yekfi-signature .sig-link{color:var(--yi-gold-deep)!important}

/* ---- Clean cream/white card system from approved application board ---- */
body.yekfi-signature .sig-panel,
body.yekfi-signature .sig-summary,
body.yekfi-signature .sig-shop-category,
body.yekfi-signature .sig-member-list{
  background:rgba(255,254,251,.97)!important;border:1px solid var(--yi-line)!important;
  box-shadow:var(--yi-shadow)!important;border-radius:20px!important;
}
body.yekfi-signature .sig-panel::after{box-shadow:0 1px 0 rgba(255,255,255,.95) inset!important}
body.yekfi-signature .sig-meal-row+ .sig-meal-row,
body.yekfi-signature .sig-shop-item+ .sig-shop-item,
body.yekfi-signature .sig-member-row+ .sig-member-row{border-color:#EFE9DE!important}
body.yekfi-signature .sig-meal-thumb{border-radius:14px!important;border-color:#E7E1D6!important}
body.yekfi-signature .sig-meal-main small{color:var(--yi-gold-deep)!important}
body.yekfi-signature .sig-meal-main b{color:var(--yi-ink)!important}
body.yekfi-signature .sig-meal-main em{color:var(--yi-muted)!important}
body.yekfi-signature .sig-meal-status{background:#fff!important;border-color:var(--yi-line)!important;color:var(--yi-deep)!important}

/* ---- App hero: same premium olive / food contrast as reference ---- */
body.yekfi-signature .sig-hero{
  border-radius:22px!important;border:1px solid rgba(212,175,55,.4)!important;
  box-shadow:var(--yi-shadow-strong)!important;background:var(--yi-deep)!important;min-height:280px!important;
}
body.yekfi-signature .sig-next-hero::after,
body.yekfi-signature .sig-week-hero::after,
body.yekfi-signature .sig-shopping-hero::after,
body.yekfi-signature .sig-family-hero::after{
  content:"";position:absolute;left:-26px;top:-20px;width:160px;height:160px;z-index:1;
  background:url("./assets/identity/brand-corner.webp") center/contain no-repeat;opacity:.10;transform:rotate(180deg);pointer-events:none;
}
body.yekfi-signature .sig-hero-shade{
  background:linear-gradient(90deg,rgba(18,34,22,.05),rgba(18,34,22,.20) 38%,rgba(19,42,26,.80) 68%,rgba(22,51,31,.94) 100%)!important;
}
body.yekfi-signature .sig-hero-copy{min-height:280px!important;padding:20px!important}
body.yekfi-signature .sig-hero-title{font-size:26px!important}
body.yekfi-signature .sig-hero-overline{color:#F4DF9D!important}
body.yekfi-signature .sig-hero-copy p{color:rgba(255,255,255,.82)!important}
body.yekfi-signature .sig-hero-meta span{background:rgba(255,255,255,.12)!important}
body.yekfi-signature .sig-btn-primary{
  background:linear-gradient(180deg,#FCF7E8,#F0E2AF)!important;color:var(--yi-deep)!important;border-color:#F5E6B6!important;
  box-shadow:0 8px 18px rgba(17,31,19,.15)!important;
}
body.yekfi-signature .sig-btn-ghost{background:rgba(255,255,255,.12)!important}

/* ---- Summary metrics ---- */
body.yekfi-signature .sig-summary{overflow:hidden!important}
body.yekfi-signature .sig-summary-title{border-color:var(--yi-line)!important;background:#FFFDF8!important}
body.yekfi-signature .sig-summary-title b{color:var(--yi-deep)!important}
body.yekfi-signature .sig-summary-score{color:var(--yi-gold-deep)!important}
body.yekfi-signature .sig-metric+ .sig-metric{border-color:var(--yi-line)!important}
body.yekfi-signature .sig-metric strong{color:var(--yi-deep)!important}
body.yekfi-signature .sig-summary-action{
  background:#F8F3E9!important;border-color:var(--yi-line)!important;color:var(--yi-deep)!important;
}

/* ---- Week tabs exactly contained inside viewport ---- */
body.yekfi-signature .sig-day-strip{gap:4px!important}
body.yekfi-signature .sig-day{
  min-height:57px!important;background:#fff!important;border:1px solid var(--yi-line)!important;border-radius:13px!important;
  box-shadow:none!important;color:var(--yi-muted)!important;
}
body.yekfi-signature .sig-day.active{
  background:linear-gradient(180deg,#566C45,#2E4D2B)!important;border-color:#49633E!important;color:white!important;
  box-shadow:0 7px 16px rgba(46,77,43,.16)!important;
}
body.yekfi-signature .sig-day.active small,body.yekfi-signature .sig-day.active b{color:#fff!important}
body.yekfi-signature .sig-week-switch button{background:#fff!important;border-color:var(--yi-line)!important}

/* ---- Shopping ---- */
body.yekfi-signature .shopping-domains button{
  background:#fff!important;border-color:var(--yi-line)!important;box-shadow:0 4px 13px rgba(39,53,40,.045)!important;
}
body.yekfi-signature .shopping-domains button.active{
  border-color:rgba(81,107,58,.32)!important;background:#EEF1E8!important;
}
body.yekfi-signature .sig-shopping-hero::before{
  filter:saturate(1.04) contrast(1.01)!important;
}
body.yekfi-signature .sig-shop-check{background:#fff!important;border-color:var(--yi-line)!important}
body.yekfi-signature .sig-shop-check.checked{background:var(--yi-deep)!important;border-color:var(--yi-deep)!important}
body.yekfi-signature .sig-store-mode-cta{
  background:linear-gradient(145deg,#3F5F3C,#25452E)!important;border-color:#4D684B!important;border-radius:18px!important;
}

/* ---- Family ---- */
body.yekfi-signature .sig-avatar{border-radius:50%!important;border:2px solid #F1E4B7!important;background:#F6F1E6!important}
body.yekfi-signature .sig-row-chevron{background:#fff!important;border-color:var(--yi-line)!important}
body.yekfi-signature .sig-family-actions button{
  background:#fff!important;border-color:var(--yi-line)!important;border-radius:18px!important;box-shadow:var(--yi-shadow)!important;
}

/* ---- Bottom navigation like attached production reference ---- */
body.yekfi-signature .bottom-nav{
  height:68px!important;width:min(700px,calc(100% - 18px))!important;bottom:max(7px,env(safe-area-inset-bottom))!important;
  border-radius:20px!important;border:1px solid var(--yi-line)!important;background:rgba(255,254,251,.97)!important;
  box-shadow:0 14px 36px rgba(33,49,34,.15)!important;padding:5px!important;
}
body.yekfi-signature .nav-btn{min-height:56px!important;border-radius:15px!important;color:#6E776F!important;font-size:9.5px!important}
body.yekfi-signature .nav-btn .ui-svg{width:20px!important;height:20px!important}
body.yekfi-signature .nav-btn.active{
  color:var(--yi-deep)!important;background:#F3EBCF!important;box-shadow:none!important;
}
body.yekfi-signature .nav-btn.active::before{background:var(--yi-gold)!important;width:20px!important;height:2px!important}
body.yekfi-signature .nav-btn.active span{color:var(--yi-deep)!important}

/* ---- Splash / launch: approved master symbol + botanical identity ---- */
body.yekfi-signature .brand-splash{
  background:
    linear-gradient(rgba(18,46,27,.34),rgba(18,46,27,.48)),
    url("./assets/identity/background-dark.webp") center/cover no-repeat!important;
}
body.yekfi-signature .brand-splash::before{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(212,175,55,.14),transparent 16rem);pointer-events:none;
}
body.yekfi-signature .brand-splash-inner{position:relative;z-index:2}
body.yekfi-signature .splash-logo{width:132px!important;height:132px!important}
body.yekfi-signature .splash-brand-name b{font-size:28px!important}
body.yekfi-signature .splash-brand-name span{color:#F2DA91!important}
body.yekfi-signature .splash-tagline{color:#fff!important;font-size:14px!important}
body.yekfi-signature .splash-en{color:rgba(255,255,255,.72)!important}

/* ---- Onboarding: actual attached light application language ---- */
body.yekfi-signature .onboarding{
  background:var(--yi-cream)!important;
}
body.yekfi-signature .onboarding .on-card{
  position:relative;background:rgba(255,254,251,.96)!important;
  background-image:linear-gradient(rgba(255,254,251,.91),rgba(255,254,251,.97)),url("./assets/identity/background-light.webp")!important;
  background-size:cover!important;background-position:center top!important;
}
body.yekfi-signature .on-head{
  border-color:var(--yi-line)!important;background:rgba(255,254,251,.72);backdrop-filter:blur(8px);border-radius:17px;padding:8px 9px 12px!important;
}
body.yekfi-signature .on-head .logo-orb{background:transparent!important;border:0!important;box-shadow:none!important}
body.yekfi-signature .on-head .logo-orb img{width:43px!important;height:43px!important}
body.yekfi-signature .on-step-lead h1{color:var(--yi-deep)!important}
body.yekfi-signature .on-step-lead p{color:var(--yi-muted)!important}
body.yekfi-signature .step-kicker{color:var(--yi-gold-deep)!important}
body.yekfi-signature .stepper.ux-stepper,
body.yekfi-signature .ux-profile-box,
body.yekfi-signature .ux-budget-card,
body.yekfi-signature .budget-policy-card,
body.yekfi-signature .cuisine-card,
body.yekfi-signature .blend-card,
body.yekfi-signature .ux-choice-summary{
  background:rgba(255,254,251,.96)!important;border-color:var(--yi-line)!important;box-shadow:var(--yi-shadow)!important;
}
body.yekfi-signature .onboarding .btn.primary{
  background:linear-gradient(180deg,#45683D,#2E4D2B)!important;color:#fff!important;border-color:#3F5F3A!important;
  box-shadow:0 8px 19px rgba(46,77,43,.17)!important;
}
body.yekfi-signature .onboarding .btn.soft{background:#fff!important;border-color:var(--yi-line)!important}

/* ---- Dialogs ---- */
body.yekfi-signature .sheet{background:rgba(29,45,31,.22)!important}
body.yekfi-signature .sheet-panel{background:var(--yi-paper)!important;border-color:var(--yi-line)!important}
body.yekfi-signature .sheet-head{background:rgba(255,254,251,.97)!important;border-color:var(--yi-line)!important}
body.yekfi-signature .ready-card{background:linear-gradient(180deg,#FFFDF8,#F4EFE4)!important;border:1px solid var(--yi-line)!important}
body.yekfi-signature .loader-card{background:#FFFDF8!important}

/* ---- General buttons/forms ---- */
body.yekfi-signature .btn.primary,
body.yekfi-signature .pill-btn.primary{
  background:linear-gradient(180deg,#45683D,#2E4D2B)!important;color:white!important;border-color:#3D5937!important;
}
body.yekfi-signature .btn.soft,body.yekfi-signature .btn.light{
  background:#fff!important;color:var(--yi-deep)!important;border-color:var(--yi-line)!important;
}
body.yekfi-signature .input{
  background:#fff!important;border-color:var(--yi-line)!important;color:var(--yi-ink)!important;
}
body.yekfi-signature .input:focus{border-color:var(--yi-gold)!important;box-shadow:0 0 0 3px rgba(212,175,55,.13)!important}

/* ---- Responsive precision ---- */
@media(max-width:520px){
  body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) 99px 37px!important;padding-inline:8px!important}
  body.yekfi-signature .brand-icon{width:39px!important;height:39px!important}
  body.yekfi-signature .brand-copy strong{font-size:16px!important}
  body.yekfi-signature .brand-copy small{font-size:8px!important}
  body.yekfi-signature .budget-pill{min-width:99px!important;max-width:99px!important}
  body.yekfi-signature .sig-hero{min-height:245px!important}
  body.yekfi-signature .sig-hero-copy{min-height:245px!important;width:min(78%,430px)!important;padding:17px!important}
  body.yekfi-signature .sig-hero-title{font-size:23px!important}
}
@media(max-width:360px){
  body.yekfi-signature .brand-copy small{display:none!important}
  body.yekfi-signature .topbar{grid-template-columns:minmax(0,1fr) 94px 36px!important}
}

/* ---- Optional system dark mode: deliberately lighter and more separated than prior candidate ---- */
@media(prefers-color-scheme:dark){
  body.yekfi-signature.yi-auto-dark{
    --yi-paper:#162719;--yi-paper-2:#1B3020;--yi-ink:#F8F3E7;--yi-muted:#B9C1B7;--yi-line:rgba(238,226,191,.12);
    background:#132418!important;color:#F8F3E7!important;
  }
}