/* ============================================================
   upgrade.css — lớp nâng cấp thị giác + responsive + đa ngôn ngữ
   ------------------------------------------------------------
   File này KHÔNG thay thế các file css khác, chỉ cộng thêm.
   Nạp sau cùng (xem thứ tự <link> ở mỗi trang) nên có thể ghi đè
   khi cần mà không phải sửa các file gốc.
   ============================================================ */

/* ---------- 1. Phông chữ đa ngôn ngữ ----------
   Mỗi máy (Windows/Mac/Linux/Android/iOS) có sẵn phông khác nhau
   cho tiếng Trung/Hàn/Nhật — chuỗi fallback dưới đây đảm bảo chữ
   nào cũng hiển thị đẹp mà không cần cài thêm gì. */
:root {
  --font-latin: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-cjk:   'Noto Sans SC', 'Noto Sans KR', 'Noto Sans JP',
                'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB',
                'Malgun Gothic', 'Apple SD Gothic Neo',
                'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo',
                sans-serif;
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
html[lang="zh-CN"] body, html[lang="ko"] body, html[lang="ja"] body {
  font-family: var(--font-cjk), var(--font-latin), var(--font-emoji);
}
body, .btn, input, textarea, select {
  font-family: var(--font-latin), var(--font-cjk), var(--font-emoji);
}

/* ---------- 2. An toàn cho điện thoại có tai thỏ / thanh cử chỉ ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-x: hidden;
}
.site-head { padding-top: env(safe-area-inset-top); }
.site-foot { padding-bottom: calc(env(safe-area-inset-bottom) + 6px); }

/* ---------- 3. Chữ co giãn mượt theo màn hình (đồng bộ mobile/PC) ---------- */
h1 { font-size: clamp(1.7rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); }
.wrap, .site-head .wrap, .site-foot .wrap { max-width: min(var(--maxw), 96vw); }

@media (max-width: 480px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .modal-box { max-height: calc(100dvh - 32px); overflow-y: auto; }
}

/* ---------- 4. "8D" — hào quang chuyển động, kính mờ, glow sâu ----------
   Toàn bộ mục này tự tắt bớt trên máy yếu (html[data-perf="low"], gắn bởi
   js/perf.js chạy đầu tiên trên mọi trang) để web không giật/lag. */
@keyframes nody-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
html:not([data-perf="low"]) body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--moon) 22%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--blossom) 20%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--mist) 16%, transparent) 0%, transparent 50%);
  background-size: 200% 200%;
  animation: nody-aurora 22s ease-in-out infinite;
  opacity: .8;
}
/* Máy yếu: vẫn giữ chút màu sắc nhưng KHÔNG chuyển động và KHÔNG blur nền cố định */
html[data-perf="low"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--moon) 14%, transparent), transparent 60%);
}

