/* === Design Tokens (from ceoacc ceo-glass-tokens.css) === */
html.ceo-glass {
  --cg-bg: #f3f6fd;
  --cg-surface: #ffffff;
  --cg-soft: #f7f9fd;
  --cg-surface-soft: var(--cg-soft);
  --cg-line-strong: #d4dfed;
  --cg-text: #1c2736;
  --cg-muted: #64748a;
  --cg-line: #e2e8f0;
  --cg-blue: #2465bd;
  --cg-primary: var(--cg-blue);
  --cg-primary-fill: #2465bd;
  --cg-blue-soft: #eaf2ff;
  --cg-field-ring: rgba(36, 101, 189, .12);
  --cg-positive: #217950;
  --cg-radius: 24px;
  --cg-shadow: 0 8px 26px rgba(52,72,115,.055);
  --cg-glass: rgba(255,255,255,.56);
  --cg-glass-line: rgba(255,255,255,.66);
  --cg-background: radial-gradient(ellipse at 8% 2%,rgba(132,152,248,.22),transparent 62%),radial-gradient(ellipse at 95% 23%,rgba(116,221,231,.22),transparent 60%),radial-gradient(ellipse at 38% 90%,rgba(175,157,239,.16),transparent 64%);
  --cg-grid: rgba(81,112,168,.028);
  --cg-nav-height: 73px;
  --cg-sidebar-width: 260px;
  color-scheme: light;
}
html.ceo-glass.cg-dark {
  --cg-bg: #101724;
  --cg-surface: #19212d;
  --cg-soft: #212d3c;
  --cg-line-strong: #3a4e69;
  --cg-text: #e7edf5;
  --cg-muted: #a1b0c4;
  --cg-line: #2b3748;
  --cg-blue: #8bbcff;
  --cg-blue-soft: #1b3453;
  --cg-field-ring: rgba(139, 188, 255, .14);
  --cg-positive: #88d5ae;
  --cg-shadow: 0 8px 26px rgba(0,0,0,.13);
  --cg-glass: rgba(28,39,54,.62);
  --cg-glass-line: rgba(199,219,247,.16);
  --cg-background: radial-gradient(ellipse at 8% 2%,rgba(76,102,177,.17),transparent 62%),radial-gradient(ellipse at 95% 23%,rgba(38,126,146,.13),transparent 60%),radial-gradient(ellipse at 38% 90%,rgba(103,71,150,.13),transparent 64%);
  --cg-grid: rgba(150,179,225,.028);
  color-scheme: dark;
}
/* === Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ceoacc ui-scale.css: root size 16px, 15.5px under 768px (every rem spacing shrinks with it). */
html { font-size: 16px; }
@media (max-width: 767.98px) { html { font-size: 15.5px; } }
body {
  color: var(--cg-text);
  background-color: var(--cg-bg);
  background-image: linear-gradient(var(--cg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--cg-grid) 1px,transparent 1px),var(--cg-background);
  /* 5 layers: 2 grid lines + 3 radial washes (a 3-value list would tile the washes as 36px checks) */
  background-size: 36px 36px,36px 36px,100% 100%,100% 100%,100% 100%;
  background-attachment: fixed;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}
/* Page scrollbar: ceoacc customize.css sets body { scrollbar-width: thin; scrollbar-color: black #ccc },
 * which Chrome uses for the window scrollbar instead of the ::-webkit-scrollbar rules below
 * (scrollbar-color is inherited, so inner scroll areas get it too unless they reset it). */
