/* ==========================================================================
   MaxSMM Aura  ·  theme CSS  ·  v1.0
   One file. Colours live in CSS variables only:
     html[data-mode="dark|light"]      -> surfaces / text   (default: dark)
     html[data-accent="lime|violet|cyan|ember"] -> brand colour (set from admin)
   Loaded AFTER bootstrap.css (Bootstrap 4.5) so it re-skins it.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --side-w: 268px; --top-h: 68px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* accent: lime (default) */
  --ac:#b5ff37; --ac-2:#44d88a; --ac-ink:#0b140d; --ac-text:#b5ff37;
}
/* dark (default) */
:root, html[data-mode="dark"]{
  --bg:#07090c; --bg-2:#0b0f14; --surface:#0f1419; --surface-2:#151b22; --surface-3:#1b232c;
  --line:#242d38; --line-soft:#1a2129;
  --text:#eef2f6; --text-2:#c4ccd6; --muted:#8c99a8;
  --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --glow: 0 0 0 1px color-mix(in srgb,var(--ac) 35%,transparent), 0 8px 30px color-mix(in srgb,var(--ac) 22%,transparent);
  --good:#3ddc97; --warn:#ffb020; --bad:#ff5d6c; --info:#4aa8ff;
  color-scheme: dark;
}
html[data-mode="light"]{
  --bg:#f2f5f9; --bg-2:#eaeff5; --surface:#ffffff; --surface-2:#f4f7fb; --surface-3:#e9eef5;
  --line:#dde4ed; --line-soft:#e9eef4;
  --text:#0e1620; --text-2:#314052; --muted:#5d6b7c;
  --shadow: 0 12px 32px rgba(20,35,60,.10); --shadow-sm: 0 2px 10px rgba(20,35,60,.07);
  --glow: 0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent), 0 8px 26px color-mix(in srgb,var(--ac) 22%,transparent);
  --good:#0f9d63; --warn:#c77700; --bad:#d6293b; --info:#1769d1;
  color-scheme: light;
}
/* accents x modes */
html[data-accent="lime"]  { --ac:#b5ff37; --ac-2:#44d88a; --ac-ink:#0b140d; --ac-text:#b5ff37; }
html[data-accent="violet"]{ --ac:#9877ff; --ac-2:#5b8cff; --ac-ink:#0d0820; --ac-text:#b3a4ff; }
html[data-accent="cyan"]  { --ac:#17d9df; --ac-2:#3b9dff; --ac-ink:#031416; --ac-text:#17d9df; }
html[data-accent="ember"] { --ac:#ff7a45; --ac-2:#ffb020; --ac-ink:#1a0a02; --ac-text:#ff8a5c; }
html[data-mode="light"][data-accent="lime"]  { --ac:#7ccf00; --ac-2:#2fbf71; --ac-ink:#0b140d; --ac-text:#3f7a00; }
html[data-mode="light"][data-accent="violet"]{ --ac:#6d4aff; --ac-2:#8f6bff; --ac-ink:#ffffff; --ac-text:#5a38ea; }
html[data-mode="light"][data-accent="cyan"]  { --ac:#07a9b2; --ac-2:#2a7fff; --ac-ink:#ffffff; --ac-text:#07808a; }
html[data-mode="light"][data-accent="ember"] { --ac:#ee5a1c; --ac-2:#f59e0b; --ac-ink:#ffffff; --ac-text:#c2410c; }
:root{
  --ac-soft: color-mix(in srgb, var(--ac) 14%, transparent);
  --ac-soft-2: color-mix(in srgb, var(--ac) 24%, transparent);
  --ac-grad: linear-gradient(135deg, var(--ac), var(--ac-2));
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body, body.body{
  margin:0; font-family:var(--font); font-size:15px; line-height:1.55;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.body{ background: var(--bg) !important; color: var(--text) !important; }
body::before{ /* soft accent aurora behind everything */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -8%, color-mix(in srgb,var(--ac) 13%,transparent), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, color-mix(in srgb,var(--ac-2) 10%,transparent), transparent 60%);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font-head); color:var(--text); font-weight:700; letter-spacing:-.01em; }
a{ color:var(--ac-text); text-decoration:none; transition:color .2s var(--ease), opacity .2s; }
a:hover{ color:var(--ac-text); opacity:.85; text-decoration:none; }
p{ color:var(--text-2); }
small,.text-muted{ color:var(--muted) !important; }
hr{ border-top:1px solid var(--line); }
::selection{ background:var(--ac); color:var(--ac-ink); }
img{ max-width:100%; }
.hidden{ display:none !important; }
:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; }
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }

/* ---------- 3. APP SHELL (logged-in) ---------- */
.mx-shell{ min-height:100vh; display:flex; }
.mx-side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:1040;
  display:flex; flex-direction:column; padding:18px 14px 14px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px); border-right:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.mx-brand{ display:flex; align-items:center; gap:11px; padding:6px 10px 18px; color:var(--text) !important; font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em; }
.mx-brand:hover{ opacity:1; }
.mx-brand svg{ width:34px; height:34px; flex:none; }
.mx-brand img{ max-height:38px; max-width:180px; }
.mx-brand b{ background:var(--ac-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mx-nav{ list-style:none; margin:0; padding:0; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:3px; }
.mx-nav li a{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-sm);
  color:var(--text-2) !important; font-weight:550; font-size:14.5px; transition:all .2s var(--ease);
  position:relative;
}
.mx-nav li a .mx-ico{ width:22px; text-align:center; font-size:16px; color:var(--muted); transition:color .2s; }
.mx-nav li a:hover{ background:var(--surface-2); color:var(--text) !important; opacity:1; }
.mx-nav li a:hover .mx-ico{ color:var(--ac-text); }
.mx-nav li.is-active a{ background:var(--ac-soft); color:var(--text) !important; box-shadow: inset 0 0 0 1px var(--ac-soft-2); }
.mx-nav li.is-active a .mx-ico{ color:var(--ac-text); }
.mx-nav li.is-active a::before{ content:""; position:absolute; left:-14px; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--ac); }
.mx-nav .badge{ margin-left:auto; background:var(--ac); color:var(--ac-ink); border-radius:20px; padding:3px 8px; font-size:11px; }
.mx-side-foot{ padding-top:12px; border-top:1px solid var(--line); margin-top:10px; display:flex; flex-direction:column; gap:3px; }
.mx-side-foot a{ display:flex; gap:12px; align-items:center; padding:10px 13px; border-radius:var(--r-sm); color:var(--text-2) !important; font-weight:550; font-size:14px; }
.mx-side-foot a:hover{ background:var(--surface-2); opacity:1; }
.mx-side-foot a .mx-ico{ width:22px; text-align:center; color:var(--muted); }

.mx-main{ flex:1; min-width:0; margin-left:var(--side-w); display:flex; flex-direction:column; min-height:100vh; }
.mx-top{
  position:sticky; top:0; z-index:1030; height:var(--top-h); display:flex; align-items:center; gap:14px; padding:0 28px;
  background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft);
}
.mx-burger{ display:none; width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--text); align-items:center; justify-content:center; font-size:17px; cursor:pointer; }
.mx-top-title{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--text); margin:0; }
.mx-top-sp{ flex:1; }
.mx-chip{
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--text) !important; font-weight:600; font-size:14px; cursor:pointer;
  transition:all .2s var(--ease);
}
.mx-chip:hover{ border-color:var(--ac); opacity:1; }
.mx-chip .mx-ico{ color:var(--ac-text); }
.mx-chip.is-ac{ background:var(--ac-grad); color:var(--ac-ink) !important; border-color:transparent; }
.mx-chip.is-ac .mx-ico{ color:var(--ac-ink); }
.mx-icon-btn{ width:42px; height:42px; border-radius:50%; padding:0; justify-content:center; }
.mx-mode .m-sun{ display:none; } html[data-mode="light"] .mx-mode .m-sun{ display:inline; } html[data-mode="light"] .mx-mode .m-moon{ display:none; }
.mx-userbox{ position:relative; }
.mx-pop{ position:absolute; right:0; top:calc(100% + 10px); min-width:220px; padding:8px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:none; z-index:50; }
.mx-pop.is-open{ display:block; animation:mxpop .18s var(--ease); }
.mx-pop a, .mx-pop .mx-pop-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; color:var(--text) !important; font-size:14px; }
.mx-pop a:hover{ background:var(--surface-2); opacity:1; }
.mx-pop .mx-pop-h{ padding:8px 11px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; font-size:12px; color:var(--muted); }
.mx-pop .mx-pop-h b{ display:block; color:var(--text); font-size:15px; }
@keyframes mxpop{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.mx-content{ flex:1; padding:26px 28px 40px; width:100%; max-width:1480px; margin:0 auto; }
.mx-scrim{ display:none; position:fixed; inset:0; z-index:1035; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
.mx-foot{ padding:20px 28px 26px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; }
.mx-foot a{ color:var(--muted) !important; } .mx-foot a:hover{ color:var(--ac-text) !important; opacity:1; }

/* page title block */
.mx-pagehead{ margin:0 0 22px; }
.mx-pagehead h1{ font-size:26px; margin:0 0 4px; }
.mx-pagehead p{ margin:0; color:var(--muted); }

/* ---------- 4. LEGACY WRAPPERS (inherited from the page markup) ---------- */
.wrapper, .wrapper-content, .wrapper-content__body, .wrapper-content__header, .wrapper-content__footer{ background:transparent !important; padding:0; margin:0; }
.wrapper-content__header:empty, .wrapper-content__footer:empty{ display:none; }
.mop, .divider-top, .divider-bottom, .bg, .progressive-line{ display:none !important; }
.container, .container-fluid{ max-width:100%; padding-left:0; padding-right:0; }
.mx-content .container, .mx-content .container-fluid{ padding-left:0; padding-right:0; }
.row{ margin-left:-10px; margin-right:-10px; } .row>[class*="col"]{ padding-left:10px; padding-right:10px; }
.mx-content #block_93 .container{ max-width:100%; }

/* ---------- 5. CARDS / PANELS ---------- */
.card, .well, .panel, .component_card .card{
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm); color:var(--text); padding:22px; margin-bottom:18px;
}
.card .card, .well .card, .well{ box-shadow:none; }
.well{ padding:0; border:0 !important; background:transparent !important; margin:0; }
.card-header,.card-footer,.panel-heading{ background:var(--surface-2) !important; border-color:var(--line) !important; color:var(--text) !important; }
.card.h-100{ margin-bottom:0; }
.mx-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-sm); }
.mx-card-h{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:16px; margin:0 0 16px; color:var(--text); }
.mx-card-h .mx-ico{ color:var(--ac-text); }

