:root {
  --pw-accent: var(--pl-primary, var(--green, #17805a));
  --pw-accent-2: var(--pl-primary-hover, var(--green2, #0f6a49));
  --pw-on-accent: var(--pl-on-primary, #fff);
  --pw-card: var(--surface, #fff);
  --pw-soft: var(--surface2, #f5f6fa);
  --pw-ink: var(--ink, #15181f);
  --pw-muted: var(--muted, #7a8194);
  --pw-line: var(--sf-line, var(--line, #e6e8ef));
  --pw-font: var(--font, Vazirmatn, system-ui, sans-serif);
  --pw-r: var(--sf-r-lg, 26px);
  --pw-r-md: var(--sf-r, 18px);
  --pw-r-sm: var(--sf-r-sm, 12px);
  --pw-shadow: var(--sf-shadow-3, 0 30px 80px -28px rgba(20, 18, 14, .38));
  --pw-shadow-sm: var(--sf-shadow-1, 0 1px 2px rgba(20, 18, 14, .04), 0 8px 24px -12px rgba(20, 18, 14, .1));
  --pw-tint: color-mix(in oklch, var(--pw-accent), transparent 90%);
  --pw-scrim: color-mix(in oklch, var(--ink, #10131a), transparent 50%);
  --pw-ease: var(--ease, cubic-bezier(.16, 1, .3, 1));
}

html.pw-app body { padding-bottom: env(safe-area-inset-bottom); }
html.pw-app .sf-util,
html.pw-app .topline { display: none; }

.pw-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  font-family: var(--pw-font);
  background: transparent;
  transition: background .3s var(--pw-ease);
}

.pw-sheet.on { background: var(--pw-scrim); backdrop-filter: blur(3px); }

.pw-sheet-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--pw-card);
  color: var(--pw-ink);
  border: 1px solid var(--pw-line);
  border-bottom: 0;
  border-radius: var(--pw-r) var(--pw-r) 0 0;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--pw-shadow);
  transform: translateY(102%);
  transition: transform .34s var(--pw-ease);
  display: grid;
  gap: 14px;
}

.pw-sheet.on .pw-sheet-card { transform: translateY(0); }

.pw-grab {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  margin: 0 auto 2px;
  background: var(--pw-line);
}

.pw-sheet-body {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
}

.pw-sheet-ico {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: var(--pw-r-md);
  object-fit: contain;
  background: var(--pw-soft);
  padding: 6px;
  box-shadow: var(--pw-shadow-sm);
}

.pw-sheet-txt { min-width: 0; }

.pw-sheet-txt b {
  display: block;
  margin-bottom: 5px;
  font: 800 15px var(--pw-font);
  letter-spacing: -.02em;
  font-size: calc(15px * var(--fz-base, 1));
}

.pw-sheet-txt span {
  display: block;
  color: var(--pw-muted);
  font: 500 13px/1.9 var(--pw-font);
  font-size: calc(13px * var(--fz-small, 1));
}

.pw-sheet-row { display: flex; gap: 10px; }

.pw-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  background: var(--pw-accent);
  color: var(--pw-on-accent);
  border-radius: 14px;
  padding: 13px 20px;
  font: 800 13px var(--pw-font);
  font-size: calc(13px * var(--fz-btn, 1));
  transition: background .18s, transform .18s var(--pw-ease), box-shadow .18s;
  box-shadow: 0 10px 24px -14px color-mix(in oklch, var(--pw-accent), transparent 20%);
}

.pw-btn:hover { background: var(--pw-accent-2); transform: translateY(-1px); }
.pw-btn:active { transform: translateY(0); }

.pw-btn.ghost {
  flex: 0 0 auto;
  background: transparent;
  color: var(--pw-muted);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--pw-line);
}

.pw-btn.ghost:hover {
  background: var(--pw-soft);
  color: var(--pw-ink);
  box-shadow: inset 0 0 0 1px var(--pw-line);
}

.pw-x {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--pw-soft);
  color: var(--pw-muted);
  font: 700 16px/1 var(--pw-font);
  transition: .16s;
}

.pw-x:hover { color: var(--pw-ink); }

.pw-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--pw-card);
  border-top: 1px solid var(--pw-line);
  box-shadow: 0 -6px 24px -14px color-mix(in oklch, var(--ink, #000), transparent 65%);
  font-family: var(--pw-font);
}

html.pw-app .pw-nav { display: grid; }
html.pw-app body.pw-has-nav { padding-bottom: 78px; }

.pw-nav-i {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--pw-muted);
  border-radius: var(--pw-r-sm);
  font: 700 11px var(--pw-font);
  font-size: calc(11px * var(--fz-nav, 1));
  transition: color .15s, background .15s;
}

.pw-nav-i i,
.pw-nav-i svg { width: 21px; height: 21px; }
.pw-nav-i.on { color: var(--pw-accent); background: var(--pw-tint); }

.pw-nav-i em {
  position: absolute;
  top: 2px;
  inset-inline-end: 12px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--red, #e5484d);
  color: #fff;
  font: 700 10px/1 var(--pw-font);
  font-style: normal;
  display: grid;
  place-items: center;
}

.pw-toast {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 9998;
  margin-inline: auto;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  background: var(--pw-ink);
  color: var(--bg, #fff);
  border-radius: var(--pw-r-md);
  padding: 12px 16px;
  font: 600 13px var(--pw-font);
  font-size: calc(13px * var(--fz-small, 1));
  box-shadow: var(--pw-shadow);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--pw-ease), transform .3s var(--pw-ease);
}

html.pw-app body.pw-has-nav .pw-toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
.pw-toast.on { opacity: 1; transform: translateY(0); }

.pw-toast button {
  flex: none;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklch, var(--bg, #fff), transparent 82%);
  color: inherit;
  padding: 7px 13px;
  border-radius: var(--pw-r-sm);
  font: 800 12px var(--pw-font);
  transition: .16s;
}

.pw-toast button:hover { background: color-mix(in oklch, var(--bg, #fff), transparent 70%); }

html:not(.pw-installable) [data-pw-install] { display: none; }
html.pw-app [data-pw-install] { display: none !important; }

@media (max-width: 420px) {
  .pw-sheet-ico { width: 50px; height: 50px; }
  .pw-sheet-row { flex-wrap: wrap; }
  .pw-btn.ghost { flex: 1; }
}