:root{
  --sv-pwa-accent:#f40752;
  --sv-pwa-card-bg:rgba(255,255,255,.96);
  --sv-pwa-card-fg:#101828;
  --sv-pwa-card-muted:#667085;
  --sv-pwa-card-border:rgba(15,23,42,.08);
  --sv-pwa-card-shadow:0 24px 80px rgba(2,6,23,.18);
}

.sv-dark{
  --sv-pwa-card-bg:rgba(9,17,34,.96);
  --sv-pwa-card-fg:#f8fafc;
  --sv-pwa-card-muted:#98a2b3;
  --sv-pwa-card-border:rgba(255,255,255,.08);
  --sv-pwa-card-shadow:0 24px 80px rgba(0,0,0,.36);
}

html.sv-pwa-standalone,
html.sv-pwa-standalone body{
  min-height:100%;
  overscroll-behavior-y:contain;
}

html.sv-pwa-standalone body{
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

html.sv-pwa-standalone .sv-top{
  padding-top:calc(env(safe-area-inset-top, 0px) + 4px);
  backdrop-filter:blur(18px);
}

html.sv-pwa-standalone .sv-subTop,
html.sv-pwa-standalone .sv-dTop,
html.sv-pwa-standalone .sv-fab,
html.sv-pwa-standalone .sv-bottomBar,
html.sv-pwa-standalone .sv-bottomNav{
  padding-bottom:max(0px, env(safe-area-inset-bottom, 0px));
}

html.sv-pwa-standalone .sv-top,
html.sv-pwa-standalone .sv-subTop,
html.sv-pwa-standalone .sv-dTop,
html.sv-pwa-standalone .sv-card,
html.sv-pwa-standalone .sv-panel,
html.sv-pwa-standalone .sv-shellCard,
html.sv-pwa-standalone .sv-authCard{
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.sv-pwa-card{
  position:fixed;
  left:max(16px, env(safe-area-inset-left, 0px) + 12px);
  right:max(16px, env(safe-area-inset-right, 0px) + 12px);
  bottom:max(18px, env(safe-area-inset-bottom, 0px) + 14px);
  z-index:99999;
  display:flex;
  justify-content:center;
  pointer-events:none;
  transform:translateY(24px);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}

.sv-pwa-card.is-on{
  opacity:1;
  transform:translateY(0);
}

.sv-pwa-card .sv-pwa-cardInner,
.sv-pwa-card .sv-pwa-cardActions{
  pointer-events:auto;
}

.sv-pwa-card > .sv-pwa-cardInner,
.sv-pwa-card > .sv-pwa-cardActions,
.sv-pwa-card > *{pointer-events:auto}

.sv-pwa-card{
  --sv-pwa-max: min(100%, 480px);
}

.sv-pwa-cardInner{
  width:var(--sv-pwa-max);
  background:var(--sv-pwa-card-bg);
  color:var(--sv-pwa-card-fg);
  border:1px solid var(--sv-pwa-card-border);
  box-shadow:var(--sv-pwa-card-shadow);
  border-radius:28px;
  padding:16px 16px 12px;
  backdrop-filter:blur(18px);
}

.sv-pwa-cardActions{
  width:var(--sv-pwa-max);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:12px;
}

.sv-pwa-cardLogo{
  width:54px;
  height:54px;
  border-radius:16px;
  object-fit:contain;
  background:#fff;
  padding:8px;
  flex:0 0 auto;
  box-shadow:0 10px 28px rgba(15,23,42,.1);
}

.sv-pwa-cardLogo--fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--sv-pwa-accent),#ff7aa7);
  color:#fff;
  font-weight:800;
  font-size:22px;
  line-height:1;
}