/* stat tiles (legacy totals + new) */
.totals-block__card{ display:flex; align-items:center; gap:14px; }
.totals-block__icon-preview, .mx-stat-ico{
  width:52px; height:52px; border-radius:14px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--ac-soft) !important; color:var(--ac-text) !important; font-size:20px; overflow:hidden;
}
.totals-block__icon-preview img{ width:30px !important; height:30px !important; margin:0 !important; object-fit:contain; }
.totals-block__count-value{ font-size:24px !important; margin:0 !important; color:var(--text) !important; font-weight:800; }
.totals-block__card-name p{ margin:0; color:var(--muted) !important; font-size:13px; }
.totals-block__card-name a{ color:var(--ac-text) !important; font-size:13px !important; }
.mx-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.mx-stat{ display:flex; align-items:center; gap:14px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform .25s var(--ease), border-color .25s; }
.mx-stat:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--ac) 50%,var(--line)); }
.mx-stat::after{ content:""; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle, var(--ac-soft-2), transparent 68%); pointer-events:none; }
.mx-stat b{ display:block; font-family:var(--font-head); font-size:22px; line-height:1.15; color:var(--text); }
.mx-stat span{ color:var(--muted); font-size:13px; }
.mx-stat a{ font-size:12.5px; font-weight:600; }

