:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  min-height: 100dvh;
  padding-left: var(--pwa-safe-left);
  padding-right: var(--pwa-safe-right);
  -webkit-tap-highlight-color: transparent;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
.pwa-install-bar {
  position: fixed;
  z-index: 1200;
  left: max(12px, var(--pwa-safe-left));
  right: max(12px, var(--pwa-safe-right));
  bottom: max(12px, var(--pwa-safe-bottom));
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(147, 178, 222, 0.35);
  border-radius: 18px;
  background: rgba(5, 21, 47, 0.96);
  color: #fff;
  box-shadow: 0 22px 65px rgba(3, 16, 38, 0.34);
  backdrop-filter: blur(18px);
}
.pwa-install-bar img {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}
.pwa-install-copy {
  min-width: 0;
}
.pwa-install-copy b,
.pwa-install-copy small {
  display: block;
}
.pwa-install-copy b {
  font-size: 13px;
}
.pwa-install-copy small {
  margin-top: 2px;
  color: #a9bdd9;
  font-size: 10px;
}
.pwa-install-action,
.pwa-install-close {
  border: 0;
  cursor: pointer;
}
.pwa-install-action {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0c65ec, #1295ff);
  color: #fff;
  font-weight: 900;
  font-size: 11px;
}
.pwa-install-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #c9d7e9;
  font-size: 18px;
}
.pwa-install-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: 20px max(20px, var(--pwa-safe-right)) max(20px, var(--pwa-safe-bottom))
    max(20px, var(--pwa-safe-left));
  background: rgba(2, 10, 24, 0.72);
  backdrop-filter: blur(8px);
}
.pwa-install-modal.show {
  display: grid;
}
.pwa-install-card {
  width: min(100%, 420px);
  padding: 23px;
  border-radius: 24px;
  background: #fff;
  color: #0a1c37;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3);
}
.pwa-install-card header {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pwa-install-card header img {
  width: 54px;
  height: 54px;
  border-radius: 15px;
}
.pwa-install-card h3 {
  margin: 0;
  font-size: 20px;
}
.pwa-install-card p {
  margin: 7px 0 0;
  color: #6d7f98;
  font-size: 12px;
  line-height: 1.55;
}
.pwa-install-steps {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.pwa-install-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #dfe7f1;
  border-radius: 13px;
  background: #f8fafc;
}
.pwa-install-step i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #eaf3ff;
  color: #116de8;
  font-style: normal;
  font-weight: 950;
}
.pwa-install-step b,
.pwa-install-step span {
  display: block;
}
.pwa-install-step b {
  font-size: 11px;
}
.pwa-install-step span {
  color: #74869d;
  font-size: 10px;
}
.pwa-install-done {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: #0c6ef2;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.pwa-offline-chip {
  position: fixed;
  z-index: 1250;
  top: max(10px, var(--pwa-safe-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 99px;
  background: #8a4c00;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
@media (display-mode: standalone) {
  body {
    padding-bottom: var(--pwa-safe-bottom);
  }
  .topbar {
    padding-top: var(--pwa-safe-top);
  }
  .tool-workspace {
    padding-bottom: calc(56px + var(--pwa-safe-bottom));
  }
  .tool-mobile-nav {
    scroll-padding-left: 12px;
  }
}
@media (max-width: 650px) {
  .pwa-install-bar {
    grid-template-columns: auto 1fr auto;
    gap: 9px;
  }
  .pwa-install-bar img {
    width: 42px;
    height: 42px;
  }
  .pwa-install-action {
    grid-column: 1/-1;
    width: 100%;
  }
  .pwa-install-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
  .pwa-install-copy {
    padding-right: 26px;
  }
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  button,
  a {
    min-height: 44px;
  }
  .tool-mobile-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    padding-top: calc(6px + var(--pwa-safe-top));
    background: rgba(238, 243, 249, 0.94);
    backdrop-filter: blur(14px);
  }
  .tool-topbar {
    padding-top: var(--pwa-safe-top);
  }
  .phone-actions,
  .phone-controls,
  .phone-incoming {
    gap: 8px;
  }
  .phone-controls button,
  .phone-incoming button {
    min-height: 46px;
    flex: 1;
  }
  .pc-card {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 360px) {
  .pwa-install-bar {
    left: 8px;
    right: 8px;
    bottom: max(8px, var(--pwa-safe-bottom));
    padding: 11px;
  }
  .pwa-install-copy small {
    font-size: 9px;
  }
  .tool-workspace {
    padding-inline: 8px;
  }
  .pc-card {
    padding: 14px;
  }
  .metric-strip {
    grid-template-columns: 1fr;
  }
}