/* ============================================================
   HOVER FX — one distinct motion language per page
   Shared: silky easing, gold as the accent signal
   ============================================================ */

:root {
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 520ms;
}

/* ------------------------------------------------------------
   Global numeral font — tabular, equal-height digits
   Overrides Playfair for numbers so they don't bounce.
   ------------------------------------------------------------ */
.numeral,
.qs-val,
.kpi-num,
.stage-row .sct,
.goal-pct,
.rev-amt,
.an-num,
.an-hero-num .num,
.an-stat .v,
.csum .v,
.level-title,
.lead-av,
.mc-num,
.tp-rank,
.delta,
.delta-pill,
.rank,
.big-num {
  font-family: 'DM Serif Display', 'EB Garamond', 'Playfair Display', Georgia, serif !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: -0.01em;
  font-style: normal !important;
}
/* Mono-based numbers stay mono */
.col-count, .bar-val, .focus-xp, .rev-date,
.lead-stage, .goal-dd, .kpi-sub, .timer-time {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ISSUE FIXES — clipping, spacing, calendar borders
   ============================================================ */

/* Task columns — allow task hover translateX to breathe,
   keep column visually tidy with padded list overflow */
[data-page="tasks"] .col { overflow: visible; }
[data-page="tasks"] .col-list { overflow-y: auto; overflow-x: visible; }
[data-page="tasks"] .task { transform-origin: left center; }
/* Task-board also needs the page scroll container to allow overflow for hover lifts */
[data-page="tasks"] .board { overflow: visible; }

/* Pills horizontal scroll — prevent vertical clip so scale(1.03) doesn't get cut */
[data-page="tasks"] .pills {
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 2px 8px;
  margin: -6px -2px 8px;
}

/* Quality stats — give the ◆ inline space, not absolute */
[data-page="insights"] .qs-row {
  padding: 14px 0;
  padding-left: 0 !important;
  transition: background var(--dur) var(--ease-silk);
  border-radius: 6px;
}
[data-page="insights"] .qs-row::before {
  content: none;
}
[data-page="insights"] .qs-row::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out-expo);
  border-radius: 2px;
}
[data-page="insights"] .qs-row {
  position: relative;
  padding-left: 10px !important;
}
[data-page="insights"] .qs-row:hover {
  background: rgba(212,175,55,0.04);
}
[data-page="insights"] .qs-row:hover::after { transform: scaleY(0.7); }
[data-page="insights"] .qs-lbl {
  transition: color var(--dur) var(--ease-silk), transform var(--dur) var(--ease-silk);
}
[data-page="insights"] .qs-row:hover .qs-lbl { color: var(--ink); transform: translateX(3px); }

/* Calendar Saturday border — rebuild borders using outer wrapper */
[data-page="content"] .monthcal {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
[data-page="content"] .mc-day,
[data-page="content"] .mc-dow {
  border-right: 1px solid var(--line) !important;
}
[data-page="content"] .mc-day:nth-child(7n),
[data-page="content"] .mc-dow:nth-child(7n) {
  border-right: 1px solid var(--line) !important;
}
/* The header row has 7 .mc-dow which shift the day cells' 7n count.
   Row 1 is dow 1-7. Day 1 sits on Wed (index 4 in row 2) → cells 1..7 in DOM
   after the 7 dow are: (day -3 blanks, day1..day4). So Saturday of each week
   = days {4, 11, 18, 25} in this April 2026. We can't easily target by nth-child
   because of leading blanks, so just keep borders uniform. */

/* Ensure page has room for hover scale on the right edge */
[data-page="content"] .monthcal {
  overflow: hidden;
  border-radius: 0;
}
/* Give monthcal a clip fix but still allow hover scale to show — wrap effect via box-shadow instead of transform scale clipping */
[data-page="content"] .mc-day:not(.blank):hover {
  /* override: keep scale but make sure overflow isn't clipped */
  position: relative;
  z-index: 10;
}

/* Main scroll area & page should not cut hover effects vertically */
.main .scroll { overflow-y: auto; overflow-x: hidden; }
.page { padding-bottom: 48px; }

/* ============================================================
   SHARED SHELL — rail, title bar, header chips, buttons
   ============================================================ */

/* Hover effects are DESKTOP-ONLY. On touch devices (hover:none) a :hover sticks
   after a tap (feels broken) and the rail active-marker grows wrong. Gate all of
   the hover motion below so it only runs where there's a real pointer. */
@media (hover: hover) and (pointer: fine) {

/* --- Rail buttons: gold bar slides in from left + icon settles up --- */
.rail-btn {
  position: relative;
  overflow: hidden;
  transition: color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk);
}
.rail-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-out-expo),
              box-shadow var(--dur) var(--ease-silk);
}
.rail-btn:hover::before { height: 28px; box-shadow: 0 0 12px var(--gold); }
.rail-btn.active::before { height: 36px; box-shadow: 0 0 16px var(--gold); }
.rail-btn i {
  transition: transform var(--dur) var(--ease-spring),
              color var(--dur) var(--ease-silk),
              filter var(--dur) var(--ease-silk);
}
.rail-btn:hover i {
  transform: translateY(-2px) scale(1.08);
  filter: drop-shadow(0 4px 10px rgba(212,175,55,0.4));
}
.rail-btn:hover .lbl { transform: translateX(2px); transition: transform var(--dur) var(--ease-silk); }

