/* ============================================================
   K-FIT UPGRADE LAYER — "Master" visual pass (2026-09)
   Nguồn: Linear (viền trắng-alpha + conic glow), WHOOP (metric-first,
   tabular-nums), M3 Expressive (spring motion), Apple Liquid Glass
   (điều khiển thuỷ tinh nổi), CSS-Tricks (grain feTurbulence).
   Lớp phủ: không đụng style.css, chỉ nâng cấp — giảm khi xoá file này.
   ============================================================ */

/* ——— Tokens v2: elevation kiểu Linear (trắng-alpha), glass, specular ——— */
:root {
  --wa-1: rgba(255, 255, 255, 0.05);   /* hairline */
  --wa-2: rgba(255, 255, 255, 0.08);   /* border */
  --wa-3: rgba(255, 255, 255, 0.12);   /* border strong */
  --glass: rgba(15, 17, 26, 0.62);
  --specular: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  --glow-accent: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 8px 40px rgba(99, 102, 241, 0.22);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --font-num: "Sora", ui-monospace, monospace;
}

/* ——— Nền: grain chống banding + selection + scrollbar ——— */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.032; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: rgba(99, 102, 241, 0.45); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2a2f42 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #2a2f42; border-radius: 99px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* ——— NAV: Liquid Glass + specular + scroll-progress ——— */
.nav {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--wa-1);
  box-shadow: var(--specular), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); opacity: 0.85;
}
@supports (animation-timeline: scroll()) {
  .nav::after { animation: navProgress linear both; animation-timeline: scroll(root block); }
  @keyframes navProgress { to { transform: scaleX(1); } }
}

/* ——— BUTTON: sweep specular trên primary, glass trên ghost ——— */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn:hover::before { transform: translateX(120%); transition: transform 0.7s var(--ease); }
.btn-primary { box-shadow: var(--specular), 0 6px 26px rgba(99, 102, 241, 0.38); }
.btn-primary:hover { box-shadow: var(--specular), 0 10px 40px rgba(99, 102, 241, 0.55); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--wa-2);
  box-shadow: var(--specular);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--wa-3); }

/* ——— HERO: lưới mask + aurora conic + type display ——— */
.hero-bg {
  background:
    radial-gradient(760px 380px at 15% -5%, rgba(99, 102, 241, 0.26), transparent 62%),
    radial-gradient(680px 340px at 88% 8%, rgba(34, 211, 238, 0.18), transparent 62%),
    radial-gradient(1000px 540px at 50% 112%, rgba(52, 211, 153, 0.08), transparent 70%);
}
.hero-bg::before, .hero-bg::after { opacity: 0.6; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 62% at 50% 38%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 38%, #000 30%, transparent 78%);
}
.hero h1 {
  font-size: clamp(44px, 7.6vw, 78px);
  letter-spacing: -0.04em;
  line-height: 1.04;
}
.hero h1 .grad { background-size: 200% auto; }
.hero-sub { font-size: 18px; max-width: 660px; }
.hero-sub strong { color: var(--text); font-weight: 600; }

/* badge: dot sống */
.hero-badge {
  background: var(--glass); border-color: var(--wa-2);
  backdrop-filter: blur(10px); box-shadow: var(--specular);
  color: var(--text); display: inline-flex; align-items: center; gap: 9px;
}
.hero-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 10px var(--success); animation: badgePulse 2.2s ease-out infinite;
}
@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* hero stats: spotlight card + tabular nums */
.hero-stats > div {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--wa-2); box-shadow: var(--specular);
  backdrop-filter: blur(8px); border-radius: var(--r-lg);
}
.hero-stats > div::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.16), transparent 70%);
}
.hero-stats > div:hover::before { opacity: 1; }
.hero-stats b { font-variant-numeric: tabular-nums; }

/* ——— SECTION: eyebrow + head refined ——— */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-2));
}
.eyebrow::after { background: linear-gradient(90deg, var(--accent-2), transparent); }
.section-head h2 { letter-spacing: -0.03em; }
.section-alt { background: linear-gradient(180deg, var(--bg-alt), var(--bg) 130%); border-color: var(--wa-1); }

/* ——— CARDS: icon tile SVG + spotlight + gradient-border hover ——— */
.ic-tile {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(34, 211, 238, 0.12));
  border: 1px solid rgba(99, 102, 241, 0.38);
  box-shadow: var(--specular), 0 4px 18px rgba(99, 102, 241, 0.18);
  margin-bottom: 16px;
}
.ic-tile svg { width: 22px; height: 22px; color: #a5b4fc; }
.ic-tile.green { background: linear-gradient(135deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.06)); border-color: rgba(52, 211, 153, 0.35); }
.ic-tile.green svg { color: var(--success); }
.ic-tile.amber { background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.05)); border-color: rgba(251, 191, 36, 0.35); }
.ic-tile.amber svg { color: var(--warning); }
.ic-tile.sm { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 0; flex-shrink: 0; }
.ic-tile.sm svg { width: 19px; height: 19px; }

