:root {
  --sw-bg-a: #fff5f8;
  --sw-bg-b: #ffe4ec;
  --sw-bg-c: #fff0f5;
  --sw-surface: #ffffff;
  --sw-text: #2d2d2d;
  --sw-muted: #666666;
  --sw-accent-1: #ff6b9d;
  --sw-accent-2: #c44569;
  --sw-border: rgba(255, 182, 193, 0.45);
  --sw-shadow: 0 18px 34px rgba(196, 69, 105, 0.18);
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Nunito", "Segoe UI", Tahoma, sans-serif !important;
  color: var(--sw-text) !important;
  background: linear-gradient(135deg, var(--sw-bg-a) 0%, var(--sw-bg-b) 50%, var(--sw-bg-c) 100%) !important;
}

/* Prevent auth header flicker (guest buttons flashing before auth sync). */
body:not(.sw-auth-ready) #loginLink,
body:not(.sw-auth-ready) #registerBtn,
body:not(.sw-auth-ready) #avatarBtn,
body:not(.sw-auth-ready) #signedInBadge,
body:not(.sw-auth-ready) #dashboardNavLink,
body:not(.sw-auth-ready) #userMenu {
  visibility: hidden !important;
  pointer-events: none !important;
}

.bg-grid {
  opacity: 0.08 !important;
}

.glass,
.card,
.media-frame {
  background: var(--sw-surface) !important;
  border: 1px solid var(--sw-border) !important;
  box-shadow: var(--sw-shadow) !important;
  backdrop-filter: blur(8px);
}

.header-blur {
  background: rgba(255, 245, 248, 0.88) !important;
  border-color: var(--sw-border) !important;
  backdrop-filter: blur(8px);
}

.brand-glow,
h1,
h2,
h3 {
  color: var(--sw-text) !important;
  text-shadow: none !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, var(--sw-accent-1), var(--sw-accent-2)) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 24px rgba(196, 69, 105, 0.28) !important;
  border: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(196, 69, 105, 0.32) !important;
}

input,
select,
textarea,
.sheet-input,
.sheet-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
  background: #fffafc !important;
  border: 1px solid var(--sw-border) !important;
  color: var(--sw-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.sheet-input:focus,
.sheet-select:focus {
  outline: none;
  border-color: var(--sw-accent-1) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
  color: #8b6a75 !important;
}

.modal-backdrop,
.drawer-backdrop {
  background: rgba(34, 16, 24, 0.38) !important;
  backdrop-filter: blur(8px);
}

.text-gray-100,
.text-gray-200,
.text-gray-300,
.text-gray-400,
.text-slate-300,
.text-slate-400,
.text-indigo-200 {
  color: var(--sw-muted) !important;
}

.text-white {
  color: #ffffff !important;
}

.card-hover {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-hover:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 40px rgba(255, 182, 193, 0.3) !important;
}

.gradient-text {
  background: linear-gradient(135deg, var(--sw-accent-1), var(--sw-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.zoom-safe-shell {
  min-height: calc(100dvh - 88px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

@media (max-height: 760px) {
  .zoom-safe-shell {
    align-items: flex-start;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .glass,
  .card,
  .media-frame {
    border-radius: 1rem;
  }
}

/* Larger signed-in avatar in header (matches picker scale better). */
#avatarBtn {
  width: 3rem !important;
  height: 3rem !important;
}

#avatarFallback {
  font-size: 1.5rem !important;
  line-height: 1 !important;
}