/* --- Title bar buttons: gentle press-down feel --- */
.tb-btn {
  position: relative;
  transition: background var(--dur-fast) var(--ease-silk),
              color var(--dur-fast) var(--ease-silk),
              transform var(--dur-fast) var(--ease-spring);
}
.tb-btn:hover { transform: scale(1.08); }
.tb-btn:active { transform: scale(0.92); }

/* --- Header chips (streak / level / focus): gold bloom + counter shimmer --- */
.chip {
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
.chip::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(212,175,55,0.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-silk);
  pointer-events: none;
}
.chip:hover {
  transform: translateY(-1px);
  border-color: var(--gold-30);
}
.chip:hover::after { opacity: 1; }
.chip:hover i { animation: chipSpin 800ms var(--ease-spring); }
.chip .k { transition: color var(--dur) var(--ease-silk), letter-spacing var(--dur) var(--ease-silk); }
.chip:hover .k { color: var(--gold-hi); letter-spacing: 0.08em; }
@keyframes chipSpin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* --- Primary & ghost buttons: magnetic rise --- */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-silk);
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out-expo);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:hover::before { transform: translateX(120%); }

.btn-ghost {
  transition: background var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              letter-spacing var(--dur) var(--ease-silk);
}
.btn-ghost:hover { letter-spacing: 0.1em; }

/* --- Card action links: pull-arrow reveal --- */
.card-action { transition: color var(--dur) var(--ease-silk), gap var(--dur) var(--ease-silk); }
.card-action:hover { gap: 10px; }

/* --- Titlebar controls: rotation on hover --- */
.tb-btn:hover i { transition: transform var(--dur) var(--ease-spring); }
.tb-btn[title="Theme"]:hover i { transform: rotate(-20deg); }
.tb-btn[title="Settings"]:hover i { transform: rotate(60deg); }
.tb-btn[title="Notifications"]:hover i { animation: bellRing 600ms var(--ease-spring); }
@keyframes bellRing {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}

/* ============================================================
   OVERVIEW — "lift & underglow"
   Cards rise, a gold glow blooms from below, gradient edge sweep
   ============================================================ */
[data-page="overview"] .card.kpi,
[data-page="overview"] .card {
  position: relative;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              border-color var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="overview"] .card::before {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: -12px; height: 24px;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.5), transparent 70%);
  opacity: 0; filter: blur(14px);
  transition: opacity var(--dur-slow) var(--ease-silk);
  pointer-events: none;
}
[data-page="overview"] .card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(212,175,55,0.25) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-silk), background-position 900ms var(--ease-out-expo);
  pointer-events: none;
  mix-blend-mode: overlay;
}
[data-page="overview"] .card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-30);
  box-shadow: var(--shadow-card), 0 24px 60px -24px rgba(212,175,55,0.35);
}
[data-page="overview"] .card:hover::before { opacity: 1; }
[data-page="overview"] .card:hover::after { opacity: 1; background-position: -100% 0; }