/* quick links row */
.mx-quick{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.mx-quick a, .lb a{
  display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); color:var(--text) !important; font-weight:600; flex:1 1 220px; min-width:200px;
  transition:all .2s var(--ease);
}
.mx-quick a:hover, .lb a:hover{ border-color:var(--ac); transform:translateY(-2px); opacity:1; }
.mx-quick .q-ico{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--ac-soft); color:var(--ac-text); font-size:16px; flex:none; }
.mx-quick small{ display:block; line-height:1.1; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) !important; }
.mx-quick span.t{ line-height:1.2; }
.mx-quick em{ margin-left:auto; font-style:normal; color:var(--muted); }
.lb{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.lb a{ text-decoration:none; } .lb .icon{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; } .lb svg{ width:22px; height:22px; fill:var(--ac-text); }
.lb .text{ display:flex; flex-direction:column; line-height:1.15; } .lb small{ font-size:10px; letter-spacing:.08em; color:var(--muted); } .lb b{ font-size:14px; } .lb .arrow{ margin-left:auto; color:var(--muted); font-size:20px; }

/* ---------- 6. FORMS ---------- */
label, .control-label{ color:var(--text-2); font-weight:600; font-size:13.5px; margin-bottom:7px; }
.form-group{ margin-bottom:18px; }
.form-control, .custom-select, select.form-control, textarea.form-control, .input-group-text{
  background-color:var(--surface-2) !important; color:var(--text) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-sm) !important; min-height:48px; height:auto; padding:11px 14px; font-size:15px; box-shadow:none !important;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-control::placeholder{ color:var(--muted); opacity:.8; }
.form-control:focus, .custom-select:focus{ border-color:var(--ac) !important; box-shadow:0 0 0 4px var(--ac-soft) !important; background-color:var(--surface) !important; }
.form-control[readonly], .form-control:disabled{ background-color:var(--surface-3) !important; opacity:.9; }
textarea.form-control{ min-height:110px; resize:vertical; }
select.form-control, .custom-select{ appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238c99a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
.input-group-text{ color:var(--muted) !important; }
.input-group>.form-control{ border-radius:var(--r-sm) !important; }
.position-relative .sign-in__forgot{ position:absolute; right:14px; top:0; }
.checkbox label, .form-check-label{ font-weight:500; color:var(--text-2); }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--ac); }
.invalid-feedback, .help-block{ color:var(--bad); }
/* select2 (global JS) */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{ background:var(--surface-2) !important; border:1px solid var(--line) !important; border-radius:var(--r-sm) !important; min-height:48px; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--text) !important; line-height:46px; padding-left:14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:46px; }
.select2-dropdown{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow); overflow:hidden; }
.select2-search--dropdown .select2-search__field{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.select2-container--default .select2-results__option{ color:var(--text-2); padding:10px 14px; }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option:hover{ background:var(--ac-soft) !important; color:var(--text) !important; }
.select2-container--default .select2-results__option[aria-selected=true]{ background:var(--ac-soft-2) !important; color:var(--text) !important; }

/* ---------- 7. BUTTONS ---------- */
.btn{ border-radius:var(--r-sm); font-weight:650; padding:11px 20px; border:1px solid transparent; transition:transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s; }
.btn:hover{ opacity:1; transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn-primary, .btn-big-primary, .btn-success, .style-bg-primary.btn, button.btn-big-primary{
  background:var(--ac-grad) !important; color:var(--ac-ink) !important; border:0 !important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--ac) 28%,transparent); font-weight:700;
}
.btn-primary:hover, .btn-big-primary:hover, .btn-success:hover{ box-shadow:0 12px 28px color-mix(in srgb,var(--ac) 40%,transparent); color:var(--ac-ink) !important; filter:brightness(1.05); }
.btn-big-primary{ min-height:50px; font-size:15.5px; }
.btn-block{ display:block; width:100%; }
.btn-secondary, .btn-default, .btn-light{ background:var(--surface-2) !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.btn-secondary:hover, .btn-default:hover, .btn-light:hover{ border-color:var(--ac) !important; }
.btn-outline-primary{ color:var(--ac-text) !important; border:1px solid var(--ac) !important; background:transparent !important; }
.btn-outline-primary:hover{ background:var(--ac-soft) !important; }
.btn-danger{ background:var(--bad) !important; border:0 !important; color:#fff !important; }
.btn-warning{ background:var(--warn) !important; border:0 !important; color:#1a1000 !important; }
.btn-info{ background:var(--info) !important; border:0 !important; color:#fff !important; }
.btn-sm,.btn-xs{ padding:6px 12px; font-size:13px; }
.style-bg-primary{ background:var(--ac-grad) !important; color:var(--ac-ink) !important; }
.style-text-primary{ color:var(--ac-text) !important; }
.style-bg-primary-alpha-10{ background:var(--ac-soft) !important; }
.close{ color:var(--text) !important; text-shadow:none; opacity:.6; } .close:hover{ opacity:1; }

/* ---------- 8. ALERTS / BADGES ---------- */
.alert{ border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); color:var(--text); padding:13px 16px; font-weight:500; position:relative; }
.alert-success{ background:color-mix(in srgb,var(--good) 14%,var(--surface)); border-color:color-mix(in srgb,var(--good) 40%,transparent); color:var(--text); }
.alert-danger{ background:color-mix(in srgb,var(--bad) 14%,var(--surface)); border-color:color-mix(in srgb,var(--bad) 40%,transparent); color:var(--text); }
.alert-warning{ background:color-mix(in srgb,var(--warn) 14%,var(--surface)); border-color:color-mix(in srgb,var(--warn) 40%,transparent); color:var(--text); }
.alert-info{ background:color-mix(in srgb,var(--info) 12%,var(--surface)); border-color:color-mix(in srgb,var(--info) 35%,transparent); color:var(--text); }
.alert a{ text-decoration:underline; }
.badge{ border-radius:999px; padding:5px 10px; font-weight:650; font-size:11.5px; background:var(--surface-3); color:var(--text); }
.badge-primary,.badge-success{ background:var(--ac-soft-2) !important; color:var(--ac-text) !important; }
.badge-danger{ background:color-mix(in srgb,var(--bad) 22%,transparent) !important; color:var(--bad) !important; }
.badge-warning{ background:color-mix(in srgb,var(--warn) 22%,transparent) !important; color:var(--warn) !important; }
.badge-info{ background:color-mix(in srgb,var(--info) 22%,transparent) !important; color:var(--info) !important; }

/* ---------- 9. TABLES ---------- */
.table-responsive,.table-wr,.table-bg{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:auto; }
.table-bg .table-wr{ border:0; }
.table{ color:var(--text); margin:0; background:transparent !important; border-collapse:separate; border-spacing:0; width:100%; }
.table thead th{ background:var(--surface-2) !important; color:var(--muted) !important; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border:0 !important; border-bottom:1px solid var(--line) !important; padding:14px 16px; white-space:nowrap; }
.table td,.table th{ border-top:0 !important; border-bottom:1px solid var(--line-soft) !important; padding:14px 16px; vertical-align:middle; color:var(--text-2); }
.table tbody tr{ transition:background .15s; } .table tbody tr:hover{ background:var(--ac-soft); }
.table tbody tr:last-child td{ border-bottom:0 !important; }
.table-striped tbody tr:nth-of-type(odd){ background:transparent; }
.table td a{ font-weight:600; }
.pagination{ gap:6px; flex-wrap:wrap; } .page-link{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:10px !important; min-width:38px; text-align:center; }
.page-item.active .page-link{ background:var(--ac-grad) !important; color:var(--ac-ink) !important; border-color:transparent !important; }
.page-link:hover{ border-color:var(--ac) !important; }

/* ---------- 10. TABS / DROPDOWN / MODAL ---------- */
.nav-tabs{ border-bottom:1px solid var(--line); gap:4px; } .nav-tabs .nav-link{ border:0; color:var(--muted); border-radius:10px 10px 0 0; font-weight:600; }
.nav-tabs .nav-link.active{ background:var(--ac-soft); color:var(--text); border-bottom:2px solid var(--ac); }
.nav-pills .nav-link{ color:var(--text-2); border-radius:999px; } .nav-pills .nav-link.active{ background:var(--ac-grad); color:var(--ac-ink); }
.dropdown-menu{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow); padding:8px; }
.dropdown-item{ color:var(--text) !important; border-radius:8px; padding:9px 12px; } .dropdown-item:hover{ background:var(--ac-soft) !important; }
.modal-content{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--text); box-shadow:var(--shadow); }
.modal-header,.modal-footer{ border-color:var(--line); } .modal-backdrop.show{ opacity:.65; }
.progress{ background:var(--surface-3); border-radius:99px; height:10px; } .progress-bar{ background:var(--ac-grad); }
.list-group-item{ background:var(--surface); border-color:var(--line); color:var(--text); }
.tooltip-inner{ background:var(--surface-3); color:var(--text); border:1px solid var(--line); }

/* ---------- 11. NEW ORDER ---------- */
.mx-order-grid{ padding:0 !important; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:start; }
.mx-order-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.mx-order-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ac-grad); }
.mx-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.mx-tabs a{ padding:9px 16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-2) !important; font-weight:600; font-size:14px; }
.mx-tabs a.is-on{ background:var(--ac-grad); color:var(--ac-ink) !important; border-color:transparent; }
.search-dropdown .input-wrapper{ position:relative; }
.input-wrapper__prepend,.input-wrapper__append{ position:absolute; top:0; bottom:0; width:42px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--muted); z-index:2; cursor:pointer; }
.input-wrapper__prepend{ left:0; } .input-wrapper__append{ right:0; }
.search-results{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); max-height:320px; overflow:auto; }
.search-results .search-item,.search-results div{ padding:10px 14px; cursor:pointer; color:var(--text-2); }
.search-results div:hover{ background:var(--ac-soft); color:var(--text); }
#neworder_fields .alert,#neworder_fields .alert-info{ background:var(--surface-2) !important; border:1px dashed var(--line) !important; border-radius:var(--r-md); color:var(--text-2) !important; }
#neworder_fields .alert *{ background:transparent !important; color:inherit !important; }
#charge_div .form-control{ font-weight:800; font-size:18px; color:var(--ac-text) !important; }
.news-item{ padding:14px 0; border-bottom:1px solid var(--line-soft); } .news-item:last-child{ border:0; }
.news-date{ display:inline-block; border-radius:99px; padding:3px 10px; font-size:11.5px; font-weight:700; margin:0 0 6px; background:var(--ac-soft) !important; color:var(--ac-text) !important; }
.news-title{ font-size:15px; margin:0 0 4px; } .news-content{ color:var(--muted); font-size:13.5px; margin:0; }
.headsir{ padding:12px 16px; font-weight:700; border-radius:var(--r-md) var(--r-md) 0 0; }
.news-icon-inline{ border-radius:8px; }
.order-success-card{ position:fixed; left:50%; top:50%; transform:translate(-50%,-46%) scale(.96); z-index:2000; width:min(420px,92vw); background:var(--surface); border:1px solid var(--ac); border-radius:var(--r-xl); padding:26px; box-shadow:var(--glow), var(--shadow); opacity:0; pointer-events:none; transition:all .3s var(--ease); text-align:center; }
.order-success-card.order-success-card-active{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.order-success-card img{ width:90px; } .order-success-card button{ margin-top:14px; border:0; border-radius:var(--r-sm); background:var(--ac-grad); color:var(--ac-ink); font-weight:700; padding:10px 34px; }
.order-details p,.user-details p{ margin:.5rem 0; text-align:left; word-break:break-word; }
.install-app-popup{ position:fixed; left:50%; bottom:18px; transform:translate(-50%,160%); z-index:3000; width:min(380px,94vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:16px; transition:transform .35s var(--ease); }
.install-app-popup.show{ transform:translate(-50%,0); }
.install-app-popup .popup-header{ display:flex; gap:12px; align-items:center; } .install-app-popup h3{ font-size:16px; margin:0; } .install-app-popup p{ margin:0; font-size:13px; }
.install-app-popup .close-popup{ margin-left:auto; background:none; border:0; color:var(--muted); }
.install-app-popup .features-list{ display:none; } .install-app-popup .popup-footer{ display:flex; gap:10px; margin-top:12px; }
.install-btn-primary{ flex:1; border:0; border-radius:var(--r-sm); background:var(--ac-grad); color:var(--ac-ink); font-weight:700; padding:10px; } .install-btn-secondary{ border:1px solid var(--line); background:var(--surface-2); color:var(--text); border-radius:var(--r-sm); padding:10px 16px; }

/* ---------- 12. AUTH (login / signup) ---------- */
.mx-auth{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.mx-auth-hero{ position:relative; padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-right:1px solid var(--line); background:
  radial-gradient(800px 500px at 20% 0%, color-mix(in srgb,var(--ac) 20%,transparent), transparent 60%),
  radial-gradient(600px 460px at 100% 100%, color-mix(in srgb,var(--ac-2) 16%,transparent), transparent 60%), var(--bg-2); }
.mx-auth-hero::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at 30% 30%,#000,transparent 70%); opacity:.7; pointer-events:none; }
.mx-auth-hero>*{ position:relative; z-index:1; }
.mx-auth-hero h1{ font-size:clamp(32px,4vw,52px); line-height:1.05; letter-spacing:-.03em; margin:26px 0 16px; }
.mx-auth-hero h1 em{ font-style:normal; background:var(--ac-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mx-auth-hero p.lead{ color:var(--text-2); font-size:17px; max-width:520px; }
.mx-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; }
.mx-pills span{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:color-mix(in srgb,var(--surface) 80%,transparent); border:1px solid var(--line); font-weight:600; font-size:13.5px; color:var(--text); }
.mx-pills i{ color:var(--ac-text); }
.mx-herostats{ display:flex; gap:28px; flex-wrap:wrap; }
.mx-herostats b{ display:block; font-family:var(--font-head); font-size:26px; color:var(--text); } .mx-herostats span{ color:var(--muted); font-size:13px; }
.mx-auth-form{ display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 28px; position:relative; }
.mx-auth-box{ width:min(440px,100%); }
.mx-auth-box h2{ font-size:28px; margin:0 0 6px; } .mx-auth-box .sub{ color:var(--muted); margin-bottom:24px; }
.mx-auth-top{ position:absolute; top:22px; right:24px; display:flex; gap:10px; }
.mx-auth-box .card{ padding:0; border:0 !important; box-shadow:none; background:transparent !important; }
.mx-marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); margin:6px 0 0; }
.mx-marquee-track{ display:flex; gap:12px; width:max-content; animation:mxscroll 32s linear infinite; }
.mx-marquee-track span{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px; background:color-mix(in srgb,var(--surface) 85%,transparent); border:1px solid var(--line); font-weight:600; font-size:13.5px; white-space:nowrap; color:var(--text); }
.mx-marquee-track i{ color:var(--ac-text); font-size:15px; }
@keyframes mxscroll{ to{ transform:translateX(-50%) } }
.mx-or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; margin:18px 0; } .mx-or::before,.mx-or::after{ content:""; flex:1; height:1px; background:var(--line); }
.mx-auth-links{ text-align:center; margin-top:18px; color:var(--muted); }

/* ---------- 13. PUBLIC (guest) NAVBAR ---------- */
.mx-pub-top{ position:sticky; top:0; z-index:1030; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line-soft); }
.mx-pub-in{ max-width:1240px; margin:0 auto; height:var(--top-h); padding:0 22px; display:flex; align-items:center; gap:20px; }
.mx-pub-nav{ display:flex; gap:4px; list-style:none; margin:0 0 0 14px; padding:0; flex:1; }
.mx-pub-nav a{ display:block; padding:9px 13px; border-radius:10px; color:var(--text-2) !important; font-weight:600; font-size:14.5px; } .mx-pub-nav a:hover,.mx-pub-nav li.is-active a{ background:var(--surface-2); color:var(--text) !important; opacity:1; }
.mx-pub{ display:flex; flex-direction:column; min-height:100vh; }
.mx-pub .mx-content{ max-width:1240px; padding:34px 22px 50px; }
.mx-pub-foot{ border-top:1px solid var(--line-soft); padding:26px 22px; text-align:center; color:var(--muted); font-size:13.5px; }

