:root{
  --pwa-shell-bg:rgba(252,249,232,0.94);
  --pwa-shell-fg:#3D4122;
  --pwa-shell-muted:#8A9160;
  --pwa-accent:#8A6A1F;
  --pwa-accent-2:#F4F0DE;
  --pwa-border:#DED9BE;
  --pwa-shadow:0 12px 35px rgba(61,65,34,0.18);
}

html{
  background:#f4f0e8;
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  padding-top:max(env(safe-area-inset-top),0px);
  padding-right:max(env(safe-area-inset-right),0px);
  padding-left:max(env(safe-area-inset-left),0px);
  padding-bottom:max(env(safe-area-inset-bottom),0px);
}

body.pwa-standalone{
  min-height:100dvh;
}

body.pwa-shell-offset{
  padding-bottom:max(calc(env(safe-area-inset-bottom) + 92px),92px);
}

.pwa-shell{
  position:fixed;
  left:14px;
  right:14px;
  bottom:max(calc(env(safe-area-inset-bottom) + 14px),14px);
  z-index:9999;
  display:flex;
  justify-content:center;
  pointer-events:none;
}

.pwa-card{
  width:min(720px,100%);
  pointer-events:auto;
  background:var(--pwa-shell-bg);
  color:var(--pwa-shell-fg);
  border:1px solid var(--pwa-border);
  border-radius:18px;
  box-shadow:var(--pwa-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:14px 16px;
}

.pwa-shell[hidden],
.pwa-card[hidden],
.pwa-status[hidden],
.pwa-toast[hidden]{
  display:none!important;
}

.pwa-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.pwa-copy{
  min-width:0;
}

.pwa-eyebrow{
  display:block;
  margin-bottom:4px;
  font:700 11px/1.2 system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pwa-shell-muted);
}

.pwa-title{
  margin:0;
  font:700 1rem/1.3 system-ui,sans-serif;
}

.pwa-text{
  margin:4px 0 0;
  font:400 .92rem/1.45 system-ui,sans-serif;
  color:var(--pwa-shell-muted);
}

.pwa-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.pwa-btn,
.pwa-link{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:11px 14px;
  font:700 .9rem/1 system-ui,sans-serif;
  cursor:pointer;
  text-decoration:none;
}

.pwa-btn{
  background:var(--pwa-accent);
  color:#fff;
}

.pwa-btn.secondary{
  background:var(--pwa-accent-2);
  color:var(--pwa-shell-fg);
  border:1px solid var(--pwa-border);
}

.pwa-btn.ghost{
  background:transparent;
  color:var(--pwa-shell-fg);
  border:1px solid var(--pwa-border);
}

.pwa-dismiss{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--pwa-border);
  background:transparent;
  color:var(--pwa-shell-muted);
  font:700 1.1rem/1 system-ui,sans-serif;
  cursor:pointer;
}

.pwa-status{
  position:fixed;
  top:max(calc(env(safe-area-inset-top) + 12px),12px);
  right:12px;
  z-index:9998;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:#3D4122;
  color:#FCF9E8;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(61,65,34,0.22);
  font:700 .84rem/1 system-ui,sans-serif;
}

.pwa-status.offline{
  background:#A1442A;
}

.pwa-dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#7FB069;
}

.pwa-status.offline .pwa-dot{
  background:#F0C24B;
}

.pwa-toast{
  position:fixed;
  inset:auto 12px max(calc(env(safe-area-inset-bottom) + 110px),110px) 12px;
  z-index:9998;
  display:flex;
  justify-content:center;
}

.pwa-toast .pwa-card{
  width:min(640px,100%);
}

@supports (-webkit-touch-callout:none){
  input,
  select,
  textarea{
    font-size:16px!important;
  }
}

@media (prefers-color-scheme:dark){
  /* Intentionally pinned to the same light cream/olive/gold values as :root above —
     client requires no black/dark surfaces anywhere, including under OS dark mode. */
  :root{
    --pwa-shell-bg:rgba(252,249,232,0.94);
    --pwa-shell-fg:#3D4122;
    --pwa-shell-muted:#8A9160;
    --pwa-accent-2:#F4F0DE;
    --pwa-border:#DED9BE;
  }

  .pwa-status{
    background:#3D4122;
    color:#FCF9E8;
  }

  .pwa-status.offline{
    background:#A1442A;
    color:#FCF9E8;
  }
}

@media (max-width:640px){
  .pwa-shell{
    left:10px;
    right:10px;
  }

  .pwa-row{
    flex-direction:column;
  }

  .pwa-dismiss{
    align-self:flex-end;
  }

  .pwa-actions{
    width:100%;
  }

  .pwa-btn,
  .pwa-link{
    flex:1 1 160px;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{
    scroll-behavior:auto;
  }

  .pwa-shell *,
  .pwa-status,
  .pwa-toast{
    transition:none!important;
    animation:none!important;
  }
}

@media print{
  .pwa-shell,
  .pwa-status,
  .pwa-toast{
    display:none!important;
  }

  body.pwa-shell-offset{
    padding-bottom:0!important;
  }
}