/* Assistant card — bespoke hover (doesn't lift, breathes instead) */
[data-page="overview"] .card.assistant {
  transform: none !important;
  transition: border-color var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk) !important;
}
[data-page="overview"] .card.assistant::before,
[data-page="overview"] .card.assistant::after {
  content: none !important;
}
[data-page="overview"] .card.assistant:hover {
  transform: none !important;
  border-color: var(--gold-30);
  box-shadow: var(--shadow-card),
              inset 0 0 0 1px rgba(212,175,55,0.12),
              0 0 50px -20px rgba(212,175,55,0.25);
}
/* Connected pulse dot intensifies */
[data-page="overview"] .card.assistant .mlabel {
  transition: letter-spacing var(--dur) var(--ease-silk),
              text-shadow var(--dur) var(--ease-silk);
}
[data-page="overview"] .card.assistant:hover .mlabel {
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(110,192,138,0.5);
}
/* Card title logo gently ticks */
[data-page="overview"] .card.assistant .card-title img {
  transition: transform var(--dur-slow) var(--ease-spring),
              filter var(--dur-slow) var(--ease-silk);
}
[data-page="overview"] .card.assistant:hover .card-title img {
  transform: rotate(-8deg) scale(1.15);
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.6));
}
/* Input row — tracks focus with a gold underline */
[data-page="overview"] .asst-input {
  position: relative;
}
[data-page="overview"] .asst-input::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
[data-page="overview"] .card.assistant:hover .asst-input::after,
[data-page="overview"] .asst-input:focus-within::after {
  transform: scaleX(1);
}
[data-page="overview"] .asst-send {
  transition: transform var(--dur) var(--ease-spring),
              background var(--dur) var(--ease-silk);
}
[data-page="overview"] .asst-send:hover {
  transform: translateY(-1px) scale(1.08);
}
[data-page="overview"] .asst-send i { transition: transform var(--dur) var(--ease-spring); }
[data-page="overview"] .asst-send:hover i { transform: translateY(-3px); }

/* Messages breathe on card hover */
[data-page="overview"] .asst-msg {
  transition: transform var(--dur-slow) var(--ease-silk),
              opacity var(--dur) var(--ease-silk);
}
[data-page="overview"] .card.assistant:hover .asst-msg.bot {
  transform: translateX(2px);
}

/* Numerals count-up flourish */
[data-page="overview"] .card:hover .numeral {
  transition: color var(--dur-slow) var(--ease-silk), text-shadow var(--dur-slow) var(--ease-silk);
  text-shadow: 0 0 24px rgba(212,175,55,0.3);
}

/* Focus list items — pull tab slides in */
[data-page="overview"] .focus-item {
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease-silk),
              padding-left var(--dur) var(--ease-out-expo);
}
[data-page="overview"] .focus-item::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px;
  background: var(--gold);
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease-out-expo);
}
[data-page="overview"] .focus-item:hover { padding-left: 28px; background: rgba(212,175,55,0.04); }
[data-page="overview"] .focus-item:hover::before { transform: translateX(0); }
[data-page="overview"] .focus-check { transition: border-color var(--dur) var(--ease-silk), transform var(--dur) var(--ease-spring); }
[data-page="overview"] .focus-item:hover .focus-check { transform: scale(1.15); border-color: var(--gold); }
[data-page="overview"] .focus-xp { transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-silk); }
[data-page="overview"] .focus-item:hover .focus-xp { transform: translateX(-4px) scale(1.08); color: var(--gold-hi); }

/* ============================================================
   TASKS — "slide & fill"
   Tasks reveal a gold progress fill from left, checkbox morphs
   ============================================================ */
[data-page="tasks"] .task {
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="tasks"] .task::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(212,175,55,0.12), transparent 60%);
  transform: translateX(-100%);
  transition: transform 460ms var(--ease-out-expo);
  pointer-events: none;
}
[data-page="tasks"] .task:hover {
  transform: translateX(3px);
  border-color: var(--gold-30);
}
[data-page="tasks"] .task:hover::before { transform: translateX(0); }

/* Checkbox: morph ring + sparkle */
[data-page="tasks"] .t-check {
  transition: border-color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring),
              box-shadow var(--dur) var(--ease-silk);
}
[data-page="tasks"] .task:hover .t-check {
  transform: rotate(-12deg) scale(1.18);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.12), 0 0 20px rgba(212,175,55,0.3);
}