html:not([data-perf="low"]) .card,
html:not([data-perf="low"]) .panel,
html:not([data-perf="low"]) .modal-box,
html:not([data-perf="low"]) .site-head,
html:not([data-perf="low"]) .lang-menu,
html:not([data-perf="low"]) .assist-panel,
html:not([data-perf="low"]) .help-box {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* backdrop-filter là phép tính GPU khá nặng khi lặp lại nhiều lớp cùng lúc —
   máy yếu dùng nền đặc (--panel-solid) thay vì kính mờ, vẫn đẹp, nhẹ hơn nhiều */
html[data-perf="low"] .card,
html[data-perf="low"] .panel,
html[data-perf="low"] .modal-box,
html[data-perf="low"] .site-head,
html[data-perf="low"] .lang-menu,
html[data-perf="low"] .assist-panel,
html[data-perf="low"] .help-box {
  background: var(--panel-solid);
}

/* Glow nhẹ khi hover trên các nút chính — cảm giác "chiều sâu" */
.btn-moon, .icon-btn, .acct-btn, .floating-fab {
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn-moon:hover { box-shadow: 0 10px 34px color-mix(in srgb, var(--moon) 45%, transparent); transform: translateY(-2px); }

/* Nghiêng nhẹ 3D khi rê chuột qua các lá bài tĩnh (thẻ không lật) — chỉ máy khoẻ */
@media (hover: hover) {
  html:not([data-perf="low"]) .card-strip .card,
  html:not([data-perf="low"]) .grid-cards .card {
    transition: transform var(--t-mid);
  }
  html:not([data-perf="low"]) .card-strip .card:hover,
  html:not([data-perf="low"]) .grid-cards .card:hover {
    transform: perspective(800px) rotateX(4deg) rotateY(-6deg) translateY(-4px) scale(1.03);
  }
}

/* Tắt hẳn mọi animation/transition không thiết yếu khi máy quá yếu hoặc
   người dùng đã bật "giảm chuyển động" trong hệ điều hành */
html[data-perf="low"] *, html[data-perf="low"] *::before, html[data-perf="low"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .12s !important;
  scroll-behavior: auto !important;
}
html[data-perf="low"] #scene .aurora,
html[data-perf="low"] #scene .petal,
html[data-perf="low"] #scene .shooting {
  display: none;
}

/* ---------- 5. Bộ chọn ngôn ngữ — lá cờ tròn ---------- */
.lang-switch { position: relative; }
.flag-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--line-soft); line-height: 1;
  border: 1px solid var(--line-soft);
}
.flag-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lang-trigger.icon-btn { padding: 0; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 18px 46px rgba(0,0,0,.35);
  padding: 6px; display: none; min-width: 190px; z-index: 80;
}
.lang-switch.open .lang-menu { display: block; }
.lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; color: var(--ink);
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: .9rem;
}
.lang-item:hover { background: var(--line-soft); }
.lang-item.on { color: var(--moon); font-weight: 600; }
.lang-item.on .flag-badge { box-shadow: 0 0 0 2px var(--moon); }

/* ---------- 6. Nút hỗ trợ nổi — kéo-thả tự do ---------- */
.floating-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 400;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: grab;
  background: linear-gradient(140deg, var(--moon), var(--blossom));
  border: none; box-shadow: 0 12px 30px rgba(0,0,0,.35);
  touch-action: none; user-select: none;
}
.floating-fab.dragging { cursor: grabbing; transition: none !important; }
.help-fab { bottom: 20px; }
.help-fab svg.fab-pup { width: 34px; height: 34px; }
.assist-fab { right: 88px; bottom: 20px; font-size: 1.4rem; }

@media (max-width: 560px) {
  .floating-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .assist-fab { right: 72px; }
}

.help-box { max-width: min(560px, 92vw); text-align: left; }
.help-sections { display: grid; gap: 14px; margin-top: 14px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.help-sec h4 { margin: 0 0 4px; color: var(--moon); font-size: 1rem; }
.help-sec p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- 7. Bảng trợ lý AI ---------- */
.assist-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 400;
  width: min(340px, 88vw); height: min(440px, 68vh);
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  display: none; flex-direction: column; overflow: hidden;
}
.assist-panel.open { display: flex; }
.assist-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.assist-head svg { width: 30px; height: 30px; flex-shrink: 0; }
.assist-head b { flex: 1; font-size: .95rem; }
.assist-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.assist-line { max-width: 84%; padding: 8px 12px; border-radius: 14px; font-size: .88rem; line-height: 1.45; }
.assist-line.bot { align-self: flex-start; background: var(--line-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.assist-line.me  { align-self: flex-end; background: linear-gradient(140deg, var(--moon), var(--blossom)); color: #fff; border-bottom-right-radius: 4px; }
.assist-line.bot.typing { font-style: italic; opacity: .65; animation: assistPulse 1.2s ease-in-out infinite; }
@keyframes assistPulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
.assist-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line-soft); }
.assist-form .input { flex: 1; }
.assist-form .btn { padding: 0 16px; }

@media (max-width: 560px) {
  .assist-panel { right: 10px; bottom: 78px; width: min(94vw, 360px); }
}

/* ---------- 8. Thẻ giá / ví / admin dùng chung ---------- */
.plan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  background: var(--panel); position: relative; overflow: hidden;
}
.plan-card.featured { border-color: var(--moon); box-shadow: 0 0 0 1px var(--moon), var(--glow); }
.plan-card h3 { margin: 0 0 6px; }
.plan-card .price { font-family: 'Lora', serif; font-size: 1.8rem; color: var(--moon); margin: 6px 0 14px; }
.plan-card ul { margin: 0 0 16px; padding-left: 18px; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }

.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.data-table th { color: var(--ink-mute); font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; }
.data-table tr:hover td { background: var(--line-soft); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: .76rem; font-weight: 600; }
.status-pill.pending  { background: color-mix(in srgb, #e0a736 22%, transparent); color: #e0a736; }
.status-pill.approved { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }
.status-pill.rejected { background: color-mix(in srgb, #e0736f 22%, transparent); color: #e0736f; }

/* ---------- 8b. Lật bài "5D/8D" — xoay ảo diệu khi mở lá bài ----------
   Chỉ chạy trên máy khoẻ (không phải data-perf="low"); lá bài trong thế
   bắt chéo (Celtic Cross) và daily-card giữ nguyên hiệu ứng lật đơn giản
   để không lệch vị trí/không đụng animation "đung đưa" gốc. */
@keyframes nodyFlipMagic {
  0%   { transform: rotateY(0deg)   rotateZ(0deg)  scale(1);    filter: brightness(1)    drop-shadow(0 0 0 transparent); }
  35%  { transform: rotateY(100deg) rotateZ(-5deg) scale(1.09); filter: brightness(1.3)  drop-shadow(0 0 26px color-mix(in srgb, var(--moon) 65%, transparent)); }
  65%  { transform: rotateY(205deg) rotateZ(4deg)  scale(1.05); filter: brightness(1.15) drop-shadow(0 0 16px color-mix(in srgb, var(--blossom) 55%, transparent)); }
  100% { transform: rotateY(180deg) rotateZ(0deg)  scale(1);    filter: brightness(1)    drop-shadow(0 0 0 transparent); }
}
@keyframes nodySheen { from { transform: translateX(-130%) rotate(8deg); } to { transform: translateX(130%) rotate(8deg); } }

html:not([data-perf="low"]) .slot:not(.crossed) .flip.turned,
html:not([data-perf="low"]) .daily-card.turned {
  animation: nodyFlipMagic .95s cubic-bezier(.22,.9,.24,1) both;
}
html:not([data-perf="low"]) .face.front { position: relative; }
html:not([data-perf="low"]) .face.front::after {
  content: '';
  position: absolute; top: -30%; bottom: -30%; left: -30%; width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: translateX(-130%) rotate(8deg);
  pointer-events: none; mix-blend-mode: overlay;
}
html:not([data-perf="low"]) .slot:not(.crossed) .flip.turned .face.front::after,
html:not([data-perf="low"]) .daily-card.turned .face.front::after {
  animation: nodySheen 1s ease-out .05s 1;
}

/* ---------- 9. Photobooth ---------- */
.booth-stage {
  position: relative; width: min(480px, 92vw); aspect-ratio: 3/4; margin: 0 auto;
  border-radius: var(--r-lg); overflow: hidden; background: #000;
  border: 1px solid var(--line); box-shadow: var(--glow);
}
.booth-stage video, .booth-stage canvas, .booth-stage img.shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.booth-frame { position: absolute; inset: 0; pointer-events: none; border: 10px solid transparent; }
.booth-frame.moon    { border-image: linear-gradient(160deg, var(--moon), var(--blossom)) 1; }
.booth-frame.gold    { border-image: linear-gradient(160deg, #f4d58d, #b9852f) 1; }
.booth-frame.sage    { border-image: linear-gradient(160deg, var(--sage), var(--mist)) 1; }
.booth-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.frame-swatches { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.frame-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.frame-swatch.on { border-color: var(--ink); }

.filter-swatches { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.filter-swatch {
  padding: 6px 13px; border-radius: 999px; font-size: .8rem;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast);
}
.filter-swatch:hover { border-color: var(--moon); color: var(--ink); }
.filter-swatch.on { border-color: var(--moon); color: var(--moon); background: color-mix(in srgb, var(--moon) 10%, transparent); font-weight: 600; }

.btn-ghost.on { color: var(--moon); border-color: var(--moon); background: color-mix(in srgb, var(--moon) 10%, transparent); }
.btn.tiny { padding: 6px 12px; font-size: .8rem; }
.admin-pane { margin-top: 18px; }

/* ---------- 10. Nút quay lên đầu trang trên di động ---------- */
@media (max-width: 700px) {
  .head-row { gap: 8px; }
  .brand-name { font-size: .92rem; }
}


/* ============================================================
   NÂNG CẤP v2 — Giao diện Cosmic Premium
   Thêm bởi upgrade. Không xóa gì ở trên.
   ============================================================ */

/* ---------- Topic color themes — màu riêng mỗi chủ đề ---------- */
:root {
  --topic-love:   #f472b6;
  --topic-work:   #34d399;
  --topic-change: #a78bfa;
  --topic-create: #fb923c;
  --topic-inner:  #818cf8;
  --topic-open:   #5fb4ec;
}

/* Áp dụng màu chủ đề lên body khi chọn topic */
body[data-topic="love"]   { --topic-accent: var(--topic-love); }
body[data-topic="work"]   { --topic-accent: var(--topic-work); }
body[data-topic="change"] { --topic-accent: var(--topic-change); }
body[data-topic="create"] { --topic-accent: var(--topic-create); }
body[data-topic="inner"]  { --topic-accent: var(--topic-inner); }
body[data-topic="open"]   { --topic-accent: var(--topic-open); }
body { --topic-accent: var(--moon); }

/* ---------- Lá bài holographic premium ---------- */
.face.front {
  background: var(--card-face);
  border: 1px solid rgba(255, 220, 130, 0.25) !important;
  box-shadow: 
    0 0 0 1px rgba(95, 180, 236, 0.2),
    0 20px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(95, 180, 236, 0.04) !important;
}

/* Holographic rainbow shimmer khi hover */
@keyframes holoPrism {
  0%   { background-position: 0% 50%; opacity: 0; }
  25%  { opacity: 0.7; }
  50%  { background-position: 100% 50%; opacity: 0.5; }
  75%  { opacity: 0.6; }
  100% { background-position: 0% 50%; opacity: 0; }
}

html:not([data-perf="low"]) .flip.turned:hover .face.front {
  box-shadow: 
    0 0 0 1px rgba(255, 200, 100, 0.4),
    0 24px 70px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(95, 180, 236, 0.3),
    inset 0 0 30px rgba(95, 180, 236, 0.1) !important;
}

/* Viền vàng cho lá đã lật */
.flip.turned .face.front {
  border-color: rgba(255, 200, 80, 0.3) !important;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ---------- Lá bài chờ lật — pulse aura mạnh hơn ---------- */
.flip:not(.turned) {
  filter: drop-shadow(0 0 12px rgba(95, 180, 236, 0.25));
}
.flip:not(.turned):hover {
  filter: drop-shadow(0 0 24px rgba(95, 180, 236, 0.6));
  transform: translateY(-4px) scale(1.02);
  transition: filter 0.3s ease, transform 0.3s ease;
}

/* ---------- Card back — thiết kế lại đẹp hơn ---------- */
.card-back, .face.rear {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(95,180,236,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(139,155,246,0.12) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(95,180,236,.06) 0 4px, transparent 4px 8px),
    linear-gradient(155deg, #1a3468 0%, #0a1224 45%, #142a54 100%) !important;
  border: 1px solid rgba(95, 180, 236, 0.3) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(95, 180, 236, 0.1) !important;
}

/* Star pattern overlay */
.card-back::before, .face.rear::before {
  content: '';
  position: absolute; inset: 0;
  background-image: 
    radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 40px 40px, 25px 25px;
  background-position: 0 0, 15px 15px;
  opacity: 0.2;
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Enhanced modal card detail ---------- */
.modal-box.wide {
  width: min(100%, 680px) !important;
  background: linear-gradient(160deg, rgba(15, 28, 56, 0.98) 0%, rgba(10, 18, 36, 0.99) 100%) !important;
  border: 1px solid rgba(95, 180, 236, 0.25) !important;
  box-shadow: 
    0 40px 100px rgba(0, 0, 0, 0.8),
    0 0 60px rgba(95, 180, 236, 0.15),
    inset 0 0 40px rgba(95, 180, 236, 0.03) !important;
}

/* Tên người dùng trong modal */
.user-name-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--topic-accent, var(--moon)) 20%, transparent),
    color-mix(in srgb, var(--blossom) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--topic-accent, var(--moon)) 40%, transparent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--topic-accent, var(--moon));
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}

/* Topic-specific detail header */
.detail-topic-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--topic-accent, var(--moon)) 12%, transparent),
    color-mix(in srgb, var(--topic-accent, var(--moon)) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--topic-accent, var(--moon)) 30%, transparent);
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--topic-accent, var(--moon));
  font-weight: 600;
}
.detail-topic-banner .topic-emoji { font-size: 1.2rem; }

/* Topic-specific section headers */
.detail-body h4 {
  background: linear-gradient(90deg, 
    var(--topic-accent, var(--moon)),
    var(--blossom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  margin: 22px 0 8px !important;
}

/* Topic content highlight box */
.topic-specific-block {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--topic-accent, var(--moon)) 8%, transparent),
    transparent);
  border-left: 3px solid var(--topic-accent, var(--moon));
  margin: 10px 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.8;
}

