/* Naomi / DUAL-UX Smart Install V1 */
:root {
  --si-bg: #ffffff;
  --si-text: #161616;
  --si-muted: #676767;
  --si-line: #e9e6e2;
  --si-accent: #171717;
  --si-soft: #f7f4f1;
  --si-success: #176b45;
}

.smart-install-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(5px);
}
.smart-install-backdrop.is-open { display: flex; }
.smart-install-panel {
  position: relative;
  width: min(100%, 440px);
  max-height: min(88dvh, 760px);
  overflow: auto;
  background: var(--si-bg);
  color: var(--si-text);
  border-radius: 26px;
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  padding: 26px 22px 22px;
}
.smart-install-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--si-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.smart-install-apphead { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.smart-install-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
  background: #111;
}
.smart-install-kicker { margin: 0 0 3px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--si-muted); }
.smart-install-title { margin: 0; font-size: 24px; line-height: 1.08; }
.smart-install-lead { margin: 20px 0 12px; font-size: 20px; line-height: 1.25; font-weight: 750; }
.smart-install-copy { margin: 0 0 18px; color: var(--si-muted); line-height: 1.5; }
.smart-install-benefits { display: grid; gap: 10px; margin: 18px 0 22px; }
.smart-install-benefit { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.smart-install-benefit b { display: block; margin-bottom: 1px; }
.smart-install-check { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--si-soft); font-weight: 900; }
.smart-install-primary,
.smart-install-secondary {
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.smart-install-primary { border: 1px solid var(--si-accent); background: var(--si-accent); color: white; }
.smart-install-secondary { border: 0; background: transparent; color: var(--si-muted); margin-top: 6px; }
.smart-install-note { margin: 10px 0 0; text-align: center; color: var(--si-muted); font-size: 12px; }
.smart-install-progress { display: flex; gap: 7px; margin: 18px 0; }
.smart-install-progress span { height: 5px; flex: 1; border-radius: 20px; background: var(--si-line); }
.smart-install-progress span.is-active { background: var(--si-accent); }
.smart-install-step-visual {
  margin: 16px 0 22px;
  padding: 22px;
  border-radius: 22px;
  background: var(--si-soft);
  min-height: 168px;
  display: grid;
  place-items: center;
  text-align: center;
}
.smart-install-phonebar {
  width: 100%;
  background: white;
  border: 1px solid var(--si-line);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.smart-install-share-symbol { font-size: 34px; font-weight: 700; }
.smart-install-menu-row {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: white; border: 2px solid var(--si-accent); font-weight: 750;
}
.smart-install-success { color: var(--si-success); font-size: 54px; line-height: 1; margin-bottom: 10px; }
.smart-install-hidden { display: none !important; }
body.smart-install-lock { overflow: hidden; }

@media (min-width: 700px) {
  .smart-install-backdrop { align-items: center; }
}