.sv-pwa-cardInner{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.sv-pwa-cardText{min-width:0;flex:1 1 auto}
.sv-pwa-cardTitle{font-size:17px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.sv-pwa-cardBody{margin-top:6px;font-size:14px;line-height:1.55;color:var(--sv-pwa-card-muted)}

.sv-pwa-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  min-height:46px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  cursor:pointer;
}

.sv-pwa-btn:hover{transform:translateY(-1px)}
.sv-pwa-btn--primary{background:linear-gradient(135deg,var(--sv-pwa-accent),#ff5e93);color:#fff;box-shadow:0 14px 32px rgba(244,7,82,.24)}
.sv-pwa-btn--ghost{background:rgba(148,163,184,.14);color:var(--sv-pwa-card-fg)}

.sv-pwa-toastHost{
  position:fixed;
  left:50%;
  bottom:max(16px, env(safe-area-inset-bottom, 0px) + 10px);
  z-index:100000;
  transform:translateX(-50%);
  display:grid;
  gap:10px;
  width:min(calc(100vw - 24px), 460px);
  pointer-events:none;
}

.sv-pwa-toast{
  margin:0 auto;
  min-width:min(100%, 260px);
  max-width:100%;
  padding:12px 16px;
  border-radius:999px;
  color:#fff;
  background:rgba(15,23,42,.9);
  box-shadow:0 18px 46px rgba(2,6,23,.26);
  text-align:center;
  font-size:14px;
  font-weight:700;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .22s ease, transform .22s ease;
}

.sv-pwa-toast.is-on{
  opacity:1;
  transform:translateY(0);
}

@media (min-width: 981px){
  .sv-pwa-card{
    left:auto;
    right:max(20px, env(safe-area-inset-right, 0px) + 20px);
    bottom:max(22px, env(safe-area-inset-bottom, 0px) + 18px);
  }
  .sv-pwa-card{
    justify-content:flex-end;
  }
  .sv-pwa-cardInner,
  .sv-pwa-cardActions{
    width:min(420px, calc(100vw - 40px));
  }
}

@media (max-width: 680px){
  .sv-pwa-cardTitle{font-size:16px}
  .sv-pwa-cardBody{font-size:13px}
  .sv-pwa-cardActions{display:grid;grid-template-columns:1fr 1fr}
  .sv-pwa-btn{width:100%}
}


.sv-pwa-card--notif{
  bottom:max(86px, env(safe-area-inset-bottom, 0px) + 82px);
}

.sv-pwa-card--notif .sv-pwa-cardInner{
  width:min(100%, 360px);
  border-radius:24px;
  padding:14px 14px 10px;
}

.sv-pwa-card--notif .sv-pwa-cardLogo{
  width:46px;
  height:46px;
  border-radius:14px;
  padding:7px;
}

.sv-pwa-card--notif .sv-pwa-cardActions{
  width:min(100%, 360px);
  gap:8px;
  padding-top:10px;
}

.sv-pwa-btn--compact{
  min-height:40px;
  padding:10px 14px;
  font-size:13px;
}

.sv-pwa-installFab{
  position:fixed;
  right:max(16px, env(safe-area-inset-right, 0px) + 12px);
  bottom:max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  z-index:100001;
  display:flex;
  align-items:center;
  gap:8px;
}

.sv-pwa-installFab__main,
.sv-pwa-installFab__close{
  appearance:none;
  border:0;
  cursor:pointer;
}

.sv-pwa-installFab__main{
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  background:linear-gradient(135deg,var(--sv-pwa-accent),#ff5e93);
  box-shadow:0 16px 36px rgba(244,7,82,.28);
  font-weight:800;
  letter-spacing:-.01em;
}

.sv-pwa-installFab__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 6px rgba(255,255,255,.16);
  flex:0 0 auto;
}

.sv-pwa-installFab__text{
  white-space:nowrap;
}

.sv-pwa-installFab__close{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--sv-pwa-card-bg);
  color:var(--sv-pwa-card-fg);
  border:1px solid var(--sv-pwa-card-border);
  box-shadow:0 12px 28px rgba(2,6,23,.14);
  font-size:22px;
  line-height:1;
}

@media (min-width:981px){
  .sv-pwa-card--notif{
    right:max(20px, env(safe-area-inset-right, 0px) + 20px);
    bottom:max(90px, env(safe-area-inset-bottom, 0px) + 84px);
  }
  .sv-pwa-installFab{
    right:max(20px, env(safe-area-inset-right, 0px) + 20px);
    bottom:max(22px, env(safe-area-inset-bottom, 0px) + 18px);
  }
}

@media (max-width:680px){
  .sv-pwa-card--notif .sv-pwa-cardActions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .sv-pwa-installFab{
    left:max(12px, env(safe-area-inset-left, 0px) + 10px);
    right:max(12px, env(safe-area-inset-right, 0px) + 10px);
    justify-content:flex-end;
  }
  .sv-pwa-installFab__main{
    max-width:calc(100vw - 84px);
    padding:0 16px;
  }
}


.sv-pwa-card--notif{
  left:auto;
  right:max(14px, env(safe-area-inset-right, 0px) + 12px);
  bottom:max(86px, env(safe-area-inset-bottom, 0px) + 82px);
  width:min(340px, calc(100vw - 24px));
  justify-content:flex-end;
}

.sv-pwa-card--notif .sv-pwa-cardActions,
.sv-pwa-card--notif .sv-pwa-cardInner{display:none}

.sv-pwa-notifDock{
  position:relative;
  width:min(340px, calc(100vw - 24px));
  min-height:92px;
  padding:18px 110px 18px 18px;
  border-radius:26px;
  border:1px solid var(--sv-pwa-card-border);
  background:var(--sv-pwa-card-bg);
  box-shadow:0 18px 44px rgba(2,6,23,.16);
}

.sv-pwa-notifDock__allow{
  position:absolute;
  top:14px;
  right:14px;
  min-width:82px;
  min-height:44px;
  padding:0 16px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,var(--sv-pwa-accent),#ff5e93);
  color:#fff;
  font-weight:900;
  letter-spacing:-.01em;
  box-shadow:0 16px 32px rgba(244,7,82,.22);
}

.sv-pwa-notifDock__title{
  font-size:15px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
}

.sv-pwa-notifDock__body{
  margin-top:8px;
  color:var(--sv-pwa-card-muted);
  font-size:13px;
  line-height:1.55;
}

@media (max-width:680px){
  .sv-pwa-card--notif{
    right:max(10px, env(safe-area-inset-right, 0px) + 8px);
    bottom:max(84px, env(safe-area-inset-bottom, 0px) + 78px);
    width:min(300px, calc(100vw - 16px));
  }
  .sv-pwa-notifDock{
    width:min(300px, calc(100vw - 16px));
    min-height:88px;
    padding:18px 102px 16px 16px;
    border-radius:22px;
  }
  .sv-pwa-notifDock__allow{
    top:10px;
    right:10px;
    min-width:80px;
    min-height:42px;
    border-radius:16px;
  }
}