/* Priority tags & project label — subtle slide */
[data-page="tasks"] .t-meta > * {
  transition: transform var(--dur) var(--ease-silk), letter-spacing var(--dur) var(--ease-silk);
}
[data-page="tasks"] .task:hover .t-meta > * { letter-spacing: 0.12em; }

/* Project pills — active state grows */
[data-page="tasks"] .pill {
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring),
              border-color var(--dur) var(--ease-silk);
}
[data-page="tasks"] .pill::after {
  content: '';
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  background: radial-gradient(circle, var(--gold-10), transparent);
  transform: translate(-50%, -50%);
  transition: width 420ms var(--ease-out-expo), height 420ms var(--ease-out-expo);
  pointer-events: none; border-radius: 50%;
}
[data-page="tasks"] .pill:hover {
  transform: translateY(-1px) scale(1.03);
  border-color: var(--gold-30);
}
[data-page="tasks"] .pill:hover::after { width: 220%; height: 500%; }
[data-page="tasks"] .pill .dot { transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-silk); }
[data-page="tasks"] .pill:hover .dot { transform: scale(1.8); box-shadow: 0 0 10px currentColor; }

/* Add row: grow gold dashed */
[data-page="tasks"] .add-row {
  transition: border-color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              letter-spacing var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="tasks"] .add-row:hover {
  transform: scale(1.01);
  letter-spacing: 0.08em;
}
[data-page="tasks"] .add-row i { transition: transform var(--dur) var(--ease-spring); }
[data-page="tasks"] .add-row:hover i { transform: rotate(180deg) scale(1.2); }

/* Column head: dot pulses when hovering the column */
[data-page="tasks"] .col { transition: background var(--dur) var(--ease-silk); }
[data-page="tasks"] .col:hover .col-dot { animation: dotPulse 1.4s var(--ease-silk) infinite; }
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
}

/* ============================================================
   BUSINESS — "magnetic lean"
   Lead cards tilt slightly, pipeline bars pulse, arrows project
   ============================================================ */
[data-page="business"] .card {
  transition: transform var(--dur-slow) var(--ease-out-expo),
              border-color var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk);
  transform-style: preserve-3d;
}
[data-page="business"] .four-col .card:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
  border-color: var(--gold-30);
  box-shadow: var(--shadow-card),
              -10px 10px 30px -15px rgba(0,0,0,0.6),
              10px 10px 30px -15px rgba(212,175,55,0.25);
}
[data-page="business"] .four-col .card:hover .lead-av {
  transform: translateZ(18px) scale(1.1);
  box-shadow: 0 8px 20px rgba(212,175,55,0.3);
}
[data-page="business"] .lead-av {
  transition: transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="business"] .lead-advance {
  transition: background var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring),
              padding var(--dur) var(--ease-silk);
}
[data-page="business"] .lead-advance:hover {
  background: var(--gold-10);
  color: var(--gold);
  transform: translateX(4px);
  padding: 8px 14px;
}
[data-page="business"] .lead-advance i { transition: transform var(--dur) var(--ease-spring); }
[data-page="business"] .lead-advance:hover i { transform: translateX(6px); }

/* Pipeline stage rows: bar fills with glow, count pops */
[data-page="business"] .stage-row {
  position: relative;
  padding: 8px 0;
  transition: padding-left var(--dur) var(--ease-out-expo);
  border-radius: 6px;
}
[data-page="business"] .stage-row::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  width: 2px; height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-out-expo);
}
[data-page="business"] .stage-row:hover { padding-left: 8px; }
[data-page="business"] .stage-row:hover::before { height: 70%; box-shadow: 0 0 10px var(--gold); }
[data-page="business"] .sct { transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-silk); }
[data-page="business"] .stage-row:hover .sct { transform: scale(1.2); color: var(--gold-hi); }

/* Revenue rows — amount slides in gold */
[data-page="business"] .rev-row {
  transition: background var(--dur) var(--ease-silk), padding-left var(--dur) var(--ease-out-expo);
  border-radius: 6px;
}
[data-page="business"] .rev-row:hover { background: rgba(255,255,255,0.025); padding-left: 8px; }
[data-page="business"] .rev-amt { transition: color var(--dur) var(--ease-silk), transform var(--dur) var(--ease-spring); }
[data-page="business"] .rev-row:hover .rev-amt { color: var(--gold-hi); transform: scale(1.06); }

