/* ===========================================================
   Profilely AI - Profile Card themes
   =========================================================== */

.profile-card {
  --accent: #6366F1;
  position: relative;
  width: 340px;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', sans-serif;
  isolation: isolate;
  transition: box-shadow 300ms ease, transform 300ms ease;
}

.profile-card.ratio-1-1 { aspect-ratio: 1 / 1; }
.profile-card.ratio-4-5 { aspect-ratio: 4 / 5; }
.profile-card.ratio-9-16 { aspect-ratio: 9 / 16; }
.profile-card.ratio-16-9 { aspect-ratio: 16 / 9; }

.profile-card .card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.profile-card .card-content {
  position: relative;
  z-index: 2;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-card .avatar-wrap {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
}

.profile-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #ffffff33);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.profile-card .badge-tone {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.profile-card .nickname {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.profile-card .job {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  margin: 0;
}

.profile-card .bio {
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
  margin: 2px 0 0;
}

.profile-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.profile-card .tag {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.profile-card .qr-wrap {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.profile-card .qr-wrap img { width: 100%; height: 100%; display: block; }

.profile-card .brand-mark {
  position: absolute;
  bottom: 22px;
  left: 26px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.55;
  letter-spacing: 0.03em;
}

/* -------------------- Theme 1: Apple / White / Shadow -------------------- */
.profile-card.theme-apple {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.04);
}
.profile-card.theme-apple .nickname { color: #0F172A; }
.profile-card.theme-apple .job { color: #475569; }
.profile-card.theme-apple .bio { color: #1E293B; }
.profile-card.theme-apple .badge-tone { background: #F1F5F9; color: #475569; }
.profile-card.theme-apple .tag { background: #F1F5F9; color: #334155; }
.profile-card.theme-apple .brand-mark { color: #0F172A; }

/* -------------------- Theme 2: Glassmorphism -------------------- */
.profile-card.theme-glass {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, #ffffff) 0%, color-mix(in srgb, var(--accent) 20%, #ffffff) 100%);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}
.profile-card.theme-glass .card-content {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.4);
  margin-top: auto;
}
.profile-card.theme-glass .avatar {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.5);
}
.profile-card.theme-glass .nickname,
.profile-card.theme-glass .job,
.profile-card.theme-glass .bio { color: #ffffff; text-shadow: 0 1px 12px rgba(0,0,0,0.08); }
.profile-card.theme-glass .badge-tone { background: rgba(255,255,255,0.3); color: #fff; backdrop-filter: blur(8px); }
.profile-card.theme-glass .tag { background: rgba(255,255,255,0.25); color: #fff; backdrop-filter: blur(6px); }
.profile-card.theme-glass .brand-mark { color: #fff; }

/* -------------------- Theme 3: Dark Minimal -------------------- */
.profile-card.theme-dark {
  background: #0F172A;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
}
.profile-card.theme-dark .nickname { color: #F8FAFC; }
.profile-card.theme-dark .job { color: #94A3B8; }
.profile-card.theme-dark .bio { color: #CBD5E1; }
.profile-card.theme-dark .badge-tone { background: rgba(255,255,255,0.08); color: #E2E8F0; }
.profile-card.theme-dark .tag { background: rgba(255,255,255,0.08); color: #E2E8F0; border: 1px solid rgba(255,255,255,0.08); }
.profile-card.theme-dark .brand-mark { color: #F8FAFC; }
.profile-card.theme-dark .avatar { box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* -------------------- Theme 4: Gradient -------------------- */
.profile-card.theme-gradient {
  background: linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, #06B6D4) 100%);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--accent) 35%, transparent);
}
.profile-card.theme-gradient .nickname,
.profile-card.theme-gradient .job,
.profile-card.theme-gradient .bio { color: #ffffff; }
.profile-card.theme-gradient .job { opacity: 0.85; }
.profile-card.theme-gradient .avatar { background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.4); }
.profile-card.theme-gradient .badge-tone { background: rgba(255,255,255,0.22); color: #fff; }
.profile-card.theme-gradient .tag { background: rgba(255,255,255,0.2); color: #fff; }
.profile-card.theme-gradient .brand-mark { color: #fff; }

/* -------------------- Theme 5: Neon -------------------- */
.profile-card.theme-neon {
  background: #05060A;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 40px color-mix(in srgb, var(--accent) 55%, transparent);
}
.profile-card.theme-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, #06B6D4 40%, transparent), transparent 55%);
  z-index: 0;
}
.profile-card.theme-neon .nickname {
  color: #fff;
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, #fff), 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent);
}
.profile-card.theme-neon .job { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.profile-card.theme-neon .bio { color: #E2E8F0; }
.profile-card.theme-neon .avatar {
  background: #0A0B10;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent);
}
.profile-card.theme-neon .badge-tone { background: color-mix(in srgb, var(--accent) 20%, #05060A); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.profile-card.theme-neon .tag { background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.profile-card.theme-neon .brand-mark { color: var(--accent); }

/* -------------------- Theme 6: Soft Pastel -------------------- */
.profile-card.theme-pastel {
  background: color-mix(in srgb, var(--accent) 14%, #FDF6FF);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, #ffffff);
}
.profile-card.theme-pastel .nickname { color: #4B4358; }
.profile-card.theme-pastel .job { color: color-mix(in srgb, var(--accent) 70%, #4B4358); }
.profile-card.theme-pastel .bio { color: #5B5468; }
.profile-card.theme-pastel .avatar { background: color-mix(in srgb, var(--accent) 55%, #fff); color: #fff; }
.profile-card.theme-pastel .badge-tone { background: #fff; color: color-mix(in srgb, var(--accent) 70%, #4B4358); }
.profile-card.theme-pastel .tag { background: #ffffffaa; color: #4B4358; }
.profile-card.theme-pastel .brand-mark { color: #4B4358; }

/* Preview animation */
.card-fade-in {
  animation: cardFadeIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1024px) {
  .profile-card { width: 300px; }
}