html, body { margin: 0; padding: 0; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
::-webkit-scrollbar { display: none; }

:root { --safe-top: env(safe-area-inset-top, 0px); }
#app { padding-top: calc(var(--safe-top) + 10px); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  transition: font-variation-settings .25s ease;
}

* { -webkit-tap-highlight-color: transparent; }

/* ---------- nav ---------- */

.nav-btn {
  color: #8c8b90;
  transition: color .25s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.nav-btn.active { color: #ffb59a; }
.nav-btn.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nav-btn:active { transform: scale(0.88); }
.nav-btn span:last-child { transition: transform .2s ease; }
.nav-btn.active span:last-child { transform: translateY(-1px); }

/* ---------- generic tap feedback ---------- */

.device-card, .btn-scale, #openGuideBtn, #stepPrev, #stepNext, #supportBtn, #warrantyCard,
#backBtn, #warrantyBackBtn, .step-jump {
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, opacity .2s ease;
}
.device-card:active, #openGuideBtn:active, #stepPrev:not(:disabled):active, #stepNext:not(:disabled):active,
#supportBtn:active, #warrantyCard:active, #backBtn:active, #warrantyBackBtn:active, .step-jump:active {
  transform: scale(0.96);
}

.chip { transition: background .2s ease, color .2s ease, transform .15s ease; }
.chip:active { transform: scale(0.94); }

.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- entrance animations ---------- */

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .35s cubic-bezier(.2,.8,.2,1) both; }

@keyframes screenIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.screen-anim { animation: screenIn .32s cubic-bezier(.2,.8,.2,1) both; }

@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tab-anim { animation: tabIn .28s cubic-bezier(.2,.8,.2,1) both; }

@keyframes stepInNext { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes stepInPrev { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.step-anim-next { animation: stepInNext .3s cubic-bezier(.2,.8,.2,1) both; }
.step-anim-prev { animation: stepInPrev .3s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- faq accordion (custom, animated) ---------- */

.faq-item { overflow: hidden; }
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner { overflow: hidden; min-height: 0; }
.faq-chevron { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* ---------- buttons press ---------- */

button, a { -webkit-tap-highlight-color: transparent; }