/* ZeroWaste Chef — shared light UI system */

@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;800;900&display=swap");

:root{
  --font-family: Heebo, Arial, sans-serif;

  --color-pink: #E32D91;
  --color-green: #00B050;
  --color-purple: #962499;
  --color-yellow: #FFC000;
  --color-blue: #1A4CC8;
  --color-lime: #92D050;

  --color-black: #000000;
  --color-gray-900: #404040;
  --color-gray-700: #595959;
  --color-gray-500: #7F7F7F;
  --color-gray-300: #D9D9D9;
  --color-white: #FFFFFF;

  --bg-page:
    radial-gradient(1200px 780px at 10% 0%, rgba(146,208,80,0.12), transparent 58%),
    radial-gradient(900px 680px at 100% 12%, rgba(227,45,145,0.08), transparent 45%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 52%, #F5F8FC 100%);
  --bg-soft: rgba(255,255,255,0.72);
  --surface: rgba(255,255,255,0.94);
  --surface-strong: #FFFFFF;
  --surface-muted: #F7F9FC;
  --surface-brand: linear-gradient(180deg, rgba(150,36,153,0.08), rgba(26,76,200,0.02));
  --border: rgba(217,217,217,0.95);
  --border-strong: rgba(89,89,89,0.18);

  --text: #404040;
  --text-strong: #000000;
  --text-muted: #595959;
  --text-soft: #7F7F7F;

  --primary: #00B050;
  --primary-alt: #1A4CC8;
  --success: #00B050;
  --error: #E32D91;
  --warning: #FFC000;
  --info: #962499;

  --shadow-soft: 0 16px 36px rgba(26,76,200,0.08);
  --shadow-card: 0 18px 38px rgba(64,64,64,0.10);
  --shadow-phone: 0 28px 80px rgba(64,64,64,0.14);
  --shadow-focus: 0 0 0 4px rgba(26,76,200,0.12);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  --phone-w: 390px;
  --phone-h: 844px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ min-height:100%; }

html{
  direction: rtl;
  font-family: var(--font-family) !important;
}

body{
  margin:0;
  min-height:100vh;
  font-family: var(--font-family) !important;
  color: var(--text);
  background: var(--bg-page);
  background-attachment: fixed;
}

body *{
  font-family: var(--font-family) !important;
}

body::before,
body::after{
  content: none !important;
  background: none !important;
}

body,
button,
input,
select,
textarea,
label,
.h1,
.sectionTitle,
.sectionSub,
.heroTitle,
.heroSub,
.featureName,
.featureDesc,
.status,
.feedbackBox,
.pill,
.badgePlan,
.kpiLabel,
.kpiValue{
  font-family: var(--font-family);
}

img{ max-width:100%; display:block; }

a{
  color: var(--color-blue);
  text-decoration: none;
}

a:hover{ text-decoration: underline; }

button,
input,
select,
textarea{
  font: inherit;
}

button{
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: var(--shadow-focus);
}

.bgOverlay{
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    radial-gradient(circle at top, rgba(146,208,80,0.12), transparent 36%);
  pointer-events: none;
}

.stage,
.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-6);
}

.wrap{
  position: relative;
  z-index: 1;
}

.panel{
  width: min(980px, 96vw);
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: stretch;
}

.phone{
  width: var(--phone-w);
  height: var(--phone-h);
  border-radius: 40px;
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: var(--shadow-phone);
}

.phone::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.60);
  pointer-events:none;
  z-index: 30;
}

.phone-shell{
  position: relative;
  z-index: 1;
  width: 390px;
  max-width: calc(100vw - 12px);
  min-height: 844px;
  margin: 14px auto 24px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.80);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0.22)),
    var(--surface-muted);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
}

.phone-shell::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.58);
  pointer-events:none;
  z-index: 1;
}

.notch{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:172px;
  height:28px;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(217,217,217,0.95);
  z-index: 40;
  box-shadow: 0 8px 20px rgba(64,64,64,0.08);
}

.bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform: scale(1.03);
  z-index: 0;
  filter: saturate(1.02) brightness(1.06);
}

.phone .bgOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.58)),
    linear-gradient(180deg, rgba(146,208,80,0.08), rgba(26,76,200,0.04));
  z-index: 1;
}

