/* Vayloza visual system — 2026-10-01
   Final presentation layer only. No app behaviour, navigation, scanner,
   auth, pantry, recipe or billing logic is changed here. */

/* ---------- shared brand ---------- */
body[data-homepage="simple-20260930"],
body.mobile-web[data-surface="mobile-web-v2"],
body.native-mobile[data-surface="native-app-v2"],
#app.desktop-workspace{
  --vz-accent:#5f4ad6;
  --vz-accent-2:#8a78f2;
  --vz-coral:#ef7182;
  --vz-ink:#211a2c;
  --vz-muted:#746d79;
  --vz-line:#e5ddd8;
  --vz-cream:#f7f2ec;
  --vz-paper:#fffdf9;
  --vz-dark:#2b223b;
  --vz-green:#2e855d;
}
body.mobile-web[data-surface="mobile-web-v2"],
body.native-mobile[data-surface="native-app-v2"]{
  --plum:var(--vz-accent)!important;
  --violet:var(--vz-accent)!important;
  --coral:var(--vz-coral)!important;
  --ink:var(--vz-ink)!important;
  --muted:var(--vz-muted)!important;
  --line:var(--vz-line)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  color:var(--vz-ink);
}
body.mobile-web[data-surface="mobile-web-v2"] :is(button,input,select,textarea),
body.native-mobile[data-surface="native-app-v2"] :is(button,input,select,textarea){
  font-family:inherit;
}

/* ---------- public website ---------- */
body[data-homepage="simple-20260930"]{
  --cream:#faf7f2;
  --plum:#30253d;
  --violet:var(--vz-accent);
  --muted:#6d6573;
  --line:#e4dce3;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#faf7f2;
}
body[data-homepage="simple-20260930"] .site-header{
  position:sticky;
  top:0;
  z-index:20;
  min-height:80px;
  background:rgba(250,247,242,.96);
  backdrop-filter:blur(14px);
}
body[data-homepage="simple-20260930"] .brand{
  font-weight:900;
  color:var(--vz-ink);
}
body[data-homepage="simple-20260930"] .brand span{
  background:linear-gradient(135deg,var(--vz-accent),var(--vz-accent-2) 65%,var(--vz-coral));
}
body[data-homepage="simple-20260930"] .button{
  background:var(--vz-accent);
  border-radius:12px;
  box-shadow:0 8px 20px rgba(95,74,214,.16);
}
body[data-homepage="simple-20260930"] .button:hover{background:#5140bd}
body[data-homepage="simple-20260930"] h1{
  color:var(--vz-ink);
  letter-spacing:-.045em;
}
body[data-homepage="simple-20260930"] h1 em{color:var(--vz-accent)}
body[data-homepage="simple-20260930"] .hero-photo{
  box-shadow:0 18px 44px rgba(48,37,61,.10);
}
body[data-homepage="simple-20260930"] .plan-preview{
  border-radius:20px;
  box-shadow:0 14px 34px rgba(48,37,61,.07);
}
body[data-homepage="simple-20260930"] .text-link,
body[data-homepage="simple-20260930"] .download{color:var(--vz-accent)}
@media(max-width:600px){
  body[data-homepage="simple-20260930"] .site-header{min-height:66px}
  body[data-homepage="simple-20260930"] .hero{padding-top:26px}
  body[data-homepage="simple-20260930"] h1{font-size:40px;line-height:1.05}
  body[data-homepage="simple-20260930"] .intro{font-size:16px}
  body[data-homepage="simple-20260930"] .hero-photo img{height:220px}
}

/* ---------- desktop member website ---------- */
#app.desktop-workspace{
  --member-plum:var(--vz-accent);
  --member-plum-dark:var(--vz-dark);
  --member-coral:var(--vz-coral);
  --member-green:var(--vz-green);
}
#app.desktop-workspace .member-v4-header{
  background:rgba(43,34,59,.985);
}
#app.desktop-workspace .member-v4-nav .navbtn{
  font-size:14px;
}
#app.desktop-workspace .member-v4-nav .navbtn.active{
  color:var(--vz-dark);
  background:#fffdf9;
}
#app.desktop-workspace .member-v4-main.main{
  width:min(1420px,calc(100% - 64px));
}
#app.desktop-workspace :is(.web-page-title,.today-heading,.pagehead,.screen-heading,.owner-hero) p{
  font-size:15px;
}
#app.desktop-workspace .today-nutrition article,
#app.desktop-workspace .member-v4-next-meal,
#app.desktop-workspace .today-day,
#app.desktop-workspace .today-shortcuts button,
#app.desktop-workspace .member-v4-planbox,
#app.desktop-workspace .member-v4-plan-row{
  border-color:var(--vz-line);
}
#app.desktop-workspace .today-shortcuts button,
#app.desktop-workspace .member-v4-plan-row{
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
#app.desktop-workspace .today-shortcuts button:hover,
#app.desktop-workspace .member-v4-plan-row:hover{
  transform:translateY(-1px);
  border-color:#cfc4de;
  box-shadow:0 10px 28px rgba(48,35,61,.06);
}

