/*
 * Lớp nâng cấp theo taste skill: nền tối có ánh sáng cho khối chính, sơ đồ bộ lọc,
 * cảnh UI sống ở màn đăng nhập, và lớp chuyển động (số liệu lấy từ references/motion.md).
 * Nạp sau webapp.css.
 */

:root {
  --m-in: 150ms; --m-out: 120ms; --m-press: 90ms; --m-lift: 180ms;
  --m-cycle: 3.6s;
  --m-ease: cubic-bezier(.2, .8, .2, 1);
  --m-ease-enter: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Chữ: tiêu đề không dùng 700, dựa vào cỡ và tracking ---------- */
.page-head h1 { font-weight: 600; font-size: 1.75rem; letter-spacing: -0.022em; }
.panel__head h2, .plan__name { font-weight: 600; }
.plan__price, .kpi__value, .stats3 b { font-weight: 600; letter-spacing: -0.02em; }
.auth__form h1 { font-weight: 600; letter-spacing: -0.035em; }

/* ---------- Icon thương hiệu thật ---------- */
.brand-ic { display: inline-block; flex: none; object-fit: contain; vertical-align: middle; }
.ext-hint { display: flex; gap: var(--space-3); align-items: flex-start; }
.ext-hint .brand-ic { margin-top: 1px; }

/* ---------- Khối chính Tổng quan: nền than tối, lưới chấm, ánh đỏ ---------- */
.wall--deep {
  position: relative; isolation: isolate; overflow: clip;
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-8) var(--space-6);
  background: #1c1819; color: #f3efef;
  --color-text: #f3efef; --color-text-muted: #b9b1b2; --color-text-subtle: #8f8788; --color-border: rgba(255, 255, 255, .1);
  --status-unopened: rgba(255, 255, 255, .2); --status-opened: #f0514e;
}
.wall--deep::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 92% -10%, rgba(233, 69, 67, .38), transparent 62%),
    radial-gradient(45% 60% at 0% 110%, rgba(233, 69, 67, .12), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55));
          mask-image: linear-gradient(to bottom, #000 55%, rgba(0, 0, 0, .55));
}
.wall--deep .wall__head { margin-bottom: var(--space-2); }
.wall--deep .wall__headline { font-size: clamp(1.6rem, 2.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; max-width: 24ch; line-height: 1.15; color: #fff; }
.wall--deep .wall__headline .num { color: #fff; }
.wall--deep .wall__headline .wall__seen { color: #ff6b68; }
.wall__sub { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); max-width: 62ch; }
.wall--deep .wall__day b { color: #fff; }
.wall--deep .wall__tile { --mark-size: 20px; }
.wall--deep .etg-mark[data-state="opened"], .wall--deep .etg-mark[data-state="hot"] { filter: drop-shadow(0 0 6px rgba(240, 81, 78, .45)); }
.wall--deep .etg-mark[data-state="bounced"] { --mark-color: #c0435a; }
.wall--deep .wall__tile[data-hot]::after { border-color: #1c1819; }
.wall--deep .kpis { border-top-color: rgba(255, 255, 255, .1); }
.wall--deep .kpi + .kpi { border-left-color: rgba(255, 255, 255, .1); }
.wall--deep .kpi__value { color: #fff; font-size: 1.5rem; }
.wall--deep .kpi__delta { color: #6fd39a; }
.wall--deep .kpi__delta.is-down { color: #ff8a87; }
.wall--deep a { color: #ff8a87; }
.wall--deep .wall__tile.is-new .etg-mark { animation: tile-seen-deep 1.4s var(--m-ease-enter); }
@keyframes tile-seen-deep {
  0% { background: rgba(255, 255, 255, .2); transform: scale(1); filter: none; }
  35% { transform: scale(1.6); filter: drop-shadow(0 0 14px rgba(240, 81, 78, .95)); }
  100% { transform: scale(1); }
}

/* ---------- Sơ đồ bộ lọc (kit diagram) ---------- */
.filter-card__body { padding: var(--space-2) var(--space-5) var(--space-5); }
.filter-card .dg {
  --ink: var(--color-text); --muted: var(--color-text-muted); --accent: var(--color-brand); --accent-ink: #fff;
  --bg: var(--color-surface); --card: var(--color-surface); --font-text: var(--font-sans); --r-sm: 8px;
  min-height: 260px;
}
.filter-card .dg-fallback { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }

/* ---------- Nút tạm dừng vòng lặp: đĩa tròn 32px ---------- */
.loop-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none;
  background: var(--color-text); color: var(--color-surface); margin-left: var(--space-2);
  transition: transform var(--m-in) var(--m-ease), background var(--m-in);
}
.loop-btn:active { transform: translateY(1px) scale(.96); }
.feed.is-paused .feed__live { color: var(--color-text-subtle); }
.feed.is-paused .feed__live::before { animation: none; }

/* ---------- Màn đăng nhập: cảnh UI sống ---------- */
.auth__side {
  background: #1c1819; justify-content: center; gap: var(--space-8);
}
.auth__side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(233, 69, 67, .42), transparent 65%),
    radial-gradient(50% 45% at 10% 100%, rgba(233, 69, 67, .16), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 1.4px) 0 0 / 20px 20px;
}
.auth__side > * { position: relative; }
.auth__quote { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; max-width: 22ch; }

.story {
  position: relative; width: min(100%, 560px); background: #fff; color: var(--ink-900); border-radius: 16px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); padding: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
}
.story__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--ink-100); font-weight: 600; }
.story__count { margin-left: auto; font-weight: 500; color: var(--ink-500); font-size: var(--text-xs); }
.story__row { display: grid; grid-template-columns: 20px 150px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 13px var(--space-5); border-bottom: 1px solid var(--ink-100); }
.story__row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story__row span:not(.etg-mark):not(.story__mark) { color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story__row time { color: var(--ink-500); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.story__row .etg-mark { --mark-size: 18px; --mark-color: var(--ink-400); }
.story__row .etg-mark[data-state="opened"] { --mark-color: var(--red-500); }
.story__mark { position: relative; width: 18px; height: 18px; display: inline-block; }
.story__mark .etg-mark { position: absolute; inset: 0; }
.story__mark-on { opacity: 0; transform: scale(.6); }
.story__row--live { background: var(--ink-0); }
.story__toast {
  position: absolute; right: -28px; top: -34px; width: 300px; display: flex; gap: var(--space-3); align-items: center;
  background: #fff; border-radius: 12px; padding: var(--space-3) var(--space-4); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45), 0 0 0 1px rgba(35, 31, 32, .06);
  opacity: 0; transform: translateY(-10px) scale(.98);
}
.story__toast b { display: block; font-size: var(--text-sm); }
.story__toast span { display: block; font-size: var(--text-xs); color: var(--ink-600); }
.loop-btn--story { position: absolute; right: 12px; bottom: 12px; background: var(--ink-900); color: #fff; }

/* Một vòng 3,6 giây: dòng giữa sáng lên, dấu chuyển đỏ, thông báo trượt vào, giữ, rồi đặt lại */
.story .story__mark-on { animation: story-mark var(--m-cycle) var(--m-ease-enter) infinite; }
.story .story__row--live { animation: story-row var(--m-cycle) linear infinite; }
.story .story__toast { animation: story-toast var(--m-cycle) var(--m-ease-enter) infinite; }
.story.is-paused * { animation-play-state: paused !important; }
@keyframes story-mark { 0%, 22% { opacity: 0; transform: scale(.6); } 32% { opacity: 1; transform: scale(1.35); } 40%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes story-row { 0%, 22% { background: #fff; } 30%, 88% { background: var(--red-50); } 100% { background: #fff; } }
@keyframes story-toast { 0%, 36% { opacity: 0; transform: translateY(-10px) scale(.98); } 46%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- Lớp chuyển động (hover chỉ cho chuột) ---------- */
.btn { transition: transform var(--m-out) var(--m-ease), background var(--m-out), border-color var(--m-out), color var(--m-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); transition-duration: var(--m-in); }
  .btn--primary:hover { background: color-mix(in oklab, var(--color-brand) 86%, var(--ink-900)); border-color: transparent; }
  /* thẻ có link: nhấc 2px, viền đậm một bậc, bóng mềm chỉ khi hover */
  .rem, .feed__item, .tpl-list button, .plan--pick, .todo li, .wall__tile .etg-mark {
    transition: transform var(--m-out) var(--m-ease), box-shadow var(--m-out), border-color var(--m-out), background var(--m-out);
  }
  .rem:hover, .plan--pick:hover {
    transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: 0 10px 24px -12px rgba(35, 31, 32, .18);
    transition-duration: var(--m-lift);
  }
  .feed__item:hover, .todo li:hover { background: var(--color-surface-sunken); }
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--m-press); }

/* Link trong chữ: gạch chân vẽ từ trái sang */
.link-draw { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--m-out) var(--m-ease); }
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 1px; transition-duration: var(--m-in); }

/* Công tắc: núm trượt và giãn 4px khi đang nhấn (chỉ transform) */
.switch span::after { transition: transform 180ms var(--m-ease); }
.switch input:active + span::after { transform: scaleX(1.25); transform-origin: left; }
.switch input:checked:active + span::after { transform: translateX(16px) scaleX(1.25); transform-origin: right; }

/* ---------- Màn vào khi tải: tiêu đề trồi lên từng dòng, phần sau hiện dần, khối chính lắng lại ---------- */
.m-enter .page-head h1, .m-enter .auth__form h1 { overflow: hidden; }
.m-enter .page-head h1 .m-line, .m-enter .auth__form h1 .m-line { display: inline-block; transform: translateY(105%); animation: m-rise 700ms var(--m-ease-enter) forwards; }
.m-enter .page-head h1 .m-line:nth-child(2), .m-enter .auth__form h1 .m-line:nth-child(2) { animation-delay: 80ms; }
.m-enter .m-up { opacity: 0; animation: m-fade-up 520ms var(--m-ease-enter) forwards; }
.m-enter .m-settle { animation: m-settle 900ms var(--m-ease-enter) both; }
@keyframes m-rise { to { transform: none; } }
@keyframes m-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes m-settle { from { transform: scale(.98); } to { transform: none; } }

@media (max-width: 640px) {
  .story__row { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .story__row span:not(.etg-mark):not(.story__mark) { display: none; }
  .story__toast { right: 8px; width: 260px; }
  .wall--deep { padding: var(--space-6) var(--space-5) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .story .story__mark-on { animation: none; opacity: 1; transform: none; }
  .story .story__toast { animation: none; opacity: 1; transform: none; }
  .story .story__row--live { animation: none; background: var(--red-50); }
  .loop-btn { display: none; }
  .m-enter .page-head h1 .m-line, .m-enter .auth__form h1 .m-line, .m-enter .m-up, .m-enter .m-settle { animation: none; opacity: 1; transform: none; }
  .btn:hover, .btn:active, .rem:hover, .plan--pick:hover { transform: none; }
}

/* Feed ở gói Free: tiêu đề thư vẫn đọc được, chỉ làm mờ người mở và nơi mở */
.feed__locked { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; min-width: 0; }
.feed__locked .locked__blur { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.feed__unlock { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--color-brand); text-decoration: none; }
.feed__unlock:hover { text-decoration: underline; }

/* Màn rộng: tiêu đề một mạch, ô dấu lớn dần theo bề ngang để không trống dải giữa */
.wall--deep .wall__headline { max-width: none; }
.wall--deep .wall__tile { --mark-size: clamp(20px, 1.55vw, 30px); }
.wall--deep .wall__tiles { gap: clamp(4px, .4vw, 7px); }
.wall--deep .wall__rows { gap: clamp(7px, .6vw, 11px); }

/* Sơ đồ bộ lọc và nhắc việc đứng cạnh nhau trên màn rộng */
.overview__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 1500px) { .overview__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.filter-card .dg { max-width: 640px; margin-inline: auto; }

/* Dải 48px dưới cảnh minh họa dành cho nút tạm dừng, không đè lên dòng thư */
.story { padding-bottom: 48px; }
.story__row:last-of-type { border-bottom: 0; }
@media (max-width: 640px) { .filter-card .dg { min-height: 340px; } .filter-card__body { padding-top: var(--space-4); } }