/* Goal rows: percentage digit emphasizes */
[data-page="business"] .goal-row {
  padding: 10px 0;
  position: relative;
  transition: padding-left var(--dur) var(--ease-out-expo);
}
[data-page="business"] .goal-row:hover { padding-left: 6px; }
[data-page="business"] .goal-pct { transition: color var(--dur) var(--ease-silk), font-size var(--dur) var(--ease-silk); }
[data-page="business"] .goal-row:hover .goal-pct { color: var(--gold-hi); }

/* ============================================================
   CONTENT — "cinematic zoom"
   Calendar cells deepen & z-raise; analytics cards fan; sparkline re-draws
   ============================================================ */
[data-page="content"] .mc-day {
  transition: background var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk),
              z-index 0s;
  position: relative;
}
[data-page="content"] .mc-day:not(.blank):hover {
  background: rgba(212,175,55,0.08);
  box-shadow: inset 0 0 0 1px var(--gold-30),
              inset 0 -3px 0 0 var(--gold);
  z-index: 5;
}
[data-page="content"] .mc-day:not(.blank):hover .mc-num {
  color: var(--gold-hi);
  transition: color var(--dur) var(--ease-silk);
}
[data-page="content"] .mc-post {
  transition: transform var(--dur) var(--ease-out-expo),
              background var(--dur) var(--ease-silk),
              border-left-color var(--dur) var(--ease-silk);
}
[data-page="content"] .mc-day:hover .mc-post {
  transform: translateX(2px);
}
[data-page="content"] .mc-post:hover {
  transform: translateX(4px) scale(1.02);
  background: rgba(var(--pc-rgb, 255,255,255), 0.18) !important;
}

/* Analytics cards — fan/lift with icon rotation */
[data-page="content"] .an-card {
  transition: transform var(--dur-slow) var(--ease-out-expo),
              border-color var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="content"] .an-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(var(--pc-rgb), 0.6);
  box-shadow: 0 30px 50px -20px rgba(var(--pc-rgb), 0.35),
              0 0 0 1px rgba(var(--pc-rgb), 0.4);
}
[data-page="content"] .an-icon {
  transition: transform var(--dur-slow) var(--ease-spring);
}
[data-page="content"] .an-card:hover .an-icon {
  transform: rotate(-12deg) scale(1.15);
}
[data-page="content"] .an-card .an-num {
  transition: transform var(--dur-slow) var(--ease-spring),
              text-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="content"] .an-card:hover .an-num {
  transform: scale(1.06);
  text-shadow: 0 4px 20px rgba(var(--pc-rgb), 0.5);
}
[data-page="content"] .an-spark svg {
  transition: transform var(--dur-slow) var(--ease-out-expo);
  transform-origin: center;
}
[data-page="content"] .an-card:hover .an-spark svg {
  transform: scale(1.08);
}

/* Top posts */
[data-page="content"] .tp-row {
  transition: background var(--dur) var(--ease-silk),
              transform var(--dur-slow) var(--ease-out-expo),
              border-left-width var(--dur) var(--ease-silk);
}
[data-page="content"] .tp-row:hover {
  transform: translateX(6px);
  background: rgba(255,255,255,0.04);
  border-left-width: 6px;
}
[data-page="content"] .tp-rank {
  transition: transform var(--dur-slow) var(--ease-spring), color var(--dur) var(--ease-silk);
}
[data-page="content"] .tp-row:hover .tp-rank {
  transform: scale(1.3) rotate(-8deg);
  color: var(--gold-hi);
}
[data-page="content"] .tp-thumb { transition: transform var(--dur) var(--ease-spring); }
[data-page="content"] .tp-row:hover .tp-thumb { transform: scale(1.08); }

/* Sub-tabs & nav buttons */
[data-page="content"] .subtab {
  transition: color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="content"] .subtab:hover { transform: translateY(-1px); }
[data-page="content"] .subtab i { transition: transform var(--dur) var(--ease-spring); }
[data-page="content"] .subtab:hover i { transform: scale(1.2) rotate(-8deg); }

