/* ==========================================================================
   Hokage Saga — lớp "Premium" (nạp CUỐI CÙNG, sau type.css). Dùng chung cổng người chơi + quản trị.
   1. Thang cỡ chữ duy nhất (--fs-*): không chữ nào nhỏ hơn --fs-2xs.
   2. Mỗi VAI TRÒ chữ có font + màu + hiệu ứng riêng:
        tiêu đề trang · dòng nhỏ trên tiêu đề · tiêu đề thẻ · chữ nút · chữ tab · mô tả · nhãn/tiêu đề cột · số liệu · nhãn HOT/NEW
   3. Nhịp bố cục chung: khoảng cách thẻ, lề trong, độ rộng menu trái.
   Tắt lớp này: xoá dòng premium.css trong template/head.php.
   ========================================================================== */
:root {
  --f-deco: 'Playfair Display', 'Philosopher', Georgia, serif;   /* chữ trang trí */
  --f-read: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* chữ đọc */
  /* Thang 7 bậc — MỖI VAI TRÒ CHỈ MỘT CỠ trên mọi trang (xem mục 15). */
  --fs-2xs: .8rem;    /* 12px   badge, HOT/NEW, delta */
  --fs-xs: .833rem;   /* 12.5px nhãn ô nhập, tiêu đề cột, dòng nhỏ trên tiêu đề */
  --fs-sm: .867rem;   /* 13px   chữ phụ, ghi chú, thời gian */
  --fs-base: .933rem; /* 14px   chữ đọc: đoạn văn, bảng, ô nhập, nút, tab */
  --fs-md: 1rem;      /* 15px   mô tả đầu trang, tên vật phẩm/gói */
  --fs-lg: 1.133rem;  /* 17px   tiêu đề thẻ */
  --fs-xl: 1.4rem;    /* 21px   tiêu đề mục (ngoài thẻ) */
  --fs-2xl: 1.867rem; /* 28px   số nổi bật */
  --c-cream: #fff6df; --c-gold: #ffd479; --c-gold-deep: #f0a032; --c-teal: #7ff5e6;
  --c-read: #e5eee9; --c-soft: #bed2ca; --c-label: #e5d3ad;
  --sidebar-w: 256px;
  --gap-card: 20px; --pad-card: 24px;
}

/* ---------- 0. Nền chữ chung ---------- */
body { font-family: var(--f-read); font-size: var(--fs-base); line-height: 1.6; color: var(--c-read); }