/* Personalized intro paragraph */
.personalized-intro {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.85;
  padding: 16px 20px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--topic-accent, var(--moon)) 6%, transparent),
    transparent);
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--topic-accent, var(--moon)) 20%, transparent);
  margin-bottom: 18px;
}

/* Birth time note */
.birth-time-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--mist);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mist) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mist) 25%, transparent);
  margin-top: 8px;
}

/* ---------- Steps indicator nâng cấp ---------- */
.steps {
  background: color-mix(in srgb, var(--dusk) 50%, transparent);
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid var(--line-soft);
  width: fit-content;
  margin: 0 auto 34px;
  gap: 4px;
}
.step {
  padding: 4px 8px;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.step.on {
  background: color-mix(in srgb, var(--topic-accent, var(--moon)) 15%, transparent);
}
.step.on b {
  background: var(--topic-accent, var(--moon)) !important;
  color: var(--void) !important;
  border-color: var(--topic-accent, var(--moon)) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--topic-accent, var(--moon)) 50%, transparent);
}
.step.done b {
  box-shadow: 0 0 8px color-mix(in srgb, var(--moon) 40%, transparent);
}

/* ---------- Topic card chọn chủ đề - đẹp hơn ---------- */
button.tool[data-topic="love"] { --local-accent: var(--topic-love); }
button.tool[data-topic="work"] { --local-accent: var(--topic-work); }
button.tool[data-topic="change"] { --local-accent: var(--topic-change); }
button.tool[data-topic="create"] { --local-accent: var(--topic-create); }
button.tool[data-topic="inner"] { --local-accent: var(--topic-inner); }
button.tool[data-topic="open"] { --local-accent: var(--topic-open); }