.screen{
  position:relative;
  z-index: 10;
  min-height:100%;
  height:100%;
  padding: 48px 18px 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(127,127,127,0.45) transparent;
}

.screen::-webkit-scrollbar{ width: 8px; }
.screen::-webkit-scrollbar-thumb{
  background: rgba(127,127,127,0.35);
  border-radius: 999px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

.brand img{
  width: 170px;
  height:auto;
  border-radius: 16px;
}

.card,
.heroCard,
.todayCard,
.actionsCard,
.secondaryCard{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 14px;
  color: var(--text);
}

.heroCard,
.hero{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,249,252,0.98)),
    var(--surface-brand);
  text-align:center;
}

.heroLogoWrap{
  display:flex;
  justify-content:center;
  margin-bottom: 8px;
}

.heroLogo{
  width: 132px;
  max-width: 64%;
  margin: 0 auto 10px;
}

.h1,
.heroTitle,
h1{
  margin:0;
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.p,
.subtitle,
.heroSub,
.sectionSub,
.finePrint,
.note,
.featureDesc,
.actionDesc,
.uploadText,
.metaRow,
.status,
.helloLine,
.small{
  color: var(--text-muted);
  line-height: 1.55;
}

.p,
.subtitle,
.heroSub,
.sectionSub{
  margin: 6px 0 0;
  font-size: 14px;
}

.sectionTitle,
.planTitle,
.actionName,
.featureName,
.uploadTitle,
.upgradeTitle,
.title,
.nameLine{
  margin: 0;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.langBar{ display:none; }

.langSelectBlock{
  margin: 8px 0 10px;
  background: rgba(255,255,255,0.84);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
}

.langSelectLabel,
label{
  display:block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.langSelectWrap{
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.langSelect,
select,
input,
.input{
  width:100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-strong);
  color: var(--text-strong);
  outline:none;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

input::placeholder,
select::placeholder,
.input::placeholder{
  color: var(--text-soft);
}

input:focus,
select:focus,
.input:focus{
  border-color: rgba(26,76,200,0.40);
}

.field{ margin: 10px 0; }

.pwdRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.pwdRow input{ flex:1; }

.iconBtn,
.btnSmall,
.btnIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--text) !important;
  cursor:pointer;
  padding: 0 12px;
  box-shadow: var(--shadow-soft) !important;
}

.btn,
.btnFree,
.btnPro,
.upgradeBtn,
.btnSolidGreen,
.actionBtn,
.featureBtn,
.zwcLandingCTA{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 16px;
  border: 1px solid var(--border-strong) !important;
  padding: 13px 14px;
  cursor:pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: var(--shadow-soft) !important;
}

.btn:hover,
.btnFree:hover,
.btnPro:hover,
.upgradeBtn:hover,
.btnSolidGreen:hover,
.actionBtn:hover,
.featureBtn:hover{
  transform: translateY(-1px);
}

.btn{
  width:100%;
  font-size: 15px;
  font-weight: 800;
  background: rgba(255,255,255,0.96) !important;
  color: var(--text-strong) !important;
  box-shadow: var(--shadow-soft) !important;
}

.btnPrimary,
.btnPro,
.btnSolidGreen,
.upgradeBtn{
  background: rgba(255,255,255,0.98) !important;
  color: var(--color-green) !important;
  border-color: rgba(0,176,80,0.40) !important;
  box-shadow: var(--shadow-soft) !important;
}

.btnOutline,
.btnGhost,
.btnFree,
.btnDanger,
.btnSmall,
.btnIcon,
.zwcLandingCTA{
  background: rgba(255,255,255,0.96) !important;
  color: var(--text-strong) !important;
  border-color: var(--border) !important;
}

.btnGhost,
.btnFree{
  box-shadow: var(--shadow-soft) !important;
}

.btnOutline{ border-color: rgba(0,176,80,0.30) !important; }
.btnPro{ border-color: rgba(26,76,200,0.30) !important; color: var(--color-blue) !important; }
.btnPrimary:hover,
.btnPro:hover,
.btnSolidGreen:hover,
.upgradeBtn:hover{
  background: rgba(146,208,80,0.10);
}
.btnBack{ border-color: rgba(26,76,200,0.30) !important; color: var(--color-blue) !important; }
.btnLogout,
.btnDanger{ border-color: rgba(227,45,145,0.30) !important; color: var(--color-pink) !important; }

.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

button[data-icon]::before,
.btn[data-icon]::before,
.btnSmall[data-icon]::before,
.btnGhost[data-icon]::before,
.btnFree[data-icon]::before,
.btnPro[data-icon]::before,
.upgradeBtn[data-icon]::before,
.zwcLandingCTA[data-icon]::before{
  content: "" !important;
}

.btnRow,
.row2,
.topActions{
  display:flex;
  gap:10px;
  align-items:center;
}

.row2 > *{ flex:1; }
.row2{ margin-top: 18px; }

.welcomePlanButtons,
.btnRow{
  flex-wrap: wrap;
}

.planRow,
.actionsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.plan,
.featureBtn,
.actionBtn,
.kpiItem,
.quickTips li,
.stepList li,
.hintList li,
.todayHint,
.uploadBox,
.metaRow,
.fileList li,
.pill,
.badgePlan,
.inlineNotice,
.status,
.feedbackBox,
.mock,
.upgradeBox{
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text);
}

.plan{
  border-radius: 16px;
  padding: 12px;
}

.plan.pro,
.featureBtn:hover,
.actionBtn:hover,
.badgePlan,
.todayHint,
.upgradeBox,
.status.ok,
.feedbackBox.success,
.metaRow.ok{
  border-color: rgba(0,176,80,0.24);
  background: rgba(146,208,80,0.12);
}

.planTitle.pro,
.upgradeTitle{
  color: var(--color-purple);
}

.plan ul,
.bullet,
.quickTips,
.stepList,
.hintList{
  margin:0;
  padding-right: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

.quickTips,
.stepList,
.hintList{
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}

.quickTips li,
.stepList li,
.hintList li,
.fileList li,
.metaRow,
.status{
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.topBar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:8px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  padding: 8px;
  box-shadow: var(--shadow-soft);
}

.logoChip{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding: 5px;
}

.miniUser,
.miniTitle{
  min-width: 0;
  text-align:right;
}

.helloLine,
.miniTitle .sub{
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nameLine,
.miniTitle .title{
  font-size: 14px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pill,
.badgePlan,
.proTag,
.fileIndex{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 28px;
  border-radius: var(--radius-pill);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.badgePlan.free{
  background: rgba(255,255,255,0.96);
  border-color: var(--border);
}

.proTag,
.locked::after{
  border-color: rgba(150,36,153,0.20);
  background: rgba(150,36,153,0.10);
  color: var(--color-purple);
}

.locked{
  position:relative;
  border-style:dashed;
}

.locked::after{
  content:"פרו";
  position:absolute;
  top:8px;
  left:8px;
  height:22px;
  line-height: 20px;
}

.featureBtn,
.actionBtn{
  text-align:right;
  min-height: 86px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  align-items: stretch;
  background: rgba(255,255,255,0.96) !important;
  border-color: var(--border) !important;
  color: var(--text-strong) !important;
  box-shadow: var(--shadow-soft) !important;
}

.featureTop,
.actionTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.featureIcon,
.actionIcon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(26,76,200,0.18) !important;
  background: rgba(26,76,200,0.06) !important;
  color: var(--color-blue) !important;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.featureIcon[data-icon],
.actionIcon[data-icon]{
  color: transparent !important;
}

.featureIcon[data-icon]::before,
.actionIcon[data-icon]::before{
  content: "" !important;
}

.todayHint{
  border-radius: 14px;
  padding: 10px 12px;
}

.kpiRow{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}

.kpiItem{
  border-radius: 14px;
  padding: 10px 6px;
  text-align:center;
  min-height: 66px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

.kpiValue{
  font-size: 16px;
  font-weight: 900;
  color: var(--text-strong);
  line-height:1.1;
}

.kpiLabel{
  font-size: 11px;
  color: var(--text-soft);
  line-height:1.25;
}

.upgradeBox{
  border-radius: 16px;
  padding: 12px;
  margin-top: 10px;
}

.upgradeText{ margin: 4px 0 10px; }

.emptyNote{
  display:none;
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
  text-align:right;
}

.inlineNotice,
.feedbackBox,
.status{
  display:none;
  border-radius: 14px;
  text-align:right;
  direction:rtl;
}

.inlineNotice.warn,
.status.warn,
.feedbackBox.error,
.metaRow.warn{
  border-color: rgba(255,192,0,0.28);
  background: rgba(255,192,0,0.16);
  color: var(--text-strong);
}

.status.err{
  display:block;
  border-color: rgba(227,45,145,0.24);
  background: rgba(227,45,145,0.10);
  color: var(--text-strong);
}

.feedbackBox.error{
  border-color: rgba(227,45,145,0.24);
  background: rgba(227,45,145,0.10);
  color: var(--text-strong);
}

.feedbackBox.success,
.status.ok,
.metaRow.ok{
  color: var(--text-strong);
}

.mock{
  margin-top: 12px;
  border-radius: 16px;
  padding: 10px 12px;
}

.mockTitle{
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.mockCode{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  text-align:center;
  color: var(--text-strong);
}

.footer{
  margin-top:auto;
  text-align:center;
  color: var(--text-soft);
  font-size: 12px;
  padding-bottom: 2px;
}

.small{
  font-size: 12px;
  margin-top: 8px;
}

.fieldHint{
  margin: 8px 0 0;
}

.checkLabel{
  display:flex;
  gap:10px;
  align-items:center;
  margin:0;
}

.checkLabel input{
  width:18px;
  height:18px;
  min-height:18px;
  padding:0;
  flex-shrink:0;
}

.pill{
  background: rgba(255,255,255,0.90);
}

.kv{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 10px;
  margin-top: 8px;
}

.k{
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 700;
}

.v{
  font-size: 14px;
  color: var(--text-strong);
  word-break: break-word;
}

.divider{
  height:1px;
  background: var(--border);
  margin: 10px 0;
}

.uploadBox{
  margin-top: 10px;
  border-style: dashed;
}

.uploadMeta{
  margin-top: 8px;
  display:grid;
  gap:6px;
}

.fileInput{ display:none; }

.fileList{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}

.fileName{
  flex:1;
  min-width:0;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fileSize{
  flex-shrink:0;
  color: var(--text-soft);
  font-size: 11px;
}

.pageStatus{
  display:none;
  margin-top: 10px;
}

.footerSpace{
  height: 2px;
  flex-shrink:0;
}

.camOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(64,64,64,0.28);
  padding: 16px;
  align-items: center;
  justify-content: center;
}

.camPanel{
  width: min(420px, 100%);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.camTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom: 10px;
}

.camTop h3{
  margin:0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-strong);
}

.camClose{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  color: var(--text-strong);
  border-radius: 10px;
  min-height: 34px;
  padding: 0 12px;
  cursor: pointer;
}

.camView{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  background: #F2F6FC;
  border: 1px solid var(--border);
}

.camView video{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
  background: #F2F6FC;
}

.scanFrame{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.scanFrame::before{
  content:"";
  width:78%;
  height:36%;
  border-radius: 14px;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 9999px rgba(255,255,255,0.08) inset;
}

.camHint,
.camStatus{
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

input[type="checkbox"]{
  accent-color: var(--primary);
}

@media (max-width: 860px){
  .panel{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .stage,
  .wrap{ padding: 14px 8px 18px; }

  .phone-shell,
  .phone{
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    border-radius: 28px;
  }

  .screen{
    min-height: 760px;
    padding: 52px 12px 14px;
  }

  .heroTitle,
  .h1,
  h1{ font-size: 22px; }

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

  .planRow,
  .actionsGrid{
    grid-template-columns: 1fr;
  }

  .camView video{ height: 280px; }
  .kv{ grid-template-columns: 92px 1fr; }
}

body .btn,
body .btnPrimary,
body .btnGhost,
body .btnFree,
body .btnPro,
body .btnDanger,
body .btnSmall,
body .btnIcon,
body .iconBtn,
body .upgradeBtn,
body .actionBtn,
body .featureBtn,
body .zwcLandingCTA,
body .camClose{
  font-family: var(--font-family) !important;
  background: rgba(255,255,255,0.96) !important;
  border-width: 1px !important;
  border-style: solid !important;
  box-shadow: var(--shadow-soft) !important;
}

body .btn,
body .btnGhost,
body .btnFree,
body .btnSmall,
body .btnIcon,
body .iconBtn,
body .actionBtn,
body .featureBtn,
body .zwcLandingCTA,
body .camClose{
  color: var(--text-strong) !important;
  border-color: var(--border) !important;
}

body .btnPrimary,
body .upgradeBtn{
  color: var(--color-green) !important;
  border-color: rgba(0,176,80,0.40) !important;
}

body .btnPro,
body .btnBack{
  color: var(--color-blue) !important;
  border-color: rgba(26,76,200,0.32) !important;
}

body .btnDanger,
body .btnLogout{
  color: var(--color-pink) !important;
  border-color: rgba(227,45,145,0.32) !important;
}

body .topBar,
body .heroCard,
body .todayCard,
body .actionsCard,
body .secondaryCard,
body .card,
body .uploadBox,
body .upgradeBox,
body .kpiItem,
body .metaRow,
body .status,
body .feedbackBox,
body .mock{
  background: rgba(255,255,255,0.94) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .heroSub,
body .sectionSub,
body .featureDesc,
body .actionDesc,
body .helloLine,
body .miniTitle .sub,
body .kpiLabel,
body .mockTitle{
  color: var(--text-muted) !important;
  text-shadow: none !important;
}

body .heroTitle,
body .sectionTitle,
body .featureName,
body .actionName,
body .nameLine,
body .kpiValue,
body label,
body .label{
  color: var(--text-strong) !important;
}

body input,
body select,
body textarea{
  background: #FFFFFF !important;
  color: var(--text-strong) !important;
  border-color: var(--border) !important;
}

body input::placeholder,
body textarea::placeholder{
  color: var(--text-soft) !important;
  opacity: 1 !important;
}

/* Refined button and icon system */
body{
  --icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.5 10 8l-5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 3.5 6 8l5 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-create: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.2v9.6M3.2 8h9.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-verify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5 6.6 11.5 12.6 4.8' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.6 5.8A5.3 5.3 0 1 0 13 8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M10.4 3.5h3v3' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.3 9.5 6.5 13.7 8 9.5 9.5 8 13.7 6.5 9.5 2.3 8 6.5 6.5Z' fill='black'/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.8 8s2.3-3.7 6.2-3.7S14.2 8 14.2 8 11.9 11.7 8 11.7 1.8 8 1.8 8Z' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='8' r='1.8' fill='black'/%3E%3C/svg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 2.8H3.8a1 1 0 0 0-1 1v8.4a1 1 0 0 0 1 1h2.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M8 5.2 11 8 8 10.8M10.7 8H4.9' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-scan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 4V2.8h2.2M13 4V2.8h-2.2M3 12v1.2h2.2M13 12v1.2h-2.2' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M5.4 5.6v4.8M7.4 4.9v6.2M9.3 5.6v4.8M11.2 4.9v6.2' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='3.8' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='m10 10 3 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 4 8 8M12 4 4 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.8V4.4M5.2 7.1 8 4.3l2.8 2.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.3 12.5h9.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 12 1.3-3.4 5.4-5.4 2.1 2.1-5.4 5.4Z' fill='none' stroke='black' stroke-width='1.45' stroke-linejoin='round'/%3E%3Cpath d='m9.8 4.1 2.1 2.1' fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-insights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 12.5h9.6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.4 10V8.1M8 10V5.2M11.6 10V6.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-recipes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 5.2h7.6M4.8 7.8h6.4M5.6 10.4h4.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4 3.3h8a1 1 0 0 1 1 1v7.4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4.3a1 1 0 0 1 1-1Z' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
  --icon-inventory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3.3' y='3.1' width='9.4' height='2.1' rx='0.7' fill='black'/%3E%3Crect x='3.3' y='6.9' width='9.4' height='2.1' rx='0.7' fill='black'/%3E%3Crect x='3.3' y='10.7' width='9.4' height='2.1' rx='0.7' fill='black'/%3E%3C/svg%3E");
  --icon-shopping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.1 5.5h5.8l-.7 5H5.8Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M6 5.4a2 2 0 0 1 4 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-alerts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.1a3 3 0 0 1 3 3v1.4c0 .8.3 1.6.8 2.2l.7.8H3.5l.7-.8c.5-.6.8-1.4.8-2.2V6.1a3 3 0 0 1 3-3Z' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='12.3' r='1' fill='black'/%3E%3C/svg%3E");
  --icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 10.5 6.2 7.3 8.6 9.1 12.8 4.9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8 4.9h2v2' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body :is(.btn,.btnFree,.btnPro,.upgradeBtn,.btnSolidGreen,.actionBtn,.featureBtn,.zwcLandingCTA,.btnGhost,.btnSmall,.btnIcon,.iconBtn,.camClose){
  position: relative;
  overflow: hidden;
}

body :is(.btn,.btnFree,.btnPro,.upgradeBtn,.btnSolidGreen,.zwcLandingCTA,.btnGhost,.btnSmall,.btnIcon,.iconBtn,.camClose){
  gap: 10px;
  border-radius: 20px !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,251,255,0.94)) !important;
  box-shadow:
    0 10px 24px rgba(64,64,64,0.08),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body .btn{
  min-height: 54px;
  justify-content: center;
}

body .btnSmall,
body .btnIcon,
body .iconBtn{
  min-height: 46px;
  padding: 11px 16px !important;
}

body .btn::after,
body .btnGhost::after,
body .btnFree::after,
body .btnPro::after,
body .upgradeBtn::after,
body .btnSmall::after,
body .btnIcon::after,
body .iconBtn::after,
body .camClose::after{
  content:"";
  position:absolute;
  inset:auto 16px 0 16px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--btn-accent, rgba(64,64,64,0.18)), transparent);
  opacity: .55;
}

body .btnPrimary{ --btn-accent: rgba(0,176,80,0.9); color: var(--color-green) !important; }
body .btnPro,
body .upgradeBtn{ --btn-accent: rgba(150,36,153,0.9); color: var(--color-purple) !important; border-color: rgba(150,36,153,0.28) !important; }
body .btnBack{ --btn-accent: rgba(26,76,200,0.9); color: var(--color-blue) !important; }
body .btnGhost{ --btn-accent: rgba(255,192,0,0.85); border-color: rgba(217,217,217,0.96) !important; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,250,237,0.96)) !important; }
body .btnFree{ --btn-accent: rgba(26,76,200,0.92); color: var(--color-blue) !important; border-color: rgba(26,76,200,0.22) !important; }
body .btnDanger,
body .btnLogout{ --btn-accent: rgba(227,45,145,0.92); color: var(--color-pink) !important; }
body .iconBtn{ --btn-accent: rgba(255,192,0,0.9); min-width: 62px; }

body .btnPrimary{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(240,251,244,0.96)) !important;
  border-color: rgba(0,176,80,0.30) !important;
}

body .btnBack{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(241,246,255,0.96)) !important;
}

body .btnDanger,
body .btnLogout{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,242,249,0.96)) !important;
}

body .btnPro,
body .upgradeBtn{
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,241,255,0.96)) !important;
}