/* ---------- 14. ACCOUNT / MISC LEGACY BITS ---------- */
.component-footer__public{ background:transparent !important; color:var(--muted) !important; }
.footer{ background:transparent; }
.faq-block__title,.faq-block__icon{ color:var(--text) !important; }
code,pre{ background:var(--surface-3); color:var(--ac-text); border-radius:8px; padding:2px 6px; }
pre{ padding:14px; border:1px solid var(--line); }
.swal-modal,.swal2-popup{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--line); border-radius:var(--r-lg) !important; }
.swal-title,.swal-text,.swal2-title,.swal2-html-container{ color:var(--text) !important; }
.swal-button{ background:var(--ac-grad) !important; color:var(--ac-ink) !important; border-radius:var(--r-sm); }
.services-list__table .table-bg .table-wr #service-table tbody tr td .badge{ background:var(--ac-soft-2) !important; color:var(--ac-text) !important; }
.refill-button{ background:var(--ac-soft) !important; color:var(--ac-text) !important; border:1px solid var(--ac-soft-2) !important; border-radius:8px; }
.component_balance_dropdown{ flex:0 0 auto; }
.balance-dropdown__toggle{ display:inline-flex; align-items:center; white-space:nowrap; background:var(--ac-grad) !important; color:var(--ac-ink) !important; border-radius:999px; padding:9px 16px; font-weight:700; cursor:pointer; }
.balance-dropdown__item a,.balance-dropdown__link{ color:var(--text) !important; }

/* ---------- 15. RESPONSIVE ---------- */
@media (max-width:1199px){ .mx-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mx-order-grid{ grid-template-columns:1fr; } }
@media (max-width:991px){
  .mx-side{ transform:translateX(-102%); width:min(300px,86vw); box-shadow:var(--shadow); }
  .mx-shell.is-open .mx-side{ transform:none; }
  .mx-shell.is-open .mx-scrim{ display:block; }
  .mx-main{ margin-left:0; }
  .mx-burger{ display:inline-flex; }
  .mx-top{ padding:0 16px; } .mx-content{ padding:18px 16px 32px; } .mx-foot{ padding:18px 16px 24px; }
  .mx-auth{ grid-template-columns:1fr; } .mx-auth-hero{ display:none; }
  .mx-auth-form{ min-height:100vh; justify-content:flex-start; padding-top:84px; }
  .mx-pub-nav{ display:none; position:absolute; top:var(--top-h); left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--line); padding:10px; margin:0; }
  .mx-pub-nav.is-open{ display:flex; } .mx-pub .mx-burger{ display:inline-flex; margin-left:auto; }
}
@media (max-width:575px){
  .mx-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .mx-stat{ flex-direction:column; align-items:flex-start; gap:10px; padding:14px; } .mx-stat b{ font-size:18px; word-break:break-word; } .mx-stat-ico{ width:40px; height:40px; font-size:16px; border-radius:12px; } .mx-chip .mx-hide-sm{ display:none; } .mx-order-card{ padding:18px; border-radius:var(--r-lg); }
  .card{ padding:16px; } .mx-top-title{ display:none; } .table td,.table th{ padding:11px 12px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- 16. OVERRIDES for page-builder rules that live inside bootstrap.css ---------- */
.body .balance-dropdown-container{ display:block; width:auto; }
.body .balance-dropdown{ display:block; width:auto; padding:0; }
.body .balance-dropdown__toggle:after{ content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-left:10px; }
.body .balance-dropdown__container{ height:auto; max-height:320px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); min-width:100%; padding:6px; border-radius:var(--r-md); }
.body .balance-dropdown__link{ color:var(--text) !important; border-bottom:0; padding:9px 12px; border-radius:8px; }
.body .balance-dropdown__link:hover{ background:var(--ac-soft); }
.mx-chip{ flex:none; white-space:nowrap; }
.mx-tscroll{ overflow-x:auto; max-width:100%; border-radius:var(--r-lg); }

.mx-content .container{ width:100%; }
.mx-pub .mx-content .card, .mx-pub .mx-content .well{ max-width:100%; }


/* ---------- 17. PAGE HERO (slim, soft tint on every page) ---------- */
.mx-hero{ position:relative; display:flex; align-items:center; gap:16px; padding:18px 22px; margin:0 0 22px; border-radius:var(--r-xl); border:1px solid color-mix(in srgb,var(--ac) 22%,var(--line));
  background:linear-gradient(110deg, color-mix(in srgb,var(--ac) 13%,var(--surface)) 0%, var(--surface) 62%); overflow:hidden; }
.mx-hero::after{ content:""; position:absolute; right:-60px; top:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,var(--ac-soft-2),transparent 68%); pointer-events:none; }
.mx-hero-ico{ width:50px; height:50px; flex:none; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--ac-grad); color:var(--ac-ink); font-size:20px; box-shadow:0 8px 22px color-mix(in srgb,var(--ac) 30%,transparent); }
.mx-hero h1{ font-size:22px; margin:0; line-height:1.2; }
.mx-hero p{ margin:3px 0 0; color:var(--muted); font-size:14px; }
.mx-hero .mx-hero-act{ margin-left:auto; position:relative; z-index:1; display:flex; gap:10px; }
.mx-hero .mx-hero-act a{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text) !important; font-weight:650; font-size:13.5px; }
.mx-hero .mx-hero-act a:hover{ border-color:var(--ac); opacity:1; }

/* ---------- 18. TABLE ROW = CARD ---------- */
.mx-cardwrap{ border:0 !important; background:transparent !important; overflow:visible !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
table.mx-cardtable{ display:block; border:0; background:transparent !important; width:100%; min-width:0 !important; }
.mx-cardtable thead{ display:block; }
.mx-cardtable thead tr{ display:flex; gap:10px; padding:0 4px 8px; background:none !important; border:0 !important; }
.mx-cardtable thead th{ display:none !important; padding:0 !important; border:0 !important; background:none !important; }
.mx-cardtable thead th:has(input[type="checkbox"]){ display:flex !important; align-items:center; gap:8px; }
.mx-cardtable thead th:has(input[type="checkbox"])::after{ content:"Select all"; font-size:12px; color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0; }
.mx-cardtable tbody{ display:grid; gap:12px; }
.mx-cardtable tbody tr{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(138px,1fr)); gap:14px 22px; align-items:start; position:relative;
  padding:16px 20px; background:var(--surface) !important; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.mx-cardtable tbody tr::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--ac-grad); opacity:.0; transition:opacity .2s; }
.mx-cardtable tbody tr:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--ac) 45%,var(--line)); box-shadow:var(--shadow); background:var(--surface) !important; }
.mx-cardtable tbody tr:hover::before{ opacity:1; }
.mx-cardtable td{ display:flex !important; flex-direction:column; gap:4px; padding:0 !important; border:0 !important; min-width:0; word-break:break-word; color:var(--text); font-size:14.5px; font-weight:550; text-align:left !important; }
.mx-cardtable td::before{ content:attr(data-label); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mx-cardtable td.mx-nolabel::before{ display:none; }
.mx-cardtable td.mx-wide{ grid-column:span 2; }
.mx-cardtable td.mx-full{ grid-column:1/-1; }
.mx-cardtable td .btn, .mx-cardtable td button{ align-self:flex-start; }
.mx-cardtable td input[type="checkbox"]{ width:18px; height:18px; }
.mx-cardtable td a{ word-break:break-all; }
.mx-cardtable td .badge{ align-self:flex-start; }
.mx-cardtable tr.affiliates-table-border-none{ display:none !important; }
.mx-cardtable tbody tr:empty{ display:none !important; }
.mx-cardtable-empty{ text-align:center; color:var(--muted); padding:28px; }
@media (max-width:575px){ .mx-cardtable tbody tr{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:14px 16px; } .mx-cardtable td.mx-wide{ grid-column:1/-1; } .mx-hero{ padding:14px 16px; } .mx-hero h1{ font-size:19px; } .mx-hero-ico{ width:42px; height:42px; font-size:17px; border-radius:13px; } }

/* ---------- 19. AFFILIATES ---------- */
.mx-reflink{ margin-bottom:20px; }
.mx-reflink-t{ font-family:var(--font-head); font-weight:700; margin-bottom:12px; } .mx-reflink-t i{ color:var(--ac-text); margin-right:8px; }
.mx-reflink-row{ display:flex; gap:10px; flex-wrap:wrap; } .mx-reflink-row .form-control{ flex:1; min-width:220px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; }
.mx-reflink-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:14px; color:var(--muted); font-size:13.5px; } .mx-reflink-meta i{ color:var(--ac-text); margin-right:6px; } .mx-reflink-meta b{ color:var(--text); }
.mx-stats-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1199px){ .mx-stats-5{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
[data-mx-copy].is-done{ filter:brightness(1.1); }
.mx-cardtable td, .mx-cardtable td[width]{ width:auto !important; max-width:100%; }
.mx-cardtable td a{ word-break:normal; overflow-wrap:anywhere; }
.mx-cardtable td{ white-space:normal !important; }

/* ---------- 20. LOGO (dark / light) ---------- */
.mx-logo-light{ display:none; }
html[data-mode="light"] .mx-logo-dark{ display:none; }
html[data-mode="light"] .mx-logo-light{ display:block; }

/* ---------- 21. LANDING (login page) ---------- */
.lp{ --wrap:1180px; }
.lp-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.lp-nav{ position:sticky; top:0; z-index:1030; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 80%,transparent); border-bottom:1px solid var(--line-soft); }
.lp-nav-in{ height:var(--top-h); display:flex; align-items:center; gap:22px; }
.lp-links{ display:flex; gap:2px; margin-left:12px; flex:1; }
.lp-links a{ padding:9px 13px; border-radius:10px; color:var(--text-2) !important; font-weight:600; font-size:14.5px; }
.lp-links a:hover{ background:var(--surface-2); color:var(--text) !important; opacity:1; }
.lp-nav-act{ display:flex; gap:10px; align-items:center; margin-left:auto; }
.lp-nav-act .mx-burger{ display:none; }
.lp-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ac-text); background:var(--ac-soft); border:1px solid var(--ac-soft-2); }
.lp-hero{ padding:64px 0 54px; position:relative; }
.lp-hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; }
.lp-hero h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.04; letter-spacing:-.035em; margin:20px 0 16px; }
.lp-hero h1 em, .lp-sec h2 em{ font-style:normal; background:var(--ac-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lp-lead{ font-size:18px; color:var(--text-2); max-width:560px; }
.lp-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:26px 0 8px; }
.lp-cta .btn{ padding:14px 28px; }
.lp-ghost{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--text) !important; font-weight:650; }
.lp-ghost:hover{ border-color:var(--ac); opacity:1; }
.lp-login-card{ background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px; box-shadow:var(--shadow), var(--glow); position:relative; }
.lp-login-card h2{ font-size:26px; margin:0 0 4px; } .lp-login-card .sub{ color:var(--muted); margin-bottom:20px; }
.lp-strip{ padding:6px 0 30px; border-bottom:1px solid var(--line-soft); }
.lp-sec{ padding:84px 0; } .lp-alt{ background:color-mix(in srgb,var(--surface) 55%,var(--bg)); border-block:1px solid var(--line-soft); }
.lp-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.lp-head h2, .lp-split h2{ font-size:clamp(26px,3.2vw,38px); letter-spacing:-.025em; margin:14px 0 10px; }
.lp-head p, .lp-sub{ color:var(--muted); font-size:16.5px; }
.lp-grid{ display:grid; gap:18px; } .lp-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .lp-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lp-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.lp-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--ac) 50%,var(--line)); box-shadow:var(--shadow); }
.lp-card h3{ font-size:17px; margin:14px 0 6px; } .lp-card p{ margin:0; color:var(--muted); font-size:14.5px; }
.lp-center{ text-align:center; }
.lp-ico{ width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:21px; background:var(--ac-soft); color:var(--ac-text); border:1px solid var(--ac-soft-2); }
.lp-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:s; position:relative; }
.lp-step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; position:relative; }
.lp-step b{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--ac-grad); color:var(--ac-ink); font-family:var(--font-head); font-size:18px; margin-bottom:14px; }
.lp-step h3{ font-size:18px; margin:0 0 6px; } .lp-step p{ margin:0; color:var(--muted); }
.lp-flags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.lp-flag{ display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:600; color:var(--text); }
.lp-flag img{ border-radius:3px; } .lp-flag i{ color:var(--ac-text); }
.lp-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.lp-rev>:first-child{ order:2; }
.lp-checks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; } .lp-checks li{ display:flex; gap:12px; color:var(--text-2); } .lp-checks i{ color:var(--ac-text); margin-top:4px; }
.lp-code{ background:#0a0e13; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.lp-code-h{ display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid #1c2530; background:#0e141b; } .lp-code-h i{ width:11px; height:11px; border-radius:50%; background:#2a3542; display:block; } .lp-code-h i:first-child{ background:#ff5f57; } .lp-code-h i:nth-child(2){ background:#febc2e; } .lp-code-h i:nth-child(3){ background:#28c840; } .lp-code-h span{ margin-left:10px; color:#8c99a8; font-size:12.5px; }
.lp-code-b{ padding:20px; color:#d6dde6; font-size:14.5px; } .lp-code-b p{ margin:0 0 8px; color:#d6dde6; } .lp-code-b em{ font-style:normal; color:var(--ac); }
.lp-code-b.mono{ font-family:ui-monospace,Menlo,Consolas,monospace; }
.lp-stars{ color:#ffb020; letter-spacing:2px; margin-bottom:10px; } .lp-who{ margin-top:14px; display:flex; flex-direction:column; } .lp-who span{ color:var(--muted); font-size:13px; }
.lp-narrow{ max-width:820px; }
.lp-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:12px; padding:0 20px; transition:border-color .2s; }
.lp-faq details[open]{ border-color:color-mix(in srgb,var(--ac) 45%,var(--line)); }
.lp-faq summary{ cursor:pointer; padding:18px 0; font-weight:650; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:12px; color:var(--text); }
.lp-faq summary::-webkit-details-marker{ display:none; } .lp-faq summary::after{ content:"+"; font-size:22px; color:var(--ac-text); line-height:1; transition:transform .2s; } .lp-faq details[open] summary::after{ transform:rotate(45deg); }
.lp-faq p{ margin:0 0 18px; color:var(--muted); }
.lp-final{ text-align:center; padding:60px 24px; border-radius:var(--r-xl); border:1px solid color-mix(in srgb,var(--ac) 30%,var(--line)); background:radial-gradient(600px 260px at 50% 0%, color-mix(in srgb,var(--ac) 22%,transparent), transparent 70%), var(--surface); }
.lp-final h2{ font-size:clamp(28px,3.6vw,42px); margin:0 0 8px; } .lp-final p{ color:var(--text-2); font-size:17px; }
.lp-foot{ border-top:1px solid var(--line-soft); padding:26px 0; color:var(--muted); font-size:13.5px; } .lp-foot-in{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; } .lp-foot a{ color:var(--muted) !important; margin-left:18px; } .lp-foot a:hover{ color:var(--ac-text) !important; opacity:1; }
@media (max-width:991px){
  .lp-hero-grid,.lp-split{ grid-template-columns:1fr; gap:34px; } .lp-hero{ padding:34px 0; } .lp-sec{ padding:56px 0; }
  .lp-login{ order:-1; } .lp-rev>:first-child{ order:0; }
  .lp-links{ display:none; position:absolute; top:var(--top-h); left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--line); padding:10px; margin:0; } .lp-links.is-open{ display:flex; }
  .lp-nav-act .mx-burger{ display:inline-flex; } .lp-g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-g3,.lp-steps{ grid-template-columns:1fr; }
}
@media (max-width:575px){ .lp-wrap{ padding:0 16px; } .lp-g4{ grid-template-columns:1fr 1fr; gap:12px; } .lp-card{ padding:18px; } .lp-hide-sm{ display:none; } .lp-login-card{ padding:22px; } }
.mx-cardtable td [style*="width"]{ width:auto !important; max-width:100% !important; }
.mx-content img, .mx-content video, .mx-content iframe{ max-width:100%; }


/* ---------- 22. CARD GRID (orders, add funds, tickets, services ...) ---------- */
.mx-cardtable tbody{ grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; align-items:stretch; }
.mx-cardtable tbody tr{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px 16px; padding:18px 18px 16px; align-content:start; overflow:hidden; }
.mx-cardtable tbody tr::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:3px; border-radius:0; opacity:.55; }
.mx-cardtable tbody tr:hover::before{ opacity:1; }
.mx-cardtable td.mx-wide, .mx-cardtable td.mx-full{ grid-column:1/-1; }
.mx-cardtable td.mx-id{ grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px !important; border-bottom:1px dashed var(--line) !important; font-family:var(--font-head); font-weight:800; font-size:15px; }
.mx-cardtable td.mx-id::before{ color:var(--ac-text); }
.mx-cardtable td.mx-id{ flex-wrap:wrap; justify-content:flex-start; padding-right:34px !important; }
.mx-cardtable td.mx-id>a{ margin-left:auto; }
.mx-cardtable td.mx-chk{ position:absolute; top:16px; right:16px; width:auto; z-index:2; }
.mx-cardtable td.mx-chk::before{ display:none; }
.mx-cardtable td.mx-status{ align-items:flex-start; }
.mx-cardtable td.mx-status:not(.mx-id){ grid-column:1/-1; }
.mx-cardtable td.mx-act{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; gap:8px; padding-top:12px !important; border-top:1px dashed var(--line) !important; }
.mx-cardtable td.mx-act::before{ display:none; }
.mx-cardtable td.mx-act .btn{ flex:1 1 auto; text-align:center; }
.mx-cardtable tbody tr.mx-sect{ grid-column:1/-1; display:block !important; background:none !important; border:0; box-shadow:none; padding:10px 2px 0; transform:none !important; }
.mx-cardtable tbody tr.mx-sect::before{ display:none; }
.mx-cardtable tbody tr.mx-sect td{ flex-direction:row; align-items:center; gap:10px; font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--ac-text); }
.mx-cardtable tbody tr.mx-sect td::before{ display:none; }
.mx-cardtable tbody tr.mx-sect td::after{ content:""; flex:1; height:1px; background:var(--line); }
.mx-cardtable td.mx-desc{ color:var(--muted); font-weight:500; font-size:13.5px; }
@media (max-width:575px){ .mx-cardtable tbody{ grid-template-columns:1fr; } }

/* ---------- 23. GUIDE TIP + HELP STRIP ---------- */
.mx-tip{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px; margin:0 0 18px; border-radius:var(--r-lg); background:var(--ac-soft); border:1px solid color-mix(in srgb,var(--ac) 28%,var(--line)); color:var(--text); font-size:13.5px; line-height:1.55; }
.mx-tip>i{ color:var(--ac-text); font-size:16px; margin-top:2px; }
.mx-tip b{ font-weight:700; } .mx-tip a{ color:var(--ac-text); font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.mx-tip ul{ margin:6px 0 0 18px; padding:0; } .mx-tip li{ margin:2px 0; }
.mx-help{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:34px 0 4px; padding:18px 22px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden; }
.mx-help::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--ac-grad); }
.mx-help-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--ac-grad); color:var(--ac-ink); font-size:19px; flex:none; }
.mx-help-t{ flex:1; min-width:220px; } .mx-help-t b{ display:block; font-family:var(--font-head); font-size:16px; } .mx-help-t span{ color:var(--muted); font-size:13.5px; }
.mx-help-act{ display:flex; gap:8px; flex-wrap:wrap; }
.mx-help-act a{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--bg-2,var(--surface)); color:var(--text) !important; font-weight:650; font-size:13.5px; }
.mx-help-act a:hover{ border-color:var(--ac); opacity:1; }
.mx-help-act a.is-pri{ background:var(--ac-grad); color:var(--ac-ink) !important; border-color:transparent; }

