/* ===== Postica — Feminine Beauty Theme (20-40s) =====
   Soft pastel pink/lavender/cream — overrides dark inline styles */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

:root {
  --pink-50: #fff5f9;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --lavender-300: #d8b4fe;
  --lavender-400: #c084fc;
  --lavender-500: #a855f7;
  --peach: #fdba74;
  --mint: #5eead4;
  --cream: #fff9f5;
  --plum: #4a1d3f;
}

body {
  background: linear-gradient(135deg, #fff5f9 0%, #fce7f3 50%, #f5f3ff 100%) !important;
  color: var(--plum) !important;
  font-family: 'Pretendard Variable', 'Gowun Dodum', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif !important;
}

/* Override dark hero/sections in index.html */
.hero {
  background: linear-gradient(135deg, #fff5f9 0%, #fce7f3 40%, #f3e8ff 100%) !important;
}
.hero::before {
  background: radial-gradient(circle at 20% 50%, rgba(244,114,182,0.2) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(192,132,252,0.18) 0%, transparent 40%),
              radial-gradient(circle at 60% 80%, rgba(253,186,116,0.15) 0%, transparent 50%) !important;
}
.hero h1 {
  background: linear-gradient(135deg, #db2777 0%, #c026d3 50%, #a855f7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero p { color: var(--plum) !important; opacity: 0.7; }
.hero-badge {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--pink-200) !important;
  color: var(--pink-600) !important;
  backdrop-filter: blur(8px);
}
.hero-badge-dot { background: #ec4899 !important; }

.btn-hero-primary, .nav-cta {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  box-shadow: 0 6px 22px rgba(236,72,153,0.35) !important;
  color: #fff !important;
}
.btn-hero-outline {
  background: rgba(255,255,255,0.7) !important;
  color: var(--plum) !important;
  border: 1px solid var(--pink-200) !important;
}
.btn-hero-outline:hover { background: #fff !important; }

/* Navbar */
.navbar {
  background: rgba(255,255,255,0.75) !important;
  border-bottom: 1px solid var(--pink-100) !important;
  box-shadow: 0 2px 12px rgba(236,72,153,0.06);
}
.nav-logo {
  background: linear-gradient(135deg, #ec4899, #a855f7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.nav-link { color: var(--plum) !important; }
.nav-link:hover { color: var(--pink-600) !important; }

/* Float cards */
.float-card {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--pink-200) !important;
  color: var(--plum) !important;
}
.float-card .fc-num { color: var(--pink-500) !important; }

/* Features / pricing / footer-cta */
.features { background: linear-gradient(180deg, #fff5f9, #fce7f3) !important; }
.features h2, .pricing h2, .footer-cta h2 { color: var(--plum) !important; }
.features > p, .footer-cta p { color: var(--text-secondary) !important; }
.feature-card {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 4px 18px rgba(236,72,153,0.08);
}
.feature-card:hover {
  background: #fff !important;
  border-color: var(--pink-300) !important;
  box-shadow: 0 8px 28px rgba(236,72,153,0.15);
}
.feature-card h3 { color: var(--plum) !important; }
.feature-card p { color: var(--text-secondary) !important; }

.pricing { background: linear-gradient(180deg, #fce7f3, #f5f3ff) !important; }
.price-card {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 4px 18px rgba(236,72,153,0.08);
}
.price-card.featured {
  background: linear-gradient(135deg, #fff, #fef6fa) !important;
  border: 2px solid var(--pink-400) !important;
  box-shadow: 0 8px 32px rgba(236,72,153,0.2) !important;
}
.price-card h3 { color: var(--plum) !important; }
.price-amount { color: var(--pink-600) !important; }
.price-period { color: var(--text-muted) !important; }
.price-features li { color: var(--text-secondary) !important; }
.price-features li::before { background: var(--pink-400) !important; }

.footer-cta { background: linear-gradient(135deg, #fce7f3, #ede9fe) !important; }
.footer { background: #fff5f9 !important; color: var(--text-muted) !important; }

/* ===== app.html overrides ===== */
.mode-tabs {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--pink-200) !important;
  box-shadow: 0 4px 18px rgba(236,72,153,0.1);
}
.mode-tab { color: var(--text-secondary) !important; }
.mode-tab:hover { background: var(--pink-50) !important; color: var(--pink-600) !important; }
.mode-tab.active {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(236,72,153,0.35) !important;
}

.quick-card, .ai-card {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 6px 24px rgba(236,72,153,0.1);
  backdrop-filter: blur(10px);
}
.quick-card h3, .ai-card h4 { color: var(--plum) !important; }
.quick-card p.desc { color: var(--text-secondary) !important; }
.quick-card h3 .badge, .ai-num {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
}

.quick-drop {
  border: 2px dashed var(--pink-300) !important;
  background: var(--pink-50) !important;
}
.quick-drop:hover { border-color: var(--pink-500) !important; background: #fff5f9 !important; }
.quick-drop h4 { color: var(--plum) !important; }
.quick-drop p { color: var(--text-secondary) !important; }

.quick-caption, .ai-input, .ai-textarea {
  background: #fff !important;
  color: var(--plum) !important;
  border: 1.5px solid var(--pink-100) !important;
}
.quick-caption:focus, .ai-input:focus {
  border-color: var(--pink-400) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.15) !important;
}
.ai-input[readonly] { background: var(--pink-50) !important; }
.ai-label { color: var(--text-secondary) !important; }

/* IG post button — keep instagram gradient (already pretty) */
.ig-post-btn {
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 30%, #c026d3 65%, #a855f7 100%) !important;
  box-shadow: 0 6px 24px rgba(236,72,153,0.35) !important;
}

.ai-primary-btn {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  box-shadow: 0 4px 14px rgba(236,72,153,0.3) !important;
}
.ai-ghost-btn {
  background: var(--pink-50) !important;
  color: var(--pink-600) !important;
  border: 1px solid var(--pink-200) !important;
}
.ai-ghost-btn:hover { background: var(--pink-100) !important; color: var(--pink-600) !important; }

.ai-stepbar { gap: 8px !important; }
.ai-step {
  background: rgba(255,255,255,0.7) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--pink-100) !important;
}
.ai-step.active {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.ai-title-item {
  background: var(--pink-50) !important;
  color: var(--plum) !important;
  border: 1px solid var(--pink-100) !important;
}
.ai-title-item:hover { background: var(--pink-100) !important; border-color: var(--pink-300) !important; }
.ai-title-item.selected {
  background: linear-gradient(135deg, #fce7f3, #f3e8ff) !important;
  border-color: var(--pink-400) !important;
}
.ai-title-item.placeholder { color: var(--text-muted) !important; background: var(--pink-50) !important; }

.ai-body-preview {
  background: var(--pink-50) !important;
  color: var(--plum) !important;
  border: 1px solid var(--pink-100) !important;
}
.ai-body-preview .placeholder { color: var(--text-muted) !important; }

.score-circle {
  background: conic-gradient(#ec4899 0% 100%, #fce7f3 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(236,72,153,0.2);
}
.score-item span { color: var(--text-secondary) !important; }
.total-score { border-color: var(--pink-100) !important; }
.total-num { color: var(--pink-600) !important; }
.total-deno, .total-label { color: var(--text-muted) !important; }
.ai-checklist li { color: var(--text-secondary) !important; }

.ai-img-preview {
  background: var(--pink-50) !important;
  border-color: var(--pink-200) !important;
  color: var(--text-muted) !important;
}

.chip {
  background: linear-gradient(135deg, #fce7f3, #f3e8ff) !important;
  color: var(--pink-600) !important;
  border: 1px solid var(--pink-200) !important;
}
.chip:hover { background: linear-gradient(135deg, #fbcfe8, #e9d5ff) !important; }

/* AI Title SEO Cards — light theme override */
.ai-title-card {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 2px 12px rgba(236,72,153,0.06);
}
.ai-title-card:hover { background: #fff !important; border-color: var(--pink-300) !important; }
.ai-title-card.selected { background: linear-gradient(135deg, #fef6fa, #f3e8ff) !important; border-color: var(--pink-400) !important; }
.title-text { color: var(--plum) !important; }
.title-meta { color: var(--text-muted) !important; }
.title-bar-label { color: var(--text-secondary) !important; }
.title-bar-track { background: var(--pink-100) !important; }
.title-bar-val { color: var(--text-secondary) !important; }
.title-analysis { background: rgba(236,72,153,0.06) !important; color: var(--text-secondary) !important; }
.title-loading { color: var(--text-secondary) !important; }
.title-loading .spinner-dot { background: var(--pink-500) !important; }
.ai-hint { color: var(--text-muted) !important; }

/* Image tabs — light theme */
.ai-img-tab {
  background: var(--pink-50) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--pink-100) !important;
}
.ai-img-tab:hover { background: var(--pink-100) !important; }
.ai-img-tab.active {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Topic tags — light theme */
.topic-chk span {
  background: var(--pink-50) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--pink-100) !important;
}
.topic-chk:hover span { background: var(--pink-100) !important; color: var(--pink-600) !important; }
.topic-chk input:checked + span {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* SEO Report — light theme */
.seo-report { background: #fff !important; border: 1px solid var(--pink-200) !important; box-shadow: 0 4px 20px rgba(236,72,153,0.1) !important; }
.seo-report-header { background: linear-gradient(135deg, #ec4899, #c084fc, #06b6d4) !important; }
.seo-report-header h4 { font-size: 1.05rem !important; font-weight: 800 !important; }
.seo-gauges { border-bottom: 1px solid var(--pink-100) !important; padding: 24px 16px 18px !important; }
.seo-gauge-item span { color: var(--plum) !important; font-size: 0.75rem !important; font-weight: 700 !important; }
.seo-ring-text { fill: var(--plum) !important; font-size: 18px !important; font-weight: 900 !important; }
.seo-checklist-title { color: var(--plum) !important; font-size: 0.9rem !important; font-weight: 800 !important; }
.seo-check-item { color: var(--plum) !important; border-bottom-color: var(--pink-50) !important; font-size: 0.85rem !important; font-weight: 600 !important; padding: 12px 14px !important; }
.seo-check-item strong { color: var(--pink-600) !important; font-weight: 800 !important; }
.seo-check-item.pass { background: rgba(16,185,129,0.08) !important; }
.seo-check-item.warn { background: rgba(245,158,11,0.08) !important; }
.seo-check-item.fail { background: rgba(239,68,68,0.08) !important; }

/* AI body preview — light theme readability */
.ai-body-preview { font-size: 0.88rem !important; color: var(--plum) !important; font-weight: 500 !important; line-height: 1.8 !important; }
.ai-body-preview p { color: var(--plum) !important; }

/* Title cards — light theme readability */
.ai-title-card .title-text { font-size: 0.92rem !important; font-weight: 800 !important; color: #4a1d3f !important; }
.ai-title-card .title-meta { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--text-secondary) !important; }
.title-bar-label { font-size: 0.75rem !important; font-weight: 700 !important; color: #4a1d3f !important; width: 80px !important; }
.title-bar-val { font-size: 0.75rem !important; font-weight: 800 !important; color: #4a1d3f !important; }
.title-bar-track { background: #fce7f3 !important; }
.ai-title-card .title-analysis { font-size: 0.78rem !important; font-weight: 500 !important; color: var(--plum) !important; line-height: 1.7 !important; }

/* General light theme text boost */
.ai-card h4 { font-size: 1rem !important; }
.ai-hint { font-size: 0.8rem !important; font-weight: 500 !important; color: var(--text-secondary) !important; }
.ai-label { font-size: 0.8rem !important; font-weight: 700 !important; }
.qt-section h5 { font-size: 0.88rem !important; font-weight: 800 !important; }

/* Persona presets — light theme */
.persona-preset {
  background: var(--pink-50) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--pink-100) !important;
}
.persona-preset:hover { background: var(--pink-100) !important; color: var(--pink-600) !important; }
.persona-preset.selected { background: linear-gradient(135deg, #ec4899, #c084fc) !important; color: #fff !important; border-color: transparent !important; }

/* Mypage card text — light theme */
#tab-profile .card-desc { color: var(--text-secondary) !important; }
#tab-profile .form-label { color: var(--plum) !important; }
#tab-profile .form-input,
#tab-profile .form-input[type="text"],
#tab-profile .form-input[type="number"],
#tab-profile textarea.form-input,
#tab-profile select.form-input {
  background: #fff !important;
  color: var(--plum) !important;
  border: 1.5px solid var(--pink-100) !important;
}
#tab-profile .form-input:focus,
#tab-profile select.form-input:focus,
#tab-profile textarea.form-input:focus {
  border-color: var(--pink-400) !important;
}
#childrenSection span { color: var(--text-secondary) !important; }

/* Quick tools */
.qt-section {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--pink-100) !important;
}
.qt-section h5 { color: var(--plum) !important; }
.qt-filter-btn, .qt-ratio-btn, .qt-chk {
  background: #fff !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--pink-100) !important;
}
.qt-filter-btn:hover, .qt-ratio-btn:hover { background: var(--pink-50) !important; color: var(--pink-600) !important; }
.qt-filter-btn.active, .qt-ratio-btn.active {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.qt-slider label { color: var(--text-secondary) !important; }
.qt-slider label span { color: var(--pink-500) !important; }
.qt-slider input[type=range] { accent-color: var(--pink-500) !important; }
.qt-reset {
  background: var(--pink-50) !important;
  color: var(--pink-600) !important;
  border: 1px solid var(--pink-200) !important;
}

/* Topic checkbox grid */
.topic-chk span {
  background: #fff !important;
  color: var(--text-secondary) !important;
  border: 1.5px solid var(--pink-100) !important;
}
.topic-chk:hover span {
  background: var(--pink-50) !important;
  color: var(--pink-600) !important;
  border-color: var(--pink-300) !important;
}
.topic-chk input:checked + span {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(236,72,153,0.35) !important;
}

/* From-mypage badge */
.from-mypage {
  background: rgba(236,72,153,0.1) !important;
  color: var(--pink-600) !important;
}

/* ===== mypage.html overrides ===== */
.page { max-width: 1100px; margin: 0 auto; padding: 100px 24px 60px; }
.tabs {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 4px 18px rgba(236,72,153,0.08);
}
.tab { color: var(--text-secondary) !important; background: transparent !important; }
.tab:hover { background: var(--pink-50) !important; color: var(--pink-600) !important; }
.tab.active {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(236,72,153,0.35) !important;
}
.card {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--pink-100) !important;
  box-shadow: 0 8px 32px rgba(236,72,153,0.1) !important;
}
.card-header { border-bottom: 1px solid var(--pink-100) !important; }
.card-title { color: var(--plum) !important; }
.card-desc { color: var(--text-secondary) !important; }
.form-label { color: var(--text-secondary) !important; }
.form-input, .form-textarea {
  background: #fff !important;
  color: var(--plum) !important;
  border: 1.5px solid var(--pink-100) !important;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--pink-400) !important;
  box-shadow: 0 0 0 3px rgba(236,72,153,0.15) !important;
}
.form-input:disabled { background: var(--pink-50) !important; color: var(--text-muted) !important; }
.btn-outline {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(236,72,153,0.35) !important;
}
.field-hint {
  color: var(--pink-600) !important;
  background: var(--pink-50) !important;
}
.toast {
  background: linear-gradient(135deg, #ec4899, #c084fc) !important;
  box-shadow: 0 8px 32px rgba(236,72,153,0.35) !important;
}

/* ===== 함께하는 친구 (Reward) ===== */
.reward-summary {
  background: linear-gradient(135deg, #fce7f3, #f3e8ff, #ffe4e6) !important;
  border: 1px solid var(--pink-200) !important;
}
.reward-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .reward-grid { grid-template-columns: 1fr; } }
.reward-box {
  background: rgba(255,255,255,0.85); padding: 18px; border-radius: 14px;
  text-align: center; border: 1px solid var(--pink-100);
  box-shadow: 0 4px 14px rgba(236,72,153,0.08);
}
.reward-label {
  display: block; font-size: 0.78rem; color: var(--text-secondary);
  font-weight: 600; margin-bottom: 8px;
}
.reward-num {
  display: block; font-size: 1.6rem; font-weight: 800;
  background: linear-gradient(135deg, #ec4899, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.reward-info {
  text-align: center; font-size: 0.82rem; color: var(--text-secondary);
  padding: 12px; background: rgba(255,255,255,0.6); border-radius: 10px;
}
.reward-info strong { color: var(--pink-600); font-size: 0.95rem; }

.friend-list { display: flex; flex-direction: column; gap: 10px; }
.friend-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--pink-100);
  transition: all 0.2s;
}
.friend-item:hover { border-color: var(--pink-300); transform: translateY(-1px); }
.friend-item.paid {
  background: linear-gradient(135deg, #fff, #fef6fa);
  border-color: var(--pink-300);
  box-shadow: 0 4px 14px rgba(236,72,153,0.12);
}
.friend-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #ec4899, #c084fc);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.friend-info { flex: 1; min-width: 0; }
.friend-name { font-weight: 700; color: var(--plum); font-size: 0.92rem; }
.friend-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }
.friend-status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.status-paid {
  font-size: 0.74rem; font-weight: 700; color: #fff;
  padding: 4px 10px; border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #059669);
}
.status-reward { font-size: 0.7rem; color: var(--pink-600); font-weight: 600; }
.status-pending {
  font-size: 0.74rem; font-weight: 600; color: var(--text-muted);
  padding: 4px 10px; border-radius: 10px;
  background: var(--pink-50); border: 1px solid var(--pink-100);
}

.copy-wrap { display: flex; gap: 8px; }
.copy-input {
  flex: 1; padding: 12px 14px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--pink-100);
  color: var(--plum); font-size: 0.85rem;
}
.copy-btn {
  padding: 12px 22px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #ec4899, #c084fc); color: #fff;
  font-weight: 700; cursor: pointer; font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(236,72,153,0.3);
}
.copy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(236,72,153,0.4); }
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: var(--pink-50); border-radius: 10px;
}
.info-label { color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; }
.info-value { color: var(--pink-600); font-weight: 800; font-size: 0.95rem; }

/* ===== 출금 신청 ===== */
.withdraw-summary {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; background: var(--pink-50); border-radius: 12px;
  border: 1px solid var(--pink-100);
}
.wd-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: var(--text-secondary);
}
.wd-row strong { color: var(--plum); font-weight: 700; }
.wd-row.highlight {
  padding-top: 10px; margin-top: 4px;
  border-top: 1px dashed var(--pink-200);
}
.wd-row.highlight strong {
  font-size: 1.15rem;
  background: linear-gradient(135deg, #ec4899, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.wd-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 11px;
  background: #fff; border: 1px solid var(--pink-100);
}
.wd-item-amount { font-size: 0.95rem; font-weight: 800; color: var(--plum); }
.wd-item-meta { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.wd-item-date { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.wd-status {
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: 10px;
}
.wd-status.pending { background: var(--pink-50); color: var(--pink-600); border: 1px solid var(--pink-200); }
.wd-status.paid { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.wd-status.rejected { background: #fee2e2; color: #dc2626; }

.wd-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wd-modal[hidden] { display: none; }
.wd-modal-bg {
  position: absolute; inset: 0;
  background: rgba(74,29,63,0.4); backdrop-filter: blur(6px);
}
.wd-modal-card {
  position: relative; max-width: 420px; width: 100%;
  background: #fff; border-radius: 20px; padding: 28px;
  box-shadow: 0 20px 60px rgba(236,72,153,0.3);
  border: 1px solid var(--pink-100);
}
.wd-modal-card h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--plum); margin-bottom: 6px;
}
.wd-avail {
  font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 16px;
  padding: 10px; background: var(--pink-50); border-radius: 9px; text-align: center;
}
.wd-avail strong { color: var(--pink-600); font-weight: 800; }
.wd-modal-card .form-label { margin-top: 10px; }
.wd-modal-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.wd-modal-actions .btn { flex: 1; }

/* Container / progress bar in app.html */
.container { color: var(--plum); }
header h1 { color: var(--plum) !important; }
.header-desc { color: var(--text-secondary) !important; }
.progress-bar { background: var(--pink-100) !important; }
.progress-fill { background: linear-gradient(90deg, #ec4899, #c084fc) !important; }