button.tool {
  background: linear-gradient(160deg, 
    color-mix(in srgb, var(--local-accent, var(--moon)) 8%, var(--panel)),
    var(--panel)) !important;
  border-color: color-mix(in srgb, var(--local-accent, var(--moon)) 20%, var(--line-soft)) !important;
  transition: all 0.3s cubic-bezier(0.22, 0.78, 0.28, 1) !important;
}
button.tool:hover {
  border-color: var(--local-accent, var(--moon)) !important;
  box-shadow: 
    0 0 0 1px color-mix(in srgb, var(--local-accent, var(--moon)) 30%, transparent),
    0 20px 44px rgba(0,0,0,0.4),
    0 0 30px color-mix(in srgb, var(--local-accent, var(--moon)) 15%, transparent) !important;
  transform: translateY(-4px) scale(1.02) !important;
}
button.tool .glyph {
  font-size: 2rem !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--local-accent, var(--moon)) 60%, transparent));
}
button.tool h3 {
  color: var(--local-accent, var(--moon)) !important;
}

/* ---------- Profile panel nâng cấp ---------- */
.panel.lit {
  background: linear-gradient(160deg,
    rgba(95, 180, 236, 0.08),
    rgba(139, 155, 246, 0.04)) !important;
  border-color: rgba(95, 180, 236, 0.35) !important;
  box-shadow: 
    0 0 0 1px rgba(95, 180, 236, 0.1),
    0 0 40px rgba(95, 180, 236, 0.1) !important;
}