body :is(.btn,.btnFree,.btnPro,.upgradeBtn,.btnSolidGreen,.zwcLandingCTA,.btnGhost,.btnSmall,.btnIcon,.iconBtn,.camClose):hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(64,64,64,0.10),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

body :is(.btn,.btnFree,.btnPro,.upgradeBtn,.btnSolidGreen,.zwcLandingCTA,.btnGhost,.btnSmall,.btnIcon,.iconBtn,.camClose):active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(64,64,64,0.08),
    inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

body :is(button,[role="button"])[data-icon]::before{
  content:"";
  width: 18px;
  height: 18px;
  display:inline-block;
  flex: 0 0 18px;
  opacity: .96;
  background-image: var(--icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body [data-icon="next"]{ --icon-image: var(--icon-next); }
body [data-icon="back"]{ --icon-image: var(--icon-back); }
body [data-icon="create"]{ --icon-image: var(--icon-create); }
body [data-icon="verify"]{ --icon-image: var(--icon-verify); }
body [data-icon="refresh"]{ --icon-image: var(--icon-refresh); }
body [data-icon="spark"]{ --icon-image: var(--icon-spark); }
body [data-icon="eye"]{ --icon-image: var(--icon-eye); }
body [data-icon="logout"]{ --icon-image: var(--icon-logout); }
body [data-icon="scan"]{ --icon-image: var(--icon-scan); }
body [data-icon="search"]{ --icon-image: var(--icon-search); }
body [data-icon="clear"]{ --icon-image: var(--icon-clear); }
body [data-icon="upload"]{ --icon-image: var(--icon-upload); }
body [data-icon="edit"]{ --icon-image: var(--icon-edit); }
body [data-icon="insights"]{ --icon-image: var(--icon-insights); }
body [data-icon="recipes"]{ --icon-image: var(--icon-recipes); }
body [data-icon="inventory"]{ --icon-image: var(--icon-inventory); }
body [data-icon="shopping"]{ --icon-image: var(--icon-shopping); }
body [data-icon="alerts"]{ --icon-image: var(--icon-alerts); }
body [data-icon="history"]{ --icon-image: var(--icon-history); }

body .featureBtn,
body .actionBtn{
  min-height: 104px;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  border-width: 1px !important;
  box-shadow:
    0 16px 34px rgba(64,64,64,0.08),
    inset 0 1px 0 rgba(255,255,255,0.76) !important;
}

body .featureBtn::before,
body .actionBtn::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card-accent, rgba(26,76,200,0.85)), transparent 88%);
  opacity:.95;
}

