/* ---- Tab strip ---- */
  .tab-strip { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
  .tab-strip__item {
    padding: 10px 18px; font-size: 13px; font-weight: 500;
    color: var(--text-mid); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }
  .tab-strip__item:hover { color: var(--text-hi); }
  .tab-strip__item.is-active { color: var(--accent-violet); border-bottom-color: var(--accent-violet); }

  /* ---- Featured artisan card (vote tab) ---- */
  .art-featured {
    position: relative; overflow: hidden;
    padding: 24px 28px; margin-bottom: 24px;
    background: var(--bg-elevated); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
  }
  .art-featured.is-live { border-color: var(--accent-violet);
    box-shadow: 0 0 0 1px var(--accent-violet), 0 8px 32px rgba(139,126,255,0.15); }
  .art-featured__glow {
    position: absolute; inset: -50% -10% auto auto; height: 220px; width: 320px;
    background: radial-gradient(closest-side, rgba(139,126,255,0.20), transparent 70%);
    pointer-events: none;
  }
  /* Header — 좌측: 상태/매치업 chips column, 우상단: pulse (참여 카운터).
     chips column 안의 두 pill (다가오는 아티쟁/시공 + 루드라 vs 무닌)은
     align-items: stretch 로 동일 너비 정렬. */
  .art-featured__head {
    display: flex; flex-direction: row; align-items: flex-start;
    justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px; position: relative;
  }
  .art-featured__chips {
    display: inline-flex; flex-direction: column; align-items: stretch;
    gap: 4px;
  }
  .art-featured__pulse { align-self: flex-start; flex-shrink: 0; }
  /* Status badge — pill-shaped chip matching the matchup chip's visual
     weight, so the header reads as two equal-weight badges instead of a
     plain label + chip. */
  .art-featured__status {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--accent-cyan);
    background: rgba(94, 226, 245, 0.10);
    border: 1px solid rgba(94, 226, 245, 0.30);
    flex-shrink: 0;
  }
  :root[data-theme="light"] .art-featured__status {
    color: #0891A8;
    background: rgba(8, 145, 168, 0.08);
    border-color: rgba(8, 145, 168, 0.28);
  }
  .art-featured__status.is-live {
    color: var(--accent-violet);
    background: rgba(139, 126, 255, 0.12);
    border-color: rgba(139, 126, 255, 0.35);
  }

  /* Footline (under vote buttons) — `상세` link on the left, `내 선택` note
     on the right. Single row on wide, stacks on narrow. */
  .art-featured__footline {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
  }
  .art-featured__footline .art-featured__detail { margin-left: 0; }

  /* Schedule block — biggest typography on the page */
  .art-featured__when {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px;
    margin-bottom: 22px; position: relative;
  }
  .art-featured__date {
    font-size: clamp(22px, 4vw, 30px); font-weight: 700; color: var(--text-hi);
    letter-spacing: 0.02em;
    /* Two `__date-part` spans inside — wrap to a new line on narrow widths
       instead of breaking mid-string. inline-flex with wrap = clean break
       between date and time. */
    display: inline-flex; flex-wrap: wrap; gap: 4px 12px;
  }
  .art-featured__date-part { white-space: nowrap; }
  .art-featured__countdown {
    font-size: 14px; color: var(--accent-cyan); padding: 4px 12px;
    background: rgba(79,169,255,0.10); border: 1px solid rgba(79,169,255,0.25);
    border-radius: 999px;
  }
  .art-featured.is-live .art-featured__countdown {
    color: var(--accent-violet); background: rgba(139,126,255,0.12);
    border-color: rgba(139,126,255,0.35);
  }

  /* Vote block */
  .art-featured__vote { display: flex; flex-direction: column; gap: 14px; position: relative; }
  .art-featured__prompt {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-mid); letter-spacing: 0.04em;
  }
  .art-featured__metabar { display: flex; flex-direction: column; gap: 4px; }
  .art-featured__legend { display: flex; gap: 14px; font-size: 11px; }
  .art-featured__note { font-size: 11px; color: var(--text-mid); }

  /* ============================================================
     Vote eligibility components
     ============================================================ */

  /* Identity strip — Discord avatar + clickable character cell + PVP CP +
     refresh button. Reads as "this is you, this is your fighter, here's
     your power, here's how to refresh it". */
  .vote-id {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 10px 12px; margin-bottom: 18px;
    background: linear-gradient(135deg,
      color-mix(in oklab, var(--accent-cyan) 10%, var(--bg-raised)) 0%,
      var(--bg-raised) 70%);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent-cyan);
    border-radius: var(--r-md);
  }
  :root[data-theme="light"] .vote-id { border-left-color: #0891A8; }
  /* Stale state — soften the cyan accent to amber when PVP isn't fresh */
  .vote-id--stale { border-left-color: var(--warn);
    background: linear-gradient(135deg, rgba(232,178,74,0.08) 0%, var(--bg-raised) 70%); }
  .vote-id--stale .vote-id__cp-num { color: var(--text-mid); }

  /* Discord avatar */
  .vote-id__avatar {
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: var(--bg-inset);
    display: grid; place-items: center;
    color: var(--text-mid); font-weight: 700; font-size: 14px;
    border: 1.5px solid var(--line-strong);
    flex-shrink: 0;
  }
  .vote-id__avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* Character cell — interactive (popover trigger). Hover/active states
     use background tint + border to make the click target obvious. */
  .vote-id__char {
    grid-column: 2 / 4;
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; min-width: 0;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: inherit; cursor: pointer; text-align: left;
    transition: all var(--dur-fast);
  }
  .vote-id__char:hover { background: var(--bg-elevated); border-color: var(--line); }
  .vote-id__char[aria-expanded="true"] { background: var(--bg-elevated); border-color: var(--line-accent); }
  .vote-id__chip {
    flex-shrink: 0;
  }
  .vote-id__popover-chip-cell {
    display: inline-flex; align-items: center;
    flex-shrink: 0; min-width: 78px;
  }
  /* Badge cluster on the right of the character name — class chip + legion
     chip rendered as a horizontal row. Keeps identity (name) primary and
     classification (chips) secondary, matching landing hero treatment. */
  .vote-id__badges {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0; flex-wrap: wrap;
  }
  .vote-id__badges .legion-badge,
  .vote-id__badges .class-chip { font-size: 11px; }
  .vote-id__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .vote-id__name {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 16px; font-weight: 700; color: var(--text-hi);
    letter-spacing: -0.01em;
  }
  .vote-id__chev {
    font-size: 11px; color: var(--text-dim);
    transition: transform var(--dur-fast), color var(--dur-fast);
  }
  .vote-id__char[aria-expanded="true"] .vote-id__chev { transform: rotate(180deg); color: var(--accent-cyan); }
  .vote-id__meta { font-size: 11px; color: var(--text-mid); }

  .vote-id__cp { text-align: right; flex-shrink: 0; }
  .vote-id__cp-label { font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; }
  .vote-id__cp-num {
    font-size: 22px; font-weight: 800; color: var(--accent-cyan);
    letter-spacing: -0.02em; line-height: 1.1;
    font-feature-settings: 'tnum' 1, 'lnum' 1;
  }
  :root[data-theme="light"] .vote-id__cp-num { color: #0891A8; }
  .vote-id__cp-time { font-size: 10px; color: var(--text-dim); margin-top: 2px; }

  .vote-id__action { flex-shrink: 0; }
  .vote-id__sync { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

  /* Character switcher popover */
  .vote-id__popover {
    position: absolute;
    top: 100%; left: 12px; margin-top: 6px;
    min-width: 280px; max-width: min(360px, calc(100vw - 24px));
    max-height: 60vh;
    z-index: 50;
    background: var(--bg-elevated);
    border: 1px solid var(--line-accent);
    border-radius: var(--r-md);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .vote-id__popover[hidden] { display: none; }
  .vote-id__popover-head {
    padding: 10px 14px; font-size: 11px; color: var(--text-mid);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
    background: var(--bg-raised);
  }
  .vote-id__popover-list {
    list-style: none; margin: 0; padding: 4px;
    overflow-y: auto; flex: 1; min-height: 0;
  }
  .vote-id__popover-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; background: transparent; border: none;
    border-radius: var(--r-sm); color: inherit;
    cursor: pointer; text-align: left;
    transition: background var(--dur-fast);
  }
  .vote-id__popover-item:hover:not(:disabled) { background: var(--bg-inset); }
  .vote-id__popover-item.is-current {
    background: color-mix(in oklab, var(--accent-cyan) 10%, transparent);
    cursor: default;
  }
  .vote-id__popover-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .vote-id__popover-name {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-hi);
  }
  .vote-id__popover-meta { font-size: 11px; color: var(--text-dim); }
  .vote-id__popover-foot {
    padding: 8px 14px; font-size: 10px;
    border-top: 1px solid var(--line); background: var(--bg-raised);
  }

  @media (max-width: 600px) {
    .vote-id {
      grid-template-columns: auto 1fr auto;
      gap: 10px; padding: 10px 12px;
    }
    .vote-id__char { grid-column: 2; }
    .vote-id__cp { grid-column: 2 / -1; grid-row: 2; text-align: left;
      padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--line); }
    .vote-id__cp-num { display: inline-block; font-size: 18px; }
    .vote-id__cp-time { display: inline-block; margin-left: 8px; }
    .vote-id__action { grid-row: 1; grid-column: 3; }
    .vote-id__char { padding: 4px 6px; }
    .vote-id__name { font-size: 14px; }
    .vote-id__popover { left: 8px; right: 8px; min-width: 0; }
  }

  /* Required notice — shown when PVP sync is missing/stale. Loud border +
     numbered steps + a primary "PVP 동기화" CTA. */
  .vote-required {
    padding: 22px 24px; margin-bottom: 22px;
    background: linear-gradient(135deg,
      rgba(232,178,74,0.08) 0%, var(--bg-raised) 70%);
    border: 1px solid rgba(232,178,74,0.40);
    border-radius: var(--r-lg);
    color: var(--text-hi);
  }
  .vote-required__head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  }
  .vote-required__icon { color: var(--warn); font-size: 22px; }
  .vote-required__title {
    font-size: 17px; font-weight: 700; color: var(--text-hi);
    letter-spacing: -0.01em; margin: 0;
  }
  .vote-required__body {
    font-size: 13px; color: var(--text-mid); line-height: 1.65;
    margin: 0 0 14px;
  }
  .vote-required__body strong { color: var(--text-hi); font-weight: 600; }
  .vote-required__steps {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px; margin-bottom: 14px;
    background: var(--bg-inset);
    border: 1px dashed var(--line); border-radius: var(--r-sm);
  }
  .vote-required__step {
    font-size: 12px; color: var(--text-mid);
    display: flex; align-items: baseline; gap: 8px;
  }
  .vote-required__step-num {
    flex-shrink: 0; width: 18px; height: 18px;
    display: inline-grid; place-items: center;
    border-radius: 50%; background: var(--warn); color: var(--bg-base);
    font-size: 10px; font-weight: 800;
  }
  :root[data-theme="light"] .vote-required__step-num { color: #FFFFFF; }
  .vote-required__step strong { color: var(--text-hi); font-weight: 600; }
  .vote-required__actions { display: flex; gap: 10px; flex-wrap: wrap; }

  /* ---- Vote pills (large + small variants) ---- */
  .vote-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .vote-actions--sm { gap: 6px; }
  .vote-pill {
    flex: 1 1 0; min-width: 96px;
    background: var(--bg-inset); color: var(--text-mid);
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: all var(--dur-fast);
  }
  .vote-actions--sm .vote-pill { padding: 6px 12px; font-size: 12px; min-width: 60px; flex: 0 1 auto; }
  .vote-pill:hover { color: var(--text-hi); border-color: var(--line-strong); background: var(--bg-elevated); }
  .vote-pill.is-active {
    color: var(--vote-color); border-color: var(--vote-color); background: var(--bg-elevated);
    box-shadow: inset 0 0 0 1px var(--vote-color), 0 0 12px rgba(139,126,255,0.2);
  }
  .vote-pill.is-disabled,
  .vote-pill[disabled] {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-inset); color: var(--text-dim);
    border-color: var(--line);
    box-shadow: none;
  }
  .vote-pill.is-disabled:hover { background: var(--bg-inset); color: var(--text-dim); border-color: var(--line); }

  /* ---- Upcoming list (desktop) ---- */
  .art-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
    contain: layout style; }
  .art-list__item {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) auto 1fr auto;
    gap: 14px; align-items: center;
    padding: 12px 16px; background: var(--bg-elevated);
    border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .art-list__item:hover { border-color: var(--line-strong); }
  .art-list__when { display: flex; flex-direction: column; gap: 2px; }
  .art-list__date { font-size: 14px; font-weight: 600; color: var(--text-hi); }
  .art-list__countdown { font-size: 11px; color: var(--accent-cyan); }
  .art-list__counts { display: flex; gap: 10px; font-size: 11px; white-space: nowrap; }
  .art-list__vote { display: flex; justify-content: flex-end; }
  .art-list__mine {
    grid-column: 1 / -1; font-size: 11px;
    padding-top: 6px; border-top: 1px dashed var(--line);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
  }

  /* Result list rows */
  .art-list--results .art-list__item--result {
    grid-template-columns: minmax(180px, 1fr) auto 2fr;
  }
  .art-list__verdict { display: flex; align-items: center; gap: 8px; }
  .art-list__seal {
    width: 28px; height: 28px; display: inline-grid; place-items: center;
    border-radius: 6px; font-weight: 800; font-size: 13px;
    background: var(--bg-inset); color: var(--text-mid);
  }
  .art-list__item--result.is-win .art-list__seal { background: rgba(93,210,159,0.2); color: var(--ok, #5DD29F); }
  .art-list__item--result.is-tie .art-list__seal { background: rgba(232,178,74,0.2); color: var(--warn); }
  .art-list__item--result.is-lose .art-list__seal { background: rgba(255,93,143,0.2); color: var(--danger); }
  .art-list__score { font-size: 13px; font-weight: 600; color: var(--text-hi); }
  .art-list__servers { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; }

  /* ---- Mobile (< 720px): switch upcoming list to card-shaped rows ---- */
  @media (max-width: 720px) {
    .art-list__item {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .art-list__counts { justify-content: flex-start; }
    .art-list__vote { justify-content: flex-start; }
    .art-list--results .art-list__item--result { grid-template-columns: 1fr; }
  }

  /* All .ar-* card styles (faction chips, scoreboard, list rows, etc.)
     have been promoted to brand.css so the artifact-war detail page can
     reuse them. Page-specific bits (tab strip, art-featured live event,
     vote pills, art-list upcoming) stay below. */

  /* ---- "상세" link to the per-event detail page (legion vote breakdown) ---- */
  .art-featured__detail {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600; color: var(--accent-violet);
    text-decoration: none; border-radius: var(--r-sm);
    border: 1px solid var(--line-accent);
    background: var(--accent-grad-soft);
    transition: all var(--dur-fast);
  }
  .art-featured__detail:hover {
    color: var(--text-hi); background: var(--bg-elevated);
    border-color: var(--accent-violet);
  }
  .art-list__detail {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; margin-right: 4px;
    font-size: 10px; font-weight: 600; color: var(--accent-violet);
    text-decoration: none; border-radius: 3px;
    border: 1px solid var(--line);
    transition: all var(--dur-fast);
  }
  .art-list__detail:hover {
    color: var(--text-hi); background: var(--bg-inset);
    border-color: var(--line-accent);
  }

  /* "상세" + "디코방 입장" right-aligned cluster on the bottom row of every
     upcoming/past row. Always visible (even pre-vote, where it just hosts
     the 상세 button) so the affordance is consistent. */
  .art-list__row-actions {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto;
    flex-wrap: wrap; justify-content: flex-end;
  }
  /* Promoted "상세" button — replaces the tiny `.art-list__detail` link.
     Violet-tinted secondary so it pops against the row but doesn't compete
     with the primary vote buttons in the row above. */
  .art-list__detail-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 12px;
    color: var(--accent-violet);
    border-color: var(--line-accent);
    background: var(--accent-grad-soft);
    font-weight: 600;
  }
  .art-list__detail-btn:hover {
    color: var(--text-hi);
    border-color: var(--accent-violet);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 1px var(--accent-violet) inset;
  }

  /* "참가 취소" — destructive intent, but quiet. We use the danger color
     family at low saturation so it reads as "removable action" without
     screaming for attention next to the more important 디코방 / 상세
     buttons. Hover bumps the color and tints the background. */
  .art-list__withdraw-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 12px;
    color: var(--danger, #FF5D8F);
    border-color: rgba(255, 93, 143, 0.28);
    background: rgba(255, 93, 143, 0.06);
    font-weight: 600;
    cursor: pointer;
  }
  .art-list__withdraw-btn:hover {
    color: var(--text-hi);
    border-color: var(--danger, #FF5D8F);
    background: rgba(255, 93, 143, 0.18);
    box-shadow: 0 0 0 1px var(--danger, #FF5D8F) inset;
  }
  /* Make the bottom .art-list__mine row consistent across all states.
     Override the dashed top border for cleaner look when there's no vote
     yet (we always render this row now). */
  .art-list__item .art-list__mine {
    align-items: center;
    flex-wrap: nowrap;
  }
  @media (max-width: 720px) {
    .art-list__item .art-list__mine { flex-wrap: wrap; }
    .art-list__row-actions { width: 100%; justify-content: flex-start; }
  }

  /* ---- Discord-voice join button ----
     Surfaces only when user voted lower/upper. Branded blurple so it reads as
     a Discord-specific CTA, not a generic primary button. The click handler
     at the bottom of this template tries the `discord://` protocol first
     (desktop with app installed) and falls back to the discord.gg invite URL
     (mobile universal link / web Discord). */
  /* Discord-join is a Discord-branded CTA but uses the same height/radius
     as `.btn` so it lines up with sibling buttons (상세, 참가 취소, …)
     in the action cluster — same row reads as one consistent toolbar. */
  .discord-join {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 34px; padding: 0 14px;
    background: #5865F2;
    color: #fff !important;
    border: 1px solid #4752C4;
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
    cursor: pointer; text-decoration: none;
    transition: all var(--dur-fast);
    white-space: nowrap;
  }
  .discord-join:hover {
    background: #4752C4; border-color: #3C45A5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(88,101,242,0.6);
  }
  .discord-join:active { transform: translateY(0); box-shadow: none; }
  .discord-join--sm {
    height: 28px; padding: 0 10px; font-size: 12px; gap: 6px;
  }

  /* Footline actions cluster — discord-join + 상세 grouped on the right */
  .art-featured__footline-actions {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }

  /* ---- Matchup chip on the vote tab (featured + upcoming list) ----
     "[루드라] VS [enemy]" — our side in cyan/violet (accent), opponent in
     danger color, with the VS separator in dim text. Reads at a glance
     and stays consistent with the artifact-war detail page semantics. */
  .art-featured__opponent {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  }
  .art-featured__opponent-mine {
    color: var(--accent-cyan); font-size: 12px;
  }
  :root[data-theme="light"] .art-featured__opponent-mine {
    color: #0891A8;
  }
  .art-featured__opponent-vs {
    font-size: 9px; color: var(--text-dim);
    letter-spacing: 0.12em; padding: 0 2px;
  }
  .art-featured__opponent-name {
    color: var(--ar-lose-fg, #F26D6D); font-size: 12px;
  }
  :root[data-theme="light"] .art-featured__opponent-name {
    color: #C03A3A;
  }

  .art-list__opponent {
    display: inline-block; margin-left: 8px;
    padding: 1px 8px; border-radius: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--line);
    color: var(--ar-lose-fg, #F26D6D);
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    vertical-align: middle;
  }
  :root[data-theme="light"] .art-list__opponent { color: #C03A3A; }
  .art-list__opponent-mine {
    color: var(--accent-cyan); margin-right: 2px;
  }
  :root[data-theme="light"] .art-list__opponent-mine { color: #0891A8; }

  /* ---- Result list pager ---- */
  .ar-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin-top: 24px; flex-wrap: wrap;
  }
  .ar-pager__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 32px; padding: 0 12px;
    background: var(--bg-raised);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--text-mid); text-decoration: none;
    font-size: 12px; font-weight: 600;
    transition: all var(--dur-fast);
  }
  .ar-pager__btn:hover:not(.is-disabled) {
    color: var(--accent-violet);
    border-color: var(--line-accent);
    background: var(--bg-elevated);
  }
  .ar-pager__btn.is-disabled {
    opacity: 0.35; cursor: not-allowed;
  }
  .ar-pager__info {
    padding: 0 14px; font-size: 12px; color: var(--text-mid);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
  }
  .ar-pager__info strong { color: var(--text-hi); font-weight: 700; }

  .live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-violet);
    box-shadow: 0 0 0 0 currentColor;
    animation: live-pulse 1.6s ease-out infinite;
  }
  @keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(139,126,255,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(139,126,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(139,126,255,0); }
  }