/* Birth time field */
#profileTime {
  font-family: 'Be Vietnam Pro', sans-serif;
}
.birth-time-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
}
.birth-time-optional-badge {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mist) 15%, transparent);
  color: var(--mist);
  border: 1px solid color-mix(in srgb, var(--mist) 30%, transparent);
  white-space: nowrap;
  font-weight: 500;
}

/* ---------- Spread list nâng cấp ---------- */
.spread {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--moon) 5%, var(--panel)),
    var(--panel)) !important;
  transition: all 0.3s cubic-bezier(0.22, 0.78, 0.28, 1) !important;
}
.spread:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
}
.spread.picked {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--moon) 12%, var(--panel)),
    color-mix(in srgb, var(--blossom) 6%, var(--panel))) !important;
}

/* ---------- Table/bàn trải nâng cấp ---------- */
.slot .pos-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--topic-accent, var(--moon)) !important;
  opacity: 0.9;
  text-shadow: 0 0 10px color-mix(in srgb, var(--topic-accent, var(--moon)) 50%, transparent);
}

/* ---------- Synth/luận giải tổng ---------- */
#synth.result {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--topic-accent, var(--moon)) 6%, var(--panel)),
    var(--panel)) !important;
  border-color: color-mix(in srgb, var(--topic-accent, var(--moon)) 30%, var(--line)) !important;
  box-shadow: 
    0 0 60px color-mix(in srgb, var(--topic-accent, var(--moon)) 12%, transparent),
    0 20px 60px rgba(0,0,0,0.3) !important;
}
#synth h3 {
  background: linear-gradient(90deg, var(--topic-accent, var(--moon)), var(--blossom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Mobile responsive nâng cấp ---------- */
@media (max-width: 480px) {
  /* Lá bài nhỏ hơn trên mobile nhỏ */
  .flip { width: 76px !important; height: 129px !important; }
  
  /* Modal full screen trên mobile */
  .modal { padding: 0 !important; align-items: flex-end !important; }
  .modal-box.wide {
    width: 100% !important;
    max-height: 92dvh !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    padding: 20px 18px 28px !important;
  }
  .modal-box.wide .modal-x { top: 10px; right: 10px; }
  
  /* Detail top trên mobile */
  .detail-top {
    flex-direction: row;
    gap: 14px;
    align-items: flex-start;
  }
  .detail-img { width: 80px !important; }
  
  /* Steps indicator nhỏ hơn */
  .steps { padding: 6px 10px; gap: 2px; }
  .step { font-size: 0.76rem; padding: 3px 6px; }
  .step b { width: 18px !important; height: 18px !important; font-size: 0.68rem !important; }
  .step span { display: none; }
  .step.on span { display: inline; }
  
  /* Hero section mobile */
  .hero { padding-top: 28px !important; padding-bottom: 20px !important; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
  
  /* Tool grid 1 cột trên mobile nhỏ */
  .tool-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tool { padding: 14px 14px 16px !important; }
  .tool .glyph { font-size: 1.6rem !important; margin-bottom: 8px !important; }
  .tool h3 { font-size: 0.95rem !important; }
  .tool p { font-size: 0.78rem !important; }
  
  /* Spread list mobile */
  .spread-list { grid-template-columns: 1fr !important; }
  .spread { padding: 16px 16px !important; }
  
  /* Fan bài mobile */
  .deck-stage { height: 240px !important; margin-bottom: 20px !important; }
  .fan-card { width: 52px !important; height: 88px !important; margin-left: -26px !important; }
  
  /* Nút mobile */
  .btn { padding: 11px 20px !important; font-size: 0.88rem !important; }
  .btn-moon, .btn-ghost { min-height: 44px; }
  
  /* Table bàn trải */
  .slot .pos-label { font-size: 0.6rem !important; }
}

@media (max-width: 360px) {
  .tool-grid { grid-template-columns: 1fr !important; }
  .flip { width: 68px !important; height: 115px !important; }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .spread-list { grid-template-columns: repeat(2, 1fr) !important; }
  .flip { width: 90px !important; height: 153px !important; }
}

/* ---------- Cosmic background particles ---------- */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}
.cosmic-star {
  position: fixed;
  border-radius: 50%;
  background: white;
  pointer-events: none;
  z-index: 0;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
html[data-a11y="on"] .cosmic-star,
html[data-perf="low"] .cosmic-star { display: none !important; }

/* ---------- Fan card nâng cấp ---------- */
.fan-card {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.fan-card:hover:not(.taken) {
  filter: 
    brightness(1.25)
    drop-shadow(0 0 18px color-mix(in srgb, var(--topic-accent, var(--moon)) 70%, transparent)) !important;
  z-index: 50 !important;
}

/* ---------- Btn Reveal All & Synth ---------- */
#btnRevealAll {
  border: 1px solid color-mix(in srgb, var(--topic-accent, var(--moon)) 40%, transparent) !important;
  color: var(--topic-accent, var(--moon)) !important;
}
#btnRevealAll:hover {
  background: color-mix(in srgb, var(--topic-accent, var(--moon)) 12%, transparent) !important;
}
#btnSynth {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--topic-accent, var(--moon)) 80%, var(--moon)),
    var(--blossom)) !important;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--topic-accent, var(--moon)) 35%, transparent) !important;
}

