/* Gộp theo đúng thứ tự các lớp cũ. Sửa mới vào site.css. */
/* ---- hokage-theme ---- */
:root { --ink-950: #060c18; --ink-900: #0a1425; --ink-800: #111c30; --ink-700: #1d2b40; --glass-3: #101c30f5; --glass-border: #e9b666b3; --glass-border-hi: #ffe2a3; --glass-shadow: 0 12px 30px #00000040,0 0 17px #ffb33c15,inset 0 1px 1px #fff2cb99,inset 0 -1px 2px #ffb04b66; --glow-cyan: 0 0 22px #ffb84d28; --glow-violet: 0 0 24px #ff963e24; --grad-accent: linear-gradient(110deg,#fff0b1 0%,#ffd16f 34%,#ffc24e 65%,#ff963e 100%); --focus: 0 0 0 3px #ffb84d40; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --ease: cubic-bezier(.22,.68,.24,1); }
.scene { background: #07111f url('/ui/img/bg/ninja-village-night.webp') center / cover no-repeat; }
h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(1.9rem,3.2vw,2.7rem); line-height: 1.22; }
.page-head p { margin-bottom: 0; }
.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass::before { background: linear-gradient(120deg,#fff4c6,#ffbd5b70 22%,#e9b76655 62%,#ffdd87 92%,#fff4d7); }
.glass::after { inset: -1px; background: radial-gradient(ellipse 24px 2px at 91% 100%,#fff9eabb,transparent),radial-gradient(ellipse 2px 14px at 91% 100%,#fff2cb99,transparent),radial-gradient(ellipse 21px 4px at 10% 0%,#fff7dfdd,#ffd17b70 40%,transparent),radial-gradient(ellipse 95px 37px at 8% 0%,#ffb23d40,transparent 90%),radial-gradient(ellipse 100px 32px at 93% 100%,#ff951c55,transparent 90%); }
.glass--raised { background: linear-gradient(130deg,#ffd59122,transparent 44%,#ff963e12),var(--glass-2); }
.glass .glass { background-color: #0d182b8c; }
.glass--hover { transition: transform .2s var(--ease), border-color .2s; }
.app { gap: 26px; padding: 18px; }
.content { width: 100%; max-width: 1600px; margin-inline: auto; }
.sidebar { top: 18px; height: calc(100dvh - 36px); border-radius: 22px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidebar::after { background: radial-gradient(ellipse 100% 90px at 0 100%,#efbf6520,transparent); }
.sidebar .brand { font-size: 1.05rem; letter-spacing: -.01em; gap: 10px; padding: 3px 8px 9px; }
.sidebar .brand .seal { width: 38px; height: 40px; }
.sidebar .tagline { margin-bottom: 10px; }
.seal { color: #122741; border: 1px solid #fff0d566; box-shadow: inset 0 1px 0 #fff9,0 5px 20px #ffb84d26; }
.lb-xu { margin: 10px 2px 13px; border-radius: 14px; }
.lb-xu-label { text-transform: none; color: var(--text-soft); }
.lb-xu .chip-ico { width: 38px; height: 42px; }
.sidebar .tag { border: 1px solid #ffd896; }
.sidebar-links { padding-top: 12px; margin-top: 12px; border-color: #ffe6b82d; gap: 2px; }
.sidebar-links a { border: 1px solid transparent; border-radius: 10px; }
.sidebar nav a[aria-current='page'], .sidebar-links a[aria-current='page'] { color: #fff8e8; }
.sidebar nav a[aria-current='page'] .ico { box-shadow: 0 0 14px #ffb84d2b; }
.appbar { gap: 10px; margin-bottom: 24px; }
.search { flex-basis: 450px; }
.search input { border-radius: 13px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.search .icon { top: 12px; color: #ffe5b6; }
.pill, .icon-btn, .user-chip { border-radius: 13px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pill { gap: 7px; }
.pill svg, .icon-btn svg { color: #ffe9c0; }
.user-chip { gap: 8px; padding-right: 10px; }
.footer { background: #0d182b9c; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn, .pill, .icon-btn, .pay-chip, .tab { position: relative; isolation: isolate; transition: transform .18s var(--ease), border-color .18s, background-color .18s; }
.btn { --_bd: #ffe7ba59; --_bg: linear-gradient(140deg,#ffe6b817,#ecca8c0c); -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
.btn--jade { --_bg: linear-gradient(120deg,#ffdda0,#ffb14b); }
.btn--danger { --_bg: linear-gradient(120deg,#e85c87,#b9497e); --_bd: #ffb3c578; }
.btn--ghost { --_bg: transparent; --_bd: transparent; box-shadow: none; }
.btn::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 20%,#ffffff45 48%,transparent 75%); opacity: 0; transform: translateX(-120%); }
.btn:active:not(:disabled):not([aria-disabled='true']), .pay-chip:active { transform: scale(.98); filter: none; }
.btn:focus-visible, .pill:focus-visible, .tab:focus-visible, .pay-chip:focus-visible { outline: 2px solid #ffe1aa; outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled='true'] { box-shadow: none; transform: none; }
.input, .select, .textarea { border-radius: 12px; }
.error-text { font-size: .9rem; }
.tabs { border-radius: 14px; }
.tab { border-radius: 10px; }
.tab.active, .tab[aria-selected='true'] { box-shadow: inset 0 1px 0 #fff6,0 3px 14px #ffce722e; }
.badge--jade { color: #94f6dc; background: #3ec5b51f; border-color: #6ceac84a; }
.chip-ico { color: #ffe1a0; }
.chip-ico--violet { color: #ffe2a3; border-color: #ffd18b77; background: linear-gradient(140deg,#ffd39c29,#896c4220); }
.chip-ico--rose, .chip-ico--gold { color: #ffe1a0; border-color: #ffd18b77; background: linear-gradient(140deg,#ffd39c29,#896c4220); }
.coin { color: #fff0d5; }
.slot { border-width: 1px; box-shadow: inset 0 0 13px color-mix(in srgb,var(--rc) 18%,transparent),0 4px 10px #05182a3d; transition: transform .18s var(--ease); }
.slot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--rc); box-shadow: 0 0 12px color-mix(in srgb,var(--rc) 45%,transparent); opacity: 0; transition: opacity .18s; pointer-events: none; }
.rarity-legendary { --rc: #f58bcf; }
.bx-note, .tn-warn, .pay-warn, .adm-note, .shop-note { border: 1px solid #fadca338; border-left: 3px solid #f2ce8c; border-radius: 12px; padding: 14px 16px; box-shadow: none; }
.adm-note--danger { border-left-color: #f58aac; background: #f16e9610; }
.toast { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 30px #03132655; border-radius: 14px; border-left: 3px solid #6de8cf; }
.toast.err { border-left-color: #f58aac; box-shadow: 0 12px 30px #03132655; }
.toast b { font-weight: 600; margin-bottom: 4px; }
.toast span { font-size: .9rem; }
.modal-back { -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal { box-shadow: 0 24px 70px #030c2580,inset 0 1px 0 #fff3de55; }
.content > .stack-lg > *, .grid > *, .ev-grid > *, .row > *, .adm-two > * { min-width: 0; }
.table-wrap { max-width: 100%; }
.leaderboard-panel, [data-shell='admin'] .glass:has(.table-wrap) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bx-gifts { gap: 10px; }
.bx-table .bx-gift-cell { padding: 12px 20px 22px; }
.bx-table .slot { width: 46px; height: 46px; border-radius: 12px; }
.bx-table tr[data-rank='1'] { background: #ff8a3d18; }
.bx-rank-1 { color: #ffeac3; }
.bx-rank-2 { color: #c8d4e7; }
.bx-rank-3 { color: #dba16f; }
.tn-count { contain: layout paint; font-variant-numeric: tabular-nums; }
.pay-page { width: 100%; max-width: none; }
.pay-rate .stat-sub { font-size: .82rem; }
.pay-form { gap: 18px; }
.pay-step { margin-top: 10px; }
.pay-warn ul { padding-left: 20px; margin-bottom: 0; }
.pay-chip { border-radius: 12px; box-shadow: inset 0 1px 0 #fff6e414; }
.pay-chip[aria-checked='true'], .pay-chip.active { box-shadow: inset 0 0 0 1px #ffd78d26; color: #fff; }
.pay-chip small, .pay-chip[aria-checked='true'] small { color: var(--text-soft); }
.ev-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); align-items: start; }
.ev-wheel-wrap { margin-inline: auto; }
.wheel-ring { filter: none; }
.ev-status { gap: 10px; }
.ev-stat.is-total { background: #ffb84d14; border-color: #eec27180; }
.ev-lcard { opacity: .78; }
.ev-lcard.lit { border-color: #fae2b591; background: linear-gradient(130deg,#ddbb7d33,#ddc39322); box-shadow: inset 0 1px 0 #ffffff33; }
.ev-lchar { color: #ffeece; }
.ev-ms { padding: 12px; }
.ev-ms.next { background: #d5a24218; border-color: #dcb05e61; }
.ev-buybar { font-size: .9rem; }
.shop-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,220px),1fr)); }
.shop-card .shop-title { min-height: 2.6em; }
.shop-card .btn { margin-top: auto; }
.ev-codes { grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.ev-days { grid-template-columns: repeat(auto-fill,minmax(min(100%,190px),1fr)); }
.tn-tier .btn { align-self: start; }
.ct-page { padding-top: 22px; }
.ct-prose { font-size: 1rem; line-height: 1.85; }
.ct-lead { font-size: 1.1rem; }
.auth-wrap .glass { background: linear-gradient(140deg,#d4984326,transparent 50%,#b06a1c14),#0d182be8; max-width: 100%; }
.auth-wrap h1 { font-size: 2rem; }
.auth-wrap .brand { justify-content: center; }
[data-shell='admin'] .content { max-width: 1480px; }
[data-shell='admin'] .scene::before { background: #07162e8a; }
.adm-page .glass { padding: 22px; }
.adm-links { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.adm-toolbar { gap: 12px; }
@view-transition {navigation: none;}
.fade-up { animation: none; }
.page-head { animation: none; }
@keyframes hokage-enter {from { opacity: .85; transform: translateY(4px); } to { opacity: 1; transform: none; }}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):not([aria-disabled='true']):hover { transform: translateY(-2px); border-color: #ffefd2; box-shadow: inset 0 1px 0 #fff6,0 6px 20px #ffc45733; }
  .btn:not(:disabled):not([aria-disabled='true']):hover::before { transform: translateX(120%); opacity: 1; transition: transform .6s ease,opacity .12s; }
  .btn--ghost:hover { box-shadow: none; }
  .pill:hover, .pay-chip:hover, .tab:hover { border-color: #ffe3b0a6; transform: translateY(-1px); }
  .slot:hover { transform: translateY(-3px); }
  .slot:hover::after { opacity: 1; }
  .glass--hover:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .content { animation: hokage-enter .18s ease-out; }
}
.effects-paused *, .effects-paused *::before, .effects-paused *::after { animation-play-state: paused !important; }
@media (min-width: 1800px) {
  .app { gap: 32px; padding: 22px; }
  .sidebar { top: 22px; height: calc(100dvh - 44px); }
}
@media (min-width: 981px) and (max-width: 1250px) {
  .app { gap: 20px; padding: 14px; }
  .appbar .user-chip .who { display: none; }
  .ev-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .app { padding: 14px 14px calc(var(--tabbar-h) + 30px); gap: 0; }
  .ev-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .scene { background-image: url('/ui/img/bg/ninja-village-night-mobile.webp'); background-position: 64% center; }
  .appbar { margin-bottom: 16px; }
  .page-head { padding-top: 8px; margin-bottom: 18px; }
  .glass { padding: 18px 16px; }
  .glass--tight { padding: 14px; }
  .stack-lg { gap: 18px; }
  .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shop-card { padding: 14px 10px; }
  .shop-card .btn { padding-inline: 9px; font-size: .77rem; }
  .pay-rate { grid-template-columns: 1fr; gap: 16px; }
  .pay-rate > * + * { border-top: 1px solid #ffe6b829; padding-top: 14px; }
  .pay-warn { padding: 12px; }
  .pay-page .tabs { width: 100%; }
  .pay-page .tab { flex: 1; padding-inline: 10px; }
  .ev-buybar > .row { flex-wrap: wrap; }
  .ev-letter-row { gap: 7px; }
  .ev-lchar { font-size: 1.1rem; }
  .ev-stat b { font-size: 1.35rem; }
  .bx-table .slot { width: 40px; height: 40px; }
  .bx-table .bx-gift-cell { padding: 10px 10px 18px; }
  .adm-page .glass { padding: 16px; }
  .adm-toolbar .field { min-width: 0; }
  .pz-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .pz-row .pz-name { grid-column: 1 / -1; }
}
@media (max-width: 359px) {
  .shop-grid { grid-template-columns: minmax(0,1fr); }
}
.perf-lite :is(.glass,.sidebar,.topbar,.tabbar,.pill,.search input) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .btn::before { display: none; }
  .btn:hover, .glass--hover:hover, .slot:hover { transform: none; }
}
.rank-rewards { padding: 8px 0 0; }
.rank-rewards > summary { cursor: pointer; padding: 8px 0 12px; color: #fae3b9; }
.rank-rewards > summary .badge { margin-left: 12px; font-weight: 400; }
.rank-rewards[open] > summary { margin-bottom: 8px; }
.rank-rewards .tn-reward { width: 78px; gap: 6px; }
.rank-rewards .tn-reward .nm { line-height: 1.4; }
.rank-rewards > .hint { display: block; margin-top: 12px; }
@media (max-width: 600px) {
  .rank-rewards .tn-reward { width: 66px; }
  .rank-rewards .tn-reward .nm { font-size: .7rem; }
  .rank-rewards > summary .badge { margin-left: 4px; font-size: .58rem; }
}
.hero { padding-block: 70px 54px; }
.hero h1 { font-size: clamp(2.8rem,5.5vw,4.8rem); }
.dl-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.dl-card .btn { margin-top: auto; }
.promo { background: linear-gradient(180deg,#0d182940,#101a2be0),url('/ui/img/bg/ninja-village-night.webp') 80% 50% / 230%; }
.ev-controls .ev-status { margin-bottom: 16px; }
.ev-controls .ev-spin-btns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ev-controls .ev-spin-btns .btn { font-size: .9rem; }
.ev-controls .ev-spin-btns small { margin-top: 4px; }
@media (min-width: 1251px) {
  .pay-form { display: grid; grid-template-columns: minmax(0,1fr) 260px; column-gap: 24px; row-gap: 16px; align-items: start; }
  .pay-form > * { grid-column: 1; min-width: 0; }
  .pay-form > .pay-warn { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 20px; }
  .pay-form .pay-chips:not(.pay-chips--tel):not(.pay-chips--2) { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1250px) {
  .ev-grid > .stack:first-child { display: contents; }
  .ev-grid > .stack:last-child { display: contents; }
  .ev-grid .ev-controls { order: -1; }
  .ev-grid .ev-wheel-card { order: 0; }
  .ev-grid .ev-letters { order: 1; }
  .ev-grid .ev-miles { order: 2; }
}
@media (max-width: 600px) {
  .hero { padding-block: 44px 34px; }
  .dl-grid { grid-template-columns: minmax(0,1fr); }
}
.page-head h1 { width: fit-content; max-width: 100%; }
.ev-sec::before { content: ''; display: inline-block; width: 4px; height: .85em; margin-right: 9px; border-radius: 4px; background: linear-gradient(#ffce72,#ffdea1); vertical-align: -.02em; }
.btn { --_fg: #ffecc8; }
.btn--primary, .btn--jade { --_fg: #081a32; }
.btn--danger { --_fg: #fff; }
.btn--feature { --_fg: #fff1cc; --_bd: #ffd08bcc; --_bg: linear-gradient(115deg,#6d4119,#9f5c1e); min-height: 50px; box-shadow: inset 0 1px 0 #fff0c966,0 7px 22px #e7982926; }
.btn--feature .action-arrow { margin-left: auto; font-size: 1.35rem; }
.btn--feature svg { color: #ffe3a6; }
.btn--feature { justify-content: flex-start; }
.pay-chip[aria-checked='true'] { color: #ffdfa4; }
.pay-chip[aria-checked='true']::after { content: '✓'; position: absolute; top: 5px; right: 9px; color: #8af7dd; }
.ev-daily { position: relative; border: 1px solid #ffe0a688; border-left: 4px solid #ffe0a6; background: linear-gradient(110deg,#c9a05335,#24375be6); color: #fff5e3; }
.ev-daily-text { font-weight: 650; line-height: 1.5; }
.ev-daily.claimed { border-color: #6fe5c16b; border-left-color: #70f3ce; background: linear-gradient(105deg,#146761aa,#153c4ce8); color: #a9ffe2; }
.ev-daily.claimed > svg { display: none; }
.ev-daily.claimed::before { content: '✓'; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #66ecc124; color: #a9ffe2; border: 1px solid #71eec97a; font-weight: 700; }
.ev-daily.claimed .btn:disabled { color: #b7ffe8; background: #6ee7c019; border-color: #79ecc947; opacity: 1; min-height: 30px; }
.ev-stat:first-child b { color: #8bf4d7; }
.ev-stat.is-total b { color: #ffd78c; }
.ev-msg--ok { color: #a6ffe0; border-color: #60deb875; background-color: #135244dd; }
.ev-msg--err { color: #ffc0d7; }
.ev-wheel-card { padding: 22px; }
.ev-wheel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.ev-wheel-heading .ev-sec { margin: 0; }
.ev-wheel-heading .badge { color: #ffe4b2; }
.ev-wheel-wrap { width: min(100%,420px); max-width: 420px; margin: 20px auto 18px; padding: 8px; border: 1px solid #f5d69d7a; border-radius: 50%; }
.ev-wheel-wrap #sp-wheel { width: 100%; aspect-ratio: 1; }
.ev-wheel { display: block; width: 100%; height: auto; filter: none; }
.ev-wheel-wrap .wheel-pointer { top: -5px; z-index: 3; filter: none; }
.ev-hub { width: 20%; border: 2px solid #ffe0a6; font-weight: 700; }
.ev-cell { stroke-width: .45; }
.ev-cell.win { stroke-width: 1; }
.ev-sector { cursor: pointer; outline: none; }
.ev-sector:hover .ev-cell, .ev-sector:focus .ev-cell { stroke-width: 1; }
.ev-sector.is-preview .ev-cell { stroke-width: 1; }
.ev-icon-bed { stroke-width: .35; }
.ev-cell-letter { font-size: 7px; font-weight: 750; fill: #ffefd1; stroke: none; }
.wheel-ring { stroke-width: 1.1; }
.ev-wheel-hint { text-align: center; color: #e9d6b2; margin: 0 0 12px; }
.ev-prize-preview { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 16px; border: 1px solid #fcdea666; border-radius: 14px; }
.ev-prize-preview .slot { flex-shrink: 0; }
.ev-prize-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-prize-copy b { color: #fff6e6; }
.ev-prize-copy span { color: #83f0d1; }
.ev-prize-letter { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #dfbe8230; border: 1px solid #ffe5b488; color: #ffecca; font-weight: 750; flex-shrink: 0; }
@media (max-width: 600px) {
  .ev-wheel-card { padding: 18px 12px; }
  .ev-wheel-wrap { max-width: 330px; }
  .ev-hub { font-size: .62rem; }
  .ev-wheel-heading .ev-sec { font-size: .85rem; }
  .ev-daily { padding: 12px 10px; gap: 8px; flex-wrap: wrap; }
  .ev-daily-text { flex-basis: 65%; font-size: .82rem; }
  .ev-daily .btn { margin-left: auto; }
  .ev-prize-preview { padding: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ev-daily.claimed::before { animation: status-confirm .3s ease-out; }
}
@keyframes status-confirm {from { opacity: .4; transform: scale(.75); } to { opacity: 1; transform: scale(1); }}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body .glass, body .sidebar, body .pill, body .topbar, body .tabbar, body .user-chip, body .search input, body .ev-wheel-card, body .promo { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.chip-ico--rose { color: #ffb1d4; border-color: #ffd18b77; background: linear-gradient(140deg,#ff89bd26,#49233855); }
.ev-wheel-wrap { border-color: #eabf778f; background: linear-gradient(140deg,#ffe0a070,#9f662424 45%,#ffb14d55); box-shadow: inset 0 0 0 3px #172035,0 10px 28px #070c334a; }
.ev-hub { border-color: #ffe2a3; background: radial-gradient(circle at 35% 20%,#c38a3d,#724719 68%); box-shadow: 0 0 0 5px #111b2de6,inset 0 2px 0 #fff3ce80; color: #fff4d5; }
.ev-cell { stroke: #d4ac6b66; }
.ev-cell.is-letter { fill: #60401e; stroke: #ffd18b99; }
.ev-cell.win { fill: #785327; stroke: #ffeab6; }
.ev-sector:hover .ev-cell, .ev-sector:focus .ev-cell { fill: #43506a; stroke: #ffe1a3; }
.ev-sector.is-preview .ev-cell { stroke: #ffd483; }
.ev-icon-bed { stroke: #debd8069; }
.wheel-ring { stroke: #ffe0a0; }
.ev-rim-dot { fill: #ffd17b; }
.ev-daily:not(.claimed) { color: #fff0d1; border-color: #eabd7588; border-left-color: #ffd184; background: linear-gradient(110deg,#ab73242e,#142139e6); }
@media (max-width: 600px) {
  .scene::before { background: linear-gradient(180deg,#06102220,#09152866); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body .ev-wheel-card { background: var(--glass-solid); }
  body .scene::before { background: #081a32b3; }
}
[data-page='bxhtoptuan'] .leaderboard-panel { border-color: #eec57e; }
[data-page='bxhtoptuan'] .bx-note { background: linear-gradient(100deg,#ffbb5022,#131a2699); }
[data-page='bxhtoptuan'] .table th { color: #ffe1a6; }
[data-page='bxhtoptuan'] .bx-gift-cell { background: #0d142080; }
[data-page='bxhtoptuan'] .bx-gift-cell details[open] { background: linear-gradient(125deg,#ffb9450c,transparent 65%); }
/* ---- fx ---- */
:root { --fx-gold: #ffc35a; --fx-amber: #ff9a2e; --fx-cream: #ffe6b0; --fx-border: #ffc766; --fx-glow: 0 0 0 1px #ffcf7a40, 0 0 18px #ffa83a55, 0 0 42px #ff8f2a22; --fx-card: linear-gradient(155deg, #ffcb7a38 0%, #3a261244 26%, #0c14227a 58%, #ff9a3233 100%); --text-faint: #a9b6cc; }
.scene .particles { display: block !important; position: absolute; inset: 0; pointer-events: none; }
:root body .scene .particles { width: auto; height: auto; z-index: 3; filter: none; }
.fx-mote { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff3c9 0%, #ffc35a 45%, #ff9a2e00 72%); opacity: 0; animation: fx-float var(--d) linear var(--dl) 1; }
@keyframes fx-float {0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  15% { opacity: var(--o, .85); }
  50% { transform: translate3d(var(--dx), -18vh, 0) scale(1); }
  85% { opacity: var(--o, .85); }
  100% { transform: translate3d(calc(var(--dx) * -.6), -36vh, 0) scale(.7); opacity: 0; }}
.glass { transition: transform .25s var(--ease); }
.glass { position: relative; }
.sidebar nav a { border-bottom: 1px solid #ffd99a14; }
.sidebar nav a:hover { background: linear-gradient(100deg, #ffbc5738, #ffe1bb0a); color: #fff; }
.sidebar nav a[aria-current='page'], .sidebar-links a[aria-current='page'] { background: linear-gradient(100deg, #ffbc5780, #ffb04a24 70%, transparent); border-color: #ffd18c; box-shadow: inset 3px 0 0 #ffd17b, 0 0 20px #ffad3e55; }
.lb-xu { border-color: #ffd28a88; box-shadow: 0 0 18px #ffa83a33, inset 0 1px 0 #fff3cf55; }
.pill, .icon-btn, .user-chip, .search input { box-shadow: 0 0 12px #ffa83a33, inset 0 1px 0 #fff0c540; }
.pill:hover, .icon-btn:hover, .user-chip:hover { border-color: #ffe0a0; box-shadow: 0 0 18px #ffb04a77, inset 0 1px 0 #fff0c566; }
.user-chip .avatar { box-shadow: 0 0 14px #ffb04aaa; }
.eyebrow { color: #ffd98f !important; text-shadow: 0 0 10px #ffb04a66; }
.kpi .val, .big-num, .stat .stat-value, .num { color: #fff; text-shadow: 0 0 18px #ffb84d55; }
.panel-head h3 svg, .kpi .chip-ico svg, .chip-ico svg { filter: drop-shadow(0 0 6px #ffb04a88); }
.chip-ico { background: linear-gradient(145deg, #ffcf7a30, #1a1a1f99); border-color: #ffcb6e99; box-shadow: 0 0 14px #ffa83a44, inset 0 1px 0 #fff3cf66; }
.panel-head .badge--mute { border-color: #ffcb6e88; background: #ffcf7a18; color: #ffe6b0; }
.btn { border-color: #ffc766aa; box-shadow: 0 0 12px #ffa83a33, inset 0 1px 0 #fff0d340; }
.btn:hover { border-color: #ffe0a0; box-shadow: 0 0 20px #ffb04a66, inset 0 1px 0 #fff0d366; }
.btn--primary { box-shadow: 0 0 0 1px #ffe5a3, 0 0 22px #ffb84d99, 0 0 50px #ff9d3344, inset 0 1px 2px #fff9d7; }
.fx-in { animation: realm-enter .34s var(--ease) both; }
@keyframes realm-enter {from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: none; }}
@media (prefers-reduced-motion: reduce) {
  .fx-mote, .btn--primary::after { animation: none !important; }
  .fx-mote { display: none; }
  .fx-in { animation: none; }
}
.perf-lite .fx-mote, .effects-paused .fx-mote { display: none; }
.slot .slot-img { filter: none !important; }
.coin svg { filter: none !important; }
.scene { contain: strict; }
.scene .particles { contain: strict; }
.table tbody tr, .rank-rewards, .leaderboard-panel li { content-visibility: auto; contain-intrinsic-size: auto 64px; }
.page-head h1 { text-shadow: none; }
.panel-head h3, .glass > h2, .glass > h3, .glass .head h3 { color: #ffe9bf; text-shadow: 0 0 14px #ffb04a66, 0 1px 1px #000; letter-spacing: .01em; }
.btn { text-shadow: 0 1px 1px #0008, 0 0 10px #ffb04a55; }
.btn .icon { filter: drop-shadow(0 0 4px #ffb04a88); }
.tab[aria-selected='true'], .tab.active, .tabs .tab[aria-current] { text-shadow: 0 0 10px #ffb04a88; }
.badge { text-shadow: 0 0 8px #ffb04a44; }
.tabbar .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--text-mute); font: inherit; font-family: var(--font-display); font-weight: var(--fw-display); font-size: .72rem; cursor: pointer; }
.tabbar .tab-more .ico { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 10px; }
.tabbar .tab-more[aria-expanded='true'] { color: var(--text-hi); }
.tabbar .tab-more[aria-expanded='true'] .ico { color: #2a1603; background: var(--grad-accent); box-shadow: 0 0 14px #ffb04a99; }
.more-sheet { position: fixed; inset: 0; z-index: 55; }
.more-back { position: absolute; inset: 0; background: #03081199; }
.more-panel { position: absolute; left: 10px; right: 10px; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--tabbar-h) - 40px); overflow: auto; padding: 14px 14px 16px; border-radius: 22px; animation: more-up .22s var(--ease); }
@keyframes more-up {from { transform: translateY(24px); opacity: 0; }}
.more-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.more-head b { font-size: 1.05rem; }
.more-head .icon-btn { width: 40px; height: 40px; }
.more-title { margin: 12px 2px 8px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-grid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; min-height: 84px; border-radius: 14px; text-align: center; border: 1px solid #ffcb6e44; background: linear-gradient(160deg, #ffcf7a1f, #0c1424cc); color: var(--text-hi); font-weight: 600; line-height: 1.25; }
.more-grid a .ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #ffd98f; background: #ffcf7a1f; border: 1px solid #ffcb6e55; }
.more-grid a[aria-current='page'] { border-color: #ffd18c; box-shadow: 0 0 16px #ffad3e55; }
.more-grid a[aria-current='page'] .ico { color: #2a1603; background: var(--grad-accent); }
.more-grid .tag { position: absolute; top: 6px; right: 6px; background: linear-gradient(120deg, #ffe49a, #ffad43); color: #301901; }
@media (min-width: 981px) {
  .more-sheet { display: none; }
}
@media (max-width: 360px) {
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.more-open { overflow: hidden; }
/* ---- moonleaf ---- */
:root { --ml-gold: #ffc24d; --ml-gold-hi: #ffe3a1; --ml-amber: #ff9a2e; --ml-teal-hi: #a6fff4; --ml-teal-deep: #0f6b6a; --ml-violet: #8b7dff; --ml-blue: #4f7dff; --ml-rose: #ff4d8d; --ml-border: #e8b95c; --ml-glow: 0 0 0 1px #ffd58a33, 0 0 16px #ffb84d40, 0 0 36px #3fe0d014; --fw-display: 600; }
body { font-feature-settings: 'lnum' 1; }
input, select, textarea, .input, .select, .textarea, code { font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.glass { border-color: var(--ml-border); border-radius: 20px; }
.btn { border-radius: 12px; }
.btn--primary { --_bg: linear-gradient(180deg, #ffe9a6 0%, #ffcd5a 45%, #f0a032 100%); --_fg: #2a1805; --_bd: #fff0b8; }
.btn--teal { --_bg: linear-gradient(180deg, #7ff5e6 0%, #2fc9b9 50%, #168f86 100%); --_fg: #04221f; --_bd: #b6fff5; box-shadow: 0 0 0 1px #b6fff5, 0 0 20px #3fe0d088, inset 0 1px 2px #eafffb; }
.btn--violet { --_bg: linear-gradient(180deg, #7fa0ff 0%, #4f6bff 50%, #3a3fc9 100%); --_fg: #fff; --_bd: #c3d0ff; box-shadow: 0 0 0 1px #c3d0ff, 0 0 20px #5f7dff88, inset 0 1px 2px #e3e9ff; }
.sidebar .brand span { color: transparent; }
.sidebar nav a { border-bottom-color: transparent; }
.sidebar nav a[aria-current='page'] { background: linear-gradient(180deg, #ffe39a, #ffc24d 55%, #e99a2c); color: #2a1805; border-color: #fff0b8; box-shadow: 0 0 18px #ffc24d88, inset 0 1px 1px #fff8dd; }
.sidebar nav a[aria-current='page'] .nm-name, .sidebar nav a[aria-current='page'] small { text-shadow: none; }
.sidebar nav a[aria-current='page'] .ico { background: #fff3cf66; }
.sidebar .tag { background: linear-gradient(120deg, #ff6fa5, var(--ml-rose)); color: #fff; border-color: #ffc2d8; box-shadow: 0 0 10px #ff4d8d88; }
.ml-promo { margin: 10px 2px 4px; padding: 14px; border-radius: 16px; border: 1px solid #ffd58a88; position: relative; overflow: hidden; background: linear-gradient(180deg, #06101a33, #06101aee 85%), url('/ui/img/bg/ninja-aurora.webp') 60% 30% / cover; box-shadow: 0 0 16px #3fe0d033; }
.ml-promo b { display: block; color: #fff; line-height: 1.2; }
.ml-promo p { margin: 6px 0 10px; color: #dfe7f2; }
.ml-promo .btn { min-height: 36px; }
.ml-motto { padding: 8px 10px 0; font-family: var(--font-serif); font-style: italic; color: #cdb98f; }
@media (max-height: 1080px) {
  .ml-promo { display: none; }
}
@media (max-height: 860px) {
  .ml-motto { display: none; }
}
.ml-date { font-family: var(--font-serif); }
@media (max-width: 1400px) {
  .ml-date { display: none !important; }
}
.user-chip .avatar { background: linear-gradient(135deg, #7fa0ff, #8b7dff 60%, #3fe0d0); color: #fff; }
.kpi { background-repeat: no-repeat !important; background-position: right 38px bottom 8px, 0 0 !important; background-size: auto 50%, cover !important; }
.kpi .chip-ico { border-radius: 50%; }
.delta { border: 1px solid #7ff5e688; background: #3fe0d01f; color: #c9fff8; }
.chart .grid-line { stroke: #ffffff17; stroke-dasharray: 3 5; }
.chart text { fill: #cfd8e6; font-family: var(--font-serif); }
.chart .dot { filter: drop-shadow(0 0 6px #ffc24d); }
.chart .dot--teal { filter: drop-shadow(0 0 6px #3fe0d0); }
.legend i, .legend .d { box-shadow: 0 0 8px currentColor; }
.tab[aria-selected='true'], .tab.active { background: linear-gradient(180deg, #ffe39a, #ffc24d); }
@media (max-width: 720px) {
  .kpi { background-image: var(--ml-card) !important; }
}
/* ---- type ---- */
:root { --font-title: 'Philosopher', 'Be Vietnam Pro', Georgia, serif; --font-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: var(--font-ui); --font-body: var(--font-ui); --font-serif: var(--font-title); --t-head: #fff6df; --t-gold: #ffd479; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input, select, textarea, .input, .select, .textarea { font-family: var(--font-ui); }
h2, h3, .panel-head h3, .glass > h2, .glass > h3, .modal h2, .modal h3, .more-head b { font-family: var(--font-title); font-weight: 700; color: var(--t-head); letter-spacing: .01em; text-shadow: 0 0 1px #fff3d0, 0 0 12px #ffc24d55, 0 1px 2px #000; }
.modal h2, .modal h3 { font-size: 1.6rem; }
p, .sub, .page-head p, .hint, .note, li { font-family: var(--font-ui); }
p, .sub, .page-head p { text-shadow: 0 1px 2px #000a; }
.page-head p { font-weight: 400; }
.sidebar .brand span, .brand span { font-weight: 700; font-size: 1.25rem; }
.sidebar .rail-title { text-shadow: 0 0 8px #ffc24d44; }
.sidebar nav a, .sidebar-links a { font-family: var(--font-ui); }
.sidebar nav a .nm-name { letter-spacing: 0; text-shadow: 0 1px 1px #000; }
.sidebar nav a:hover .nm-name, .sidebar-links a:hover { color: #fff; text-shadow: 0 0 8px #ffd479cc, 0 0 18px #ffb84d66; }
.sidebar nav a[aria-current='page'] .nm-name { text-shadow: 0 1px 0 #fff6d880 !important; }
.sidebar nav a[aria-current='page'] small { color: #4a3210 !important; }
.sidebar .tagline { font-family: var(--font-ui); color: var(--t-soft); }
.btn:hover { filter: brightness(1.08); }
.pill, .user-chip .who b, .tab, .tabbar a, .tab-more { font-family: var(--font-ui); font-weight: 600; }
.pill { color: #fff1d6; }
.kpi .val, .big-num, .stat .stat-value, .num, .lb-xu-val, .coin span, .rw-qty { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.badge, .tag, .sidebar .tag, .delta { font-family: var(--font-ui); font-weight: 700; letter-spacing: .04em; }
a:not(.btn):not(.pill):not(.tab):not([class*='sidebar']) { text-underline-offset: 3px; }
* { scrollbar-width: thin; scrollbar-color: #ffc24d55 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd47966, #ffb84d44); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffd479cc, #ffb84d99); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
.sidebar nav { scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%); }
.sidebar nav::-webkit-scrollbar { display: none; }
.modal, .modal-back, .more-panel, .search-results, .rw-sug { overflow-x: hidden; overscroll-behavior: contain; }
.table-wrap { overscroll-behavior-x: contain; }
html { scroll-behavior: smooth; }
.glass--hover:hover, a > .glass:hover, .kpi:hover, .glass:hover { transform: none !important; }
.btn:hover { transform: none; }
@media (max-height: 1100px) {
  .sidebar .promo { display: none; }
}
/* ---- premium ---- */
:root { --f-deco: 'Playfair Display', 'Philosopher', Georgia, serif; --f-read: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-2xs: .8rem; --fs-xs: .833rem; --fs-sm: .867rem; --fs-base: .933rem; --fs-md: 1rem; --fs-lg: 1.133rem; --fs-xl: 1.4rem; --fs-2xl: 1.867rem; --c-cream: #fff6df; --c-gold: #ffd479; --c-gold-deep: #f0a032; --c-label: #e5d3ad; --sidebar-w: 256px; --gap-card: 20px; --pad-card: 24px; }
body { font-family: var(--f-read); font-size: var(--fs-base); line-height: 1.6; color: var(--c-read); }
.page-head h1, .auth-card h1, .auth-wrap h1, .hero h1 { font-family: var(--f-deco); font-weight: 700; letter-spacing: -.012em; line-height: 1.12; animation: realm-enter .38s var(--ease) 1; }
.page-head h1 { font-size: clamp(1.9rem, 2.1vw, 2.4rem); margin-bottom: 8px; }
.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; }
.page-head .eyebrow { font-family: var(--f-read); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; 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); }
.page-head p { 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 { font-family: var(--f-read); color: var(--c-soft) !important; }
.hint { font-size: var(--fs-sm); line-height: 1.6; }
.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); }
h2, h3, .panel-head h3, .glass > h2, .glass > h3, .ev-sec, .pay-step, .adm-page h2, .bx-head h2 { 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, .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 { 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; }
.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 { color: #032320 !important; text-shadow: 0 1px 0 #e6fffba0; }
.btn--violet, .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; }
.ml-promo .btn, .shop-card .btn { font-size: var(--fs-sm); }
.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; }
.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; }
.kpi .val, .big-num, .stat .stat-value, .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; }
.adm-kpis .kpi .val { font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .meta { min-width: 0; }
.stat .stat-value, .pay-rate .stat-value { font-size: 1.6rem; }
.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; }
.badge, .delta { 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); }
.sidebar { padding: 18px 14px; }
.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; }
}
[data-shell='admin'] .sidebar nav a { min-height: 44px; }
.search input { font-size: var(--fs-base); height: 46px; }
.pill { font-family: var(--f-read); font-size: var(--fs-sm); font-weight: 600; 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; }
.stack-lg, .adm-page { gap: 24px; }
.ev-grid { gap: var(--gap-card); }
.kpi .chip-ico { width: 60px; height: 60px; flex: 0 0 60px; }
.chart text { font-size: 13px; }
.empty b { font-family: var(--f-deco) !important; font-size: var(--fs-md); }
.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; }
.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; }}
.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); }
.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 { 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); }
.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; }
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; }
@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 { font-size: var(--fs-2xs); letter-spacing: .18em; }
  .page-head p { font-size: var(--fs-base); }
  .kpi .chip-ico { width: 44px; height: 44px; flex-basis: 44px; }
  .tab, .pay-page .tab { font-size: var(--fs-sm); padding: 9px 12px; }
  .ev-pack .ev-pkg-items { height: auto; overflow: visible; }
  .ev-pack .ev-need-roll { min-height: 220px; }
  .btn { font-size: var(--fs-base); }
  .table th, .table td { padding: 11px 10px; }
  h3, .panel-head h3, .ev-sec { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-head h1, .hero h1 { animation: none; }
  .tab::after { transition: none; }
}
@media (forced-colors: active) {
  .page-head h1, .hero h1 { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
: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; }
:root main .glass h2, :root main h3, :root main .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; }
:root main .shop-title, :root main .ev-pkg-name, :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; }
: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); }
: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 { font-size: var(--fs-base); }
:root main .page-head p { font-size: var(--fs-md); }
:root main .hint, :root main .muted, :root main .note, :root main small, :root main time, :root main .stat-sub, :root main .ev-wheel-hint { font-size: var(--fs-sm); }
: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); }
:root main .btn { font-size: var(--fs-base); }
:root main .btn--sm { font-size: var(--fs-sm); }
:root main .btn--lg { font-size: var(--fs-md); }
:root main .btn small { font-size: var(--fs-2xs); }
:root main .tab { font-size: var(--fs-base); }
: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; }
: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; }
:root main .badge, :root main .delta { font-size: var(--fs-2xs); }
@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; }
}
:root { --jade-950: #031615; --jade-900: #052220; --jade-800: #082e2b; --jade-700: #0c3b37; --jade-600: #115048; --jade-glow: #3fe0c0; --f-brand: 'Playfair Display', Georgia, serif; --ml-card: var(--surface); --glass-1: #082e2bc9; --glass-2: #0a3431d4; }
body { background: var(--jade-950); }
.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; }
}
.glass, .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; }
.glass .glass, .glass--flat, .ev-stat, .ev-ms, .ev-lcard, .ev-prize-preview, .tk-finder, .pay-coin-preview { 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; }
.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; }
.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 { 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; }
.sidebar .brand span, .brand span, .page-head h1, .auth-wrap h1, .hero h1 { 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; }
.page-head .eyebrow { color: #7ff5dc !important; }
.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; }
}
.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); }
:root body .btn, :root body .btn--primary, :root body .btn--jade, :root body .btn--teal, :root body .btn--violet { --_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); }
: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'] { 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; }
: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; }
: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; }
: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; }
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 .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; }
}
:root body .modal.glass::before, :root body .modal.glass::after { display: none; }
:root body .bx-table tbody tr, :root body .rank-rewards { content-visibility: visible; contain-intrinsic-size: none; }
/* ---- realm-theme ---- */
html body .scene { background-image: none !important; }
.realm-scene-art, .realm-scene-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.realm-scene-art img { object-fit: cover; object-position: center 30%; }
html body .scene::before { z-index: 1; background: var(--realm-veil) !important; }
html body .scene::after { z-index: 2; }
.realm-banner-art, .realm-banner-art img { display: block; width: 100%; }
.realm-banner-art img { height: auto; aspect-ratio: 3 / 1; object-fit: contain; }
.hero.realm-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #e3b35a99; border-radius: 24px; padding: 0; margin-top: 28px; margin-bottom: 40px; background: #062321; text-align: left; }
.realm-hero > .realm-banner-art { position: absolute; inset: 0; z-index: -2; }
.realm-hero > .realm-banner-art img { height: 100%; object-fit: contain; object-position: right center; }
.realm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #032520f2 0%, #032520d9 36%, #03252050 64%, transparent 80%); }
.realm-hero-copy { position: relative; width: 63%; padding: clamp(24px, 3vw, 46px); }
.hero.realm-hero h1 { font-size: clamp(2rem, 3.4vw, 3.4rem); overflow-wrap: anywhere; }
.realm-event-copy { display: grid; gap: 6px; position: relative; padding: 18px 70px 18px 18px; }
.realm-event-copy b { overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .hero.realm-hero { border-radius: 18px; margin-top: 18px; margin-bottom: 28px; }
  .realm-hero > .realm-banner-art { position: relative; inset: auto; z-index: auto; }
  .realm-hero > .realm-banner-art img { height: auto; object-fit: contain; }
  .realm-hero::before { display: none; }
  .realm-hero-copy { width: 100%; padding: 24px 20px; background: linear-gradient(180deg, #0c3b33, #062520); }
  .hero.realm-hero h1 { font-size: clamp(1.8rem, 6.5vw, 2.6rem); }
}
@media (orientation: portrait) {
  .realm-scene-art img { object-position: center top; }
}
/* ---- news-media ---- */
.ct-article-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .85fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.ct-article-copy { min-width: 0; }
.ct-article-copy .ct-lead { margin-top: 0; color: var(--text-soft); font-size: 1.16rem; }
.ct-article-figure { margin: 0; min-width: 0; position: sticky; top: 28px; }
.ct-article-figure img { display: block; width: 100%; max-height: 560px; object-fit: contain; border-radius: 16px; border: 1px solid var(--glass-border); background: rgb(0 0 0 / .15); }
.ct-article-figure figcaption { color: var(--text-mute); font-size: .85rem; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; }
.ct-news-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--glass-border); }
.ct-news-card h3 { font-size: 1.22rem; line-height: 1.45; color: var(--gold-200); }
.ct-news-card p { color: var(--text-soft); line-height: 1.65; }
.ct-news-card strong, .ct-lead strong, .ct-page h1 strong { color: var(--gold-200); font-weight: 700; text-shadow: 0 0 18px rgb(226 187 104 / .16); }
.ct-news-card em, .ct-lead em, .ct-page h1 em { color: #e7dcc3; font-style: italic; }
.ct-image-editor { border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px; background: rgb(0 0 0 / .1); }
.ct-image-editor .ct-actions { margin: 12px 0; }
.ct-image-editor .ct-actions .btn { max-width: 100%; white-space: normal; line-height: 1.5; }
.ct-image-editor img { display: block; width: min(100%, 320px); max-height: 200px; object-fit: contain; border-radius: 10px; margin: 12px 0; }
.ct-upload-status { min-height: 1.5em; margin-top: 8px; color: var(--text-soft); }
@media (max-width: 760px) {
  .ct-article-layout { grid-template-columns: minmax(0, 1fr); }
  .ct-article-figure { position: static; }
  .ct-article-figure img { max-height: 420px; }
}
/* ---- portal-polish ---- */
html body .page-head > p { color: #d1e7de !important; font-weight: 400; padding-left: 12px; border-left: 2px solid #90cfb880; text-shadow: 0 1px 2px #001c1940; }
.page-head .page-notes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
html body .page-head .page-notes li { display: inline-flex; align-items: baseline; gap: 7px; color: #c8e4df; font-size: .8rem; line-height: 1.6; background: none; border: 0; padding: 0; box-shadow: none; text-shadow: 0 1px 4px #001b18; }
.page-notes li::before { content: '◆'; font-size: .5rem; color: #83dfce; align-self: center; text-shadow: 0 0 9px #65d5b899; }
.page-notes strong { color: #ffe2a3; font-weight: 700; text-shadow: 0 0 10px #cf9d3145; }
html body .boss-gif { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 540px; min-height: 220px; background: radial-gradient(ellipse at 50% 70%, #4be1bb1f, #052622aa 65%); }
html body .boss-gif img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-height: none; padding: 12px; object-fit: contain !important; object-position: center; }
.sidebar .ml-promo { padding: 0; background: #062b27; background-image: none; }
.ml-promo-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; }
.ml-promo-copy { position: absolute; inset: auto 0 0; padding: 14px; background: linear-gradient(180deg, #062b2700, #062b27e6 30%, #05241df5); }
.ml-promo-copy b { color: #ffebbc; text-shadow: 0 0 12px #d6ae4344; }
.ml-promo-copy p { color: #daeee4; text-shadow: 0 1px 3px #00140c; }
@media (max-width: 600px) {
  .page-head .page-notes { gap: 7px 14px; }
  html body .page-head .page-notes li { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  html body .page-head > p { animation: none; }
}
/* ---- rank-showcase ---- */
:root body .rank-showcase .rank-showcase-panel { padding: 0; min-width: 0; overflow: hidden; background: transparent !important; border: 0 !important; box-shadow: none !important; }
:root body .rank-showcase-panel::before, :root body .rank-showcase-panel::after { display: none; }
:root body .rank-showcase .table-wrap { min-width: 0; width: 100%; overflow: visible; }
:root body .rank-showcase .bx-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: transparent; }
:root body .rank-showcase .bx-table th { padding: 13px 16px; color: #ffe1a0; font-family: var(--f-read); font-size: var(--fs-xs); letter-spacing: .04em; background: transparent !important; border-block: 1px solid #d6b66d70; white-space: normal; text-shadow: 0 0 14px #dbb55624; }
:root body .rank-showcase .bx-table th:first-child { width: 106px; border-left: 1px solid #d6b66d70; border-radius: 12px 0 0 12px; }
:root body .rank-showcase .bx-table th:nth-child(3) { width: 24%; }
:root body .rank-showcase .bx-table th:last-child { width: 150px; border-right: 1px solid #d6b66d70; border-radius: 0 12px 12px 0; }
:root body .rank-showcase .bx-table thead + .bx-entry::before { content: ''; display: table-row; height: 14px; }
:root body .rank-showcase .bx-table tbody > tr[data-rank] > td { padding: 15px 16px; background: transparent !important; border-top: 1px solid #d6b66d90; border-bottom: 1px solid #dbbf712c !important; color: #e7f4eb; font-family: var(--f-read); font-size: var(--fs-base); overflow-wrap: anywhere; }
:root body .rank-showcase .bx-table tr[data-rank] > td:first-child { border-left: 1px solid #d6b66d90; border-radius: 14px 0 0 0; }
:root body .rank-showcase .bx-table tr[data-rank] > td:last-child { border-right: 1px solid #d6b66d90; border-radius: 0 14px 0 0; }
:root body .rank-showcase .bx-table tr.bx-me > td:first-child { box-shadow: inset 3px 0 0 #69d7b8; }
:root body .rank-showcase .bx-rank-label { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; }
:root body .rank-showcase .bx-rank-1 .bx-rank-label { color: #ffe5a7; text-shadow: 0 0 13px #ffc25466; }
:root body .rank-showcase .bx-rank-crown { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 7px #ffbf5360); }
:root body .rank-showcase .bx-table .bx-empty { color: #aecbc2; font-size: var(--fs-sm); }
:root body .rank-showcase .bx-character { display: block; font-weight: 650; }
:root body .rank-showcase .bx-character-server { display: block; color: #a4d6c5; font-size: var(--fs-xs); margin-top: 4px; }
:root body .rank-showcase .bx-table td.num { font-variant-numeric: tabular-nums; font-weight: 650; }
:root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell { width: auto; max-width: 0; padding: 2px 16px 16px !important; border: 1px solid #d6b66d90 !important; border-top: 0 !important; border-radius: 0 0 14px 14px; }
:root body .rank-showcase .bx-separator, :root body .rank-showcase .bx-separator tr, :root body .rank-showcase .bx-separator td { background: transparent !important; border: 0 !important; box-shadow: none !important; }
:root body .rank-showcase .bx-separator td { height: 18px; padding: 0 !important; }
:root body .rank-showcase .rank-rewards { color: #e3f1e8; }
:root body .rank-showcase .rank-rewards > summary { min-height: 43px; padding: 10px 0; gap: 8px; color: #ffe3a5; font-size: var(--fs-sm); }
:root body .rank-showcase .rank-rewards > summary::before { width: 12px; font-size: 1.1rem; }
:root body .rank-showcase .rank-rewards > summary .badge { padding: 2px 8px; color: #b6d6c8; border-color: #b9c69040; background: #56836924; font-size: var(--fs-2xs); }
:root body .rank-showcase .rank-rewards > summary:focus-visible { outline: 2px solid #ffe3a5; outline-offset: 2px; border-radius: 5px; }
:root body .rank-showcase .bx-gifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 7px; padding: 4px 0; }
:root body .rank-showcase .bx-gifts .tn-reward { display: flex; flex-direction: column; width: auto; min-width: 0; gap: 5px; padding: 4px 0; align-items: center; text-align: center; border: 0; background: transparent; }
:root body .rank-showcase .tn-reward > .slot { width: 44px; height: 44px; margin: 0; border-radius: 9px; background: #082c29; border-color: #d6b66d60; box-shadow: inset 0 0 12px #52b69217; }
:root body .rank-showcase .tn-reward > .slot.rarity-epic, :root body .rank-showcase .tn-reward > .slot.rarity-legendary { border-color: #b399f380; background: #20243a90; }
:root body .rank-showcase .tn-reward .nm { width: 100%; min-height: 2.8em; height: auto; font-size: var(--fs-2xs); line-height: 1.4; color: #dcefe5; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
:root body .rank-showcase .tn-reward .ct { margin-top: auto; grid-column: auto; align-self: auto; font-family: var(--f-read); color: #ffe29a; font-size: .75rem; line-height: 1.4; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root body .rank-showcase .rank-rewards > .hint { margin: 12px 0 0; color: #abcdbf; font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 600px) {
  :root body .rank-showcase .bx-table, :root body .rank-showcase .bx-table tbody { display: block; }
  :root body .rank-showcase .bx-table thead { display: none; }
  :root body .rank-showcase .bx-entry { border: 1px solid #d6b66d90; border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
  :root body .rank-showcase .bx-table tbody > tr[data-rank] { display: grid; padding: 12px 9px; grid-template-columns: 43px minmax(0, 1fr) auto; gap: 5px 6px; border-bottom: 1px solid #dbbf7140; }
  :root body .rank-showcase .bx-table tbody > tr[data-rank] > td { padding: 2px 0; border: 0 !important; box-shadow: none !important; font-size: var(--fs-sm); border-radius: 0; }
  :root body .rank-showcase .bx-rank-label { flex-direction: column; gap: 2px; }
  :root body .rank-showcase .bx-rank-crown { width: 23px; height: 23px; }
  :root body .rank-showcase .bx-table .btn--sm { padding: 6px 7px; min-height: 38px; font-size: var(--fs-2xs); }
  :root body .rank-showcase .bx-table tr[data-rank] + tr { display: block; }
  :root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell { display: block; width: auto; max-width: none; padding: 0 10px 12px !important; border: 0 !important; }
  :root body .rank-showcase .bx-separator { display: none !important; }
  :root body .rank-showcase .bx-gifts { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px 6px; }
}
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  :root body .rank-showcase .bx-entry { background: #07362e !important; }
}
@media (forced-colors: active) {
  :root body .rank-showcase .bx-table td, :root body .rank-showcase .bx-table th, :root body .rank-showcase .bx-entry { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; }
}
/* ---- portal-refine ---- */
:root body .sidebar nav a[aria-current='page'], :root body .sidebar-links a[aria-current='page'], :root body .more-grid a[aria-current='page'] { border: 1px solid #d7b46b80; }
:root body .sidebar nav a[aria-current='page'] .nm-name, :root body .sidebar nav a[aria-current='page'] small { color: #fff0cd !important; text-shadow: none; }
:root body .sidebar nav a[aria-current='page'] .ico { border: 1px solid #e3b35a55; box-shadow: none; }
:root body .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
:root body .sidebar > * { flex-shrink: 0; }
:root body .sidebar .sidebar-feature-nav { flex: 0 0 auto; overflow: visible; }
:root body .sidebar .rail-title { margin: 6px 8px 2px; padding: 5px 4px; }
:root body .sidebar-links { margin-top: 5px; padding-top: 5px; }
:root body .sidebar-links a { min-height: 42px; padding: 7px 8px; }
:root body .sidebar .ml-promo { height: 112px; margin: 8px 2px 3px; padding: 0; border-radius: 12px; }
:root body .sidebar .ml-promo-art { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 36%; opacity: .66; }
:root body .sidebar .ml-promo-copy { inset: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
:root body .sidebar .ml-promo-copy b { font-size: .94rem; }
:root body .sidebar .ml-promo-copy p { margin: 3px 0 6px; font-size: .71rem; line-height: 1.35; max-width: 28ch; }
:root body .sidebar .ml-promo-copy .btn { min-height: 30px; padding: 4px 9px; font-size: .73rem; }
@media (max-height: 760px) and (min-width: 981px) {
  :root body .sidebar { top: 10px; height: calc(100dvh - 20px); padding: 12px 10px; }
  :root body .sidebar nav a { min-height: 42px; gap: 8px; }
  :root body .sidebar .lb-xu { margin-block: 8px; padding: 9px; }
  :root body .sidebar .ml-promo { height: 96px; }
  :root body .sidebar .ml-motto { margin-top: 8px; }
}
:root body .page-head .pack-notes .badge { padding: 0; min-height: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #ffe2a3; font-size: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; white-space: normal; }
:root body .page-head .pack-notes .coin { font-size: inherit; }
:root body #pack-root .ev-pkg.is-x2 { border: 1px solid var(--gold-line) !important; background: var(--surface) !important; box-shadow: var(--gold-frame) !important; }
:root body #pack-root .ev-x2-sheen { position: absolute; inset: 2px; overflow: hidden; border-radius: inherit; z-index: 2; pointer-events: none; }
:root body #pack-root .ev-x2-shimmer { position: absolute; display: block; inset: 0; transform: none; opacity: .25; background:
    radial-gradient(circle at 9% 14%, #ffe38b 0 1px, transparent 2px),
    radial-gradient(circle at 86% 23%, #ffd665 0 1px, transparent 2px),
    radial-gradient(circle at 95% 53%, #ffe38b 0 1.5px, transparent 3px),
    radial-gradient(circle at 12% 73%, #ffd665 0 1px, transparent 2px),
    radial-gradient(circle at 76% 91%, #ffe38b 0 1.5px, transparent 3px),
    radial-gradient(circle at 44% 5%, #ffd665 0 1px, transparent 2px); }
@media (prefers-reduced-motion: reduce) {
  :root body #pack-root .ev-x2-shimmer { animation: none !important; opacity: .35; }
}
@media (max-width: 980px) {
  :root body { --tabbar-h: 76px; }
  :root body .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); box-sizing: border-box; padding: 4px 2px; gap: 0; border: 1px solid #d7b46b80 !important; }
  :root body .tabbar a, :root body .tabbar .tab-more { min-width: 0; min-height: 44px; width: 100%; height: 100%; box-sizing: border-box; padding: 2px; gap: 4px; overflow: hidden; color: #c7dfd7; border-radius: 15px; }
  :root body .tabbar .tab-label { display: block; width: 100%; min-width: 0; line-height: 1.2; font-size: .72rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root body .tabbar .ico, :root body .more-grid .ico { flex-shrink: 0; box-sizing: border-box; border: 1px solid #d7b46b59; }
  :root body .tabbar .ico { width: 36px; height: 32px; border-radius: 11px; }
  :root body .tabbar a[aria-current='page'], :root body .tabbar .tab-more[aria-expanded='true'] { color: #ffe2a3; background: #18544366; }
  :root body .tabbar a[aria-current='page'] .ico, :root body .tabbar .tab-more[aria-expanded='true'] .ico, :root body .more-grid a[aria-current='page'] .ico { color: #ffe2a3; border-color: #e3b35ac9; background: linear-gradient(145deg, #23765eb3, #0b3a34e6) !important; box-shadow: 0 0 12px #76d9bb22, inset 0 1px 0 #ffe2a333 !important; }
  :root body .tabbar a:focus-visible, :root body .tabbar button:focus-visible, :root body .more-grid a:focus-visible { outline: 2px solid #ffe2a3; outline-offset: -2px; }
  :root body .more-panel { min-width: 0; box-sizing: border-box; overflow-x: hidden; border: 1px solid #d7b46ba6 !important; max-height: calc(100vh - var(--tabbar-h) - 40px - env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--tabbar-h) - 40px - env(safe-area-inset-bottom)); padding: 12px; }
  :root body .more-head { gap: 8px; }
  :root body .more-head b { min-width: 0; overflow-wrap: anywhere; }
  :root body .more-head .icon-btn { flex-shrink: 0; width: 44px; height: 44px; }
  :root body .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  :root body .more-grid a { min-width: 0; box-sizing: border-box; padding: 26px 8px 12px; border: 1px solid #d7b46b66; color: #e0eee7; box-shadow: inset 0 1px 0 #ffe2a326; }
  :root body .more-grid .nm { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  :root body .more-grid .tag { font-size: 10px; line-height: 1.2; padding: 3px 6px; background: #164d40; color: #ffe2a3; border: 1px solid #e3b35a80; }
}
@media (max-width: 600px) {
  :root body .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:root body .toasts { pointer-events: none; }
:root body .toast { position: relative; pointer-events: auto; padding: 11px 48px 11px 14px; border: 1px solid #d7b46b80; border-left: 3px solid #85dfca; max-height: 30vh; overflow: auto; overflow-wrap: anywhere; }
:root body .toast.err { border-left-color: #ff8791; }
:root body .toast span { display: block; font-size: .86rem; line-height: 1.4; }
:root body .toast b { font-size: .92rem; margin-bottom: 3px; }
:root body .toast-close { position: absolute; right: 3px; top: 3px; width: 40px; height: 40px; border: 0; background: transparent; color: #ffe2a3; font-size: 24px; cursor: pointer; }
:root body .hs-confirm-actions { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
:root body .hs-confirm p { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  :root body .toasts { top: calc(12px + env(safe-area-inset-top)); bottom: auto; right: 12px; width: min(360px, calc(100% - 24px)); }
}
:root body select { color-scheme: dark; }
:root body select:focus-visible { outline: 2px solid #ffe2a3; outline-offset: 2px; }
@supports (appearance: base-select) {
  :root body select:not([multiple]):not([size]), ::picker(select) { appearance: base-select; }
  ::picker(select) { border: 1px solid #e3b35a99; border-radius: 10px; padding: 5px; box-shadow: 0 10px 28px #001b1880; }
  :root body select:not([multiple]):not([size]) { background-image: none; }
  :root body select option { padding: 8px 10px; border-radius: 6px; }
}
@media (forced-colors: active) {
  :root body .sidebar nav a[aria-current='page'], :root body .sidebar-links a[aria-current='page'], :root body #pack-root .ev-pkg.is-x2, :root body select, ::picker(select) { background: Canvas !important; color: CanvasText !important; border-color: Highlight !important; box-shadow: none !important; }
  :root body #pack-root .ev-x2-shimmer { display: none; }
}
[hidden] { display: none !important; }
html.modal-open { overflow: hidden; }
:root body :focus-visible { outline: 2px solid #c7efd8; outline-offset: 3px; }
:root body #main:focus { outline: none; }
:root body .btn, :root body .pill, :root body .icon-btn, :root body .tab { touch-action: manipulation; }
:root body .icon-btn { min-width: 44px; min-height: 44px; }
:root body .btn { white-space: normal; text-align: center; }
:root body .btn[aria-busy='true'], :root body form[aria-busy='true'] [type='submit'] { cursor: progress; }
:root body .btn[aria-busy='true']::after, :root body form[aria-busy='true'] [type='submit']::after { content: ''; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
:root body .form-error { scroll-margin-block: 120px; }
:root body .search-results { z-index: 75; max-height: min(340px, 55dvh); background: #09362ff5 !important; }
:root body .search-results a { min-height: 44px; font-family: var(--f-read); font-weight: 500; }
:root body .search-results a[data-active='true'] { background: #74c6a52b; color: #fff1cf; }
:root body .appbar { flex-wrap: wrap; }
:root body .appbar .search { min-width: 180px; flex: 1 1 250px; }
:root body .table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
:root body .grid > *, :root body .field { min-width: 0; }
:root body .ft-card { background: #09362ff5 !important; }
@media (max-width: 1400px) {
  :root body .appbar .ml-date { display: none; }
}
@media (max-width: 860px) {
  :root body .topbar { height: auto; padding-top: max(10px, env(safe-area-inset-top)); }
  :root body .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  :root body .topbar-inner > .spacer { display: none; }
  :root body .topbar .brand { min-width: 0; gap: 8px; }
  :root body .topbar .brand span { min-width: 0; font-size: 1.15rem; line-height: 1.2; white-space: normal; }
  :root body .topbar .brand .seal { width: 32px; height: 34px; font-size: 1.2rem; }
  :root body .topbar .btn--sm { min-height: 42px; padding-inline: 10px; }
  :root body .topbar .nav { display: flex; grid-column: 1 / -1; width: 100%; min-width: 0; gap: 4px; margin-left: 0; overflow-x: auto; padding: 4px 0 8px; border-top: 1px solid #c4d7bd1f; scrollbar-width: thin; }
  :root body .topbar .nav a { flex-shrink: 0; min-height: 40px; padding: 8px 12px; font-size: .85rem; }
}
@media (max-width: 600px) {
  :root body .appbar .search { display: block; order: 5; flex-basis: 100%; }
  :root body .search input, :root body .input, :root body .select, :root body .textarea { font-size: 16px; }
  :root body .search-results { top: calc(100% + 6px); }
  :root body .btn--sm { min-height: 42px; }
  :root body .modal-back { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
}
.perf-lite body .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: #082e2be8 !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  :root body *, :root body *::before, :root body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}