/* ---------- 1. TIÊU ĐỀ TRANG — vàng kim chuyển sắc, vệt sáng lướt, bóng sâu ---------- */
.page-head h1, .hello h1, .dashboard .hello h1, .auth-card h1, .auth-wrap h1, .hero h1 {
  font-family: var(--f-deco); font-weight: 700; letter-spacing: -.012em; line-height: 1.12;
  background: linear-gradient(100deg, #fffaf0 0%, #ffe2a0 28%, #fffbea 44%, #ffc24d 62%, #ffe7ad 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px #001c1966);
  animation: realm-enter .38s var(--ease) 1; }
.page-head h1 { font-size: clamp(1.9rem, 2.1vw, 2.4rem); margin-bottom: 8px; }
.dashboard .hello h1 { font-size: clamp(2.3rem, 2.9vw, 3.1rem); line-height: 1.08; margin-bottom: 16px; }
.page-head { margin: 4px 0 28px; padding: 6px 0 22px; border-bottom: 0; position: relative; }
.page-head::after { content: ''; position: absolute; left: 0; bottom: 0; width: min(420px, 60%); height: 1px;
  background: linear-gradient(90deg, #ffd479cc, #ffd47933 55%, transparent); box-shadow: 0 0 10px #ffc24d55; }

/* ---------- 2. DÒNG NHỎ TRÊN TIÊU ĐỀ — in hoa giãn rộng, neon xanh ngọc ---------- */
.page-head .eyebrow, .hello .eyebrow, .dashboard .hello .eyebrow {
  font-family: var(--f-read); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-teal) !important; text-shadow: none; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.page-head .eyebrow::before { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--c-teal)); box-shadow: 0 0 8px var(--c-teal); }

/* ---------- 3. MÔ TẢ / ĐOẠN VĂN — sáng dịu, dễ đọc, không phát sáng ---------- */
.page-head p, .hello .sub, .dashboard .hello .sub { font-family: var(--f-read); font-size: var(--fs-md); line-height: 1.7; color: #dbe3ef; max-width: 72ch; text-shadow: 0 1px 2px #000b; }
p, .sub { font-family: var(--f-read); color: var(--c-read); line-height: 1.65; }
.hint, .note, .muted, small, .stat-sub, .kpi .note, .dashboard .kpi .note { font-family: var(--f-read); color: var(--c-soft) !important; }
.hint { font-size: var(--fs-sm); line-height: 1.6; }
.dashboard .kpi .note { font-size: var(--fs-xs); line-height: 1.5; }
.quote, .dashboard .quote { font-family: var(--f-deco); font-style: italic; font-size: var(--fs-md); color: #f3e6c8; text-shadow: 0 0 12px #ffc24d44, 0 1px 2px #000; }
.bx-note, .tn-warn, .pay-warn, .adm-note, .shop-note { font-size: var(--fs-sm); line-height: 1.7; color: #d6dfeb; }
.bx-note b, .tn-warn b, .pay-warn b, .adm-note b, .shop-note b { color: var(--c-gold); }

/* ---------- 4. TIÊU ĐỀ THẺ / MỤC — serif kem sáng, thanh nhấn vàng bên trái ---------- */
h2, h3, .panel-head h3, .glass > h2, .glass > h3, .ev-sec, .pay-step, .adm-page h2, .bx-head h2, .dashboard .panel-head h3 {
  font-family: var(--f-deco); font-weight: 700; color: var(--c-cream); letter-spacing: .005em;
  text-shadow: 0 1px 2px #001c1940; }
h2 { font-size: var(--fs-xl); }
h3, .panel-head h3, .dashboard .panel-head h3, .ev-sec, .bx-head h2 { font-size: var(--fs-lg); line-height: 1.3; }
.pay-step { font-size: var(--fs-md); }
.panel-head { gap: 12px; margin-bottom: 18px; align-items: center; }
.panel-head h3 { display: flex; align-items: center; gap: 10px; }
.panel-head h3 svg, h3 > svg, h2 > svg { color: var(--c-teal); filter: drop-shadow(0 0 6px #3fe0d0aa); width: 22px; height: 22px; }
.panel-head a, .dashboard .panel-head a { font-family: var(--f-read); font-size: var(--fs-sm); font-weight: 600; color: var(--c-gold); text-decoration: none; }
.panel-head a:hover { color: #fff; text-shadow: 0 0 10px #ffc24d; }

/* ---------- 5. CHỮ NÚT — serif đậm; nền vàng: chữ khắc chìm; nút viền: chữ phát sáng ---------- */
.btn { font-family: var(--f-read); font-weight: 600; font-size: var(--fs-base); letter-spacing: 0; min-height: 44px; }
.btn--sm { font-size: var(--fs-sm); min-height: 36px; padding-inline: 14px; }
.btn--lg { font-size: var(--fs-md); min-height: 50px; padding-inline: 24px; }
.btn--primary, .btn--jade { color: #2a1805 !important; text-shadow: 0 1px 0 #fff6d8b0; }
.btn--teal, .hero-actions > :nth-child(2).btn { color: #032320 !important; text-shadow: 0 1px 0 #e6fffba0; }
.btn--violet, .hero-actions > :nth-child(3).btn, .btn--danger { color: #fff !important; text-shadow: 0 0 10px #ffffff66, 0 1px 1px #0009; }
.btn:not(.btn--primary):not(.btn--jade):not(.btn--teal):not(.btn--danger):not(.btn--violet) { color: #fff1d2; text-shadow: 0 0 10px #ffc24d88, 0 1px 1px #000; }
.dashboard .hero-actions { gap: 14px; }
.dashboard .hero-actions .btn { font-size: var(--fs-md); padding: 11px 22px; min-height: 48px; }
.hero-actions .badge--jade { font-family: var(--f-deco); font-size: var(--fs-md); font-weight: 700; padding: 13px 22px; text-transform: none; letter-spacing: .015em; }
.ml-promo .btn, .shop-card .btn { font-size: var(--fs-sm); }

/* ---------- 6. CHỮ TAB — chữ đọc, chưa chọn: xám sáng; rê chuột: vạch sáng; đang chọn: nền vàng chữ tối ---------- */
.tab, .tabs .tab, .pay-page .tab, .tabbar a { font-family: var(--f-read); font-weight: 600; letter-spacing: .02em; }
.tab, .pay-page .tab { font-size: var(--fs-base); padding: 10px 20px; color: #cfd9e8; }
.tab::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 2px; border-radius: 2px; background: var(--c-teal); box-shadow: 0 0 8px var(--c-teal); opacity: 0; transform: scaleX(.3); transition: opacity .2s, transform .25s; }
.tab:hover:not(.active):not([aria-selected='true']) { color: #fff; text-shadow: 0 0 10px #3fe0d099; }
.tab:hover:not(.active):not([aria-selected='true'])::after { opacity: 1; transform: none; }
.tab.active, .tab[aria-selected='true'] { color: #2a1805 !important; font-weight: 700; text-shadow: 0 1px 0 #fff6d890; }
.tabs { padding: 6px; gap: 6px; }

/* ---------- 7. NHÃN Ô NHẬP / TIÊU ĐỀ CỘT — in hoa giãn cách, vàng nhạt ---------- */
.field > label, .label, .table th, .more-title, .bx-table th, .adm-kv dt, .ev-prize-copy small, .buy-row--head {
  font-family: var(--f-read); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-label); text-shadow: 0 0 8px #ffc24d33; }
.table { font-size: var(--fs-base); }
.table th { padding: 14px 16px; }
.table td { padding: 14px 16px; color: #e9eef6; }
.input, .select, .textarea { font-size: var(--fs-base); min-height: 46px; }

/* ---------- 8. SỐ LIỆU — đậm, chuyển sắc trắng → vàng, số thẳng hàng ---------- */
.kpi .val, .big-num, .stat .stat-value, .dashboard .kpi .val, .dashboard .big-num, .adm-kpis .kpi .val, .ev-stat b {
  font-family: var(--f-deco); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.005em;
  color: #fff; text-shadow: 0 0 1px #fff, 0 0 16px #ffc24d66; }
.dashboard .kpi .val, .adm-kpis .kpi .val { font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .meta { min-width: 0; }
.dashboard .big-num, .dashboard .big-num b { font-size: var(--fs-2xl); line-height: 1.15; }
.stat .stat-value, .pay-rate .stat-value { font-size: 1.6rem; }
.kpi .k-label, .dashboard .kpi .k-label, .stat .stat-label, .ev-stat .label {
  font-family: var(--f-read); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .02em; text-transform: none; color: #f0e2c4; }
.coin span, .lb-xu-val .coin span { font-weight: 800; color: #ffe9b8; text-shadow: 0 0 10px #ffc24d88; }

/* ---------- 9. BADGE / NHÃN HOT-NEW / DELTA — tối thiểu 12px ---------- */
.badge, .dashboard .delta, .delta, .tag-pill, .ev-tags .badge { font-family: var(--f-read); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .04em; padding: 4px 10px; line-height: 1.35; }
.badge--mute { font-family: var(--f-read); }
.sidebar .tag, .more-grid .tag { font-family: var(--f-read); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; padding: 2px 7px; line-height: 1.3; border-radius: 99px; }
.rank-rewards > summary .badge { font-size: var(--fs-2xs); }

/* ---------- 10. MENU TRÁI — rộng hơn, chữ serif 15px, mục đang mở nổi bật ---------- */
.sidebar { padding: 18px 14px; }
.sidebar .brand span { font-family: var(--f-deco); font-size: 1.4rem; }
.sidebar .brand small { font-size: .733rem; letter-spacing: .14em; }
.sidebar .tagline { font-size: var(--fs-sm); line-height: 1.5; }
.lb-xu { padding: 12px 14px; gap: 12px; }
.lb-xu-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.lb-xu-val { font-size: 1.2rem; }
.sidebar .rail-title { font-family: var(--f-read); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .26em; text-transform: uppercase; color: #e8cf94; margin: 16px 10px 8px; }
.sidebar nav a { padding: 5px 10px 5px 6px; gap: 12px; min-height: 46px; font-size: var(--fs-base); border-radius: 12px; }
.sidebar nav a .nm small { line-height: 1.3; }
.sidebar nav a .ico { width: 32px; height: 32px; flex: 0 0 32px; }
.sidebar nav a .ico svg { width: 20px; height: 20px; }
.sidebar nav a .nm { gap: 2px; }
.sidebar nav a .nm-name { font-family: var(--f-read); font-weight: 600; font-size: .9rem; line-height: 1.4; color: #edf3ec; }
.sidebar nav a .nm small { font-family: var(--f-read); font-size: var(--fs-2xs); font-weight: 500; color: #b8c6da; }
.sidebar nav a .nm-row { gap: 6px; align-items: center; }
.sidebar nav a:hover:not([aria-current='page']) { background: linear-gradient(100deg, #ffd47918, transparent); }
.sidebar nav a:hover:not([aria-current='page']) .nm-name { color: #fff; text-shadow: none; }
.sidebar nav a[aria-current='page'] .nm-name { color: #241503 !important; font-weight: 700; }
.sidebar-links a { font-family: var(--f-read); font-weight: 500; font-size: var(--fs-base); padding: 10px 10px; gap: 12px; color: #ecf0f6; }
.ml-promo b { font-family: var(--f-deco); font-size: 1.15rem; }
.ml-promo p { font-size: var(--fs-xs); line-height: 1.5; }
.ml-motto { font-size: var(--fs-xs); }
@media (max-height: 1320px) { .ml-promo { display: none; } }
@media (max-height: 1000px) { .ml-motto { display: none; } }
/* menu admin dùng chung khung */
[data-shell='admin'] .sidebar nav a { min-height: 44px; }

/* ---------- 11. THANH TRÊN ---------- */
.search input { font-size: var(--fs-base); height: 46px; }
.pill { font-family: var(--f-read); font-size: var(--fs-sm); font-weight: 600; height: 46px; padding-inline: 14px; }
.pill, .icon-btn, .user-chip { height: 46px; }
.user-chip .who b { font-family: var(--f-deco); font-size: var(--fs-base); font-weight: 700; }
.user-chip .who span { font-size: var(--fs-2xs); }
.user-chip .avatar { width: 36px; height: 36px; }

/* ---------- 12. THẺ & NHỊP BỐ CỤC ---------- */
.stack-lg, .dashboard.stack-lg, .adm-page { gap: 24px; }
.dashboard > .grid, .ev-grid { gap: var(--gap-card); }
.dashboard > .grid > .glass { padding: var(--pad-card); }
.dashboard .grid-kpi { gap: 18px; }
.dashboard .kpi { padding: 22px 20px; min-height: 132px; gap: 16px; align-items: center; }
.dashboard .kpi .chip-ico, .kpi .chip-ico { width: 60px; height: 60px; flex: 0 0 60px; }
.dashboard .kpi .k-label { margin-bottom: 6px; }
.dashboard .legend { font-size: var(--fs-sm); }
.dashboard .chart text, .chart text { font-size: 13px; }
.dashboard .activity, .dashboard .power-row, .dashboard .donut-wrap { font-size: var(--fs-base); }
.dashboard .empty { font-size: var(--fs-base); }
.dashboard .float-card b { font-family: var(--f-deco); font-size: 1.6rem; }
.dashboard .float-card span { font-size: var(--fs-sm); }
.empty b { font-family: var(--f-deco) !important; font-size: var(--fs-md); }
/* Quản trị: chip vật phẩm (icon /shop + tên gzitem.txt) cạnh mọi ô nhập ID — ui/js/item-info.js */
.it-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 12px; border: 1px solid #ffd18b44; background: linear-gradient(110deg, #ffd47914, #0b172880); vertical-align: middle; }
.it-chip > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.it-chip b { font-family: var(--f-read); font-weight: 700; font-size: var(--fs-sm); color: var(--c-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-chip small { font-size: var(--fs-2xs); color: var(--c-soft) !important; white-space: nowrap; }
.it-chip--bad { border-color: #f58aac88; background: #f16e9614; }
.it-chip--bad b { color: #ffb3c7; }
.it-chip--empty, .it-chip--load { color: var(--c-soft); font-size: var(--fs-xs); padding: 6px 12px; }
.it-chip--load .it-ico { width: 24px; height: 24px; }
.it-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px; object-fit: contain; background: radial-gradient(circle at 50% 35%, #2b3f5e, #0d1829); border: 1px solid #ffd18b55; display: inline-grid; place-items: center; font-weight: 800; font-size: var(--fs-xs); color: #ffe2a3; }
.it-ico--none { color: var(--c-soft); }
.it-ico--xu { background: linear-gradient(135deg, #ffe9a6, #f0a032); color: #2a1805; }
.it-ico--vip { background: linear-gradient(135deg, #c3b6ff, #6b54e6); color: #fff; }
.tk-res { align-items: center; }
.tk-res .it-ico { width: 28px; height: 28px; }
td[data-pickscope] { min-width: 230px; }
td[data-pickscope] .item-name { margin-top: 6px; }
.evadm-line .item-name { white-space: normal; overflow: visible; }
@media (min-width: 641px) { .pz-row { grid-template-columns: 140px minmax(220px, 1fr) 140px auto; } }
input[readonly].input { opacity: .85; cursor: default; }
/* Gói Đặc Biệt: khung mỗi gói cố định đủ 7 vật phẩm — không co giãn khi random đổi số vật phẩm */
.ev-pack { --pk-row: 46px; --pk-gap: 8px; }
.ev-pack .ev-pkg-name { font-size: 1.2rem; line-height: 1.35; height: 1.35em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-pack .ev-pkg-items { flex: 0 0 auto; gap: var(--pk-gap); height: calc(var(--pk-row) * 7 + var(--pk-gap) * 6); overflow: hidden; }
.ev-pack .ev-pkg-items li { height: var(--pk-row); flex: 0 0 var(--pk-row); padding: 0 10px 0 3px; border-radius: 10px; background: #0b172866; border: 1px solid #ffe4b114; }
.ev-pack .ev-pkg-items .slot { width: 40px; height: 40px; flex: 0 0 40px; }
.ev-pack .ev-day-item { display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; }
.ev-pack .ev-day-item > span { font-size: var(--fs-sm); color: var(--c-read); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-pack .ev-day-item > b { font-size: var(--fs-sm); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ev-pack .ev-pkg-more { font-size: var(--fs-xs); text-align: center; height: 1.4em; margin-top: -4px; }
.ev-pack .ev-pkg-price { font-size: 1.2rem; min-height: 32px; align-items: center; }
.ev-pack .ev-cards { align-items: stretch; }
.ev-pack .ev-need-roll { min-height: calc(var(--pk-row) * 7 + 200px); display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) { .pk-swap .ev-pkg { animation: pk-in .35s ease-out both; } .pk-swap .ev-pkg:nth-child(2) { animation-delay: .06s; } .pk-swap .ev-pkg:nth-child(3) { animation-delay: .12s; } }
@keyframes pk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Tổng quan: khối Tin tức */
.dash-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-news-list li + li { border-top: 1px solid #ffe4b11f; }
.dash-news-list a { display: grid; gap: 4px; padding: 12px 10px; margin-inline: -10px; border-radius: 12px; text-decoration: none; color: inherit; transition: background-color .18s; }
.dash-news-list a:hover { background: linear-gradient(100deg, #ffd47914, transparent); }
.dash-news-list a:hover .dn-title { color: #fff; text-shadow: 0 0 10px #ffd479aa; }
.dn-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn-meta time { font-size: var(--fs-xs); color: var(--c-soft); margin-left: auto; }
.dn-title { font-family: var(--f-deco); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--c-cream); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dn-sum { font-size: var(--fs-sm); color: var(--c-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 13. Chi tiết theo trang (chỉ nâng các chữ quá nhỏ) ---------- */
/* nạp / cửa hàng */
.pay-chip { font-size: var(--fs-base); }
.pay-chip small { font-size: var(--fs-xs); }
.pay-copy .k { font-size: var(--fs-xs); }
.shop-ribbon, .store-price .sale { font-size: var(--fs-2xs); }
.pay-chip[aria-checked='true']::after { font-size: var(--fs-2xs); }
/* sự kiện, vòng quay, tích nạp, BXH */
.ev-hub { font-size: var(--fs-xs); }
.ev-wheel-hint { font-size: var(--fs-sm); }
.ev-prize-copy b { font-size: var(--fs-md); }
.ev-prize-copy span { font-size: var(--fs-sm); }
.ev-controls .ev-spin-btns small { font-size: var(--fs-2xs); }
.ev-daily-text { font-size: var(--fs-base); }
.ev-daily.claimed .btn:disabled { font-size: var(--fs-xs); }
.ev-hl, .ev-x2-crown { font-size: var(--fs-2xs); }
.ev-ms { font-size: var(--fs-base); }
.tn-reward .ct, .rank-rewards .tn-reward .ct { font-size: var(--fs-2xs); }
.rank-rewards .tn-reward .nm { font-size: var(--fs-2xs); }
.rank-rewards > summary { font-size: var(--fs-sm); }
.rw-nm small { font-size: var(--fs-2xs); }
.slot .qty, .bx-table .slot .qty { font-size: .767rem; font-weight: 800; }
.lc-sec, .pz-tag { font-size: var(--fs-sm); }
.countdown .cd span { font-size: var(--fs-2xs); }
.hero-badge { font-size: var(--fs-xs); }
/* admin */
.adm-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.adm-links:has(.adm-sk) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.adm-sk { align-items: flex-start; gap: 16px; padding: 20px 22px; min-height: 118px; }
.adm-sk b { display: block; font-family: var(--f-deco); font-size: 1.15rem; color: var(--c-cream); margin-bottom: 6px; }
.adm-sk .muted { font-size: var(--fs-sm); line-height: 1.55; }
.adm-links a b { font-family: var(--f-deco); font-weight: 700; font-size: var(--fs-md); color: var(--c-cream); }
.adm-note { font-size: var(--fs-sm); }
.adm-json, .cfg-pv-note { font-size: var(--fs-sm); }
.cfg-dirty { font-size: var(--fs-2xs); }
.pay-adm-sub, .pay-adm-pre { font-size: var(--fs-sm); }
.footer { font-size: var(--fs-sm); }
.more-grid a { font-size: var(--fs-sm); }
.tabbar a { font-size: .767rem; }

/* ---------- 14. Liên kết trong đoạn văn — xanh ngọc, gạch chân mảnh ---------- */
p a:not(.btn), .hint a:not(.btn), .note a:not(.btn), td a:not(.btn) { color: var(--c-teal); text-decoration-color: #7ff5e666; text-underline-offset: 3px; }
p a:not(.btn):hover, .hint a:not(.btn):hover, td a:not(.btn):hover { color: #fff; text-shadow: 0 0 10px #3fe0d0; }

/* ---------- Màn hình ---------- */
@media (min-width: 1800px) { .app { --sidebar-w: 268px; } }
@media (min-width: 981px) and (max-width: 1250px) { .app { --sidebar-w: 236px; } .sidebar nav a .nm small { display: none; } }
@media (max-width: 600px) {
  :root { --pad-card: 18px; --gap-card: 14px; }
  .page-head h1 { font-size: 2rem; }
  .page-head .eyebrow, .dashboard .hello .eyebrow { font-size: var(--fs-2xs); letter-spacing: .18em; }
  .dashboard .hello h1 { font-size: clamp(2.1rem, 8vw, 2.7rem); }
  .dashboard .hello .sub, .page-head p { font-size: var(--fs-base); }
  .dashboard .hero-actions .btn { font-size: var(--fs-sm); padding: 10px 14px; min-height: 46px; }
  .dashboard .kpi { padding: 16px; min-height: 0; }
  .dashboard .kpi .chip-ico, .kpi .chip-ico { width: 44px; height: 44px; flex-basis: 44px; }
  .dashboard .kpi .val { font-size: 1.25rem; overflow-wrap: anywhere; }
  .dashboard .kpi .k-label { font-size: var(--fs-xs); }
  .tab, .pay-page .tab { font-size: var(--fs-sm); padding: 9px 12px; }
  .btn { font-size: var(--fs-base); }
  .table th, .table td { padding: 11px 10px; }
  h3, .panel-head h3, .dashboard .panel-head h3, .ev-sec { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .page-head h1, .hello h1, .dashboard .hello h1, .hero h1 { animation: none; } .tab::after { transition: none; } }
@media (forced-colors: active) { .page-head h1, .hello h1, .hero h1 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* ==========================================================================
   15. KHOÁ CỠ THEO VAI TRÒ — cùng một vai trò = cùng một cỡ ở MỌI trang (đo trên 16 trang người chơi).
   Tiền tố ":root main" để thắng CSS riêng từng trang (evt/pay/rank/tichnap… và hokage-theme).
   ========================================================================== */
/* Tiêu đề MỤC (nằm ngoài thẻ): 21px */
:root main h2:not(.glass h2):not(.modal h2), :root main .ev-sec, :root main .bx-head h2 { font-size: var(--fs-xl); line-height: 1.3; }
/* Tiêu đề THẺ (trong thẻ): 17px */
:root main .glass h2, :root main h3, :root main .panel-head h3, :root main .dashboard .panel-head h3, :root main .pay-step,
:root main .tn-tier-title, :root main .ws-threshold, :root main .adm-section-title h2, :root main .ev-wheel-heading .ev-sec { font-size: var(--fs-lg); line-height: 1.35; }
/* Tên VẬT PHẨM / GÓI / BÀI (thẻ nhỏ): 15px serif */
:root main .shop-title, :root main .ev-pkg-name, :root main .dn-title, :root main .ct-news-card h3, :root main .ev-prize-copy b { font-family: var(--f-deco); font-size: var(--fs-md); line-height: 1.35; }
/* Nhãn mục nhỏ ("Chọn bảng xếp hạng", "Trận chiến"): kiểu nhãn 12.5px in hoa */
:root main .lc-sec { font-family: var(--f-read); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-label); }
/* Chữ ĐỌC: đoạn văn, ô bảng, danh sách: 14px */
:root main p:not(.sub):not(.page-head p), :root main td:not(.bx-rank), :root main .table, :root main li, :root main .ev-daily-text, :root main .ev-ms, :root main .activity, :root main .power-row { font-size: var(--fs-base); }
:root main .page-head p, :root main .hello .sub { font-size: var(--fs-md); }
/* Chữ PHỤ / ghi chú / thời gian: 13px */
:root main .hint, :root main .muted, :root main .note, :root main small, :root main time, :root main .stat-sub, :root main .ev-wheel-hint, :root main .dashboard .kpi .note { font-size: var(--fs-sm); }
/* NHÃN ô nhập / tiêu đề cột: 12.5px — nhãn chỉ số (KPI, thống kê): 13px chữ thường */
:root main .field > label, :root main label.label, :root main .table th, :root main .bx-table th { font-size: var(--fs-xs); }
:root main .k-label, :root main .stat-label, :root main .ev-stat .label { font-size: var(--fs-sm); }
/* NÚT / TAB: 14px (nhỏ 13px, lớn 15px) */
:root main .btn { font-size: var(--fs-base); } :root main .btn--sm { font-size: var(--fs-sm); } :root main .btn--lg, :root main .dashboard .hero-actions .btn { font-size: var(--fs-md); }
:root main .btn small { font-size: var(--fs-2xs); }
:root main .tab { font-size: var(--fs-base); }
/* SỐ: KPI/thống kê 24px · số lớn trong thẻ 28px · số nhỏ trong thẻ con 18px */
:root main .kpi .val, :root main .stat .stat-value, :root main .pay-rate .stat-value, :root main .adm-kpis .kpi .val { font-size: 1.6rem; }
:root main .big-num, :root main .big-num b, :root main .tn-pts, :root main .vd-power { font-size: var(--fs-2xl); }
:root main .ev-stat b, :root main .ev-hv, :root main .pay-coin-val, :root main .vd-target, :root main .ev-code-value, :root main .ev-lchar { font-size: 1.2rem; }
:root main .num { font-variant-numeric: tabular-nums lining-nums; }
/* Tên quà dưới ô vật phẩm / tiêu đề dòng hoạt động / chữ trong nút quay / đồng hồ */
:root main .tn-reward .nm, :root main .rank-rewards .tn-reward .nm { font-size: var(--fs-sm); }
:root main .activity b, :root main .activity .txt b { font-size: var(--fs-base); }
:root main .btn span:not(.action-arrow):not(.tap-light) { font-size: inherit; }
:root main .num.gold, :root main .countdown { font-size: inherit; }
:root main .check, :root main label:not(.field > label):not(.label) { font-size: var(--fs-base); text-transform: none; letter-spacing: 0; }
/* BADGE: 12px */
:root main .badge, :root main .delta, :root main .tag-pill { font-size: var(--fs-2xs); }
:root main .hero-actions .badge--jade { font-size: var(--fs-md); }
@media (max-width: 600px) {
  :root main h2:not(.glass h2):not(.modal h2), :root main .ev-sec { font-size: 1.2rem; }
  :root main .glass h2, :root main h3, :root main .panel-head h3, :root main .pay-step { font-size: 1.067rem; }
  :root main .kpi .val { font-size: 1.25rem; }
  :root main .big-num, :root main .tn-pts, :root main .vd-power { font-size: 1.6rem; }
}

/* ==========================================================================
   16. GIAO DIỆN VÀNG KIM × NGỌC BÍCH (theo ảnh mẫu): viền vàng, lòng thẻ ngọc bích sâu, nền đêm tu tiên
   ========================================================================== */
:root {
  --jade-950: #031615; --jade-900: #052220; --jade-800: #082e2b; --jade-700: #0c3b37; --jade-600: #115048; --jade-glow: #3fe0c0;
  --gold-line: #d7b46b73; --gold-hi: #f5dca2;
  --f-brand: 'Playfair Display', Georgia, serif;
  --surface: radial-gradient(ellipse at 12% 0%, #89d8b90d, transparent 65%), linear-gradient(155deg, #0d3632f2, #082d2af5 55%, #06241ff5);
  --surface-flat: linear-gradient(155deg, #103d35de, #062820e6);
  --gold-frame: inset 0 1px 0 #f6e4b81a, 0 10px 28px #001b182b;
  --ml-card: var(--surface); --glass-1: #082e2bc9; --glass-2: #0a3431d4; --glass-solid: #072a27;
}
body { background: var(--jade-950); }
/* Nền: tranh tu tiên ngọc bích + lớp đêm (tối dần về mép, sáng ở giữa) */
.scene { background-color: var(--jade-950) !important; background-image: url('/ui/img/bg/jade-sect.webp') !important; background-position: center 30% !important; background-size: cover !important; background-repeat: no-repeat !important; }
.scene::before { background: radial-gradient(ellipse 120% 85% at 60% 30%, #03161500 0%, #03161566 65%, #031615c7 100%), linear-gradient(180deg, #0316154d 0%, #03161500 28%, #03161580 100%) !important; }
.scene::after { background: radial-gradient(ellipse 45% 30% at 78% 8%, #3fe0c01f, transparent 70%) !important; }
@media (max-width: 720px) { .scene { background-image: url('/ui/img/bg/jade-sect-mobile.webp') !important; background-position: 72% center !important; } }

/* Thẻ: lòng ngọc bích, viền vàng kim */
.glass, .dashboard .kpi, .dashboard .kpi:nth-child(n), .adm-page .glass, .leaderboard-panel, [data-shell='admin'] .glass:has(.table-wrap),
[data-page='bxhtoptuan'] .leaderboard-panel, .ev-wheel-card, .tn-tier, .ev-pkg, .shop-card, .ct-news-card {
  background: var(--surface) !important; border: 1px solid var(--gold-line) !important; box-shadow: var(--gold-frame) !important; }
:root body .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root body .glass::before { opacity: .32; }
:root body .glass::after { opacity: .2; }
.grid-kpi > .kpi:nth-child(n) { background-image: var(--surface) !important; }
.glass .glass, .glass--flat, .ev-stat, .ev-ms, .ev-lcard, .ev-prize-preview, .tk-finder, .pay-coin-preview, .dash-news-list a:hover {
  background: var(--surface-flat) !important; border-color: #e3b35a55 !important; box-shadow: inset 0 1px 0 #ffe2a314 !important; }
.glass--hover:hover, a > .glass:hover, .kpi:hover { border-color: #e6c17dba !important; box-shadow: inset 0 1px 0 #f6e4b82b, 0 12px 30px #001b183d !important; }
.bx-note, .tn-warn, .pay-warn, .adm-note, .shop-note { background: linear-gradient(100deg, #d6a2461c, transparent 55%), #072a27d9 !important; border-color: #e3b35a40 !important; border-left-color: var(--gold-line) !important; }

/* Menu trái + thanh trên */
.sidebar { background: linear-gradient(165deg, #113e36d9, #062b25d9) !important;
  border-color: var(--gold-line) !important; box-shadow: inset 0 1px 0 #f6e4b81f, 0 12px 32px #001b1833 !important; }
.lb-xu { background: linear-gradient(120deg, #e3b35a26, #0a343180) !important; border: 1px solid #e3b35a66 !important; }
.sidebar nav a .ico { color: #8dddc7 !important; filter: none; }
.sidebar nav a[aria-current='page'] .ico { color: #2a1805 !important; filter: none; }
.search input, .pill, .icon-btn, .user-chip { background: linear-gradient(135deg, #a1d5b80d, #062b25b8) !important; border-color: #d7b46b59 !important; }
.topbar, .tabbar, .more-panel { background: #062b25f7 !important; border-color: #d7b46b66 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Bảng, ô nhập, tab, hộp thoại, thông báo */
.table th, [data-page='bxhtoptuan'] .table th { background: #0a302cf2 !important; }
.table td { border-color: #e3b35a1c !important; }
.table tbody tr:hover td { background: #3fe0c00d !important; }
.input, .select, .textarea { background-color: #042a247a !important; border-color: #d7b46b66 !important; box-shadow: inset 0 1px 2px #001c1926; }
.input:focus, .select:focus, .textarea:focus { background-color: #062a27 !important; border-color: var(--gold-hi) !important; box-shadow: 0 0 0 3px #3fe0c022 !important; }
.select option { background: #062320; }
.tabs { background: #06221fcc !important; border: 1px solid #e3b35a40; }
.pay-chip { background: #0a302ccc !important; border-color: #e3b35a40 !important; }
.pay-chip[aria-checked='true'], .pay-chip.active { background: linear-gradient(125deg, #e3b35a33, #3fe0c01a) !important; border-color: var(--gold-hi) !important; }
.glass--overlay, .glass.modal, .modal, .search-results, .bell-menu { background: var(--surface) !important; border-color: var(--gold-line) !important; }
.modal-back { background: #021110b3 !important; }
.toast { background: #083330f7 !important; }
.slot { background-color: #052a26; }
.ev-cell { fill: #0b2f2c; } .ev-cell.alt { fill: #0f3d39; } .ev-icon-bed { fill: #05201dcc; }

/* Chữ tu tiên: logo + tiêu đề trang + tiêu đề lớn = serif NGHIÊNG (Playfair Display Italic) */
.sidebar .brand span, .brand span, .page-head h1, .hello h1, .dashboard .hello h1, .auth-wrap h1, .hero h1, .dashboard .float-card b {
  font-family: var(--f-brand); font-style: italic; letter-spacing: 0; }
.sidebar .brand { align-items: center; }
.sidebar .brand span { font-size: 1.55rem; font-weight: 800; line-height: 1.05; display: flex; flex-direction: column; }
.sidebar .brand span small { font-family: var(--f-read); font-style: normal; font-size: .667rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; margin-top: 5px;
  -webkit-text-fill-color: #d9c28c; color: #d9c28c; filter: none; }
.page-head h1 { font-weight: 700; padding-right: .12em; }
.dashboard .hello h1 { font-weight: 800; padding-right: .15em; }
.hello h1 .grad-text { background: linear-gradient(95deg, #b7e6d5 0%, #83d1b8 45%, #d8fff4 100%); -webkit-background-clip: text; background-clip: text; filter: none; animation: none; }
.page-head .eyebrow, .hello .eyebrow { color: #7ff5dc !important; }
/* Hộp chọn nhân vật mặc định lần đầu (template/first_target.php) */
.ft-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: #021110cc; }
.ft-card { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px !important; display: flex; flex-direction: column; gap: 12px; }
.ft-card h2 { margin: 0; font-family: var(--f-brand); font-style: italic; font-size: 1.6rem; }
.ft-card .eyebrow { font-weight: 700; font-size: var(--fs-xs); letter-spacing: .28em; text-transform: uppercase; color: #7ff5dc; }
.ft-card p { margin: 0; font-size: var(--fs-base); }
.ft-card .ev-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ft-acts { justify-content: flex-end; gap: 10px; margin-top: 4px; }
html.ft-open { overflow: hidden; }
@media (max-width: 600px) { .ft-card .ev-pick { grid-template-columns: 1fr; } }
/* Admin: liên kết "Về trang tài khoản" luôn hiện ở cuối menu (thay khối promo bị ẩn khi màn hình thấp) */
.sidebar .adm-back { margin-top: auto; padding-top: 10px; border-top: 1px solid #e3b35a33; }
.sidebar .adm-back a { display: flex; align-items: center; gap: 12px; color: var(--c-gold) !important; }
.sidebar .adm-back a:hover { color: #fff !important; text-shadow: 0 0 10px #ffd479aa; }
.sidebar .adm-back .ct-flip { transform: scaleX(-1); }
/* 17. Nút và nội dung dùng chung, giữ thứ bậc hành động rõ ràng. */
/* Win the older shell and variant rules; semantic danger actions retain red text. */
:root body .btn, :root body .btn--primary, :root body .btn--jade,
:root body .btn--teal, :root body .btn--violet, :root body .hero-actions > .btn {
  --_bg: linear-gradient(155deg, #16594b94, #07332e99 72%); --_fg: #eef3e9; --_bd: var(--gold-line);
  background: var(--_bg) !important; border: 1px solid var(--_bd); color: var(--_fg) !important;
  text-shadow: none; box-shadow: inset 0 1px 0 #ffe2a31a, 0 3px 10px #001c1926;
}
:root body .btn--primary, :root body .btn--jade { --_bg: linear-gradient(135deg, #287c62e6, #15533fe6); --_bd: #c9bc78a6; }
:root body .btn--ghost { --_bg: #08332b33; --_bd: #d7b46b4d; }
:root body .btn--danger { --_bg: linear-gradient(155deg, #783d3899, #522b2999); --_bd: #e4a38c99; color: #ffdacd !important; }
:root body .btn:not(:disabled):not([aria-disabled='true']):hover {
  --_bg: linear-gradient(155deg, #20725feb, #0a4439e6); border-color: var(--gold-hi); color: #fff9e9 !important;
  box-shadow: inset 0 1px 0 #ffe2a345, 0 0 14px #e3b35a22; filter: none;
}
:root body .btn:focus-visible, :root body .pay-chip:focus-visible, :root body summary:focus-visible {
  outline: 2px solid var(--gold-hi); outline-offset: 3px; box-shadow: 0 0 0 5px #04201ec7;
}
:root body .btn:disabled, :root body .btn[aria-disabled='true'] {
  background: #092d29c7 !important; border-color: #a48c5e88; color: #c1c9bc !important;
  opacity: .7; text-shadow: none; box-shadow: none; cursor: not-allowed;
}
:root body .tab[aria-selected='true'], :root body .tab.active {
  background: linear-gradient(155deg, #155343d9, #0a3a32e0); border: 1px solid var(--gold-line); color: #fff0cd !important; text-shadow: none;
}
/* Notices can wrap naturally; no all-caps pill crowded across the Boss header. */
:root body .bx-note, :root body .tn-warn, :root body .pay-warn, :root body .shop-note, :root body .adm-note, :root body .ws-gate {
  background: linear-gradient(110deg, #d6a24610, transparent 65%), #07312bbd !important;
  border: 1px solid #e3b35a55 !important; border-left: 3px solid var(--gold-line) !important;
  border-radius: 14px; padding: 14px 16px; color: #e1ece3; line-height: 1.65;
}
:root body .pay-warn > b { color: #ffe2a3; margin-bottom: 7px; }
:root body .pay-warn li { margin: 5px 0; }
:root body .bx-note .label { color: #dec590; }
[data-page='boss'] .row.fade-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 10px; }
[data-page='boss'] .row.fade-up > .badge {
  display: flex; align-items: center; justify-content: flex-start; min-height: 48px; border-radius: 13px;
  padding: 11px 14px; background: #07312ba6; border-color: #e3b35a55; color: #e8e8d1;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.55;
}
[data-page='boss'] .row.fade-up > .badge:first-child { color: #ffe2a3; border-color: #e3b35a99; }
#boss-topbadge { padding: 8px 12px; letter-spacing: 0; line-height: 1.6; white-space: normal; }
/* Keep each rank and its disclosure on one continuous surface. */
:root body .bx-table { background: transparent; border-collapse: collapse; }
:root body .bx-table tbody > tr, :root body .bx-table tbody > tr[data-rank='1'],
:root body .bx-table tbody > tr > td, :root body .bx-table tbody > tr:hover > td { background: transparent !important; }
:root body .bx-table tr[data-rank] > td { border-bottom: 0 !important; padding-top: 20px; padding-bottom: 10px; }
:root body .bx-table tr[data-rank] + tr > .bx-gift-cell {
  background: transparent !important; border-bottom: 1px solid #e3b35a38 !important;
  padding: 0 18px 18px !important; max-width: 0;
}
:root body .bx-table .bx-me td:first-child { box-shadow: inset 3px 0 0 var(--gold-line); }
:root body .rank-rewards { padding: 0; background: transparent; border: 0; }
:root body .rank-rewards > summary {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; cursor: pointer; list-style: none;
  padding: 10px 0; color: #f5dfaf; min-height: 44px; line-height: 1.5;
}
.rank-rewards > summary::-webkit-details-marker { display: none; }
.rank-rewards > summary::before { content: '›'; flex: none; width: 18px; text-align: center; font-size: 1.35rem; line-height: 1; transition: transform .16s ease; }
.rank-rewards[open] > summary::before { transform: rotate(90deg); }
:root body .rank-rewards > summary .badge { margin-left: 0; letter-spacing: 0; text-transform: none; }
:root body .rank-rewards[open] > summary { margin-bottom: 4px; }
:root body .rank-rewards > .hint { display: block; margin: 14px 0 0; color: #d8e5d8; }
/* Horizontal tiles provide room for long names and large quantities. */
:root body .tn-rewards, :root body .bx-gifts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; padding: 0;
}
:root body .tn-reward, :root body .bx-gifts .tn-reward, :root body .rank-rewards .tn-reward {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; row-gap: 3px;
  width: auto; min-width: 0; align-items: center; text-align: left; padding: 10px;
  border-radius: 12px; border: 1px solid #e3b35a30; background: #0627204d;
}
:root body .tn-reward > .slot { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; }
:root body .tn-reward .nm, :root body .rank-rewards .tn-reward .nm {
  overflow-wrap: break-word; word-break: normal; white-space: normal; line-height: 1.5;
  font-family: var(--f-read); color: #edf2e9; align-self: end;
}
:root body .tn-reward .ct { grid-column: 2; font-size: var(--fs-sm); letter-spacing: 0; line-height: 1.5; align-self: start; color: #ffe2a3; }
:root body .lc-gifts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
:root body .lc-gifts li b { overflow-wrap: break-word; word-break: normal; line-height: 1.5; }
/* Thanh cuộn mảnh giúp nhận biết bảng và hộp thoại còn nội dung. */
html { scrollbar-gutter: stable; }
html, body, .content, .table-wrap, .modal, .more-panel, .search-results, .rw-sug, .pay-adm-pre { scrollbar-width: thin !important; scrollbar-color: #96b5a780 transparent; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .content::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
.modal::-webkit-scrollbar, .more-panel::-webkit-scrollbar, .search-results::-webkit-scrollbar,
.rw-sug::-webkit-scrollbar, .pay-adm-pre::-webkit-scrollbar { display: block; width: 6px; height: 6px; }
:root body .glass.modal { background: radial-gradient(ellipse at 12% 0%, #1f7a6c20, transparent 65%), linear-gradient(162deg, #0d3d39f5, #062320f7) !important; }
:root body .modal { overflow-y: auto; overflow-x: hidden; max-height: calc(100dvh - 32px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal:focus-visible, .table-wrap:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.modal > .stack > .row-between:last-child, .modal .lc-modal-foot {
  position: sticky; bottom: -1px; z-index: 2; padding-block: 10px; margin-top: 10px; background: #08342ff5; border-top: 1px solid #e3b35a33;
}
@media (max-width: 600px) {
  :root body .bx-table tr[data-rank] { padding: 12px 8px 0; }
  :root body .bx-table tr[data-rank] > td { padding-block: 4px; overflow-wrap: break-word; }
  :root body .bx-table tr[data-rank] + tr > .bx-gift-cell { max-width: none; padding: 0 10px 16px !important; }
  :root body .tn-rewards, :root body .bx-gifts { grid-template-columns: minmax(0, 1fr); }
  :root body .modal { padding: 18px; }
  :root body .rank-rewards > summary { gap: 6px; }
  .modal-back { padding: 12px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --surface: #082e2b; --surface-flat: #082d27; }
  :root body .glass, :root body .sidebar, :root body .modal { background: #082e2b !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root body .btn { --_bg: #104638; }
}
@media (forced-colors: active) {
  :root body .btn, :root body .tab { background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText; text-shadow: none; }
  html, body, .modal, .table-wrap { scrollbar-width: auto !important; }
}
/* Decorative pseudo frames must not travel through a scrollable dialog. */
:root body .modal.glass::before, :root body .modal.glass::after { display: none; }
/* Ten rank rows need stable geometry; offscreen placeholders distort mobile cards. */
:root body .bx-table tbody tr, :root body .rank-rewards { content-visibility: visible; contain-intrinsic-size: none; }