/* =========================================
   MODAL / OVERLAY
   ========================================= */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 600;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.modal-overlay.show { display: flex; pointer-events: auto; }
.modal-overlay.show .license-sheet,
.modal-overlay.show .modal { pointer-events: auto; }

.modal {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px 16px;
  padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-handle {
  width: 40px; height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto 16px;
}
.modal-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 16px;
  text-align: center;
}

/* ── CONFIRM DIALOG ── */
.confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 610;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  animation: popIn .2s ease;
}
@keyframes popIn {
  from { transform: scale(.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.confirm-box .confirm-icon { font-size: 48px; margin-bottom: 12px; }
.confirm-box .confirm-text { font-size: 16px; font-weight: 600; margin-bottom: 20px; line-height: 1.4; }

/* ── TOAST ── */
.toast {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  z-index: 620;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  max-width: 90%;
  text-align: center;
}
.toast.show { opacity: 1; }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text3); }
.empty-state .empty-icon { font-size: 60px; margin-bottom: 12px; opacity: .5; }
.empty-state .empty-text { font-size: 15px; font-weight: 600; line-height: 1.4; }