body { scrollbar-width: thin; scrollbar-color: black #ccc; }
/* Scrollbars (ceoacc backend.css): 4px, grey track, slate thumb, rounded */
::-webkit-scrollbar { width: 4px; height: 4px; border-radius: 5px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 20px; }
::-webkit-scrollbar-thumb { background: #8f9fbc; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #01041b; }
/* Form controls use the page font (ceoacc ceo-glass-tokens.css). */
html.ceo-glass :where(button, input, select, textarea) { font-family: inherit; }
/* Links (ceoacc backend.css: #3378ff, hover #004ee6, never underlined). Dark mode keeps the readable theme blue. */
a { color: #3378ff; text-decoration: none; }
a:hover { color: #004ee6; text-decoration: none; }
.cg-dark a { color: var(--cg-blue); }
:where(.cg-dark) a:hover { color: #b9d6ff; }
/* Keyboard focus ring and text-field ring (ceoacc ceo-glass-tokens.css); :where() keeps page rules in charge. */
html.ceo-glass :where(button, a, input:is([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="file"], [type="color"])):focus-visible { outline: 2px solid var(--cg-blue); outline-offset: 3px; }
html.ceo-glass :where(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="file"], [type="color"], [type="hidden"]), textarea, select):focus { outline: 0; outline-offset: 0; border-color: var(--cg-primary); box-shadow: 0 0 0 2px var(--cg-field-ring); }

/* === Layout === */
.layout { display: flex; min-height: 100vh; }

/* === Brand badges (category/product icons; stand-ins for ceoacc's category images) ===
 * Size via --bi (default 25px). The glyph is ~58% of the badge. */
.bi {
  --bi: 25px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--bi);
  width: var(--bi); height: var(--bi); border-radius: 50%;
  background: #1877f2; color: #fff; font-size: calc(var(--bi) * .58); line-height: 1;
  vertical-align: middle; overflow: hidden;
}
.bi > i { font-size: inherit; line-height: 1; width: auto; margin: 0; color: inherit; }
/* Facebook / Telegram glyphs are already round logos: draw them full size on white. */
.bi-fb, .bi-tg { background: #fff; }
.bi-fb { color: #1877f2; }
.bi-fb > i, .bi-tg > i { font-size: var(--bi); }
.bi-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); border-radius: 28%; }
.bi-th, .bi-x, .bi-tk, .bi-ap { background: #111; }
.bi-in { background: #0a66c2; border-radius: 22%; }
.bi-dc { background: #5865f2; }
.bi-line { background: #06c755; border-radius: 28%; }
.bi-gg { background: #fff; color: #ea4335; box-shadow: inset 0 0 0 1px #e2e8f0; }
.bi-yh { background: #6001d2; border-radius: 22%; }
.bi-ms { background: #fff; color: #00a4ef; box-shadow: inset 0 0 0 1px #e2e8f0; }
.bi-tg { color: #27a7e7; }
.bi-px { background: linear-gradient(145deg, #38bdf8, #0284c7); }
.bi-bell { background: transparent; color: #f59e0b; font-size: calc(var(--bi) * .8); border-radius: 0; }

/* === Sidebar (ceoacc .iq-sidebar, 260px, glass wash) === */
.sidebar {
  width: var(--cg-sidebar-width);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: -300px; bottom: 0;
  z-index: 99; /* ceoacc: 99 hidden, 999 opened on small screens, 1000 fixed from 1300px */
  background: linear-gradient(155deg, #e9edfc, #edf3fd 54%, #e7f3f8);
  box-shadow: 1px 0 0 0 var(--cg-line), 4px 0 24px 0 rgba(49,75,119,.055);
  transition: left .6s ease-in-out;
}
.cg-dark .sidebar { background: linear-gradient(155deg, #222d44, #1b2a3d 54%, #1b303d); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.3); z-index: 998;
}
.sidebar-open .sidebar-backdrop { display: block; }
.sidebar-open .sidebar { left: 0; z-index: 999; }
/* Logo row: 20px top, 8% side margin, logo image fills 210px wide (600x140 art) → 73px tall on desktop. */
.sidebar-header {
  flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  margin: 0 8%; padding: 20px 4px 4px;
}
.sidebar-logo-link { display: flex; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.sidebar-logo-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 5px; }
/* ✕ close: ceoacc wraps the 20px icon in a 30px/46.5px line box (row 70.5px on phones; with the FA7 font the icon sits 4px above its bottom, y 36.5). */
.sidebar-close {
  display: none; flex: 0 0 22px; align-items: flex-end; width: 22px; height: 46.5px; margin: 0; padding: 0 0 4px; border: 0; background: none;
  color: var(--cg-text); cursor: pointer;
}
.sidebar-close i { display: block; width: 22px; font-size: 20px; line-height: 26px; text-align: center; }
/* ceoacc uses smooth-scrollbar: a 4px thumb, only when the menu overflows. */
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: auto; }
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.5); border-radius: 4px; }
.cg-dark .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); }
@supports not selector(::-webkit-scrollbar) {
  .sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.5) transparent; }
}
/* Bottom gap = ceoacc .client-sidebar-scroll-end (pt-5 pb-5: 80px; 85.25px on phones). */
.sidebar-nav { padding: 0 0 80px; color: #8f9fbc; }
@media (max-width: 767.98px) { .sidebar-nav { padding-bottom: 85.25px; } }
/* Balance line and group labels share the "px-3 pt-3 pb-2" small-caps row (rem: 20/20/10, 19.4/19.4/9.7 on phones). */
.sidebar-balance, .nav-group-label {
  padding: 1.25rem 1.25rem .625rem;
  font-size: 14px; line-height: 1.55; white-space: nowrap;
}
.sidebar-balance > span, .nav-group-label > span {
  font-size: 11.2px; font-weight: 700; line-height: 17.36px;
  text-transform: uppercase; color: var(--cg-muted);
}
.sidebar-balance .sb-bal { color: var(--cg-blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.sidebar-balance .sb-disc { color: var(--cg-text); font-variant-numeric: tabular-nums; }
.nav-item {
  display: flex; align-items: center;
  width: calc(100% - 30px); margin: 0 15px;
  padding: .625rem .938rem; border: 0; border-radius: 12px;
  background: none; color: var(--cg-text);
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 18px;
  text-align: left; text-transform: capitalize; white-space: nowrap; overflow: hidden; /* ceoacc sidebar links are capitalize */
  cursor: pointer; transition: all .4s;
}
.nav-item:hover, .nav-item.active { color: var(--cg-blue); background: var(--cg-blue-soft); }
.nav-item > .nav-ico {
  flex: 0 0 20px; width: 20px; height: 20px; margin-right: 8px;
  font-size: 16px; line-height: 20px; text-align: center; color: inherit;
}
.nav-item > .nav-label { margin-left: .625rem; white-space: nowrap; }
.nav-item > .nav-arrow {
  flex: 0 0 12px; width: 12px; height: 20px; margin-left: auto;
  font-size: 11px; line-height: 20px; text-align: center; color: inherit;
  transition: transform .3s ease-in-out;
}

/* === Main area === */
.main {
  flex: 1;
  margin-left: 0;
  display: flex; flex-direction: column;
}

/* === Top navbar (ceoacc .iq-top-navbar: 73px, glass, 30px side padding) === */
.topbar {
  height: 73px;
  background: var(--cg-glass);
  backdrop-filter: blur(24px) saturate(1.45);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--cg-line), 0 3px 16px 0 rgba(48,70,115,.043);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 3px; gap: 12px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.hamburger-btn {
  display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box; width: 38px; height: 38px; padding: 6px; border-radius: 10px;
  background: #fff; border: 2px solid #cbd5e1; box-shadow: 0 1px 2px 0 rgba(15,23,42,.08);
  color: var(--cg-text); cursor: pointer;
}
.hamburger-btn i { display: inline-block; width: 22px; font-size: 20px; line-height: 26px; text-align: center; }
.cg-dark .hamburger-btn { background: #1f2937; border-color: #475569; }
.topbar-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-height: 38px; padding: 0 11px; border-radius: 10px;
  background: var(--cg-surface); border: 2px solid var(--cg-line);
  box-shadow: var(--cg-shadow);
  color: var(--cg-text); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.topbar-btn:hover, .topbar-btn:focus-visible { transform: translateY(-1px); }
.topbar-btn > i { display: inline-block; width: 14px; font-size: 12px; line-height: 16px; text-align: center; }
.topbar-btn-label { display: inline; }

/* Cart count (hidden at 0, like ceoacc) */
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
}
.cart-badge[hidden] { display: none !important; }

/* Theme toggle: amber 38px square, sun / moon line icons */
.dark-toggle {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  background: #fffbeb; border: 2px solid #d4a72c; box-shadow: 0 1px 2px rgba(15,23,42,.12);
  color: #d97706; font-family: inherit; font-size: 14px; line-height: 1.55; cursor: pointer;
}
.dark-toggle svg { display: block; width: 20px; height: 20px; }
.dark-toggle .icon-sun { display: block; color: #d97706; }
.dark-toggle .icon-moon { display: none; color: #2563eb; }
.cg-dark .dark-toggle .icon-sun { display: none; }
.cg-dark .dark-toggle .icon-moon { display: block; }

/* User chip: 38px avatar + name */
.topbar-user { position: relative; display: flex; align-items: center; min-height: 40px; cursor: pointer; color: #334155; }
.topbar-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px;
  background: linear-gradient(135deg, #60a5fa, #818cf8);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px;
}
.topbar-username {
  margin-left: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #334155; font-size: 14px; font-weight: 600; line-height: 21.7px;
}

/* === Content (ceoacc .content-page: 90px top, 15px gutters) ===
 * ceoacc keeps .content-page at least (100vh - 50px) tall below its 90px offset (ui-scale.css divides by the
 * .86 zoom from 992px), so the footer sits near the bottom of short pages. Here .content includes the 90px. */
.content { padding: 90px 15px 0; flex: 1; min-height: calc(100vh + 40px); overflow: clip; }
/* overflow: clip = ceoacc's overflow:hidden on .content-page, but it is not a scroll container,
 * so position: sticky inside pages (API docs table of contents) keeps sticking. */
/* ceo-glass-pages.css: keyboard ring inside the page area (beats generic outline resets). */
html.ceo-glass body .content :is(button, a, input:is([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="range"], [type="file"], [type="color"])):focus-visible { outline: 2px solid var(--cg-primary); outline-offset: 3px; }
@media (min-width: 992px) { .content { min-height: calc(100vh / .86 + 40px); } }
/* === Cards === */
.card {
  background: var(--cg-surface);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
  padding: 24px;
  margin-bottom: 20px;
}

/* === Alerts === */
.alert {
  padding: 20px; border-radius: 24px;
  margin-bottom: 16px; font-size: 14px;
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--cg-line); background: linear-gradient(155deg, #fff 65%, #f7f9fd);
  color: #212529;
}
.cg-dark .alert { background: linear-gradient(155deg, var(--cg-surface) 65%, var(--cg-soft)); color: var(--cg-text); }
.alert i { margin-top: 2px; }

/* === Pages === */
.page { display: none; }
.page.active { display: block; }

/* === Floating Telegram (Voi) chat button + back-to-top (ceoacc fcta / .back-to-top) === */
.tg-float { position: fixed; right: 15px; bottom: 20px; z-index: 999; }
.tg-float-btn {
  position: relative; display: block; width: 45px; height: 45px; border-radius: 50%;
  background: #0088cc; color: #fff; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 16px rgba(0,0,0,.12);
}
.tg-float-btn:hover { color: #fff; text-decoration: none; }
.tg-float-btn::before, .tg-float-btn::after {
  content: ""; position: absolute; inset: -15px; z-index: -1; border-radius: 50%;
  border: 1px solid #0088cc; background: rgba(0,136,204,.5);
  animation: tg-float-zoom 1.9s linear infinite;
}
.tg-float-btn::after { animation-delay: .4s; }
.tg-float-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .5s; }
.tg-float-icon svg { width: 26px; height: 26px; animation: tg-float-bounce 1.5s ease-in-out infinite; }
.tg-float-icon svg path { fill: #fff; }
.tg-float-text {
  position: absolute; top: 50%; left: 50%; width: max-content; opacity: 0;
  transform: translate(-50%, -50%) scaleX(-1); transition: all .5s;
  font-size: 10px; font-weight: 700; line-height: 1.5; text-transform: uppercase;
}
.tg-float-btn:hover .tg-float-text { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
.tg-float-btn:hover .tg-float-icon { opacity: 0; }
.tg-float-btn:hover .tg-float-icon svg { animation: none; }
@keyframes tg-float-zoom { 0% { transform: scale(.5); opacity: 0; } 50% { opacity: 1; } to { opacity: 0; transform: scale(1); } }
@keyframes tg-float-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.back-to-top {
  position: fixed; right: 15px; bottom: 80px; z-index: 999;
  width: 45px; height: 45px; border: none; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background-color: #033876; color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(4,54,114,.3); transition: all .3s ease;
}
.back-to-top.visible { display: flex; }
.back-to-top:hover { background-color: #054a8a; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(4,54,114,.4); }
@media (prefers-reduced-motion: reduce) {
  .tg-float-btn::before, .tg-float-btn::after, .tg-float-icon svg { animation: none; }
}

/* === Avatar dropdown (ceoacc .top-nav-user .dropdown-menu) === */
.avatar-menu {
  display: none; position: absolute; top: calc(100% + 2px); right: 0; z-index: 300;
  min-width: 220px; max-height: calc(100vh - 84px); overflow-y: auto;
  padding: 8px; list-style: none; cursor: default;
  background: var(--cg-surface); color: var(--cg-text);
  border: 1px solid var(--cg-line); border-radius: 12px;
  box-shadow: var(--cg-shadow);
  font-size: 14px; line-height: 1.55;
}
.avatar-menu.open { display: block; }
.avatar-menu .am-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 210px;
  min-height: 42px; padding: 10px 12px; border-radius: 8px; color: #334155;
}
.avatar-menu .am-summary:hover { background: rgba(51,120,255,.1); }
.avatar-menu .am-summary span { color: #6c757d; font-size: 11.2px; line-height: 1.55; }
.avatar-menu .am-summary strong { font-weight: 700; }
.avatar-menu .am-divider { height: 0; margin: 10px 0; border-top: 1px solid #e9ecef; }
.cg-dark .avatar-menu .am-summary { color: var(--cg-text); }
.cg-dark .avatar-menu .am-divider { border-top-color: var(--cg-line); }
.avatar-menu .am-heading {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px 5px;
  color: #64748b; font-size: 12px; font-weight: 700;
}
/* ceoacc ceo-icons.css gives .ceo-action-icon vertical-align: -.125em (only matters for icons inside a text line). */
.avatar-menu .am-heading i { margin-right: 5px; vertical-align: -.125em; }
.avatar-menu .am-empty { padding: 8px 12px 10px; color: #94a3b8; font-size: 12px; }
.avatar-menu a {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 10px 12px; border-radius: 8px;
  color: #334155; font-weight: 600; cursor: pointer; text-decoration: none;
}
.cg-dark .avatar-menu a { color: var(--cg-text); }
.avatar-menu a:hover { color: #1d4ed8; background: #eff6ff; text-decoration: none; }
.cg-dark .avatar-menu a:hover { color: #fff; background: #1e3a5f; }
.avatar-menu a i { flex: 0 0 18px; width: 18px; font-size: 14px; line-height: 20px; text-align: center; color: #64748b; }
.avatar-menu a.am-logout { border-top: 1px solid #f1f1f1; }
.cg-dark .avatar-menu a.am-logout { border-top-color: var(--cg-line); }

/* === Submenu "Mua tài khoản" (accordion; 45px rows with 25px category badge) === */
.nav-submenu { display: none; margin: 0 15px; }
.nav-submenu.open { display: block; }
.nav-item-parent.expanded > .nav-arrow { transform: rotate(90deg); }
.nav-submenu .nav-item { width: calc(100% - 15px); margin: 0 0 0 15px; min-height: 45px; }
.nav-submenu .nav-item > .bi { --bi: 25px; margin-right: .625rem; }
.nav-submenu .nav-item > span:last-child { min-width: 0; } /* ceoacc: long names run under the link padding and are clipped, no ellipsis */

/* === Language switcher (ceoacc GTranslate pill: flag + code + chevron) === */
.lang-dropdown { position: relative; z-index: 1000; display: inline-flex; align-items: center; flex: 0 0 96px; width: 96px; min-height: 38px; color: #334155; }
.lang-pill {
  display: inline-flex; align-items: center; box-sizing: border-box; width: auto; height: 38px;
  padding: 0; border: 2px solid #94a3b8; border-radius: 999px; background: #fff; color: var(--cg-text);
  box-shadow: 0 1px 3px rgba(15,23,42,.14); cursor: pointer;
  font-family: Arial, sans-serif; font-size: 13px; line-height: 18px;
}
/* The pill is a <button> here (a div in GTranslate), so beat the form-control "font-family: inherit" rule (0,1,1). */
html.ceo-glass .lang-pill { font-family: Arial, sans-serif; }
.lang-pill-inner {
  display: flex; align-items: center; height: 100%; box-sizing: border-box; min-width: 84px;
  padding: 7px 9px; color: #1e293b; font-weight: 700; white-space: nowrap;
}
.lang-flag { display: block; flex: 0 0 21px; width: 21px; height: 21px; margin-right: 5px; border-radius: 3px; object-fit: contain; }
.lang-flag-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 21px; }
.lang-code { display: block; font-size: 12px; font-weight: 700; line-height: 18px; }
/* GTranslate chevron: 11px glyph centred in a 15x18 box, turned up (180deg) while closed, down when open. */
.lang-arrow { display: block; flex: 0 0 15px; width: 15px; height: 18px; transform: rotate(180deg); transition: transform .3s; }
.lang-arrow svg { display: block; width: 11px; height: 18px; margin: 0 auto; }
.lang-dropdown.open .lang-arrow { transform: rotate(0deg); }
/* ceoacc language-switcher.css dark variant */
.cg-dark .lang-pill { background: #1f2937; border-color: #475569; }
.cg-dark .lang-pill-inner { color: #e5e7eb; }
.cg-dark .lang-arrow path { fill: #cbd5e1; }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 7px); right: 0; z-index: 1001;
  width: 210px; max-width: min(210px, calc(100vw - 24px)); max-height: 320px; overflow-x: hidden; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
.lang-menu.open { display: block; }
.lang-menu a { display: flex; align-items: center; gap: 5px; min-height: 37px; padding: 8px 11px; color: #444; font-family: Arial, sans-serif; font-size: 13px; line-height: 18px; cursor: pointer; text-decoration: none; }
.lang-menu a:hover { background: #f1f5f9; text-decoration: none; }
.lang-menu a.is-current { font-weight: 700; }
.lang-menu a .lang-flag-emoji { width: 21px; }

/* === Pagination === */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px; }

/* === Footer (ceoacc .iq-footer: two columns, policy links left, service nav right) === */
.site-footer {
  padding: 15px; color: var(--cg-text); font-size: 14px; line-height: 1.55;
  background: transparent; box-shadow: 0 .5rem 1rem rgba(0,60,179,.05);
}
.site-footer .sf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 0; padding: 0 15px; }
/* Bootstrap .list-inline: inline-block items, .5rem gap plus the space between the tags. */
.site-footer .sf-left { margin: 0; padding: 0; list-style: none; }
.site-footer .sf-left > li { display: inline-block; }
.site-footer .sf-left > li:not(:last-child) { margin-right: .5rem; }
.site-footer .sf-right { font-size: 80%; text-align: right; }
.site-footer .sf-right a { margin-right: .625rem; color: #3378ff; }
.site-footer .sf-right a:last-child { margin-right: 0; }
.site-footer a { color: #324253; }
.cg-dark .site-footer a { color: var(--cg-text); }
.cg-dark .site-footer .sf-right a { color: var(--cg-blue); }
/* Hover (measured on ceoacc): policy links → #3378ff, service links → #004ee6; no underline. */
.site-footer .sf-left a:hover { color: #3378ff; text-decoration: none; }
.site-footer .sf-right a:hover { color: #004ee6; text-decoration: none; }
.cg-dark .site-footer a:hover { color: #b9d6ff; }
@media (max-width: 1299.98px) { .site-footer { padding: 15px 10px; } }
@media (max-width: 991.98px) {
  .site-footer { text-align: center; }
  .site-footer .sf-row { display: block; }
  .site-footer .sf-right { text-align: center; margin-top: .625rem; }
}

/* === Desktop shell: 86% page scale from 992px; fixed sidebar from 1300px (ceoacc breakpoints) === */
@media (min-width: 992px) { body { zoom: .86; } }
@media (min-width: 1300px) {
  .sidebar { left: 0; z-index: 1000; }
  .sidebar-backdrop { display: none !important; }
  .main { margin-left: var(--cg-sidebar-width); }
  .topbar { left: var(--cg-sidebar-width); }
}
@media (max-width: 1299.98px) {
  .hamburger-btn { display: flex; }
  .sidebar-close { display: flex; }
}
.cg-dark .topbar-user, .cg-dark .topbar-username { color: var(--cg-text); }
@media (max-width: 1199.98px) { .topbar-username { display: none; } }
@media (max-width: 991.98px) {
  .topbar { height: 62px; padding: 0 12px; gap: 7px; }
  .topbar-btn-label { display: none; }
  .topbar-btn { width: 38px; min-width: 38px; padding: 0; }
  .topbar-btn .cart-badge { position: absolute; top: -5px; right: -5px; border: 2px solid #fff; }
}
@media (max-width: 575.98px) {
  .topbar { padding: 0 8px; gap: 5px; }
  .topbar-actions { gap: 7px; }
  .hamburger-btn { width: 36px; height: 36px; padding: 5px; }
  .topbar-btn, .dark-toggle, .topbar-avatar { width: 36px; min-width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; }
  .lang-dropdown { flex-basis: 48px; width: 48px; }
  .lang-pill { height: 36px; }
  .lang-pill-inner { min-width: 44px; padding: 7px 6px; }
  .lang-flag { width: 19px; flex-basis: 19px; height: 19px; margin-right: 2px; }
  .lang-code { display: none; }
  .lang-arrow, .lang-arrow svg { width: 11px; flex-basis: 11px; }
  .lang-menu { position: fixed; top: 62px; right: 8px; left: 8px; width: auto; max-width: none; }
}
@media (max-width: 389.98px) { .dark-toggle { display: none; } }
.main { min-width: 0; }
body:has(:is(#page-login, #page-register, #page-forgot-password).active) { zoom: 1; }
body:has(:is(#page-login, #page-register, #page-forgot-password).active) :is(.sidebar, .topbar) { display: none; }
body:has(:is(#page-login, #page-register, #page-forgot-password).active) .main { margin-left: 0; }

/* === Responsive === */
@media (max-width: 640px) { html.ceo-glass { --cg-radius: 20px; } }
/* === Modals (ceoacc bootstrap modal + glass skin; measured at 1518x784) === */
.cg-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 28px 16px; overflow-y: auto; }
.cg-modal.open { display: flex; }
.cg-modal-content {
  display: flex; flex-direction: column; width: 100%; max-width: 500px; margin: auto;
  background: var(--cg-surface); color: var(--cg-text);
  border: 1px solid var(--cg-line); border-radius: 24px; box-shadow: 0 16px 44px rgba(28,46,76,.17);
  overflow: hidden; font-size: 14px; line-height: 1.55;
}
.cg-modal-lg { max-width: 800px; }
.cg-modal-xl { max-width: 900px; }
.cg-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem; background: var(--cg-surface); border-bottom: 1px solid var(--cg-line); border-radius: 23px 23px 0 0;
}
.cg-modal-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cg-text); font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.5; }
.cg-modal-title > i { font-size: 18px; line-height: 1; color: inherit; }
.cg-modal-title small { display: block; margin-top: 3px; color: var(--cg-muted); font-size: .72rem; font-weight: 400; line-height: 1.2; }
.cg-modal-sub { margin-top: 2px; color: var(--cg-muted); font-size: 80%; }
/* Bootstrap .modal-header .close: 1rem padding, 1.5rem glyph (RFS: calc(1.275rem + .3vw) under 1200px) — rem, so it shrinks with the 15.5px phone root. */
.cg-modal-close {
  margin: -1rem -1rem -1rem auto; padding: 1rem; border: 0; background: transparent;
  color: var(--cg-muted); font-family: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; opacity: .5; cursor: pointer;
}
.cg-modal-close:hover { opacity: .75; }
@media (max-width: 1199.98px) { .cg-modal-close { font-size: calc(1.275rem + .3vw); } }
.cg-modal-body { padding: 1rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.cg-modal-footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: .75rem; background: var(--cg-soft); border-top: 1px solid var(--cg-line); border-radius: 0 0 23px 23px;
}
.cg-footer-btns { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: .25rem; }
.cg-modal-footer .cg-total { margin: .25rem; color: var(--cg-text); font-size: 14px; }
.cg-modal-footer .cg-total b { color: #f42b3d; font-weight: 700; }
.cg-field { margin-bottom: 14px; }
.cg-field label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--cg-muted); font-weight: 500; }
.cg-field input, .cg-field select, .cg-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--cg-line); border-radius: 12px; background: var(--cg-surface); color: var(--cg-text); font-size: 14px; font-family: inherit; box-sizing: border-box; }
.cg-field input[readonly], .cg-field textarea[readonly] { background: var(--cg-soft, var(--cg-bg)); }
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .625rem 1.25rem; border: 1px solid var(--cg-line); border-radius: 12px;
  background: var(--cg-surface); color: var(--cg-text); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer;
}
.cg-btn:hover { border-color: var(--cg-primary); }
.cg-btn-primary { background: #2465bd; border-color: #2465bd; color: #fff; }
.cg-btn-primary:hover { background: #1d559f; border-color: #1d559f; }
.cg-btn-primary:disabled { opacity: .65; cursor: default; }
.cg-btn-outline-danger { background: transparent; border-color: #f42b3d; color: #f42b3d; }
.cg-btn-outline-danger:hover { background: #f42b3d; border-color: #f42b3d; color: #fff; }
.cg-btn-warning { background: #db7e06; border-color: #db7e06; color: #fff; } /* ceoacc theme .btn-warning */
.cg-btn-soft { min-height: 38px; padding: 9px 12px; background: #eef3ff; border-color: #dae4fc; color: #3b66df; line-height: 1.4; }
.cg-btn-soft:hover { background: #e2eaff; border-color: #c6d6fb; }
.cg-dark .cg-btn-soft { background: var(--cg-blue-soft); border-color: var(--cg-line); color: var(--cg-blue); }
.cg-empty { padding: 2.5rem 0; text-align: center; color: var(--cg-muted); font-size: 14px; }
.cg-empty > i { display: block; margin: 0 auto 1.25rem; font-size: 42px; line-height: 1; }

/* Cart modal (ceoacc #modalCart: modal-lg, flush table, red total) */
#modal-cart .cart-body { padding: 0; }
.cart-table-wrap { padding: 0 10px; overflow-x: auto; }
.cg-modal-table { width: 100%; margin: 0; border-collapse: collapse; color: var(--cg-text); font-size: 13px; line-height: 1.55; }
.cg-modal-table th { padding: 15px 20px; border: 2px solid var(--cg-line); background: var(--cg-soft); color: var(--cg-muted); font-size: 12px; font-weight: 600; line-height: 18.6px; text-align: left; }
.cg-modal-table td { padding: 12px 20px; border: 1px solid var(--cg-line); vertical-align: middle; }
.cart-table .cart-col-qty { width: 110px; }
.cart-table .cart-col-sum { text-align: right; }
.cart-table .cart-col-act { width: 55px; }
.cart-table td.cart-sum { text-align: right; font-weight: 600; }
.cart-table .cart-del { gap: 0; }
.cart-product-cell { display: flex; flex-direction: column; justify-content: center; min-width: 220px; }
.cart-product-name { font-weight: 600; overflow-wrap: anywhere; }
.cart-variant { display: block; color: #64748b; font-size: 12px; }
.cart-table input.cart-qty { width: 100%; min-width: 78px; height: 31px; padding: 4px 8px; border: 1px solid var(--cg-line-strong); border-radius: 12px; background: var(--cg-surface); color: var(--cg-text); font: inherit; }
@media (max-width: 600px) {
  .cart-table-wrap { max-height: 58vh; overflow-x: hidden; }
  .cart-table { display: inline-table; width: 100%; } /* ceoacc theme keeps the table inline (one empty line box) */
  .cart-table tbody { display: block; width: 100%; }
  .cart-table thead { display: none; }
  .cart-table tbody tr { display: grid; grid-template-columns: minmax(90px, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--cg-line); }
  .cart-table tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .cart-table tbody td:first-child { grid-column: 1 / -1; }
  .cart-table input.cart-qty { width: 100%; min-width: 0; font-size: 16px; }
  .cart-product-cell { min-width: 0; }
}

/* Buy modal (ceoacc #modalBuy: 720px, labelled fields, payment grid) */
.cg-modal-buy { max-width: 720px; border: 0; }
/* ceoacc #modalBuy sizes are rem (header .9rem 1.1rem, body 1rem 1.1rem .8rem, labels .78rem, fields .55rem .75rem). */
.cg-modal-buy .cg-modal-header { padding: .9rem 1.1rem; border-bottom: 0; }
.cg-modal-buy .cg-modal-title { align-items: flex-start; gap: 10px; line-height: 1.2; }
/* Title icon keeps the FA7 1.25em box (22.5px), like ceoacc's .fas.mr-2. */
.cg-modal-buy .cg-modal-title > i { flex-shrink: 0; margin-top: 1px; }
/* ceoacc: the inline title icon sits 1px low only under the 992px+ zoom; flush with the title below that. */
@media (max-width: 991.98px) { .cg-modal-buy .cg-modal-title > i { margin-top: 0; } }
.cg-modal-close-box { color: var(--cg-text); opacity: .9; }
.cg-modal-close-box:hover { opacity: 1; }
.cg-modal-close-box > i { display: inline-block; line-height: 1; } /* 1.25em × the button's 1.5rem = 30×24 on desktop */
.cg-modal-buy .cg-modal-body { padding: 1rem 1.1rem .8rem; }
.buy-field { margin-bottom: 12px; }
.buy-label { display: flex; align-items: center; gap: 7px; margin-bottom: .45rem; color: var(--cg-muted); font-size: .78rem; font-weight: 700; line-height: 1.55; }
.buy-label > i { font-size: .78rem; }
.buy-input {
  display: block; width: 100%; height: 46px; padding: .55rem .75rem;
  border: 1px solid var(--cg-line); border-radius: 12px; background: var(--cg-surface); color: var(--cg-text);
  font-family: inherit; font-size: 14.72px; font-weight: 400; line-height: 1.55;
}
.buy-input:focus { outline: 0; border-color: var(--cg-primary); box-shadow: 0 0 0 2px var(--cg-field-ring); }
.buy-input.buy-name { font-weight: 600; }
.buy-qty-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .4fr); gap: 12px; }
.buy-qty-row .buy-field { margin-bottom: 0; }
/* ceoacc: the total label sits right above the right-aligned total; one column and left-aligned under 420px. */
.buy-qty-row .buy-field:last-child .buy-label { justify-content: flex-end; }
@media (max-width: 420px) {
  .buy-qty-row { grid-template-columns: 1fr; }
  .buy-qty-row .buy-field:last-child .buy-label { justify-content: flex-start; }
}
.buy-input.buy-total { border-radius: 10px; text-align: right; color: #ef3340; font-size: 16px; font-weight: 700; }
.buy-checkout { display: block; padding: 10px 12px 12px; box-shadow: 0 -4px 14px rgba(15,23,42,.06); }
.buy-checkout-actions { width: 100%; margin: 4px; text-align: center; }
.buy-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: .4rem 0 .65rem; }
.buy-method-heading strong { font-size: .9rem; font-weight: 700; line-height: 1.55; }
.buy-method-heading small { color: var(--cg-muted); font-size: .72rem; line-height: 1.55; }
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pay-btn {
  display: flex; align-items: center; min-height: 46px; padding: 6px 10px; text-align: left;
  border: 1px solid var(--cg-line); border-radius: 10px; background: var(--cg-surface); color: var(--cg-text);
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer;
}
.pay-btn:hover { border-color: var(--cg-primary); }
.pay-ico {
  position: relative; flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 8px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color: #fff; font-size: 13px; font-weight: 800;
}
.pay-ico-cart { background: #edf4ff; color: #3977f6; }
.pay-ico-balance { background: linear-gradient(135deg, #3977f6, #2457d6); }
.pay-ico-alipay { background: linear-gradient(135deg, #1677ff, #00a3ff); }
.pay-ico-crypto { box-shadow: none; }
.pay-asset { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 900; line-height: 1; }
.pay-asset.is-usdt { background: #26a17b; }
.pay-asset.is-trx { background: #ef0027; }
.pay-net {
  position: absolute; right: -1px; bottom: -1px; display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: 2px solid var(--cg-soft); border-radius: 50%; color: #fff; font-size: 7px; font-weight: 900; line-height: 1;
}
.pay-net.is-tron { background: #ef0027; }
.pay-net.is-bsc { background: #f3ba2f; }
.pay-net.is-eth { background: #627eea; }
.pay-net.is-sol { background: linear-gradient(135deg, #9945ff, #14f195); }
.pay-copy { display: block; min-width: 0; line-height: 1.15; }
.pay-copy strong { display: block; font-size: .86rem; font-weight: 700; line-height: 1.15; }
.pay-copy small { display: block; margin-top: 2px; color: var(--cg-muted); font-size: .67rem; font-weight: 400; line-height: 1.15; }

/* Select-purchase modal (ceoacc #modalSelectPurchase; rem sizes like its inline <style>) */
.cg-btn-sm { padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; }
.cg-btn-outline-secondary { background: transparent; border-color: #8f9fbc; color: #8f9fbc; }
.cg-btn-outline-secondary:hover { background: #8f9fbc; border-color: #8f9fbc; color: #fff; }
.cg-btn-warning:disabled { opacity: .65; cursor: default; }
.cg-btn-link { padding: 2px 4px; border: 0; background: none; color: var(--cg-primary); font: inherit; font-size: .8rem; cursor: pointer; }
.cg-btn-link:hover { text-decoration: underline; }
.cg-modal-select .cg-modal-header { padding: .65rem .9rem; }
.cg-modal-select .cg-modal-title { font-size: 18px; line-height: 1.2; }
.cg-modal-select .cg-modal-sub { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.25; }
.cg-modal-select .cg-modal-sub:empty { height: 0; }
.cg-modal-select .cg-modal-close { margin: -.65rem -.9rem -.65rem auto; padding: .65rem .9rem; opacity: .72; }
.cg-modal-select .cg-modal-close:hover { opacity: 1; }
.cg-modal-select .cg-modal-body { padding: .65rem .9rem; }
.cg-modal-select .cg-modal-footer { padding: .55rem .9rem; gap: 8px; }
.select-variant-wrap { margin-bottom: 8px; }
.select-variant-wrap > label { display: block; margin-bottom: 4px; color: var(--cg-text); font-size: .85rem; }
.select-variant-list { display: flex; flex-wrap: wrap; gap: 6px; }
.select-variant-option {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 34px; padding: 4px 8px;
  border: 1.5px solid #dbe2ea; border-radius: 16px; background: var(--cg-surface); color: var(--cg-text);
  font-family: inherit; font-size: 12px; line-height: 1.15; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.select-variant-option:hover { border-color: #60a5fa; }
.select-variant-option.is-selected { border-color: #f59e0b; background: #fff7ed; box-shadow: 0 0 0 2px rgba(245,158,11,.1); }
.select-search-toolbar { margin-bottom: 7px; border-radius: 16px; }
.select-input-group { display: flex; align-items: stretch; }
.select-input-group input {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: .25rem .5rem; border: 1px solid var(--cg-line-strong); border-radius: 12px;
  background: var(--cg-surface); color: var(--cg-text); font-family: inherit; font-size: .84rem; line-height: 1.5;
}
.select-input-group input::placeholder { color: #64748b; opacity: 1; }
.select-input-group .cg-btn { display: block; flex: 0 0 auto; height: 34px; min-height: 34px; padding: 4px 9px; font-size: .84rem; line-height: 1.5; white-space: nowrap; }
.select-input-group .cg-btn > i { display: inline-block; margin-right: .3125rem; font-size: 1em; }
.select-input-group .cg-btn + .cg-btn { margin-left: -1px; }
.select-all-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 7px; color: var(--cg-muted); font-size: .8rem; }
.select-all-progress[hidden], .select-pagination[hidden], .select-variant-wrap[hidden], .select-empty[hidden] { display: none; }
.select-account-scroll { max-height: min(38vh, 360px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 1px 4px 1px 1px; }
.select-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.select-account-option {
  display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 5px 8px;
  border: 1px solid #dbe2ea; border-radius: 16px; background: var(--cg-surface); color: var(--cg-text); cursor: pointer;
}
.select-account-option:hover { border-color: #60a5fa; }
.select-account-option.is-selected { border-color: #f59e0b; background: #fff7ed; box-shadow: 0 0 0 1px rgba(245,158,11,.08); }
.select-account-main { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.select-account-checkbox { flex: 0 0 auto; accent-color: #0d6efd; }
.select-account-hint { min-width: 0; overflow-wrap: anywhere; font-family: Menlo, Monaco, Consolas, monospace; font-size: .82rem; line-height: 1.3; }
.select-empty { padding: 24px 0; color: var(--cg-muted); text-align: center; }
.select-pagination { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cg-line); }
.select-pagination-summary, .select-pagination-controls { display: flex; align-items: center; gap: 6px; }
.select-pagination-summary { justify-content: flex-start; white-space: nowrap; font-size: .85rem; }
.select-pagination-summary select { width: 62px; min-width: 70px; height: 30px; padding: 2px 6px; border: 1px solid var(--cg-line-strong); border-radius: 12px; background: var(--cg-surface); color: var(--cg-text); font-family: inherit; font-size: .875rem; }
.select-pagination-controls { justify-content: flex-end; flex-wrap: wrap; }
.select-page-numbers { display: inline-flex; align-items: center; gap: 4px; }
.select-page-numbers .cg-btn { min-width: 30px; min-height: 30px; padding: 3px 6px; line-height: 1.2; }
.select-page-status { color: var(--cg-muted); font-size: 80%; }
.select-price-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .88rem; }
.select-price-summary b { color: #e67e00; font-weight: 700; }
.select-footer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.select-footer-actions .cg-btn { display: block; min-height: 34px; padding: .35rem .7rem; font-size: 13px; line-height: 1.15; }
.select-footer-actions .cg-btn > i { display: inline-block; margin-right: .3125rem; font-size: 1em; }
.cg-dark .select-variant-option, .cg-dark .select-account-option { border-color: #334155; background: #172033; }
.cg-dark .select-variant-option.is-selected, .cg-dark .select-account-option.is-selected { border-color: #f59e0b; background: rgba(245,158,11,.16); }
.cg-dark .cg-btn-outline-secondary { color: #cbd5e1; border-color: #64748b; background: transparent; }
.cg-dark .cg-btn-outline-secondary:hover { color: #f8fafc; border-color: #94a3b8; background: #334155; }
@media (max-width: 600px) {
  .select-account-scroll { max-height: 34dvh; padding-right: 3px; }
  .select-account-grid { grid-template-columns: 1fr; }
  .select-variant-option { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .cg-modal-select .cg-modal-footer { flex-direction: column; align-items: stretch; }
  .select-price-summary { width: 100%; justify-content: space-between; }
  .select-footer-actions { width: 100%; }
  .select-footer-actions .cg-btn { flex: 1 1 0; min-height: 40px; padding: 7px 6px; }
  .select-pagination { grid-template-columns: 1fr; gap: 6px; }
  .select-pagination-summary { justify-content: space-between; flex-wrap: wrap; }
  .select-pagination-controls { justify-content: center; }
  .select-page-numbers .cg-btn { min-width: 38px; min-height: 38px; }
}

/* Success modal (ceoacc #modalBoughtSuccess) */
.cg-modal-success { color: #293342; border-color: #e3e9f3; line-height: 1.5; }
.cg-modal-success .cg-modal-header { align-items: center; gap: 12px; padding: 18px 20px; }
.cg-modal-success .cg-modal-title { color: inherit; font-size: 19px; line-height: 1.4; }
.ok-check { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #e9f7ee; color: #267550; }
/* ceoacc hides the FA check and draws a CSS tick (9×18 box, 2px right/bottom border, rotated 45°). */
.ok-check > i { display: none; }
.ok-check::after { content: ""; display: block; box-sizing: border-box; width: 9px; height: 18px; border: solid currentColor; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
.cg-modal-close-square {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 0 0 auto; padding: 0;
  border: 1px solid #e3e9f3; border-radius: 9px; background: #f7f9fd; color: #66758d; font-size: 22px; font-weight: 400; opacity: 1;
}
.cg-modal-success .cg-modal-body { padding: 18px 20px; }
.ok-order-row { margin-bottom: 12px; }
.ok-order-link {
  display: inline-flex; align-items: center; gap: 4px 6px; padding: 7px 10px; cursor: pointer;
  border: 1px solid #e3e9f3; border-radius: 8px; background: #f7f9fd; color: #293342;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; line-height: 1.5; text-decoration: none;
}
.ok-order-link b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ok-order-link:hover { color: #293342; text-decoration: none; border-color: var(--cg-primary); }
.cg-modal .ok-accounts {
  display: block; width: 100%; height: clamp(160px, 34vh, 340px); min-height: 140px; max-height: min(60vh, 560px); padding: 12px 14px; resize: vertical;
  border: 1px solid #e3e9f3; border-radius: 10px; background: #f7f9fd; color: #293342;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.6;
}
.ok-footer { justify-content: flex-end; padding: 14px 20px; border-top-color: #e3e9f3; }
.ok-footer .cg-btn { min-width: 96px; gap: 0; }
.ok-footer .cg-btn > i { margin-right: .3125rem; }
.ok-footer .ok-detail { font-family: "Plus Jakarta Sans", sans-serif; } /* ceoacc's link-button takes the heading font */
/* ceoacc inline-crypto-cashier.css: ≤576px tighter padding and a shorter list; touch screens get 44px targets. */
@media (max-width: 576px) {
  #modal-success { padding: 8px; }
  .cg-modal-success .cg-modal-header, .cg-modal-success .cg-modal-body { padding: 16px; }
  .ok-footer { padding: 12px 16px; }
  .cg-modal .ok-accounts { height: clamp(140px, 30vh, 260px); padding: 10px 12px; }
}
@media (pointer: coarse) {
  .ok-footer .cg-btn, .ok-order-link, .cg-modal-close-square { min-height: 44px; }
  .cg-modal-close-square { flex-basis: 44px; width: 44px; }
}
.cg-dark .cg-modal-success, .cg-dark .ok-order-link, .cg-dark .ok-accounts { color: var(--cg-text); border-color: var(--cg-line); }
.cg-dark .ok-order-link, .cg-dark .ok-accounts, .cg-dark .cg-modal-close-square { background: var(--cg-soft); border-color: var(--cg-line); }
/* ceoacc ≤600px: dialog margin .5rem, buy modal capped at 100vh - 1rem with the body scrolling, 20px corners,
 * 16px text in fields (ceo-glass-pages.css), payment buttons min 40px (padding/size unchanged). */
@media (max-width: 600px) {
  .cg-modal { padding: .5rem; }
  .cg-modal-content { border-radius: 20px; }
  .cg-modal-header { border-radius: 19px 19px 0 0; }
  .cg-modal-footer { border-radius: 0 0 19px 19px; }
  .cg-modal-buy { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .cg-modal-buy .cg-modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
  .cg-modal-buy .buy-input:not(.buy-total) { font-size: 16px; }
  .cg-field :is(input, select, textarea), .select-input-group input, .select-pagination-summary select { font-size: 16px; } /* .form-control in #modalSelectPurchase */
  .buy-checkout { padding: 9px 10px 10px; }
  .pay-btn { min-height: 40px; }
}
@media (max-width: 420px) {
  .pay-grid { grid-template-columns: 1fr; }
  .buy-input.buy-total { text-align: left; }
}
.cg-dark .cg-modal-content { box-shadow: 0 24px 64px rgba(0,0,0,.5); }
.cg-dark .product-icon { background: #1e3a5f !important; color: #60a5fa !important; }
.crypto-cashier { margin-top: 16px; padding: 16px; background: var(--cg-soft); border-radius: 16px; border: 1px solid var(--cg-line); }
.cashier-notice { padding: 10px 14px; background: #fef3c7; border-radius: 10px; color: #92400e; font-size: 13px; margin-bottom: 14px; }
.cg-dark .cashier-notice { background: #422006; color: #fbbf24; }
.cashier-field { margin-bottom: 12px; }
.cashier-field label { font-size: 12px; color: var(--cg-muted); margin-bottom: 4px; display: block; }
.cashier-copy-row { display: flex; gap: 6px; }
.cashier-copy-row input { flex: 1; padding: 8px 12px; border: 1px solid var(--cg-line); border-radius: 10px; background: var(--cg-surface); color: var(--cg-text); font-size: 13px; }
.cashier-status { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cashier-timer { font-size: 13px; color: var(--cg-muted); }
.cashier-actions { display: flex; gap: 6px; }
.cg-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--cg-text); color: var(--cg-bg); padding: 10px 20px; border-radius: 10px; font-size: 13px; z-index: 10002; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cg-toast.show { opacity: 1; }