/* ---------- phone browser: deliberately a mobile WEBSITE ---------- */
body.mobile-web[data-surface="mobile-web-v2"]{
  background:linear-gradient(180deg,#fbf8f4 0,#f6f0e9 100%)!important;
}
body.mobile-web[data-surface="mobile-web-v2"] #app.mobile-web-app{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-web-header{
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  height:64px!important;
  padding:0 16px!important;
  background:rgba(251,248,244,.98)!important;
  border-bottom:1px solid var(--vz-line)!important;
  backdrop-filter:blur(14px);
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-web-brand{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  color:var(--vz-ink);
  padding:0;
  text-align:left;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-web-logo{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--vz-accent),var(--vz-accent-2) 65%,var(--vz-coral));
  color:#fff;
  font-weight:950;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-web-brand b{
  display:block;
  font-size:17px;
  line-height:1.05;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-web-brand small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--vz-muted);
}
body.mobile-web[data-surface="mobile-web-v2"] .mobile-profile{
  width:40px!important;
  height:40px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar{
  position:sticky!important;
  top:64px!important;
  z-index:60!important;
  display:flex!important;
  gap:6px!important;
  overflow-x:auto!important;
  padding:9px 14px!important;
  background:#f7f2ec!important;
  border-bottom:1px solid var(--vz-line)!important;
  box-shadow:none!important;
  scrollbar-width:none;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar::-webkit-scrollbar{display:none}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar button{
  flex:0 0 auto!important;
  min-height:36px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  padding:0 13px!important;
  background:transparent!important;
  color:#6f6876!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar button svg,
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar button span{display:none!important}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar button b{
  font-size:13px!important;
  font-weight:850!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mobilebar button.active{
  color:var(--vz-accent)!important;
  background:#fff!important;
  border-color:#ded5d1!important;
  box-shadow:0 3px 10px rgba(48,35,61,.04);
}
body.mobile-web[data-surface="mobile-web-v2"] .mobilemain{
  width:100%;
  max-width:760px!important;
  padding:26px 16px 70px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-today-head,
body.mobile-web[data-surface="mobile-web-v2"] .screen-heading{
  margin-bottom:20px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-today-head h1,
body.mobile-web[data-surface="mobile-web-v2"] .screen-heading h1,
body.mobile-web[data-surface="mobile-web-v2"] .zone-screen-heading h1{
  font-size:36px!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-today-head p,
body.mobile-web[data-surface="mobile-web-v2"] .screen-heading p{
  font-size:15px!important;
  line-height:1.5!important;
}
body.mobile-web[data-surface="mobile-web-v2"] :is(.eyebrow,.kicker){
  font-size:11px!important;
  letter-spacing:.1em;
}
body.mobile-web[data-surface="mobile-web-v2"] :is(.small,.tiny,.mealmeta,.mock-metric span,.mock-metric small,.mock-quick small,.mock-health-card p,.mock-health-grid span,.meal-row small,.later-meal small,.retailer small,.settings-list small,.account-card small){
  font-size:13px!important;
  line-height:1.4!important;
}
body.mobile-web[data-surface="mobile-web-v2"] :is(.field label,.consent,.authnote,.authswitch){
  font-size:13px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] :is(input,select,textarea){
  min-height:48px!important;
  font-size:16px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .btn{
  min-height:46px!important;
  border-radius:11px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] :is(.mock-metric,.mock-next-wrap,.mock-later-list,.mealcard,.card,.shop-summary,.progress-card,.settings-form-card,.account-card,.pantry-zone,.log-main-action,.manual-log-drawer,.secondary-drawer,.assistant-drawer,.add-food-drawer){
  border-color:#e2dad5!important;
  background:#fffdf9!important;
  border-radius:16px!important;
  box-shadow:0 6px 20px rgba(48,35,61,.035);
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-metrics{
  gap:10px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-metric{
  padding:14px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-metric b{
  font-size:25px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-health-card{
  margin-top:12px!important;
  border-radius:16px!important;
  background:#edf5ef!important;
  box-shadow:none!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-quick{
  gap:10px!important;
  margin-top:14px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-quick button{
  min-height:82px!important;
  border-radius:15px!important;
  padding:12px!important;
  background:#fff!important;
  border-color:#e2dad5!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-quick b{font-size:14px!important}
body.mobile-web[data-surface="mobile-web-v2"] .mock-section-label,
body.mobile-web[data-surface="mobile-web-v2"] .section-title-row{
  margin:28px 0 11px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .mock-section-label h2,
body.mobile-web[data-surface="mobile-web-v2"] .section-title-row h2{
  font-size:23px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] #pantry .scan-launch{
  border-radius:18px!important;
  background:linear-gradient(145deg,#34283f,#554066)!important;
  box-shadow:0 12px 28px rgba(48,35,61,.12)!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .pantry-status-row>div:last-child{
  font-size:13px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .settings-list{
  overflow:hidden;
  border-radius:16px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .settings-list>button{
  min-height:70px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .auth{
  padding:0!important;
  background:#f7f2ec!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .authshell{
  max-width:620px!important;
  min-height:100dvh!important;
  border:0!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .authpitch{
  padding:34px 24px 27px!important;
  background:var(--vz-dark)!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .authpitch h1{
  font-size:35px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .authlead{
  font-size:15px!important;
}
body.mobile-web[data-surface="mobile-web-v2"] .authform{
  padding:26px 22px 34px!important;
}

/* ---------- APK: real installed-app treatment ---------- */
body.native-mobile[data-surface="native-app-v2"]{
  background:#f6f2ee!important;
}
body.native-mobile[data-surface="native-app-v2"] .native-app-header{
  background:rgba(248,245,242,.985)!important;
  border-bottom:1px solid #e5ddd8!important;
  box-shadow:0 3px 14px rgba(48,35,61,.035)!important;
}
body.native-mobile[data-surface="native-app-v2"] .native-app-mark{
  background:linear-gradient(135deg,var(--vz-accent),var(--vz-accent-2) 65%,var(--vz-coral))!important;
  box-shadow:0 7px 18px rgba(95,74,214,.18)!important;
}
body.native-mobile[data-surface="native-app-v2"] .native-app-title>span:last-child b{
  color:var(--vz-ink)!important;
  font-size:18px!important;
}
body.native-mobile[data-surface="native-app-v2"] .native-app-title>span:last-child small{
  color:var(--vz-muted)!important;
  font-size:12px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mobilemain{
  max-width:620px!important;
  padding-left:15px!important;
  padding-right:15px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-today-head h1,
body.native-mobile[data-surface="native-app-v2"] .screen-heading h1,
body.native-mobile[data-surface="native-app-v2"] .zone-screen-heading h1{
  font-size:34px!important;
  line-height:1.03!important;
  letter-spacing:-.045em!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-today-head p,
body.native-mobile[data-surface="native-app-v2"] .screen-heading p{
  font-size:14px!important;
  line-height:1.5!important;
}
body.native-mobile[data-surface="native-app-v2"] :is(.eyebrow,.kicker){
  font-size:11px!important;
}
body.native-mobile[data-surface="native-app-v2"] :is(.small,.tiny,.mealmeta,.mock-metric span,.mock-metric small,.mock-quick small,.mock-health-card p,.mock-health-grid span,.meal-row small,.later-meal small,.retailer small,.settings-list small,.account-card small,.scan-status){
  font-size:13px!important;
  line-height:1.4!important;
}
body.native-mobile[data-surface="native-app-v2"] :is(input,select,textarea){
  min-height:48px!important;
  font-size:16px!important;
}
body.native-mobile[data-surface="native-app-v2"] .btn{
  min-height:46px!important;
  border-radius:12px!important;
}
body.native-mobile[data-surface="native-app-v2"] :is(.mock-metric,.mock-next-wrap,.mock-later-list,.mealcard,.card,.shop-summary,.progress-card,.settings-form-card,.account-card,.pantry-zone,.log-main-action){
  border:1px solid #e6dfdb!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(48,35,61,.045)!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-metric{
  padding:14px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-metric b{
  font-size:25px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-health-card{
  background:#edf5ef!important;
  border:1px solid #d8e6db!important;
  border-radius:18px!important;
  box-shadow:none!important;
  padding:15px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-quick{
  gap:9px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-quick button{
  min-height:84px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid #e6dfdb!important;
  box-shadow:0 5px 17px rgba(48,35,61,.035)!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-quick b{font-size:14px!important}
body.native-mobile[data-surface="native-app-v2"] .mock-section-label,
body.native-mobile[data-surface="native-app-v2"] .section-title-row{
  margin:26px 0 10px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mock-section-label h2,
body.native-mobile[data-surface="native-app-v2"] .section-title-row h2{
  font-size:23px!important;
}
body.native-mobile[data-surface="native-app-v2"] #pantry .scan-launch{
  border-radius:20px!important;
  background:linear-gradient(145deg,#372842,#594267)!important;
  box-shadow:0 12px 28px rgba(48,35,61,.16)!important;
}
body.native-mobile[data-surface="native-app-v2"] .pantry-zone>summary,
body.native-mobile[data-surface="native-app-v2"] .settings-list>button,
body.native-mobile[data-surface="native-app-v2"] .account-card{
  min-height:72px!important;
}
body.native-mobile[data-surface="native-app-v2"] .settings-list{
  border:0!important;
  border-radius:20px!important;
  box-shadow:0 7px 22px rgba(48,35,61,.045)!important;
  overflow:hidden!important;
}
body.native-mobile[data-surface="native-app-v2"] .settings-list>button{
  background:#fff!important;
}
body.native-mobile[data-surface="native-app-v2"] .secondary-drawer,
body.native-mobile[data-surface="native-app-v2"] .manual-log-drawer,
body.native-mobile[data-surface="native-app-v2"] .assistant-drawer,
body.native-mobile[data-surface="native-app-v2"] .add-food-drawer{
  border:1px solid #e6dfdb!important;
  border-radius:18px!important;
  box-shadow:0 5px 18px rgba(48,35,61,.03)!important;
}
body.native-mobile[data-surface="native-app-v2"] .secondary-drawer>summary,
body.native-mobile[data-surface="native-app-v2"] .manual-log-drawer>summary,
body.native-mobile[data-surface="native-app-v2"] .assistant-drawer>summary,
body.native-mobile[data-surface="native-app-v2"] .add-food-drawer>summary{
  min-height:66px!important;
  font-size:14px!important;
}
body.native-mobile[data-surface="native-app-v2"] .mobilebar{
  background:#fff!important;
  border-top:1px solid #e5ddd8!important;
  box-shadow:0 -7px 24px rgba(48,35,61,.055)!important;
}
body.native-mobile[data-surface="native-app-v2"] .mobilebar button{
  border-radius:14px!important;
  color:#79727e!important;
}
body.native-mobile[data-surface="native-app-v2"] .mobilebar button.active{
  color:var(--vz-accent)!important;
  background:#f0edff!important;
}
body.native-mobile[data-surface="native-app-v2"] .mobilebar button b{
  font-size:11px!important;
  font-weight:850!important;
}
body.native-mobile[data-surface="native-app-v2"] .approved-log-fab.native-scan-fab{
  background:var(--vz-accent)!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(95,74,214,.27)!important;
}
body.native-mobile[data-surface="native-app-v2"] .auth{
  padding:0!important;
  background:#f6f2ee!important;
}
body.native-mobile[data-surface="native-app-v2"] .authshell{
  max-width:620px!important;
  min-height:100dvh!important;
  border:0!important;
}
body.native-mobile[data-surface="native-app-v2"] .authpitch{
  padding:calc(30px + var(--native-inset-top,0px)) 24px 27px!important;
  background:var(--vz-dark)!important;
}
body.native-mobile[data-surface="native-app-v2"] .authpitch h1{
  font-size:35px!important;
}
body.native-mobile[data-surface="native-app-v2"] .authlead{
  font-size:15px!important;
}
body.native-mobile[data-surface="native-app-v2"] .authform{
  padding:26px 22px calc(34px + var(--native-inset-bottom,0px))!important;
}

/* Small phones: preserve usability without squeezing content. */
@media(max-width:380px){
  body.mobile-web[data-surface="mobile-web-v2"] .mobilemain,
  body.native-mobile[data-surface="native-app-v2"] .mobilemain{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.mobile-web[data-surface="mobile-web-v2"] .mock-today-head h1,
  body.mobile-web[data-surface="mobile-web-v2"] .screen-heading h1,
  body.native-mobile[data-surface="native-app-v2"] .mock-today-head h1,
  body.native-mobile[data-surface="native-app-v2"] .screen-heading h1{
    font-size:31px!important;
  }
}