body .featureBtn[data-feature="scan"]{ --card-accent: var(--color-green); }
body .featureBtn[data-feature="insights"]{ --card-accent: var(--color-blue); }
body .featureBtn[data-feature="recipes"]{ --card-accent: var(--color-purple); }
body .featureBtn[data-feature="inventory"]{ --card-accent: var(--color-lime); }
body .featureBtn[data-feature="barcode"]{ --card-accent: var(--color-yellow); }
body .featureBtn[data-feature="shopping"]{ --card-accent: var(--color-pink); }
body .featureBtn[data-feature="alerts"]{ --card-accent: var(--color-blue); }
body .featureBtn[data-feature="history"]{ --card-accent: var(--color-green); }
body .featureBtn[data-feature="ai-pro"]{ --card-accent: var(--color-purple); }
body #takePhotoBtn{ --card-accent: var(--color-green); }
body #uploadPhotosBtn{ --card-accent: var(--color-blue); }
body #manualEntryBtn{ --card-accent: var(--color-purple); }

body .featureTop,
body .actionTop{
  align-items:flex-start;
}

body .featureIcon,
body .actionIcon{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--card-accent, var(--color-blue)) !important;
  margin-top: 2px;
}

body .featureIcon[data-icon],
body .actionIcon[data-icon]{
  color: transparent !important;
}

