/* =========================================================
   NIGHT SHADE V18.3 — PWA RESPONSIVA MOBILE
   ========================================================= */
.ns-pwa-fab,
.ns-pwa-panel,
.ns-pwa-card,
.ns-pwa-card * { box-sizing: border-box; }

body.ns-pwa-open { overflow: hidden !important; overscroll-behavior: none; }

.ns-pwa-fab {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 9000;
  max-width: calc(100vw - 24px);
  min-height: 46px;
  border: 1px solid #a55aff;
  background: linear-gradient(135deg,#8d3cff,#5e16c8);
  box-shadow: 0 14px 40px #4d169b66;
  color: #fff;
  border-radius: 999px;
  padding: 11px 16px;
  font: 800 13px/1 Inter,system-ui,sans-serif;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ns-pwa-fab[hidden] { display: none !important; }
.ns-pwa-fab.is-active { padding: 10px 12px; }
.ns-pwa-fab.is-active #ns-pwa-fab-label { display: none; }

.ns-pwa-panel {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5,4,11,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
}
.ns-pwa-panel[hidden] { display: none !important; }

.ns-pwa-card {
  width: min(520px, calc(100vw - 32px));
  max-width: 100%;
  max-height: min(90dvh, 820px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(155deg,#1b1029,#0b0812);
  border: 1px solid #70419a;
  border-radius: 24px;
  color: #fff;
  box-shadow: 0 30px 90px #000b;
  font-family: Inter,system-ui,sans-serif;
}
.ns-pwa-card > header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
.ns-pwa-card > header > div { min-width: 0; }
.ns-pwa-card h2 {
  margin: 5px 0 7px;
  font: 900 clamp(1.35rem,5vw,1.8rem)/1.05 Montserrat,Inter,system-ui,sans-serif;
  overflow-wrap: anywhere;
}
.ns-pwa-card p,
.ns-pwa-card small { color: #c8bdd2; }
.ns-pwa-card p { margin: 0; line-height: 1.48; font-size: .88rem; }
.ns-pwa-card > header small { display: block; font-size: .62rem; letter-spacing: .15em; font-weight: 900; color: #d8a2ff; }

.ns-pwa-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 50% !important;
  background: #24162f !important;
  color: #fff;
  font-size: 25px;
  line-height: 1;
  padding: 0 !important;
  cursor: pointer;
}

.ns-pwa-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 22px 8px;
}
.ns-pwa-status {
  padding: 11px 12px;
  border: 1px solid rgba(183,123,255,.13);
  border-radius: 12px;
  background: #160e20;
  color: #d8cbe2;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ns-pwa-status.ok { background: #0b291d; border-color: rgba(73,218,145,.25); color: #b8f8d9; }
.ns-pwa-status.error { background: #351016; border-color: rgba(255,106,126,.28); color: #ffc4ca; }
.ns-pwa-status.help { background: #21152d; border-color: rgba(207,142,255,.28); color: #ead6f7; }

.ns-pwa-diagnostics {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 10px 0 14px;
  padding: 10px;
  border: 1px solid rgba(183,123,255,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  color: #d8cbea;
}
.ns-pwa-diagnostics > div { min-width: 0; overflow-wrap: anywhere; }
.ns-pwa-diagnostics b { color: #fff; }

.ns-pwa-preferences {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}
.ns-pwa-preferences[hidden] { display: none !important; }
.ns-pwa-preferences label {
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-template-columns: 24px minmax(0,1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #342640;
  border-radius: 12px;
  background: #100b17;
  color: #f4edf8;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}
.ns-pwa-preferences label span { min-width: 0; overflow-wrap: anywhere; }
.ns-pwa-preferences input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  accent-color: #9145e7;
}

.ns-pwa-actions {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 12px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg,rgba(11,8,18,.92),#0b0812 32%);
}
.ns-pwa-card button,
.ns-pwa-card a.ns-pwa-button {
  min-width: 0;
  min-height: 46px;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 850;
  font-size: .85rem;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  -webkit-tap-highlight-color: transparent;
}
.ns-pwa-card button[hidden],
.ns-pwa-card a[hidden] { display: none !important; }
.ns-pwa-primary {
  border: 0;
  background: linear-gradient(135deg,#a951ff,#6a1edd);
  color: #fff;
  width: 100%;
}
.ns-pwa-secondary {
  border: 1px solid #583d6f !important;
  background: #271a35;
  color: #fff;
  width: 100%;
}
.ns-pwa-link {
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: #c995ff;
  text-decoration: underline;
  padding: 8px !important;
  font-weight: 750 !important;
}
.ns-pwa-link:hover { color: #fff; }

@media (max-width: 600px) {
  .ns-pwa-fab {
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(76px + env(safe-area-inset-bottom));
    min-width: 48px;
    min-height: 48px;
    padding: 10px 13px;
  }
  .ns-pwa-panel {
    place-items: end center;
    padding: max(8px, env(safe-area-inset-top)) 0 0;
  }
  .ns-pwa-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
  }
  .ns-pwa-card > header { padding: 18px 16px 14px; }
  .ns-pwa-content { padding: 14px 16px 8px; }
  .ns-pwa-actions { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
  .ns-pwa-card h2 { font-size: clamp(1.3rem,6vw,1.62rem); }
  .ns-pwa-card p { font-size: .82rem; }
  .ns-pwa-diagnostics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .ns-pwa-diagnostics { grid-template-columns: 1fr; }
  .ns-pwa-preferences label { font-size: .78rem; padding: 10px !important; }
  .ns-pwa-card > header { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ns-pwa-fab, .ns-pwa-panel, .ns-pwa-card { scroll-behavior: auto; transition: none !important; }
}