[data-page="content"] .nav-btn { transition: background var(--dur) var(--ease-silk), transform var(--dur) var(--ease-spring); }
[data-page="content"] .nav-btn:hover { transform: scale(1.08); }
[data-page="content"] .nav-btn:active { transform: scale(0.92); }

/* ============================================================
   INSIGHTS — "data shimmer"
   Bars stretch, ring emphasis, scan-line sweep, count shimmer
   ============================================================ */
[data-page="insights"] .card {
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-silk),
              box-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="insights"] .card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-100%);
  transition: transform 900ms var(--ease-out-expo);
  pointer-events: none;
}
[data-page="insights"] .card:hover {
  border-color: var(--gold-30);
  box-shadow: var(--shadow-card), 0 0 40px -10px rgba(212,175,55,0.15);
}
[data-page="insights"] .card:hover::before { transform: translateX(100%); }

/* Bars: individual scale + count up */
[data-page="insights"] .bar-wrap { transition: transform var(--dur) var(--ease-spring); }
[data-page="insights"] .bar-wrap:hover { transform: translateY(-3px); }
[data-page="insights"] .bar {
  transition: transform var(--dur-slow) var(--ease-out-expo),
              background var(--dur) var(--ease-silk),
              box-shadow var(--dur) var(--ease-silk);
  transform-origin: bottom;
}
[data-page="insights"] .bar-wrap:hover .bar {
  transform: scaleY(1.06) scaleX(1.15);
  box-shadow: 0 0 20px rgba(212,175,55,0.4);
  background: var(--gold-hi) !important;
}
[data-page="insights"] .bar-val {
  opacity: 0.6;
  transition: opacity var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="insights"] .bar-wrap:hover .bar-val {
  opacity: 1;
  color: var(--gold);
  transform: translateY(-4px) scale(1.15);
}

/* Quality stats rows — slide + gold emphasis */
[data-page="insights"] .qs-row {
  padding: 6px 0;
  transition: padding-left var(--dur) var(--ease-out-expo);
  position: relative;
}
[data-page="insights"] .qs-row::before {
  content: '◆';
  position: absolute; left: 0; top: 50%;
  color: var(--gold);
  opacity: 0;
  transform: translate(-12px, -50%);
  transition: opacity var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-out-expo);
  font-size: 8px;
}
[data-page="insights"] .qs-row:hover { padding-left: 14px; }
[data-page="insights"] .qs-row:hover::before { opacity: 1; transform: translate(0, -50%); }
[data-page="insights"] .qs-val {
  transition: color var(--dur) var(--ease-silk),
              letter-spacing var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="insights"] .qs-row:hover .qs-val {
  color: var(--gold-hi);
  letter-spacing: 0.04em;
  transform: scale(1.04);
}

/* Ring card — ring lights up */
[data-page="insights"] .card svg circle {
  transition: stroke var(--dur) var(--ease-silk),
              filter var(--dur) var(--ease-silk);
}
[data-page="insights"] .card:hover svg circle {
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
}

/* Review textareas — gold focus ring */
[data-page="insights"] .review-field textarea {
  transition: border-color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk),
              box-shadow var(--dur) var(--ease-silk);
}
[data-page="insights"] .review-field textarea:hover {
  border-color: var(--gold-30);
  background: rgba(255,255,255,0.02);
}
[data-page="insights"] .review-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,175,55,0.1);
}

/* Week summary gold-edge card — gentle breath */
[data-page="insights"] .gold-edge {
  transition: transform var(--dur-slow) var(--ease-out-expo),
              box-shadow var(--dur-slow) var(--ease-silk);
}
[data-page="insights"] .gold-edge:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold), 0 30px 60px -20px rgba(212,175,55,0.3);
}
[data-page="insights"] .gold-edge:hover i.fa-sparkles {
  animation: sparkSpin 1.2s var(--ease-spring);
}
@keyframes sparkSpin {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.3) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* ============================================================
   CONTENT HUB — Summary strip (csum) hover
   ============================================================ */