body .featureIcon[data-icon]::before,
body .actionIcon[data-icon]::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-image: var(--icon-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body .featureIcon[data-icon="scan"],
body .actionIcon[data-icon="scan"]{ --icon-image: var(--icon-scan); }
body .featureIcon[data-icon="insights"]{ --icon-image: var(--icon-insights); }
body .featureIcon[data-icon="recipes"]{ --icon-image: var(--icon-recipes); }
body .featureIcon[data-icon="inventory"]{ --icon-image: var(--icon-inventory); }
body .featureIcon[data-icon="search"]{ --icon-image: var(--icon-search); }
body .featureIcon[data-icon="shopping"]{ --icon-image: var(--icon-shopping); }
body .featureIcon[data-icon="alerts"]{ --icon-image: var(--icon-alerts); }
body .featureIcon[data-icon="history"]{ --icon-image: var(--icon-history); }
body .featureIcon[data-icon="spark"]{ --icon-image: var(--icon-spark); }
body .actionIcon[data-icon="upload"]{ --icon-image: var(--icon-upload); }
body .actionIcon[data-icon="edit"]{ --icon-image: var(--icon-edit); }

body .featureName,
body .actionName{
  font-weight: 800 !important;
  letter-spacing: 0;
}

body .featureDesc,
body .actionDesc{
  color: var(--text-muted) !important;
}

body .todayHint{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(146,208,80,0.10)) !important;
  border-color: rgba(146,208,80,0.34) !important;
}

body .upgradeBox{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(150,36,153,0.08)) !important;
  border-color: rgba(150,36,153,0.26) !important;
}

body .inlineNotice.warn,
body .feedbackBox.error{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(227,45,145,0.08)) !important;
  border-color: rgba(227,45,145,0.28) !important;
}

body .inlineNotice,
body .feedbackBox.success,
body .status.ok{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(146,208,80,0.10)) !important;
}