/* ── BSTFN Mobile PWA styles ───────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 3rem 0 2.5rem; border-radius: 0 0 20px 20px; }
  .container-fluid { padding-left: 12px; padding-right: 12px; }
  #builder-wrap { flex-direction: column; height: auto; }
  #left-panel { width: 100%; min-width: unset; border-right: none; border-bottom: 1px solid #eee; max-height: 200px; }
  #right-panel { width: 100%; min-width: unset; border-left: none; border-top: 1px solid #eee; }
  #canvas-wrap { min-height: 400px; }
  .kpi-value { font-size: 1.5rem; }
  .plan-card { margin-bottom: 1rem; }
  #editor-wrap { flex-direction: column; height: auto; }
  #editor-right { width: 100%; border-left: none; border-top: 1px solid #eee; }
  .settings-panel { height: auto; position: static; }
  .navbar-brand { font-size: 1.1rem; }
  .btn-lg { font-size: .95rem; padding: .5rem 1rem; }
  table { font-size: .8rem; }
  .dash-table td, .dash-table th { padding: .35rem .5rem; }
  #comment-sort { font-size: .78rem; }
}

/* PWA standalone mode adjustments */
@media all and (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
  .navbar { padding-top: calc(.5rem + env(safe-area-inset-top)); }
  footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* Touch-friendly interactive elements */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 42px; }
  .form-control, .form-select { min-height: 42px; font-size: 16px; }
  .nav-link { padding: .6rem 1rem; }
  .q-block { min-height: 44px; }
  .canvas-question { padding: 1rem; }
  .choice-btn { min-height: 48px; }
  .list-group-item { min-height: 44px; padding: .75rem 1rem; }
}

/* Smooth scrolling and tap highlight */
* { -webkit-tap-highlight-color: rgba(108,92,231,.15); }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }