/* Shared customer and admin presentation layer. Loaded after the legacy stylesheet. */
:root {
  --bg-body: #f4f7fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-input: #ffffff;
  --bg-muted: #f1f5f9;
  --text-main: #172b4d;
  --text-muted: #526277;
  --text-dim: #6b7a90;
  --border-color: #dce4ed;
  --border-input: #cbd5e1;
  --border-focus: #1d63d8;
  --primary: #1d63d8;
  --primary-hover: #174ea6;
  --primary-blue: #1d63d8;
  --accent-green: #16794b;
  --accent-orange: #b86500;
  --danger: #b42318;
  --warning: #9a5b00;
  --radius-cards: 8px;
  --radius-inputs: 6px;
  --radius-buttons: 6px;
  --sidebar-w: 248px;
  --shadow-subtle: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-elevated: 0 12px 28px rgba(16, 24, 40, .12);
  --shadow-focus: 0 0 0 3px rgba(29, 99, 216, .16);
}

[data-theme="dark"] {
  --bg-body: #111827;
  --bg-card: #1b2636;
  --bg-card-hover: #243246;
  --bg-sidebar: #172131;
  --bg-input: #202d40;
  --bg-muted: #243246;
  --text-main: #f3f6fb;
  --text-muted: #c0cad8;
  --text-dim: #9aa9bc;
  --border-color: #344256;
  --border-input: #485a70;
  --border-focus: #78aaff;
  --primary: #78aaff;
  --primary-hover: #a5c6ff;
  --primary-blue: #78aaff;
  --accent-green: #4ade80;
  --accent-orange: #fbbf24;
  --danger: #f87171;
  --warning: #fbbf24;
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, .16);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .16);
  --shadow-elevated: 0 14px 34px rgba(0, 0, 0, .32);
  --shadow-focus: 0 0 0 3px rgba(120, 170, 255, .24);
}

html { scroll-padding-top: 76px; }
body { background: var(--bg-body); color: var(--text-main); }
button, input, select, textarea { font: inherit; }
a { text-underline-offset: 3px; }

.app-container { min-height: 100svh; background: var(--bg-body); }
.app-main, .thueotp-main { min-width: 0; padding-top: 60px !important; }
.navbar-greeting { min-width: 0; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thueotp-navbar .header-left { gap: 12px; }
.thueotp-navbar .desktop-sidebar-toggle { display: none !important; }
.thueotp-navbar .btn-admin-switch-top { order: 0; }
.thueotp-navbar .thueotp-wallet-box { order: 1; }
.thueotp-navbar .thueotp-user-profile { order: 2; }
.thueotp-navbar .thueotp-logout-btn { order: 3; }
.content-body, .thueotp-body {
  width: 100%;
  max-width: 1488px;
  margin-inline: auto;
  padding: 24px 28px 40px;
}

.thueotp-sidebar, .admin-sidebar {
  background: var(--bg-sidebar) !important;
  color: var(--text-main);
  border-right: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}
.sidebar-header, .thueotp-sidebar .sidebar-header, .admin-sidebar .sidebar-header {
  min-height: 64px;
  height: auto;
  border-bottom: 1px solid var(--border-color) !important;
  background: var(--bg-sidebar) !important;
}
.brand-title, .admin-sidebar .brand-link span { color: var(--text-main) !important; }
.brand-sub, .sidebar-section-title { color: var(--text-dim) !important; }
.brand-logo-wrap { border-color: var(--border-color); box-shadow: none; background: var(--bg-muted); }
.sidebar-account-summary { background: var(--bg-sidebar) !important; border-color: var(--border-color) !important; }
.mobile-account-info, .mobile-account-info strong, .ecosystem-name { color: var(--text-main) !important; }
.mobile-account-info span, .ecosystem-sub { color: var(--text-muted) !important; }
.sidebar-menu { padding: 12px 10px; }
.sidebar-section-title { padding: 16px 12px 6px; font-size: 11px; letter-spacing: .04em; }
.menu-item {
  min-height: 42px;
  margin: 2px 4px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted) !important;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.menu-item i { color: var(--text-dim) !important; }
.menu-item:hover, .admin-sidebar .menu-item:hover {
  color: var(--text-main) !important;
  background: var(--bg-muted) !important;
  border-color: var(--border-color) !important;
}
.menu-item.active, .thueotp-sidebar .menu-item.active, .admin-sidebar .menu-item.active {
  color: #174ea6 !important;
  background: #eaf2ff !important;
  border-color: #c9dcff !important;
  box-shadow: none !important;
  font-weight: 650;
}
.menu-item.active i, .thueotp-sidebar .menu-item.active i, .admin-sidebar .menu-item.active i { color: #1d63d8 !important; }
[data-theme="dark"] .menu-item.active, [data-theme="dark"] .thueotp-sidebar .menu-item.active, [data-theme="dark"] .admin-sidebar .menu-item.active {
  color: #d9e7ff !important;
  background: #253b5b !important;
  border-color: #37567e !important;
}
[data-theme="dark"] .menu-item.active i, [data-theme="dark"] .thueotp-sidebar .menu-item.active i, [data-theme="dark"] .admin-sidebar .menu-item.active i { color: #a5c6ff !important; }
.sidebar-footer, .thueotp-sidebar .sidebar-footer {
  color: var(--text-muted) !important;
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.sidebar-collapse-btn { color: var(--text-muted) !important; }
.sidebar-admin-link { min-height: 34px; border-radius: 6px; }
.ecosystem-icon-wrap { background: var(--bg-muted) !important; }
.thueotp-sidebar .menu-item-sales-cta,
.thueotp-sidebar .menu-item-sales-cta:hover,
.thueotp-sidebar .menu-item-sales-cta.active,
.thueotp-sidebar .menu-item-sales-cta:focus-visible {
  min-height: 44px !important;
  color: var(--text-main) !important;
  background: #f1f6ff !important;
  border: 1px solid #d8e5f7 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}
.thueotp-sidebar .menu-item-sales-cta .sales-cta-main-title { color: var(--text-main) !important; text-shadow: none !important; }
.thueotp-sidebar .menu-item-sales-cta .sales-cta-icon-box { color: #1d63d8 !important; background: #e2edff !important; box-shadow: none !important; animation: none !important; }
.thueotp-sidebar .menu-item-sales-cta::before { display: none !important; animation: none !important; }
.thueotp-sidebar .sales-cta-badge { color: #166534; background: #dcfce7; border-radius: 4px; box-shadow: none; }
[data-theme="dark"] .thueotp-sidebar .menu-item-sales-cta,
[data-theme="dark"] .thueotp-sidebar .menu-item-sales-cta:hover,
[data-theme="dark"] .thueotp-sidebar .menu-item-sales-cta.active { background: #202f43 !important; border-color: #344a66 !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item-sales-cta .sales-cta-main-title { color: var(--text-main) !important; }

/* Customer navigation follows the light account workspace shown in the Figma reference. */
.thueotp-sidebar {
  --sidebar-fixed-bg: #ffffff;
  --sidebar-fixed-raised: #f8fafc;
  --sidebar-fixed-border: #dce4ed;
  background: #ffffff !important;
  color: #172b4d;
  border-color: #dce4ed !important;
}
.thueotp-sidebar .sidebar-header,
.thueotp-sidebar .sidebar-account-summary { background: #ffffff !important; border-color: #dce4ed !important; }
.thueotp-sidebar .brand-title,
.thueotp-sidebar .mobile-account-info,
.thueotp-sidebar .mobile-account-info strong,
.thueotp-sidebar .menu-item,
.thueotp-sidebar .ecosystem-name { color: #172b4d !important; }
.thueotp-sidebar .brand-sub,
.thueotp-sidebar .sidebar-section-title,
.thueotp-sidebar .mobile-account-info span,
.thueotp-sidebar .ecosystem-sub { color: #6b7a90 !important; }
.thueotp-sidebar .menu-item i { color: #526277 !important; }
.thueotp-sidebar .menu-item:hover { color: #172b4d !important; background: #f8fafc !important; }
.thueotp-sidebar .menu-item.active { color: #1d63d8 !important; background: #eaf2ff !important; border-color: #c9dcff !important; }
.thueotp-sidebar .menu-item.active i { color: #1d63d8 !important; }
.thueotp-sidebar .sidebar-footer { color: #526277 !important; background: #ffffff !important; border-color: #dce4ed !important; }
.thueotp-sidebar .sidebar-collapse-btn,
.thueotp-sidebar .sidebar-language-btn,
.thueotp-sidebar .sidebar-theme-toggle { color: #526277 !important; }
.thueotp-sidebar .sidebar-collapse-btn:hover,
.thueotp-sidebar .sidebar-language-btn:hover,
.thueotp-sidebar .sidebar-theme-toggle:hover { color: #172b4d !important; background: #f1f5f9 !important; }
.thueotp-sidebar .ecosystem-icon-wrap { background: #f1f5f9 !important; }
.thueotp-sidebar .mobile-sidebar-logout:hover { background: #f1f5f9 !important; }

[data-theme="dark"] .thueotp-sidebar {
  --sidebar-fixed-bg: #151f30;
  --sidebar-fixed-raised: #1d2a3e;
  --sidebar-fixed-border: #263449;
  background: #151f30 !important;
  color: #e5edf8;
  border-color: #263449 !important;
}
[data-theme="dark"] .thueotp-sidebar .sidebar-header,
[data-theme="dark"] .thueotp-sidebar .sidebar-account-summary { background: #151f30 !important; border-color: #263449 !important; }
[data-theme="dark"] .thueotp-sidebar .brand-title,
[data-theme="dark"] .thueotp-sidebar .mobile-account-info,
[data-theme="dark"] .thueotp-sidebar .mobile-account-info strong,
[data-theme="dark"] .thueotp-sidebar .menu-item,
[data-theme="dark"] .thueotp-sidebar .ecosystem-name { color: #e5edf8 !important; }
[data-theme="dark"] .thueotp-sidebar .brand-sub,
[data-theme="dark"] .thueotp-sidebar .sidebar-section-title,
[data-theme="dark"] .thueotp-sidebar .mobile-account-info span,
[data-theme="dark"] .thueotp-sidebar .ecosystem-sub { color: #9aabc1 !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item i { color: #9aabc1 !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item:hover { color: #e5edf8 !important; background: #1d2a3e !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item.active { color: #bfdbfe !important; background: #1d2a3e !important; border-color: #34445d !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item.active i { color: #93c5fd !important; }
[data-theme="dark"] .thueotp-sidebar .sidebar-footer { color: #c0cad8 !important; background: #1d2a3e !important; border-color: #263449 !important; }
[data-theme="dark"] .thueotp-sidebar .sidebar-collapse-btn,
[data-theme="dark"] .thueotp-sidebar .sidebar-language-btn,
[data-theme="dark"] .thueotp-sidebar .sidebar-theme-toggle { color: #a8b7ca !important; }
[data-theme="dark"] .thueotp-sidebar .sidebar-collapse-btn:hover,
[data-theme="dark"] .thueotp-sidebar .sidebar-language-btn:hover,
[data-theme="dark"] .thueotp-sidebar .sidebar-theme-toggle:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .thueotp-sidebar .ecosystem-icon-wrap { background: #263248 !important; }

.thueotp-sidebar .sidebar-header { min-height: 64px; }
.thueotp-sidebar .sidebar-account-summary { display: none !important; }
.thueotp-sidebar .sidebar-menu { padding: 16px 14px 12px; }
.thueotp-sidebar .sidebar-section-title {
  padding: 14px 4px 5px;
  color: #78869a !important;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
}
.thueotp-sidebar .menu-item {
  min-height: 42px;
  margin: 1px 0;
  padding: 8px 10px;
  gap: 10px;
  border-radius: 7px;
  color: #526277 !important;
  font-size: 13px;
  font-weight: 450;
}
.thueotp-sidebar .menu-item i {
  width: 20px;
  color: #526277 !important;
  font-size: 17px;
}
.thueotp-sidebar .menu-item:hover {
  color: #1d63d8 !important;
  background: #f5f8fd !important;
}
.thueotp-sidebar .menu-item.active {
  color: #1d63d8 !important;
  background: #edf3ff !important;
  border-color: transparent !important;
  font-weight: 600;
}
.thueotp-sidebar .menu-item.active i { color: #1d63d8 !important; }
.thueotp-sidebar .sidebar-ecosystem-title { padding-top: 16px; }
.thueotp-sidebar .menu-item-ecosystem { min-height: 42px; padding: 8px 10px; }
.thueotp-sidebar .ecosystem-icon-wrap {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: transparent !important;
  color: #526277 !important;
  font-size: 17px;
}
.thueotp-sidebar .ecosystem-info { min-width: 0; }
.thueotp-sidebar .ecosystem-sub,
.thueotp-sidebar .ecosystem-link-badge { display: none; }
.thueotp-sidebar .sidebar-support-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 8px;
  flex: 0 0 auto;
  margin: 8px 18px 14px;
  padding: 14px;
  border-radius: 8px;
  background: #f4f7fb;
  color: #172b4d;
  text-decoration: none;
}
.thueotp-sidebar .sidebar-support-card > span > .ph-paper-plane-tilt {
  color: #1d63d8;
  font-size: 18px;
}
.thueotp-sidebar .sidebar-support-card strong { font-size: 12px; font-weight: 600; }
.thueotp-sidebar .sidebar-support-card > span { display: flex; align-items: center; gap: 6px; color: #1d63d8; font-size: 12px; }
.thueotp-sidebar .sidebar-support-card:hover { background: #edf3ff; }
.thueotp-sidebar .sidebar-footer {
  gap: 0;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom, 0px));
  background: #fff !important;
  border-top: 1px solid #e5eaf1 !important;
}
.thueotp-sidebar .sidebar-preferences { min-height: 44px; gap: 8px; }
.thueotp-sidebar .sidebar-language-picker summary {
  min-height: 40px;
  gap: 0;
  padding: 0 6px;
  color: #526277;
  font-size: 12px;
}
.thueotp-sidebar .sidebar-language-picker summary > .ph-globe,
.thueotp-sidebar .language-picker-caret { display: none; }
.thueotp-sidebar .sidebar-theme-toggle { min-height: 40px; gap: 6px; padding: 0 6px; font-size: 12px; }
.thueotp-sidebar .sidebar-footer > .mobile-sidebar-logout {
  min-height: 40px;
  margin: 2px -16px -8px;
  padding: 0 22px;
  border-top: 1px solid #e5eaf1;
  border-radius: 0;
  color: #d92d20;
  font-size: 12px;
}
.thueotp-sidebar .sidebar-footer > .mobile-sidebar-logout:hover { background: #fff7f6 !important; }

[data-theme="dark"] .thueotp-sidebar .sidebar-section-title { color: #9aabc1 !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item { color: #c0cad8 !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item i,
[data-theme="dark"] .thueotp-sidebar .ecosystem-icon-wrap { color: #aab8cb !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item:hover { color: #bfdbfe !important; background: #1d2a3e !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item.active { color: #bfdbfe !important; background: #1d2a3e !important; }
[data-theme="dark"] .thueotp-sidebar .menu-item.active i { color: #93c5fd !important; }
[data-theme="dark"] .thueotp-sidebar .sidebar-support-card { background: #1d2a3e; color: #e5edf8; }
[data-theme="dark"] .thueotp-sidebar .sidebar-support-card:hover { background: #263b59; }
[data-theme="dark"] .thueotp-sidebar .sidebar-footer { background: #151f30 !important; border-color: #263449 !important; }
[data-theme="dark"] .thueotp-sidebar .sidebar-footer > .mobile-sidebar-logout { border-color: #263449; }

@media (max-width: 992px) {
  .thueotp-sidebar .sidebar-menu { padding: 12px 14px 8px; }
  .thueotp-sidebar .sidebar-section-title { padding-top: 12px; }
  .thueotp-sidebar .sidebar-support-card { margin: 6px 16px 10px; }
}

@media (min-width: 993px) {
  body.sidebar-collapsed .thueotp-sidebar .sidebar-support-card { display: none; }
}

.app-header, .thueotp-navbar {
  min-height: 60px;
  height: 60px;
  padding-inline: 24px;
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.thueotp-navbar { z-index: 90 !important; }
.app-header .header-left > span { color: var(--text-main) !important; }
.header-right { gap: 8px; }
.thueotp-wallet-box, .thueotp-user-profile, .thueotp-lang-pill, .lang-opt.active {
  border-radius: 6px;
  box-shadow: none;
}
.btn-topup-plus { border-radius: 5px; background: #1d63d8; box-shadow: none; }
.btn-admin-switch-top, .btn-register-pill, .btn-admin-view-site { box-shadow: none !important; border-radius: 6px !important; }
.btn-admin-switch-top, .btn-register-pill { background: #1d63d8 !important; }
.thueotp-circle-btn, .icon-btn, .sidebar-toggle-btn { width: 40px; height: 40px; border-radius: 6px; }

.glass-card, .thueotp-card, .profile-block-card, .profile-api-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-card) !important;
}
.glass-card { padding: 20px; }
.card-title, .step-title { color: var(--text-main); }
.thueotp-hero-banner { background: var(--bg-card) !important; }
.hero-icon-box { box-shadow: none !important; border-radius: 8px !important; }
.step-badge { border-radius: 6px !important; }
.thueotp-announcement, .alert, .alert-info, .alert-success, .alert-danger { border-radius: 6px !important; box-shadow: none !important; }

.form-label, label { color: var(--text-muted); }
.form-control, .thueotp-search-input, select.form-control, textarea.form-control {
  min-height: 42px;
  border: 1px solid var(--border-input);
  border-radius: 6px !important;
  background-color: var(--bg-input);
  color: var(--text-main);
  box-shadow: none;
}
.form-control:focus, .thueotp-search-input:focus, select.form-control:focus, textarea.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }

.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-step-action,
.btn-thueotp-buy, .btn-submit-auth, .btn-copy-code, .recharge-method-tab {
  min-height: 40px;
  border-radius: 6px !important;
  box-shadow: none !important;
  letter-spacing: 0;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn-primary, .btn-thueotp-buy, .btn-submit-auth { background: #1d63d8 !important; }
.btn-primary:hover:not(:disabled), .btn-thueotp-buy:hover:not(:disabled), .btn-submit-auth:hover:not(:disabled) {
  background: #174ea6 !important;
  transform: none !important;
}
.btn-thueotp-buy::after { display: none !important; animation: none !important; }
.btn-secondary, .btn-outline { color: var(--text-main) !important; border: 1px solid var(--border-input) !important; background: var(--bg-card) !important; }
.btn-secondary:hover, .btn-outline:hover { color: var(--text-main) !important; border-color: #9aacc1 !important; background: var(--bg-muted) !important; }
.btn-danger { color: #a32118 !important; border: 1px solid #f3c4bf !important; background: #fff3f1 !important; }
.btn-copy-code { width: 40px; min-width: 40px; min-height: 40px; border-color: var(--border-color); }
:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 2px; }

.table-responsive {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: none;
  background: var(--bg-card);
}
.custom-table { font-size: 13px; }
.custom-table th {
  padding: 11px 14px;
  background: #f5f7fa;
  color: #526277;
  border-bottom-color: var(--border-color);
  font-size: 11px;
  letter-spacing: .035em;
}
.custom-table td { padding: 12px 14px; color: var(--text-main); border-bottom-color: #e8edf3; }
.custom-table tbody tr:hover { background: #f7faff; }
[data-theme="dark"] .custom-table th { background: #202d40; color: #c0cad8; }
[data-theme="dark"] .custom-table td { border-bottom-color: #344256; }
[data-theme="dark"] .custom-table tbody tr:hover { background: #243246; }
.badge, .status-badge { border-radius: 4px !important; font-variant-numeric: tabular-nums; }
.pagination, .page-item, .page-link { border-radius: 6px !important; }

.mobile-bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-color) !important;
  box-shadow: 0 -3px 14px rgba(16, 24, 40, .06) !important;
}
.bottom-nav-item { min-height: 52px; color: var(--text-muted) !important; }
.bottom-nav-item.active { color: var(--primary) !important; background: transparent !important; }
.bottom-nav-rent { background: transparent !important; box-shadow: none !important; }

.toast-success, .toast-error, .toast-warning, .toast-info { border-radius: 8px !important; box-shadow: var(--shadow-elevated) !important; }
.modal-content, .modal-box, .deposit-modal-box, .auth-container { border-radius: 8px !important; }

@media (max-width: 992px) {
  .app-sidebar.open, .thueotp-sidebar.open, .admin-sidebar.open { box-shadow: 16px 0 36px rgba(15, 23, 42, .16) !important; }
  .content-body, .thueotp-body { padding: 20px 20px 36px; }
  .app-header:not(.thueotp-navbar) { padding-inline: 20px; }
}

@media (max-width: 768px) {
  .app-header, .thueotp-navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px;
    min-height: 56px;
    padding-inline: 12px;
  }
  .content-body, .thueotp-body { padding: 16px 12px 28px; }
  .app-main, .thueotp-main { padding-top: 56px !important; }
  .navbar-greeting { display: none; }
  .thueotp-navbar .mobile-nav-brand { display: inline-flex !important; }
  .thueotp-navbar .btn-admin-switch-top { order: 0; width: 40px; min-width: 40px; height: 40px; padding: 0 !important; justify-content: center; }
  .thueotp-navbar .thueotp-wallet-box { order: 1; }
  .thueotp-navbar .thueotp-user-profile { order: 2; }
  .thueotp-navbar .thueotp-logout-btn { order: 3; }
  .thueotp-navbar .header-more-wrap { order: 4 !important; }
  .thueotp-navbar .header-more-wrap { display: none !important; }
  .thueotp-navbar .thueotp-user-profile { order: 4 !important; width: auto; min-width: 0; max-width: 116px; padding: 0 8px; justify-content: flex-start; gap: 6px; }
  .thueotp-navbar .thueotp-user-profile span { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  .glass-card { padding: 16px; margin-bottom: 12px; }
  .card-title { gap: 8px; font-size: 16px; }
  .header-right { gap: 6px; }
  .header-right > .btn-admin-switch-top span, .header-right > .thueotp-user-profile span { display: none; }
  .thueotp-wallet-box { min-width: 0; gap: 4px; padding: 3px 5px 3px 7px; font-size: 11px; }
  .thueotp-wallet-box .wallet-amount { font-size: 11px; }
  .thueotp-wallet-box .btn-topup-plus { width: 30px; min-width: 30px; height: 30px; }
  .thueotp-wallet-box .wallet-label { display: none; }
  .thueotp-user-profile { min-height: 40px; width: 40px; justify-content: center; padding: 0; }
  .app-header .header-left > span { font-size: 14px !important; }
  .form-control, .thueotp-search-input, select.form-control, textarea.form-control { min-height: 44px; font-size: 16px; }
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-step-action,
  .btn-thueotp-buy, .btn-submit-auth, .recharge-method-tab { min-height: 44px; }
  .table-responsive { margin-inline: 0; max-width: 100%; }
  .custom-table { min-width: 680px; }
  .custom-table.table-compact, .custom-table.table-sm { min-width: 100% !important; }
  .rent-options-row, .responsive-grid-2, .responsive-grid-3, .responsive-grid-2-1, .responsive-grid-1-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .responsive-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .step-card-header { align-items: flex-start; gap: 10px; }
  .step-text, .card-title, .form-label { overflow-wrap: anywhere; }
  .mobile-bottom-nav { min-height: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 420px) {
  .content-body, .thueotp-body { padding-inline: 10px; }
  .glass-card { padding: 14px; }
  .responsive-grid-cards { grid-template-columns: minmax(0, 1fr) !important; }
  .app-header, .thueotp-navbar { padding-inline: 8px; }
  .header-right { gap: 4px; }
  .thueotp-circle-btn, .icon-btn, .sidebar-toggle-btn { width: 38px; height: 38px; }
}

@media (max-width: 768px) {
  .thueotp-navbar .btn-admin-switch-top span { display: none !important; }
  .thueotp-navbar .btn-admin-switch-top { min-height: 40px !important; margin-right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}