/* ---------- Chips nâng cấp ---------- */
.chip {
  background: color-mix(in srgb, var(--topic-accent, var(--moon)) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--topic-accent, var(--moon)) 30%, transparent) !important;
  color: var(--topic-accent, var(--moon)) !important;
}

/* ---------- Result blockquote ---------- */
.result blockquote {
  border-left: 3px solid var(--topic-accent, var(--moon)) !important;
  background: color-mix(in srgb, var(--topic-accent, var(--moon)) 6%, var(--dusk)) !important;
}

/* ---------- Scroll behavior cải thiện ---------- */
html { scroll-behavior: smooth; }
@media (max-width: 768px) {
  .wrap { padding-inline: 16px; }
}

/* ---------- Touch/tap target size (WCAG) ---------- */
@media (pointer: coarse) {
  .fan-card { min-width: 48px; min-height: 48px; }
  .flip { cursor: default; }
  .flip:active { filter: brightness(1.15); }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .btn { min-height: 44px; }
}

/* ---------- Safe area / notch / dynamic island ---------- */
@supports (padding: max(0px)) {
  .site-head { 
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-left: max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
  }
  .site-foot {
    padding-bottom: max(calc(env(safe-area-inset-bottom) + 20px), 34px);
  }
  #toasts {
    bottom: max(calc(env(safe-area-inset-bottom) + 20px), 26px);
  }
  .floating-fab {
    bottom: max(calc(env(safe-area-inset-bottom) + 14px), 20px);
    right: max(env(safe-area-inset-right, 20px), 20px);
  }
}

/* ---------- Anti copy / select protection ---------- */
.detail-body, .result, #synthBody {
  -webkit-user-select: none;
  user-select: none;
}
/* Cho phép select tên lá và heading */
.detail-body h3, .detail-body h4,
#synthBody h4 { -webkit-user-select: text; user-select: text; }


/* ============================================================
   ACCOUNT BUTTON — Nút đăng nhập đẹp hơn, rõ ràng hơn
   ============================================================ */