.card, .data-box, .step, .academy-card, .stat-card {
  position: relative; overflow: hidden;
  border-color: var(--wa-1);
  box-shadow: var(--specular);
}
.card::after, .data-box::after, .step::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-med);
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, 0.12), transparent 70%);
  pointer-events: none;
}
.card:hover::after, .data-box:hover::after, .step:hover::after { opacity: 1; }
.card:hover, .data-box:hover, .step:hover {
  border-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(34, 211, 238, 0.4)) border-box;
  box-shadow: var(--specular), var(--e-2);
  transform: translateY(-4px);
}
.card-icon { display: none; }  /* emoji cũ → ic-tile SVG */
.data-box h3 { display: flex; align-items: center; gap: 12px; }
.data-box .ic-tile.sm { margin-bottom: 0; }
.step-n {
  box-shadow: var(--specular), 0 4px 16px rgba(99, 102, 241, 0.35);
  font-variant-numeric: tabular-nums;
}

/* ——— MODAL: Liquid Glass + spring ——— */
.modal {
  background: linear-gradient(180deg, rgba(24, 27, 40, 0.92), rgba(17, 19, 30, 0.96));
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--wa-2);
  box-shadow: var(--specular), 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 90px rgba(99, 102, 241, 0.09);
  animation: popSpring 0.42s var(--spring);
}
@keyframes popSpring {
  from { transform: scale(0.92) translateY(14px); opacity: 0; }
  60% { transform: scale(1.012) translateY(-2px); }
  to { transform: none; opacity: 1; }
}
.modal-overlay { backdrop-filter: blur(12px) saturate(1.2); }
.q-opt {
  border-color: var(--wa-1); background: rgba(255, 255, 255, 0.028);
  box-shadow: var(--specular);
}
.q-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.q-input { border-color: var(--wa-2); background: rgba(255, 255, 255, 0.03); box-shadow: var(--specular); }

/* ——— DASHBOARD: metric-first (WHOOP) ——— */
.dash-topbar {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.5);
  border-bottom-color: var(--wa-1);
  box-shadow: var(--specular);
}
.dash-tab { border-radius: 11px; transition: color var(--t-fast), background var(--t-fast); }
.dash-tab.active {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--wa-2);
  box-shadow: var(--specular);
}
.stat-card .value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-card .label { letter-spacing: 0.12em; }
.stat-card.hl { background: linear-gradient(160deg, rgba(99, 102, 241, 0.13), rgba(34, 211, 238, 0.05) 60%, transparent), var(--card); }
.day-tab.active { box-shadow: var(--specular), 0 0 0 1px rgba(99, 102, 241, 0.3), 0 4px 18px rgba(99, 102, 241, 0.18); }
.ex-num { border: 1px solid rgba(99, 102, 241, 0.35); box-shadow: var(--specular); font-variant-numeric: tabular-nums; }
.ex-card:hover { border-color: var(--wa-2); }
.meal-kcal, .wlog-row b { font-variant-numeric: tabular-nums; }
.macro { border: 1px solid var(--wa-1); }
.mini-btn { background: rgba(255, 255, 255, 0.035); border-color: var(--wa-2); }
.mini-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ——— Toast glass ——— */
.toast {
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--wa-2); box-shadow: var(--specular), var(--e-2);
  border-radius: var(--r-lg);
}

/* ——— Footer ——— */
.footer { border-top-color: var(--wa-1); }
.footer a { color: var(--accent-2); text-decoration-color: rgba(34, 211, 238, 0.4); }
.footer a:hover { color: var(--text); }

/* ——— Motion: entrance stagger cho landing ——— */
[data-reveal] { opacity: 0; transform: translateY(18px) scale(0.99); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ——— Mobile ——— */
@media (max-width: 640px) {
  .hero h1 { letter-spacing: -0.03em; }
  .hero::before { background-size: 44px 44px; }
  .hero-stats > div { min-width: 44%; }
}

/* ——— Người nhạy cảm chuyển động: tắt hết hiệu ứng trang trí ——— */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before, .hero-bg::after, .hero h1 .grad, .hero-badge::before { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .nav::after { display: none; }
}

/* ——— In / Xuất PDF giáo án (Ctrl+P trên dashboard) ——— */
@media print {
  :root { --bg: #fff; --text: #111; }
  body { background: #fff !important; color: #111 !important; }
  .nav, .hero, .section, .footer, .dash-tabs, .btn, .mini-btn, .ex-links,
  .ex-thumbs, .academy-strip, .day-tabs, #w-save, .modal-overlay,
  .resume-banner, #toast-container, .q-nav { display: none !important; }
  .dash-topbar { display: none !important; }
  .dash-wrap { max-width: 100% !important; padding: 0 !important; }
  .dash-welcome h2, .dash-section h2 { color: #111 !important; }
  .dash-welcome .grad, .grad { -webkit-text-fill-color: #111 !important; color: #111 !important; }
  .stat-card, .ex-card, .meal-card, .warmup-card, .health-banner, .recovery-banner,
  .wlog-row, .goal-progress {
    background: #fff !important; border: 1px solid #ccc !important;
    box-shadow: none !important; color: #111 !important;
    break-inside: avoid;
  }
  .stat-card .value, .ex-card h4, .meal-card h4, .ex-meta, .meal-ingredients,
  .meal-kcal, .stat-card .label, .stat-card .sub { color: #111 !important; }
  .tag { background: #f1f1f1 !important; color: #333 !important; border: 1px solid #ddd !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .dash-section { display: block !important; }
  .dash-section[hidden] { display: none !important; }
  section#tab-tap .ex-list[hidden] { display: none !important; }
}