/* Ngọc bích vân mây: kính xanh lá ngọc, viền vàng phát sáng trên toàn website. */
:root {
  --realm-gold: #ffda63; --realm-gold-hi: #fff4b8; --realm-jade: #8ce8b5;
  --gold-line: #ffe276d9; --gold-hi: #fff5b8; --realm-border: #f3d87580;
  --text: #edf7ee; --text-hi: #fff8dd; --text-soft: #cee8d5; --text-mute: #a9ccb5;
  --realm-clouds: radial-gradient(ellipse 80% 24% at 12% 8%, #e3ffca1f, transparent 74%), radial-gradient(ellipse 72% 28% at 90% 76%, #b4f5c61c, transparent 72%), linear-gradient(155deg, transparent 28%, #d2f4be0d 43%, transparent 57%);
  --surface: var(--realm-clouds), linear-gradient(140deg, #0b674c80, #063f328c);
  --surface-flat: var(--realm-clouds), linear-gradient(135deg, #1775502e, #083f303d);
  --glass-solid: #073f2d; --glass-blur: 16px; --glass-blur-hi: 20px;
  --gold-frame: inset 0 1px 0 #fff6bf80, inset 0 -1px 0 #dcb74433, 0 0 9px #ffda5b3d, 0 0 24px #ffd34814, 0 12px 32px #001c1933;
  --realm-overlay: radial-gradient(ellipse 85% 25% at 12% 0%, #d2f8ba14, transparent 75%), linear-gradient(145deg, #0e513de0, #062f25eb);
  --realm-field: #032f204d;
  --realm-veil: linear-gradient(180deg, #064c3138, #07563b45 62%, #032d204f);
}
:root[data-realm-period='night'] { --realm-veil: linear-gradient(180deg, #07523466, #074a3766 62%, #032d2366); }

/* Mặt kính ngoài. Các ô nằm trong kính dùng tint, không làm mờ lồng nhau. */
:root body :is(.glass, .gm-section, .shop-card, .ct-news-card, .tn-tier, .ev-pkg, .ev-wheel-card, .leaderboard-panel),
:root body .dashboard .kpi:nth-child(n), :root body .dashboard .float-card, :root body[data-shell='admin'] .glass:has(.table-wrap) {
  background: var(--surface) !important; border: 1px solid var(--gold-line) !important; box-shadow: var(--gold-frame) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); backdrop-filter: blur(var(--glass-blur)) saturate(115%);
}
:root body .glass::before { opacity: .95; background: linear-gradient(135deg, #fff6c9, #ffe47799 28%, #edbd4d40 58%, #fff2a9); }
:root body .glass::after { opacity: .55; background: radial-gradient(ellipse 50% 16% at 12% 5%, #e7ffbd20, transparent 74%), radial-gradient(ellipse 64% 24% at 90% 80%, #8ce8b526, transparent 72%), radial-gradient(ellipse 25% 2% at 10% 0%, #fff2a966, transparent); }
:root body :is(.glass .glass, .glass .gm-section, .glass--flat, .ev-stat, .ev-ms, .ev-lcard, .ev-prize-preview, .tk-finder, .pay-coin-preview, .pack-admin-list > details) {
  background: var(--surface-flat) !important; border-color: var(--realm-border) !important; box-shadow: inset 0 1px 0 #e5fff10a !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root body :is(.glass--hover:hover, .kpi:hover) { border-color: #fff4b8 !important; box-shadow: var(--gold-frame), 0 0 14px #ffe26b66 !important; transform: none; }

/* Navigation nhẹ, cùng chất liệu trên các khung trang. */
:root body :is(.sidebar, .topbar, .appbar, .tabbar, .more-panel) {
  background: var(--realm-clouds), linear-gradient(145deg, #07563d80, #043c2e99) !important;
  border-color: var(--gold-line) !important; box-shadow: var(--gold-frame) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); backdrop-filter: blur(var(--glass-blur)) saturate(115%);
}
:root body .appbar { position: relative; z-index: 40; border: 1px solid var(--realm-border); border-radius: 18px; padding: 10px 14px; }
:root body :is(.lb-xu, .dashboard .hello > div:first-child, .pay-chip) { background: #bdefd509 !important; border-color: var(--realm-border) !important; box-shadow: inset 0 1px 0 #e3fff00c; }
:root body .sidebar nav a[aria-current='page'], :root body .sidebar-links a[aria-current='page'], :root body .more-grid a[aria-current='page'] {
  background: linear-gradient(110deg, #a4dfdb26, #baf0d40d) !important; border-color: #ffe483b3;
  box-shadow: inset 2px 0 0 #fff0a6, inset 0 1px 0 #fff5ba33, 0 0 10px #ffdd5c26; color: #fff6d8 !important;
}
:root body .sidebar nav a[aria-current='page'] :is(.nm-name, small) { color: #e4f3f3 !important; }
:root body .sidebar nav a[aria-current='page'] .ico { background: #b3e5e30f; color: #b6efdf !important; border-color: #ffe483b3; }
:root body .sidebar nav a .ico { color: #afdcc5 !important; }
:root body .tabbar a[aria-current='page'] { background: #8de8b51f; box-shadow: inset 0 2px 0 #ffe58b; color: #fff4cc; }
:root body .sidebar .ml-promo { border-color: var(--realm-border); box-shadow: none; }
:root body .sidebar .ml-promo-copy { background: linear-gradient(90deg, #103d26cc, #103d2633); }
:root body .hero.realm-hero { background: var(--surface); border-color: var(--gold-line); }
:root body .realm-hero::before { background: linear-gradient(90deg, #103d26db, #103d2699 40%, #103d2626 70%, transparent); }
:root body .realm-hero-copy { background: transparent; }

/* Tiêu đề và đường phân cách ánh vàng, thân chữ sáng ngà dễ đọc. */
:root body :is(.page-head h1, .hello h1, .hero h1, .auth-card h1, .gm-brand h2) {
  background: none; color: #fff0ae; -webkit-text-fill-color: currentColor; font-style: normal; filter: none; text-shadow: 0 0 12px #ffdb574d, 0 2px 4px #00291c;
}
:root body .page-head { padding-bottom: 18px; }
:root body .page-head::before { display: none; }
:root body .page-head::after { left: 0; bottom: 0; width: min(240px, 60%); height: 1px; background: linear-gradient(90deg, #fff2aa, #ffcf53b3 60%, transparent); box-shadow: 0 0 9px #ffdb5d80; transform-origin: left; opacity: 1; }
:root body :is(.page-head, .hello) .eyebrow { color: #b4dfc9 !important; letter-spacing: .18em; text-shadow: none; }
:root body .page-head .eyebrow::before { height: 1px; background: #bbdedc99; box-shadow: none; }
:root body :is(.panel-head, .adm-section-title) { padding-bottom: 12px; border-bottom: 1px solid #c6ead71f; }
:root body :is(.panel-head h3, .adm-section-title h2, .adm-section-title h3, .ev-sec, .gm-section h3) { color: #e8f2ed; text-shadow: none; }
:root body .ev-sec::before { background: #ffe68b; width: 2px; box-shadow: 0 0 10px #ffda5b99; }
:root body :is(.label, .field > label) { color: #bdd8ca; }

/* Nút kính không có bệ dày; hành động chính sáng hơn nhưng vẫn xuyên nền. */
:root body :is(.btn, .hero-actions > .btn) {
  background: var(--realm-btn-fill, linear-gradient(145deg, #d8ffeb12, #b2e9cc06)) !important;
  color: var(--realm-btn-ink, #e6f4ed) !important; border: 1px solid var(--realm-btn-edge, #ffe18ca6) !important;
  box-shadow: inset 0 1px 0 #fff3b733, 0 0 7px #ffdc5926, 0 3px 10px #07291712; text-shadow: none; border-radius: 12px;
  min-height: 44px; font-weight: 600; letter-spacing: 0; transition: transform .18s ease, border-color .18s ease;
}
:root body .btn:is(.btn--primary, .btn--feature, .btn--jade, .btn--teal) {
  --realm-btn-fill: var(--realm-clouds), linear-gradient(135deg, #23b57866, #0c654c66); --realm-btn-ink: #fff7d9; --realm-btn-edge: #fff0a6;
  box-shadow: inset 0 1px 0 #fff7bc73, 0 0 10px #ffd9604d, 0 4px 16px #003d2826;
}
:root body .btn--ghost { --realm-btn-fill: #70d89c0d; --realm-btn-edge: #f4d77f80; --realm-btn-ink: #e2f2db; }
:root body .btn--danger { --realm-btn-fill: linear-gradient(135deg, #f1a0a022, #ba6d7d14); --realm-btn-edge: #edb0b74d; --realm-btn-ink: #ffd4d8; }
:root body .btn :is(svg, .action-arrow) { color: inherit; filter: none; }
:root body .btn:not(:disabled):not([aria-disabled='true']):hover {
  background: var(--realm-btn-fill, linear-gradient(145deg, #d8ffeb21, #b2e9cc10)) !important;
  color: var(--realm-btn-ink, #f3fff9) !important; border-color: #fff4b8 !important;
  box-shadow: inset 0 1px 0 #fff7bc99, 0 0 13px #ffe36a73, 0 4px 18px #003d2826; transform: none; filter: none;
}
:root body .btn:disabled, :root body .btn[aria-disabled='true'] { background: #b0d0bf08 !important; color: #a8c7b7 !important; border-color: #c7e5d51c !important; box-shadow: none; text-shadow: none; transform: none; opacity: .65; }
:root body :is(.pill, .icon-btn, .user-chip, .gm-combo-trigger) { background: linear-gradient(135deg, #d4ffe90d, #a4ddbf08) !important; color: #d9eee3; border-color: var(--realm-border) !important; box-shadow: inset 0 1px 0 #e0ffef12; }

/* Tab kính nổi: chữ và vạch sáng xác định trạng thái. */
:root body .tabs { background: #0c36203d !important; border-color: #ffe483b3; box-shadow: inset 0 1px 0 #ddffed0a; padding: 6px; gap: 6px; }
:root body .tab { position: relative; overflow: hidden; border: 1px solid transparent; min-height: 44px; background: transparent; color: #aed3c0; box-shadow: none; text-shadow: none; }
:root body :is(.tab.active, .tab[aria-selected='true'], .tabs .tab[aria-current='page']) {
  background: var(--realm-clouds), linear-gradient(130deg, #27a86b4d, #13633f4d) !important; border-color: #fff0a6 !important;
  color: #fff5cb !important; box-shadow: inset 0 1px 0 #fff5ba66, 0 0 12px #ffdf5c33; text-shadow: none; font-weight: 600;
}
:root body .tab::after { background: #b2e7d9; box-shadow: none; }
:root body :is(.tab.active, .tab[aria-selected='true'])::after { background: #fff0a6; opacity: 1; transform: scaleX(.6); height: 1px; box-shadow: 0 0 8px #ffd74f99; }

/* Ô nhập nằm dưới mặt kính; giữ nền chọn native đủ tương phản. */
:root body :is(.input, .select, .textarea, .gm-combo-search, .search input), :root body select {
  background-color: var(--realm-field) !important; border-color: #ffe483b3 !important; box-shadow: inset 0 1px 3px #04251414; color: #eaf7f0; accent-color: #a5dcd0;
}
:root body .search input { background-image: none !important; }
:root body :is(.input, .select, .textarea, .gm-combo-search, .search input):focus { background-color: #12452a4d !important; border-color: #ffe483b3 !important; box-shadow: 0 0 0 3px #a6e2db12 !important; }
:root body :is(.input, .textarea, .gm-combo-search, .search input)::placeholder { color: #9fc9b3; opacity: 1; }
:root body select option, :root body select optgroup { background: #133e28; color: #eaf7f0; }
:root body select option:checked { background: #285b40; color: #edfff8; }
:root body :is(.btn, .tab, .gm-combo-trigger, select):focus-visible { outline: 2px solid #bdeee3; outline-offset: 3px; }
@supports (appearance: base-select) {
  ::picker(select) { background: var(--realm-overlay); border-color: #ffe483b3; color: #eaf7f0; backdrop-filter: blur(var(--glass-blur)); }
  :root body select::picker-icon { color: #bddfcd; }
  :root body select option:hover, :root body select option:focus { background: #a8dfc21f; }
}

/* Lớp nổi đậm hơn để chữ phía sau không xuyên gây rối. */
:root body :is(.modal, .search-results, .bell-menu, .ft-card, .more-panel, .gm-combo-popup, .account-suggestions, .adm-picker-results, .adm-item-results, .rw-sug, .evadm-search .results), :root body .glass.modal {
  background: var(--realm-overlay) !important; border-color: #ffe483b3 !important;
  box-shadow: inset 0 1px 0 #e5fff11c, 0 18px 50px #05221366 !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-hi)); backdrop-filter: blur(var(--glass-blur-hi));
}
:root body :is(.adm-savebar, .cfg-savebar, .modal > .stack > .row-between:last-child, .modal .lc-modal-foot) { background: var(--realm-overlay) !important; border-color: var(--realm-border); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
:root body .modal :is(.row-between, .lc-modal-foot) { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root body :is(.modal-back, .ft-back) { background: #0820147a !important; }
:root body .table th { background: #12402880 !important; color: #d9eee3; }
:root body .table td { border-color: #ffe483b3 !important; }
:root body .table tbody tr:hover td { background: #c1edd608 !important; }
:root body :is(.gm-combo-option, .adm-picker-results button, .adm-item-results button, .account-option):hover,
:root body :is(.rw-sug [role='option'], .gm-combo-option, .adm-picker-results button, .adm-item-results button, .account-option)[aria-selected='true'],
:root body :is(.gm-combo-option, .adm-picker-results button, .adm-item-results button)[data-active='true'] { background: #b8e5e51c; color: #eafaf5; outline: 1px solid #b7dedb66; outline-offset: -1px; box-shadow: inset 2px 0 0 #b6e2d5; }

/* Thông báo dùng màu ngữ nghĩa dịu và vạch cạnh, cùng chất liệu kính. */
:root body :is(.adm-note, .bx-note, .tn-warn, .pay-warn, .shop-note, .ws-gate, .ev-msg, .gm-result, .ev-daily, .toast) {
  background: var(--realm-note-fill, linear-gradient(110deg, #e5ca8b10, #a4dfc005), #103d2680) !important;
  border: 1px solid #d2eedf2b !important; border-left: 2px solid var(--realm-note-edge, #d6c58f99) !important;
  color: var(--realm-note-ink, #e0e7e6); box-shadow: inset 0 1px 0 #e7fff30c; border-radius: 12px;
}
:root body :is(.ev-msg--ok, .gm-result:not([data-kind='err']), .toast:not(.err), .ev-daily.claimed) { --realm-note-fill: linear-gradient(110deg, #88d4bc14, #9addba05), #103d2680; --realm-note-edge: #9bdebe; --realm-note-ink: #def4e9; }
:root body :is(.adm-note--danger, .ev-msg--err, .gm-result[data-kind='err'], .toast.err) { --realm-note-fill: linear-gradient(110deg, #eea4ac1f, #d299c208), #153d2899; --realm-note-edge: #edabb2; --realm-note-ink: #fce2e6; }
:root body :is(.ev-msg--loading, .ws-gate) { --realm-note-edge: #a3ddbf; --realm-note-ink: #e0f4ea; }
:root body .toast { background: var(--realm-overlay) !important; -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
:root body :is(.badge--jade, .gm-auth) { background: #a7dcca12; color: #bde9d5; border-color: #ffe483b3; box-shadow: none; }
:root body .form-error:not(:empty) { padding: 10px 12px; border: 1px solid #e5abb133; border-left: 2px solid #edabb2; border-radius: 10px; background: #d9859821; color: #ffe0e4; }
:root body .ev-code-value { color: #f3eee0; text-shadow: none; letter-spacing: .04em; }
:root body .ev-code-ico { color: #d8e8df; background: linear-gradient(140deg, #c5e9df1c, #b4e8cd0a); border: 1px solid #ffdf7f99; box-shadow: inset 0 1px 0 #e5fffa17; }
:root body .ev-code-input { letter-spacing: .05em; font-weight: 500; }
:root body .ev-spin-btns .btn { min-height: 56px; }
:root body .ev-spin-btns .btn small { color: inherit; opacity: .8; }
:root body :is(.ev-lcard.lit, .ev-ms.next) { border-color: #ffe483b3 !important; box-shadow: inset 0 1px 0 #eaffef24, 0 0 12px #aad8d00d !important; }
:root body .gc-audience-options input:checked + span { color: #e0f7ed; background: #a8ded223; border-color: #ffe483b3; box-shadow: inset 0 1px 0 #e6fff71a; }

/* Khối phụ và bảng hạng giữ cùng chất kính; phần thưởng vẫn giữ màu phẩm chất. */
:root body :is(.ev-sum, .ev-hist-i, .adm-line, .cfg-preview) { background: var(--surface-flat) !important; border-color: var(--realm-border); }
:root body .rank-showcase .bx-entry, :root body .rank-showcase .bx-table thead { background: var(--surface); }
:root body .rank-showcase .bx-table tbody > tr[data-rank] { background: #38ab7014 !important; }
:root body .rank-showcase .bx-table tbody > tr[data-rank='1'] { background: linear-gradient(100deg, #ffe06b20, #5dd99312 50%, transparent) !important; }
:root body .rank-showcase .bx-table tbody > tr[data-rank] > td { border-top-color: var(--gold-line); }
:root body .rank-showcase .bx-table tr[data-rank] > td:first-child { border-left-color: var(--gold-line); }
:root body .rank-showcase .bx-table tr[data-rank] > td:last-child { border-right-color: var(--gold-line); }
:root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell { background: var(--surface-flat) !important; border-color: var(--gold-line) !important; }
@media (max-width: 600px) { :root body .rank-showcase .bx-entry { border-color: var(--gold-line); box-shadow: 0 0 9px #ffdb5b29; } }

/* Phản hồi chỉ chạy theo tương tác; giữ ::after cho spinner đang xử lý. */
:root body :is(.btn, .tab, .gm-combo-trigger)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(108deg, transparent 25%, #ffde7b24 46%, #fff7c25c 50%, transparent 75%);
  opacity: 0; transform: translateX(-115%); transition: none;
}
:root body .gm-combo-trigger { position: relative; overflow: hidden; }
:root body .btn:not(:disabled):not([aria-disabled='true']):hover::before { opacity: 0; transform: translateX(-115%); transition: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-motion='full'] body :is(.btn, .tab, .gm-combo-trigger).is-lit::before { animation: realm-control-sweep .85s ease-out 1; }
  :root[data-motion='full'] body .glass.is-lit::after { animation: realm-card-light 1.1s ease-out 1; }
  :root[data-motion='full'] body .page-head.is-lit::after { animation: realm-title-light 1s ease-out 1; }
  :root[data-motion='full'] body :is(.gm-combo-option, .adm-picker-results button, .adm-item-results button, .rw-sug [role='option'], .adm-note, .bx-note, .tn-warn, .pay-warn, .shop-note, .toast, .ev-daily, .ev-msg, .gm-result).is-lit { animation: realm-status-light .65s ease-out 1; }
  :root[data-motion='lite']:not(.perf-lite) body :is(.btn, .tab, .gm-combo-trigger).is-lit::before { transform: none; animation: realm-tap-feedback .3s ease-out 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-motion='full'] body .btn:not(:disabled):not([aria-disabled='true']):hover { transform: translateY(-1px); }
  :root[data-motion='full'] body .btn:not(:disabled):not([aria-disabled='true']):active { transform: translateY(0); }
}
@keyframes realm-control-sweep { 0% { opacity: 0; transform: translateX(-115%); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateX(115%); } }
@keyframes realm-card-light { 0%, 100% { opacity: .3; } 40% { opacity: .8; } }
@keyframes realm-title-light { 0% { opacity: .3; transform: scaleX(.65); } 60% { opacity: 1; } 100% { opacity: .8; transform: scaleX(1); } }
@keyframes realm-status-light { from { opacity: .7; } to { opacity: 1; } }
@keyframes realm-tap-feedback { 0%, 100% { opacity: 0; } 40% { opacity: .65; } }
:root.effects-paused body .is-lit, :root.effects-paused body .is-lit::before, :root.effects-paused body .is-lit::after { animation: none !important; }
@media (max-width: 760px) {
  :root { --glass-blur: 8px; --glass-blur-hi: 12px; }
  :root body .realm-hero-copy { background: var(--surface-flat); }
  :root body .appbar { padding: 10px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { :root body .is-lit, :root body .is-lit::before, :root body .is-lit::after { animation: none !important; } }
/* Máy yếu giữ sắc kính, bỏ blur; trợ năng ưu tiên độ rõ chữ. */
:root.perf-lite { --surface: linear-gradient(135deg, #c6eed90d, #a0e2c004), linear-gradient(#123c26e8, #123c26e8); --glass-blur: 0px; --glass-blur-hi: 0px; }
:root.perf-lite body :is(.glass, .sidebar, .topbar, .appbar, .tabbar, .modal, .gm-section, .gm-combo-popup, .adm-savebar, .cfg-savebar, .toast) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --surface: linear-gradient(#144029f2, #144029f2); --surface-flat: linear-gradient(#22503880, #22503880); --realm-overlay: #133d27f5; } }
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  html body .scene::before { background: #042e21cc !important; }
  :root { --surface: linear-gradient(#143e28, #143e28); --surface-flat: linear-gradient(#17402b, #17402b); --realm-overlay: #133d27; --realm-field: #0c331f; --gold-line: #ffe58b; --glass-blur: 0px; --glass-blur-hi: 0px; }
  :root body :is(.glass, .sidebar, .topbar, .appbar, .tabbar, .more-panel, .gm-section, .modal, .ft-card, .search-results, .gm-combo-popup, .toast) { background: #143e28 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root body :is(.btn, .tab) { border-color: #ffe483b3 !important; }
}
@media (forced-colors: active) {
  :root body .rank-showcase .bx-table tr[data-rank] + tr > .bx-gift-cell { background: Canvas !important; color: CanvasText !important; border-color: CanvasText !important; }
  :root body .rank-showcase .bx-entry { box-shadow: none !important; }
  :root body :is(.glass, .glass.modal, .sidebar, .topbar, .appbar, .tabbar, .gm-section, .modal, .ft-card, .search-results, .gm-combo-popup, .btn, .hero-actions > .btn, .tab, .pill, .icon-btn, .gm-combo-trigger, .input, .select, .textarea, .gm-combo-search, .adm-note, .ev-msg, .toast),
  :root body :is(.tab.active, .tab[aria-selected='true'], .tabs .tab[aria-current='page']), ::picker(select) { background: Canvas !important; color: CanvasText !important; border-color: ButtonText !important; box-shadow: none !important; text-shadow: none; }
  :root body :is(.page-head h1, .hello h1, .hero h1, .auth-card h1, .gm-brand h2) { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  :root body :is(.btn, .tab, .gm-combo-trigger)::before, :root body .glass::before, :root body .glass::after { display: none; }
}