/* ---------- 24. LANDING EXTRAS ---------- */
.lp-trust{ border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--surface) 60%,transparent); }
.lp-trust-in{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding-top:22px; padding-bottom:22px; }
.lp-trust-in div{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; }
.lp-trust-in i{ grid-row:span 2; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--ac-soft); color:var(--ac-text); }
.lp-trust-in b{ font-family:var(--font-head); font-size:14.5px; } .lp-trust-in span{ color:var(--muted); font-size:12.5px; }
.lp-g5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.lp-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; }
.lp-stat h3{ font-size:16px; margin:12px 0 4px; } .lp-stat p{ margin:0; color:var(--muted); font-size:13.5px; }
.lp-dot{ display:inline-block; width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 18%,transparent); }
.d-pend{ color:#f5a524; background:#f5a524; } .d-prog{ color:#4aa8ff; background:#4aa8ff; } .d-done{ color:#22c55e; background:#22c55e; } .d-part{ color:#a78bfa; background:#a78bfa; } .d-canc{ color:#ef4444; background:#ef4444; }
.lp-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.lp-two h3{ font-size:18px; margin:0 0 12px; } .lp-do h3 i{ color:#22c55e; } .lp-dont h3 i{ color:#ef4444; }
.lp-two ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .lp-two li{ color:var(--text-2); padding-left:18px; position:relative; font-size:14.5px; }
.lp-two li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--ac); }
.lp-dont li::before{ background:#ef4444; } .lp-do li::before{ background:#22c55e; }
.lp-gloss{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.lp-gloss div{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.lp-gloss b{ font-family:var(--font-head); color:var(--ac-text); } .lp-gloss p{ margin:6px 0 0; color:var(--muted); font-size:13.5px; }
@media (max-width:1100px){ .lp-trust-in,.lp-g5{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-gloss{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .lp-two,.lp-gloss{ grid-template-columns:1fr; } .lp-sec{ padding:56px 0; } }

/* ---------- 25. NO SIDEWAYS PAGE SCROLL ---------- */
html,body{ max-width:100%; }
.mx-main,.mx-pub,.mx-bare{ overflow-x:clip; }
.mx-content .row{ margin-left:-10px; margin-right:-10px; }
.mx-content [class*="col-"]{ padding-left:10px; padding-right:10px; }
@media (max-width:575px){ .mx-content{ padding-left:14px; padding-right:14px; } .mx-help{ padding:16px; } .mx-help-act{ width:100%; } .mx-help-act a{ flex:1 1 auto; justify-content:center; } }
html{ overflow-x:clip; }
.mx-content .container,.mx-content .container-fluid{ padding-left:10px; padding-right:10px; }

/* ---------- 26. LONG-FORM TEXT (privacy, terms) ---------- */
.mx-prose{ padding:28px 32px; line-height:1.75; color:var(--text-2); }
.mx-prose h2{ font-size:19px; margin:26px 0 8px; color:var(--text); }
.mx-prose h2:first-of-type{ margin-top:12px; }
.mx-prose p,.mx-prose li{ font-size:15px; }
.mx-prose ul{ padding-left:20px; margin:8px 0; }
.mx-prose a{ color:var(--ac-text); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:575px){ .mx-prose{ padding:20px 18px; } }