html { scroll-behavior: smooth; }

.login-glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 25px 60px -12px rgba(255, 85, 40, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.nav-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.hero-gradient {
  background: linear-gradient(135deg, #ff5528 0%, #ff7043 40%, #ff8a65 70%, #ffab91 100%);
}

.tab-btn { color: #6b7280; }
.tab-btn.active {
  background: white;
  color: #ff5528;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.folder-btn { color: #6b7280; }
.folder-btn:hover { background: #f9fafb; color: #374151; }
.folder-btn.active { background: #fff7f5; color: #ff5528; }
.folder-btn.active i { color: #ff5528; }

.email-row {
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
  border-bottom: 1px solid #f3f4f6;
}
.email-row:hover { background: #fafafa; }
.email-row.unread { background: #fffbf8; }
.email-row.unread:hover { background: #fff7f2; }
.email-row.selected {
  background: #fff0eb;
  border-left: 3px solid #ff5528;
}

.alias-card {
  border: 1px solid #f1f5f9;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  transition: 0.15s ease;
  cursor: pointer;
}
.alias-card:hover { border-color: #ffd9cc; background: #fffaf8; }
.alias-card.active {
  border-color: #ffb8a3;
  background: #fff0eb;
  box-shadow: inset 0 0 0 1px rgba(255, 85, 40, 0.08);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 600;
}
.status-active { background: #dcfce7; color: #15803d; }
.status-expired { background: #fef3c7; color: #b45309; }
.status-deleted { background: #fee2e2; color: #b91c1c; }

.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 10px;
}
.detail-chip-otp { background: #fff7ed; color: #c2410c; }
.detail-chip-link { background: #eff6ff; color: #1d4ed8; }

.mail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.mail-badge-new {
  background: linear-gradient(135deg, #ff5528 0%, #ff784f 100%);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(255, 85, 40, 0.9);
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #d1d5db; }

.detail-fade-in { animation: detailFadeIn 0.25s ease-out; }
@keyframes detailFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast-show {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
}

.spin { animation: spin 1s linear infinite; }
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1023px) {
  #emailDetail { display: none !important; }
}