.acct-btn {
  background: linear-gradient(135deg,
    rgba(95,180,236,.12),
    rgba(184,127,255,.08)) !important;
  border: 1px solid rgba(95,180,236,.35) !important;
  box-shadow: 0 0 12px rgba(95,180,236,.1), 0 2px 8px rgba(0,0,0,.2) !important;
  transition:
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}
.acct-btn:hover {
  background: linear-gradient(135deg,
    rgba(95,180,236,.22),
    rgba(184,127,255,.14)) !important;
  border-color: rgba(95,180,236,.7) !important;
  box-shadow:
    0 0 20px rgba(95,180,236,.25),
    0 4px 16px rgba(0,0,0,.3) !important;
  transform: translateY(-2px) !important;
}
.acct-btn:active {
  transform: translateY(0) !important;
}
.avatar {
  background: linear-gradient(135deg, var(--moon), var(--blossom)) !important;
  box-shadow: 0 0 8px rgba(95,180,236,.4) !important;
}
#acctText {
  font-family: 'Cinzel', 'Be Vietnam Pro', sans-serif !important;
  letter-spacing: .05em !important;
  font-size: .8rem !important;
  background: linear-gradient(90deg, #dde9ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   AUTH MODAL — Hộp đăng nhập đẹp hơn
   ============================================================ */
.modal-box {
  border: 1px solid rgba(95,180,236,.18) !important;
  box-shadow:
    0 0 0 1px rgba(95,180,236,.08),
    0 30px 80px rgba(0,0,0,.6),
    0 0 60px rgba(95,180,236,.08) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
}
.auth-head {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(95,180,236,.1);
  margin-bottom: 16px;
}
.auth-head h3 {
  font-family: 'Cinzel', 'Lora', serif;
  letter-spacing: .08em;
  font-size: 1.2rem;
  margin: 8px 0 6px;
  color: var(--ink);
}
.auth-head p {
  font-size: .88rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.auth-tabs {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(95,180,236,.15);
  margin-bottom: 16px;
}
.auth-tabs button {
  flex: 1; padding: 9px;
  font-size: .88rem; font-weight: 500;
  background: transparent;
  transition: background .2s ease, color .2s ease;
  border-radius: 0;
}
.auth-tabs button.on {
  background: rgba(95,180,236,.15);
  color: var(--moon);
}
#btnDoLogin, #btnDoReg {
  margin-top: 4px;
  font-family: 'Cinzel', serif;
  letter-spacing: .08em;
}
.google-btn {
  border: 1px solid rgba(255,255,255,.1) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  font-size: .9rem;
}
.google-btn:hover {
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.05) !important;
}
.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  color: var(--ink-mute); font-size: .8rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1;
  height: 1px; background: rgba(95,180,236,.15);
}

/* ============================================================
   NODY INSIGHT PANEL — "Nody giải thêm" (đã thêm ở trên)
   ============================================================ */
.nody-ask-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: .88rem !important;
  border: 1px solid rgba(95,180,236,.25) !important;
  background: rgba(95,180,236,.06) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  width: 100%;
  justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.nody-ask-btn:hover {
  border-color: rgba(95,180,236,.5) !important;
  background: rgba(95,180,236,.12) !important;
}
.nody-ask-icon { font-size: 1.2rem; }

.nody-thinking-wrap {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 0; gap: 8px;
}

.nody-insight-panel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(95,180,236,.2);
  overflow: hidden;
  background: rgba(95,180,236,.04);
}
.nody-insight-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(95,180,236,.08);
  border-bottom: 1px solid rgba(95,180,236,.12);
  font-family: 'Cinzel', 'Lora', serif;
  font-size: .8rem; letter-spacing: .1em;
  color: var(--moon);
}
.nody-avatar { font-size: 1.2rem; }
.nody-insight-body {
  padding: 14px 16px;
  font-size: .88rem; line-height: 1.75;
  color: var(--ink);
}

/* ============================================================
   DAILY CARD — lá bài hàng ngày đẹp hơn
   ============================================================ */
.daily-card-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.daily-card-glow {
  position: absolute; inset: -20%;
  background: radial-gradient(circle,
    rgba(95,180,236,.15) 0%, transparent 70%);
  pointer-events: none;
  animation: cosmicPulse 4s ease-in-out infinite;
}

/* ============================================================
   RESULT PANELS — unified beautiful style
   ============================================================ */
.result {
  border-radius: 18px !important;
  border: 1px solid rgba(95,180,236,.12) !important;
  background: rgba(255,255,255,.02) !important;
}
.result blockquote {
  border-left: 2px solid rgba(95,180,236,.35) !important;
  background: rgba(95,180,236,.04) !important;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--ink-mute);
}