[data-page="content"] .csum {
  position: relative;
  transition: background var(--dur) var(--ease-silk);
  overflow: hidden;
  cursor: default;
}
[data-page="content"] .csum::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold-grad);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out-expo);
}
[data-page="content"] .csum::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top, rgba(212,175,55,0.08), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-silk);
  pointer-events: none;
}
[data-page="content"] .csum:hover {
  background: rgba(212,175,55,0.03);
}
[data-page="content"] .csum:hover::before { transform: scaleY(0.7); }
[data-page="content"] .csum:hover::after { opacity: 1; }

[data-page="content"] .csum .l {
  transition: color var(--dur) var(--ease-silk), letter-spacing var(--dur) var(--ease-silk);
}
[data-page="content"] .csum:hover .l {
  color: var(--gold);
  letter-spacing: 0.14em;
}
[data-page="content"] .csum .v {
  transition: transform var(--dur) var(--ease-spring), text-shadow var(--dur) var(--ease-silk);
}
[data-page="content"] .csum:hover .v {
  transform: translateX(2px);
  text-shadow: 0 0 24px rgba(212,175,55,0.35);
}
[data-page="content"] .csum .d {
  transition: color var(--dur) var(--ease-silk);
}
[data-page="content"] .csum:hover .d {
  color: var(--ink-2);
}

/* Monthcal nav buttons — echo chip energy */
[data-page="content"] .nav-btn {
  position: relative;
  overflow: hidden;
  transition: background var(--dur) var(--ease-silk),
              color var(--dur) var(--ease-silk),
              border-color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring);
}
[data-page="content"] .nav-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(212,175,55,0.18), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-silk);
  pointer-events: none;
}
[data-page="content"] .nav-btn:hover {
  transform: translateY(-1px);
  border-color: var(--gold-30);
  color: var(--gold-hi);
  background: rgba(212,175,55,0.04);
}
[data-page="content"] .nav-btn:hover::after { opacity: 1; }
[data-page="content"] .nav-btn:active { transform: translateY(0) scale(0.97); }
[data-page="content"] .nav-btn i { transition: transform var(--dur) var(--ease-spring); }
[data-page="content"] .nav-btn:hover .fa-chevron-left { transform: translateX(-3px); }
[data-page="content"] .nav-btn:hover .fa-chevron-right { transform: translateX(3px); }

/* New post (btn-ghost) — gold press */
[data-page="content"] .monthcal-actions .btn-ghost {
  transition: background var(--dur) var(--ease-silk),
              border-color var(--dur) var(--ease-silk),
              transform var(--dur) var(--ease-spring),
              letter-spacing var(--dur) var(--ease-silk);
}
[data-page="content"] .monthcal-actions .btn-ghost:hover {
  transform: translateY(-1px);
  letter-spacing: 0.08em;
  border-color: var(--gold);
  background: rgba(212,175,55,0.16);
}
[data-page="content"] .monthcal-actions .btn-ghost i {
  transition: transform var(--dur) var(--ease-spring);
}
[data-page="content"] .monthcal-actions .btn-ghost:hover i {
  transform: rotate(180deg) scale(1.15);
}

/* Monthcal title — gold shimmer on header hover */
[data-page="content"] .monthcal-head {
  position: relative;
  transition: background var(--dur) var(--ease-silk);
}
[data-page="content"] .monthcal-title em {
  transition: color var(--dur) var(--ease-silk), text-shadow var(--dur) var(--ease-silk);
}
[data-page="content"] .monthcal-head:hover .monthcal-title em {
  text-shadow: 0 0 20px rgba(212,175,55,0.4);
}

/* ============================================================
   SEARCH CHIP — match chip hover language
   ============================================================ */
.chip-btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur) var(--ease-silk),
              background var(--dur) var(--ease-silk);
}
.chip-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.14), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-silk);
  pointer-events: none;
}
.chip-btn:hover {
  transform: translateY(-1px);
  border-color: var(--gold-30) !important;
  background: rgba(212,175,55,0.06) !important;
}
.chip-btn:hover::after { opacity: 1; }
.chip-btn i { transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-silk); }
.chip-btn:hover i {
  animation: chipSpin 800ms var(--ease-spring);
  color: var(--gold-hi);
}
.chip-btn span { transition: color var(--dur) var(--ease-silk), letter-spacing var(--dur) var(--ease-silk); }
.chip-btn:hover span { color: var(--gold-hi); letter-spacing: 0.04em; }

} /* end @media (hover: hover) — desktop-only hover effects */