/* =========================================================
   Vortex — Shared visual skin (client + admin)
   Pure CSS restyle of the existing markup. No class names used
   by JS are renamed. Active only when <body> has .vx-skin.
   ========================================================= */

/* ---------- Tokens ---------- */
body[data-mode="dark"] {
    --vx-bg: #12181f;
    --vx-card: #172025;
    --vx-card-2: #1c282f;
    --vx-card-3: #223039;
    --vx-line: rgba(140, 160, 175, .14);
    --vx-line-strong: rgba(140, 160, 175, .26);
    --vx-text: #eef3f6;
    --vx-muted: #8d9ba7;
    --vx-accent: #27d3a2;
    --vx-accent-ink: #062b20;
    --vx-accent-soft: rgba(39, 211, 162, .12);
    --vx-red: #ff5f6e;
    --vx-red-soft: rgba(255, 95, 110, .12);
    --vx-amber: #f5b54a;
    --vx-amber-soft: rgba(245, 181, 74, .14);
    --vx-blue: #5b9bff;
    --vx-blue-soft: rgba(91, 155, 255, .14);
    --vx-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .7);
    --vx-pop: 0 18px 50px -12px rgba(0, 0, 0, .65);
}

body[data-mode="light"] {
    --vx-bg: #eef2f6;
    --vx-card: #ffffff;
    --vx-card-2: #f4f7fa;
    --vx-card-3: #e9eef3;
    --vx-line: #e4e9ef;
    --vx-line-strong: #d3dae3;
    --vx-text: #0f1a24;
    --vx-muted: #627282;
    --vx-accent: #0f9e78;
    --vx-accent-ink: #ffffff;
    --vx-accent-soft: rgba(15, 158, 120, .10);
    --vx-red: #e0434f;
    --vx-red-soft: rgba(224, 67, 79, .10);
    --vx-amber: #c98411;
    --vx-amber-soft: rgba(201, 132, 17, .12);
    --vx-blue: #2f6fe0;
    --vx-blue-soft: rgba(47, 111, 224, .10);
    --vx-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -16px rgba(16, 24, 40, .18);
    --vx-pop: 0 18px 50px -12px rgba(16, 24, 40, .25);
}

body.vx-skin { background-color: var(--vx-bg) !important; font-variant-numeric: tabular-nums; }
body.vx-skin :focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }

/* ---------- Page headers ---------- */
body.vx-skin .dashboardText h3,
body.vx-skin .admin_area_content h3.h3,
body.vx-skin .vx-page-title {
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--vx-text) !important;
}
body.vx-skin .dashboardText p,
body.vx-skin .vx-page-sub {
    color: var(--vx-muted) !important;
    font-size: 12px !important;
    margin: 0;
}

/* ---------- Cards ---------- */
body.vx-skin .info-box,
body.vx-skin .admin_area_content .card {
    background: var(--vx-card) !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--vx-shadow);
    color: var(--vx-text);
}
body.vx-skin .info-box .info-head {
    color: var(--vx-muted) !important;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}
body.vx-skin .info-box .info-data {
    color: var(--vx-text) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
}
body.vx-skin .bl_data .info-box,
body.vx-skin .vx-kpi-row .info-box {
    transition: transform .2s, border-color .2s;
    height: 100%;
}
body.vx-skin .bl_data .info-box:hover { transform: translateY(-2px); border-color: var(--vx-line-strong) !important; }

body.vx-skin .icon_bg {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent) !important;
    border-radius: 12px !important;
    width: 44px;
    height: 44px;
    display: grid !important;
    place-items: center;
    flex: none;
}
body.vx-skin .icon_bg svg { color: var(--vx-accent) !important; width: 24px; height: 24px; }
body.vx-skin .admin_area_content .card .sm_txt { color: var(--vx-text) !important; font-size: 18px; font-weight: 700; }

body.vx-skin hr { border-color: var(--vx-line) !important; border-top-color: var(--vx-line) !important; opacity: 1 !important; }

/* ---------- Tabs ---------- */
body.vx-skin .main-nav-container { max-width: 100%; }
body.vx-skin .main-nav-container .nav-container {
    background: var(--vx-card) !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
body.vx-skin .main-nav-container .nav-item {
    color: var(--vx-muted) !important;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, color .15s;
}
body.vx-skin .main-nav-container .nav-item:hover { color: var(--vx-text) !important; background: var(--vx-card-2) !important; }
body.vx-skin .main-nav-container .nav-item.active {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent) !important;
}

/* ---------- Tables ---------- */
body.vx-skin .colored_tbl,
body.vx-skin .markets_tbl {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 13px;
}
body.vx-skin .colored_tbl thead th,
body.vx-skin .colored_tbl thead td,
body.vx-skin .markets_tbl thead th {
    background: var(--vx-card-2) !important;
    color: var(--vx-muted) !important;
    font-size: 11px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--vx-line) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}
body.vx-skin .colored_tbl thead th:first-child,
body.vx-skin .markets_tbl thead th:first-child { border-start-start-radius: 10px; }
body.vx-skin .colored_tbl thead th:last-child,
body.vx-skin .markets_tbl thead th:last-child { border-start-end-radius: 10px; }
body.vx-skin .colored_tbl thead,
body.vx-skin .markets_tbl thead { border: 0 !important; background: transparent !important; }

body.vx-skin .colored_tbl tbody td,
body.vx-skin .markets_tbl tbody td {
    color: var(--vx-text);
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--vx-line) !important;
    vertical-align: middle;
    background: transparent;
    transition: background .12s;
}
body.vx-skin .colored_tbl tbody tr:last-child td,
body.vx-skin .markets_tbl tbody tr:last-child td { border-bottom: 0 !important; }
body.vx-skin .colored_tbl tbody tr:hover td,
body.vx-skin .markets_tbl tbody tr:hover td { background: var(--vx-card-2) !important; }
body.vx-skin .colored_tbl tbody .active td { background: var(--vx-card-3) !important; }

/* status text inside tables → pills */
body.vx-skin .colored_tbl td > span.text-success,
body.vx-skin .colored_tbl td > span.text-warning,
body.vx-skin .colored_tbl td > span.text-danger,
body.vx-skin .colored_tbl td > span.text-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
body.vx-skin .colored_tbl td > span.text-success,
body.vx-skin .colored_tbl td > span.text-primary { background: var(--vx-accent-soft); color: var(--vx-accent) !important; }
body.vx-skin .colored_tbl td > span.text-warning { background: var(--vx-amber-soft); color: var(--vx-amber) !important; }
body.vx-skin .colored_tbl td > span.text-danger { background: var(--vx-red-soft); color: var(--vx-red) !important; }
body.vx-skin .colored_tbl td.text-success,
body.vx-skin .colored_tbl td.text-primary { color: var(--vx-accent) !important; font-weight: 600; }
body.vx-skin .colored_tbl td.text-danger { color: var(--vx-red) !important; font-weight: 600; }
body.vx-skin .colored_tbl td.text-warning { color: var(--vx-amber) !important; font-weight: 600; }

/* scrollable table cards: keep the scroll, hide the ugly scrollbar gutter */
body.vx-skin .info-box[style*="overflow"] { overflow: auto !important; padding: 0 !important; }
body.vx-skin .info-box[style*="overflow"] > .colored_tbl,
body.vx-skin .info-box > .colored_tbl { margin: 0 !important; }
body.vx-skin .info-box:has(> table.colored_tbl) { padding: 0 !important; overflow: auto; }

/* mobile request cards (deposit / withdrawal) */
body.vx-skin .history_req .info-box .row > .col-8 > div > span.text-primary { color: var(--vx-muted) !important; }
body.vx-skin .history_req .info-box .row > .col-8 > div > span.text-white { color: var(--vx-text) !important; font-weight: 600; }
body.vx-skin .history_req .info-box .row > .col-4 { text-align: end; }
body.vx-skin .history_req .info-box .row > .col-4 > span {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
body.vx-skin .history_req .info-box .row > .col-4 > span.text-success { background: var(--vx-accent-soft); color: var(--vx-accent) !important; }
body.vx-skin .history_req .info-box .row > .col-4 > span.text-warning { background: var(--vx-amber-soft); color: var(--vx-amber) !important; }
body.vx-skin .history_req .info-box .row > .col-4 > span.text-danger { background: var(--vx-red-soft); color: var(--vx-red) !important; }

/* DataTables */
body.vx-skin .dataTables_wrapper { color: var(--vx-muted); font-size: 12px; }
body.vx-skin .dataTables_wrapper .dataTables_filter input,
body.vx-skin .dataTables_wrapper .dataTables_length select {
    background: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    color: var(--vx-text) !important;
    border-radius: 9px !important;
    padding: 6px 10px !important;
}
body.vx-skin .dataTables_wrapper .dataTables_info,
body.vx-skin .dataTables_wrapper .dataTables_length,
body.vx-skin .dataTables_wrapper .dataTables_filter { color: var(--vx-muted) !important; padding: 12px 14px; }
body.vx-skin .dataTables_wrapper .dataTables_paginate { padding: 10px 14px; }
body.vx-skin .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    color: var(--vx-muted) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
body.vx-skin .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.vx-skin .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-accent) !important;
    border-color: transparent !important;
}
body.vx-skin table.dataTable thead .sorting:before,
body.vx-skin table.dataTable thead .sorting:after { opacity: .35; }

/* ---------- Pagination ---------- */
body.vx-skin .pagination { gap: 4px; flex-wrap: wrap; }
body.vx-skin .pagination .page-link {
    background: var(--vx-card) !important;
    border: 1px solid var(--vx-line) !important;
    color: var(--vx-muted) !important;
    border-radius: 9px !important;
    min-width: 36px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}
body.vx-skin .pagination .page-link:hover { color: var(--vx-text) !important; border-color: var(--vx-line-strong) !important; }
body.vx-skin .pagination .page-item.active .page-link { background: var(--vx-accent) !important; border-color: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
body.vx-skin .pagination .page-item.disabled .page-link { opacity: .45; }
body.vx-skin nav .text-muted, body.vx-skin nav p.small { color: var(--vx-muted) !important; }

/* ---------- Buttons ---------- */
body.vx-skin .btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    transition: transform .12s, filter .15s, background .15s, border-color .15s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
body.vx-skin .btn-sm { border-radius: 8px; font-size: 12px; padding: 5px 10px; }
body.vx-skin .btn:active { transform: scale(.97); }
body.vx-skin .btn-primary {
    background: var(--vx-accent) !important;
    border-color: var(--vx-accent) !important;
    color: var(--vx-accent-ink) !important;
}
body.vx-skin .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px -8px var(--vx-accent); }
body.vx-skin .btn-success {
    background: var(--vx-accent-soft) !important;
    border-color: transparent !important;
    color: var(--vx-accent) !important;
}
body.vx-skin .btn-success:hover { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
body.vx-skin .btn-danger {
    background: var(--vx-red) !important;
    border-color: var(--vx-red) !important;
    color: #fff !important;
}
body.vx-skin .btn-danger:hover { filter: brightness(1.06); box-shadow: 0 6px 18px -8px var(--vx-red); }
body.vx-skin .btn-warning {
    background: var(--vx-amber-soft) !important;
    border-color: transparent !important;
    color: var(--vx-amber) !important;
}
body.vx-skin .btn-warning:hover:not(:disabled) { background: var(--vx-amber) !important; color: #1a1205 !important; }
body.vx-skin .btn-warning:disabled { opacity: .7; }
body.vx-skin .btn-secondary,
body.vx-skin .btn-outline-secondary {
    background: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    color: var(--vx-text) !important;
}
body.vx-skin .btn-secondary:hover { border-color: var(--vx-accent) !important; }
body.vx-skin .btn-info {
    background: var(--vx-blue-soft) !important;
    border-color: transparent !important;
    color: var(--vx-blue) !important;
}
body.vx-skin .btn-group > .btn-primary + .dropdown-toggle-split { border-inline-start: 1px solid rgba(0, 0, 0, .15) !important; }

/* ---------- Forms ---------- */
body.vx-skin .form-control,
body.vx-skin .form-select {
    background-color: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    color: var(--vx-text) !important;
    border-radius: 10px !important;
    min-height: 42px;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
}
body.vx-skin textarea.form-control { min-height: 96px; }
body.vx-skin .form-control::placeholder { color: var(--vx-muted) !important; opacity: .8; }
body.vx-skin .form-control:focus,
body.vx-skin .form-select:focus {
    border-color: var(--vx-accent) !important;
    box-shadow: 0 0 0 3px var(--vx-accent-soft) !important;
}
body.vx-skin[data-mode="dark"] .form-control[type="date"] { color-scheme: dark; }
body.vx-skin[data-mode="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238d9ba7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
body.vx-skin .modal label,
body.vx-skin .transactions_filters label,
body.vx-skin form label {
    color: var(--vx-muted) !important;
    font-size: 12px;
    font-weight: 500;
}
body.vx-skin input[type="checkbox"] { accent-color: var(--vx-accent); width: 16px; height: 16px; }

/* ---------- Modals (global: every client + admin page) ---------- */
body[data-mode] .modal-backdrop.show { opacity: .62; }
body[data-mode] .modal.fade .modal-dialog {
    transform: translateY(14px) scale(.98);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
body[data-mode] .modal.show .modal-dialog { transform: none; }
body[data-mode] .modal-content {
    background: var(--vx-card) !important;
    color: var(--vx-text) !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vx-pop);
    overflow: hidden;
}
body[data-mode] .modal-header,
body[data-mode] .modal-footer { border-color: var(--vx-line) !important; padding: 14px 18px; gap: 8px; }
body[data-mode] .modal-header { align-items: center; }
body[data-mode] .modal-title { font-weight: 700; font-size: 16px !important; color: var(--vx-text) !important; }
body[data-mode] .modal-body { padding: 18px; color: var(--vx-text); }
body[data-mode] .modal-body p,
body[data-mode] .modal-body small { white-space: normal !important; }
body[data-mode] .close_modal {
    width: 34px; height: 34px;
    flex: none;
    border: 0;
    border-radius: 10px !important;
    display: inline-grid;
    place-items: center;
    background: var(--vx-card-2) !important;
    color: var(--vx-muted) !important;
    font-size: 18px !important;
    transition: color .15s, background .15s;
}
body[data-mode] .close_modal:hover { color: var(--vx-text) !important; background: var(--vx-card-3) !important; }
body[data-mode] .modal label { color: var(--vx-muted) !important; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
body[data-mode] .modal .form-control,
body[data-mode] .modal .form-select {
    background-color: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    color: var(--vx-text) !important;
    border-radius: 10px !important;
    min-height: 42px;
    font-size: 13px;
}
body[data-mode] .modal .form-control:focus,
body[data-mode] .modal .form-select:focus { border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px var(--vx-accent-soft) !important; }
body[data-mode] .modal .modal-footer .btn { border-radius: 10px; font-weight: 600; font-size: 13px; padding: 9px 18px; }
body[data-mode] .modal .btn-primary { background: var(--vx-accent) !important; border-color: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
body[data-mode] .modal .btn-success { background: var(--vx-accent) !important; border-color: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
body[data-mode] .modal .btn-secondary { background: var(--vx-card-2) !important; border: 1px solid var(--vx-line-strong) !important; color: var(--vx-text) !important; }
body[data-mode] .modal .btn-danger { background: var(--vx-red) !important; border-color: var(--vx-red) !important; color: #fff !important; }
@media (max-width: 575.98px) {
    body[data-mode] .modal-dialog { margin: 12px; }
    body[data-mode] .modal-footer .btn { flex: 1; }
}

/* ---------- SweetAlert2 (global) ---------- */
body[data-mode] .swal2-container.swal2-backdrop-show { background: rgba(4, 9, 13, .62) !important; }
body[data-mode] .swal2-popup {
    background: var(--vx-card) !important;
    color: var(--vx-text) !important;
    border: 1px solid var(--vx-line);
    border-radius: 20px !important;
    box-shadow: var(--vx-pop);
    width: min(400px, calc(100vw - 32px)) !important;
    padding: 22px 20px 20px !important;
}
body[data-mode] .swal2-popup,
body[data-mode] .swal2-popup * { white-space: normal !important; }
body[data-mode] .swal2-icon { margin: 6px auto 12px !important; transform: scale(.78); border-width: .22em !important; }
body[data-mode] .swal2-icon.swal2-success { border-color: var(--vx-accent) !important; color: var(--vx-accent) !important; }
body[data-mode] .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--vx-accent) !important; }
body[data-mode] .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--vx-accent-soft) !important; }
body[data-mode] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
body[data-mode] .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--vx-card) !important; }
body[data-mode] .swal2-icon.swal2-error { border-color: var(--vx-red) !important; color: var(--vx-red) !important; }
body[data-mode] .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--vx-red) !important; }
body[data-mode] .swal2-icon.swal2-warning { border-color: var(--vx-amber) !important; color: var(--vx-amber) !important; }
body[data-mode] .swal2-icon.swal2-question,
body[data-mode] .swal2-icon.swal2-info { border-color: var(--vx-blue) !important; color: var(--vx-blue) !important; }
body[data-mode] .swal2-popup .swal2-title,
body[data-mode] .swal2-popup.swal2-icon-warning .swal2-title {
    color: var(--vx-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    padding: 0 8px !important;
    line-height: 1.4;
}
body[data-mode] .swal2-popup .swal2-html-container {
    color: var(--vx-muted) !important;
    font-size: 14px !important;
    line-height: 1.6;
    margin: 6px 8px 0 !important;
}
body[data-mode] .swal2-actions { gap: 8px; margin-top: 18px !important; width: 100%; flex-wrap: nowrap; }
body[data-mode] .swal2-actions .swal2-styled {
    flex: 1;
    margin: 0 !important;
    min-height: 44px;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: filter .15s, transform .1s;
}
body[data-mode] .swal2-actions .swal2-styled:active { transform: scale(.97); }
body[data-mode] .swal2-styled.swal2-confirm { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }
body[data-mode] .swal2-styled.swal2-confirm:hover { filter: brightness(1.06); }
body[data-mode] .swal2-popup.swal2-icon-error .swal2-styled.swal2-confirm { background: var(--vx-red) !important; color: #fff !important; }
body[data-mode] .swal2-styled.swal2-cancel {
    background: var(--vx-card-2) !important;
    color: var(--vx-text) !important;
    border: 1px solid var(--vx-line-strong) !important;
}
body[data-mode] .swal2-styled.swal2-deny { background: var(--vx-red) !important; color: #fff !important; }
body[data-mode] .swal2-styled:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }
body[data-mode] .swal2-input,
body[data-mode] .swal2-textarea,
body[data-mode] .swal2-select {
    background: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    color: var(--vx-text) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    width: auto !important;
    margin: 14px 8px 0 !important;
}
body[data-mode] .swal2-input:focus { border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px var(--vx-accent-soft) !important; }
body[data-mode] .swal2-validation-message { background: var(--vx-red-soft) !important; color: var(--vx-red) !important; border-radius: 10px; margin: 12px 8px 0 !important; }
body[data-mode] .swal2-loader { border-color: var(--vx-accent) transparent var(--vx-accent) transparent !important; }
body[data-mode] .swal2-timer-progress-bar { background: var(--vx-accent) !important; }
html[dir="rtl"] body[data-mode] .swal2-popup { direction: rtl; }

/* ---------- Dropdowns ---------- */
body.vx-skin .dropdown-menu {
    background: var(--vx-card) !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--vx-pop);
    padding: 6px !important;
}
body.vx-skin .dropdown-menu .dropdown-item {
    color: var(--vx-text) !important;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
}
body.vx-skin .dropdown-menu .dropdown-item:hover,
body.vx-skin .dropdown-menu .dropdown-item:focus { background: var(--vx-card-2) !important; }

/* ---------- Badges ---------- */
body.vx-skin .badge { border-radius: 999px; font-weight: 700; letter-spacing: .02em; padding: .35em .7em; }

/* ---------- Sidebar (client + admin, every page) ----------
   Not scoped to .vx-skin: the sidebar is shared by all pages.
   "html body[data-mode]" outranks the legacy rules in style.css. */
html body[data-mode] .pc_fixed_menu,
html body[data-mode] .offcanvas { background: var(--vx-card) !important; }
html body[data-mode] .pc_fixed_menu {
    height: calc(100vh + 14px) !important; /* style.css: margin-top:-14px */
    border-inline-end: 1px solid var(--vx-line) !important;
    border-inline-start: 0 !important;
    padding-inline: 10px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--vx-line-strong) transparent;
}
html body[data-mode] .vx-side-head {
    display: block;
    padding: 0 6px 14px !important;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--vx-line);
}
html body[data-mode] .vx-side-head .sys_logo { display: block; max-width: 100%; height: auto; }
/* mobile drawer has no top padding of its own (.pc_fixed_menu does) */
html body[data-mode] .offcanvas > .vx-side-head { padding: 20px 16px 14px !important; margin: 0 16px 4px; padding-inline: 0 !important; }

html body[data-mode] .vx-nav {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html body[data-mode] .vx-nav > li {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px;
    background: transparent !important;
}
html body[data-mode] .vx-nav > li > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px !important;
    border-radius: 12px;
    color: var(--vx-muted) !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
html body[data-mode] .vx-nav > li > a > svg {
    flex: none;
    width: 18px !important;
    height: 18px !important;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 10px;
    background: var(--vx-card-2);
    color: var(--vx-muted) !important;
    font-size: 18px !important;
    transition: background-color .15s ease, color .15s ease;
}
/* long labels wrap to 2 lines instead of being cut (sidebar is only 13% wide) */
html body[data-mode] .vx-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

html body[data-mode] .vx-nav > li > a:hover { background: var(--vx-card-2) !important; color: var(--vx-text) !important; }
html body[data-mode] .vx-nav > li > a:hover > svg { background: var(--vx-card-3); color: var(--vx-text) !important; }
html body[data-mode] .vx-nav > li > a:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }

html body[data-mode] .vx-nav > li.active { background: transparent !important; }
html body[data-mode] .vx-nav > li.active > a {
    background: var(--vx-accent-soft) !important;
    color: var(--vx-text) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vx-accent);
}
html[dir=rtl] body[data-mode] .vx-nav > li.active > a { box-shadow: inset -3px 0 0 var(--vx-accent); }
html body[data-mode] .vx-nav > li.active > a > svg { background: var(--vx-accent) !important; color: var(--vx-accent-ink) !important; }

/* logout: separated + red on hover */
html body[data-mode] .vx-nav > li.vx-nav-logout { margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid var(--vx-line); border-radius: 0; }
html body[data-mode] .vx-nav > li.vx-nav-logout > a:hover { background: var(--vx-red-soft) !important; color: var(--vx-red) !important; }
html body[data-mode] .vx-nav > li.vx-nav-logout > a:hover > svg { background: transparent; color: var(--vx-red) !important; }

/* client (mobile): account card at the top of the menu */
html body[data-mode] .vx-nav > li.vx-user-li { margin-bottom: 8px !important; }
html body[data-mode] .vx-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--vx-card-2);
    border: 1px solid var(--vx-line);
}
html body[data-mode] .vx-user-card .profile_photo,
html body[data-mode] .vx-user-card .thumb_ svg {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: none;
}
html body[data-mode] .vx-user-card .thumb_ svg { padding: 8px; box-sizing: border-box; background: var(--vx-card-3); color: var(--vx-muted); }
html body[data-mode] .vx-user-card__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html body[data-mode] .vx-user-card__id { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-text); font-size: 13px; font-weight: 600; }
html body[data-mode] .vx-user-card__id img { width: 16px; height: 16px; }
html body[data-mode] .vx-user-card__switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent) !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
html body[data-mode] .vx-user-card__switch svg { width: 14px; height: 14px; }
html body[data-mode] .vx-user-card__switch:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html body[data-mode] .vx-nav > li > a,
    html body[data-mode] .vx-nav > li > a > svg { transition: none; }
}

/* ---------- Misc ---------- */
body.vx-skin .collapse_btn { text-decoration: none !important; color: inherit; }
body.vx-skin .high_low { color: var(--vx-muted) !important; font-size: 10px; }
body.vx-skin .text-secondary { color: var(--vx-muted) !important; }
body.vx-skin .empty_ .info-box { padding: 24px !important; color: var(--vx-muted); width: auto !important; max-width: 320px; }
body.vx-skin .empty_ svg { opacity: .5; }

/* ---------- Table cell fixes ---------- */
/* .d-flex on a <td> breaks the row grid → keep it a table cell */
body.vx-skin .colored_tbl td.d-flex,
body.vx-skin .markets_tbl td.d-flex { display: table-cell !important; white-space: nowrap; }
body.vx-skin .colored_tbl td.d-flex > *,
body.vx-skin .markets_tbl td.d-flex > * { display: inline-block; vertical-align: middle; }
body.vx-skin .colored_tbl td img,
body.vx-skin .markets_tbl td img { border-radius: 50%; background: var(--vx-card-2); }

/* softer destructive/neutral actions inside tables */
body.vx-skin .colored_tbl .btn-danger,
body.vx-skin .markets_tbl .btn-danger {
    background: var(--vx-red-soft) !important;
    border-color: transparent !important;
    color: var(--vx-red) !important;
}
body.vx-skin .colored_tbl .btn-danger:hover,
body.vx-skin .markets_tbl .btn-danger:hover { background: var(--vx-red) !important; color: #fff !important; }
body.vx-skin .colored_tbl .btn + .btn,
body.vx-skin .markets_tbl .btn + .btn { margin-inline-start: 4px; }

/* side badge (Buy / Sell) */
body.vx-skin .vx-side {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
body.vx-skin .vx-side--buy { background: var(--vx-accent-soft); color: var(--vx-accent); }
body.vx-skin .vx-side--sell { background: var(--vx-red-soft); color: var(--vx-red); }

/* ---------- Markets ---------- */
body.vx-skin .markets_tbl {
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 14px;
    box-shadow: var(--vx-shadow);
    overflow: hidden;
}
body.vx-skin .markets_tbl thead th { position: static; }
body.vx-skin .markets_tbl .short_symbol { color: var(--vx-text) !important; font-weight: 600; }
body.vx-skin .markets_tbl .ask,
body.vx-skin .markets_tbl .bid { color: var(--vx-text); font-size: 13px !important; }
body.vx-skin .markets_page .info-box .short_item .text-white { color: var(--vx-text) !important; font-weight: 600; }

/* ---------- Trades (client) ---------- */
body.vx-skin .opened_fx > .info-box,
body.vx-skin .tbl_tab .info-box { transition: border-color .15s, background .15s; }
body.vx-skin .opened_fx > .info-box:hover,
body.vx-skin .tbl_tab .info-box:hover { border-color: var(--vx-line-strong) !important; }
body.vx-skin .trade_page_ .pl { font-weight: 700; }
body.vx-skin .trade_page_ .collapse,
body.vx-skin .trade_page_ .collapsing { color: var(--vx-muted); }
body.vx-skin .trade_page_ .collapse > div { color: var(--vx-muted) !important; }

/* ---------- Admin ---------- */
body.vx-skin .admin_nav {
    background: var(--vx-card) !important;
    border-bottom: 1px solid var(--vx-line) !important;
    box-shadow: none !important;
}
body.vx-skin .admin_nav .nav-list > li > a,
body.vx-skin .admin_nav .nav-list > li .dropdown > button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px !important;
    border-radius: 10px;
    border: 1px solid var(--vx-line) !important;
    background: var(--vx-card-2) !important;
    color: var(--vx-text) !important;
    font-size: 13px !important;
    font-weight: 600;
    transition: border-color .15s;
}
body.vx-skin .admin_nav .nav-list > li > a:hover,
body.vx-skin .admin_nav .nav-list > li .dropdown > button:hover { border-color: var(--vx-accent) !important; }
body.vx-skin .admin_nav .nav-list > li > a svg,
body.vx-skin .admin_nav .nav-list > li .dropdown > button svg { width: 18px; height: 18px; }

body.vx-skin .admin_area_content { padding-bottom: 40px; }
body.vx-skin .admin_area_content .colored_tbl tbody td,
body.vx-skin .admin_area_content .colored_tbl thead th { padding: 10px 10px !important; }
body.vx-skin .admin_area_content .colored_tbl tbody td:first-child,
body.vx-skin .admin_area_content .colored_tbl thead th:first-child { padding-inline-start: 14px !important; }

body.vx-skin .admin_nav .nav-list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    margin: 0 !important;
}
body.vx-skin .admin_nav .nav-list > li { margin: 0 !important; }
body.vx-skin .admin_nav .nav-list .dropdown { margin: 0 !important; }

/* Manage: client info cards */
body.vx-skin .user_data_info-boxs .info-box { height: auto !important; min-height: 320px; }
body.vx-skin .user_data_info-boxs .sm_txt { color: var(--vx-muted) !important; font-size: 11px; }
body.vx-skin .user_data_info-boxs .info-box .text-white { color: var(--vx-text) !important; font-size: 13px !important; font-weight: 600; }
body.vx-skin .user_data_info-boxs .icon_bg { width: 40px; height: 40px; }
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn {
    flex: 1 1 0;
    min-width: 0;
    margin-inline: 4px !important;
    justify-content: center;
    padding: 12px 8px !important;
    border-radius: 12px;
}
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn span { font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; }
/* outlined action buttons: border + hover tint follow the label colour (text-primary / warning / danger / info / success) */
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn {
    --vx-btn-c: var(--vx-line-strong);
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--vx-btn-c) 55%, transparent) !important;
    transition: background-color .15s, border-color .15s, transform .12s;
}
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:has(> .text-primary),
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:has(> .text-success) { --vx-btn-c: var(--vx-accent); }
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:has(> .text-warning) { --vx-btn-c: var(--vx-amber); }
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:has(> .text-danger)  { --vx-btn-c: var(--vx-red); }
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:has(> .text-info)    { --vx-btn-c: var(--bs-info, #0dcaf0); }
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:hover {
    background: color-mix(in srgb, var(--vx-btn-c) 10%, transparent) !important;
    border-color: var(--vx-btn-c) !important;
}
body.vx-skin .user_data_info-boxs .info-box .d-flex > .btn:focus-visible { outline: 2px solid var(--vx-btn-c) !important; outline-offset: 2px; }

/* ---------- Page head / lists ---------- */
body.vx-skin .vx-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 16px;
}
body.vx-skin .vx-neg { color: var(--vx-red) !important; }

body.vx-skin .vx-list-card { padding: 0 !important; overflow: hidden; }
body.vx-skin .vx-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vx-line);
}
body.vx-skin .vx-list-head .nav-container { border: 0 !important; background: var(--vx-card-2) !important; }

body.vx-skin .vx-tx-list { list-style: none; margin: 0; padding: 4px 6px; }
body.vx-skin .vx-tx {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 10px;
    transition: background .12s;
}
body.vx-skin .vx-tx + .vx-tx { border-top: 1px solid var(--vx-line); }
body.vx-skin .vx-tx:hover { background: var(--vx-card-2); }
body.vx-skin .vx-tx[hidden] { display: none; }
body.vx-skin .vx-tx-ic {
    width: 38px; height: 38px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
}
body.vx-skin .vx-tx-ic.is-in { background: var(--vx-accent-soft); color: var(--vx-accent); }
body.vx-skin .vx-tx-ic.is-out { background: var(--vx-red-soft); color: var(--vx-red); }
body.vx-skin .vx-tx-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
body.vx-skin .vx-tx-main b { color: var(--vx-text); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
body.vx-skin .vx-tx-main small { color: var(--vx-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
body.vx-skin .vx-tx-amt { font-weight: 700; font-size: 15px; }

body.vx-skin .vx-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 16px;
    color: var(--vx-muted);
    font-size: 13px;
}
body.vx-skin .vx-empty-state svg { opacity: .45; }

/* ---------- Order panel (new_order / edit_order) ---------- */
body.vx-skin .new_order_container { color: var(--vx-text); }
body.vx-skin .new_order_container .short_item { row-gap: 2px; }
body.vx-skin .new_order_container .short_item > [class*="col-"] { margin-top: 12px !important; margin-bottom: 4px !important; }

body.vx-skin .vx-ord-head { position: relative; gap: 12px; padding: 14px 16px !important; }
body.vx-skin .vx-ord-ic {
    width: 48px; height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--vx-card-2);
    display: grid;
    place-items: center;
    overflow: hidden;
}
body.vx-skin .vx-ord-ic img { width: 40px; height: 40px; object-fit: contain; }
body.vx-skin .vx-ord-ic i { display: none; font-style: normal; font-weight: 800; color: var(--vx-accent); font-size: 18px; }
body.vx-skin .vx-ord-ic.is-fb i { display: block; }
body.vx-skin .vx-ord-name { min-width: 0; }
body.vx-skin .vx-ord-sym { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--vx-text); }
body.vx-skin .vx-ord-name small { color: var(--vx-muted); font-size: 12px; }
body.vx-skin .vx-ord-close {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--vx-line-strong) !important;
    background: var(--vx-card-2) !important;
    color: var(--vx-muted) !important;
    transition: color .15s, border-color .15s;
}
body.vx-skin .vx-ord-close:hover { color: var(--vx-text) !important; border-color: var(--vx-accent) !important; }

body.vx-skin .vx-quotes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}
body.vx-skin .vx-quote { padding: 12px 14px !important; position: relative; overflow: hidden; }
body.vx-skin .vx-quote::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; }
body.vx-skin .vx-quote--bid::before { background: var(--vx-red); }
body.vx-skin .vx-quote--ask::before { background: var(--vx-accent); }
body.vx-skin .vx-quote--ask { text-align: end; }
body.vx-skin .vx-quote-label {
    color: var(--vx-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
body.vx-skin .vx-quote .bid_,
body.vx-skin .vx-quote .ask_ {
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--vx-text);
    direction: ltr;
    transition: color .2s;
}
body.vx-skin .vx-quote--ask .ask_ { text-align: end; }
html[dir="rtl"] body.vx-skin .vx-quote--ask .ask_ { text-align: start; }
body.vx-skin .vx-quote .text-primary { color: var(--vx-accent) !important; }
body.vx-skin .vx-quote .text-danger { color: var(--vx-red) !important; }
body.vx-skin .vx-spread {
    display: none !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 6px;
    min-width: 64px;
}
body.vx-skin .vx-spread small { color: var(--vx-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
body.vx-skin .vx-spread b {
    font-size: 12px;
    color: var(--vx-text);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--vx-card-2);
    border: 1px solid var(--vx-line);
    direction: ltr;
}

body.vx-skin .vx-field-label {
    text-align: start !important;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--vx-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}
body.vx-skin .vx-field-label small { font-weight: 400; opacity: .8; }
body.vx-skin .vx-field-label--tp::before,
body.vx-skin .vx-field-label--sl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
body.vx-skin .vx-field-label--tp::before { background: var(--vx-accent); }
body.vx-skin .vx-field-label--sl::before { background: var(--vx-red); }

body.vx-skin .new_order_container input:not([type="hidden"]),
body.vx-skin .new_order_container select {
    height: 46px;
    background: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    border-radius: 12px !important;
    color: var(--vx-text) !important;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
    -moz-appearance: textfield;
}
body.vx-skin .new_order_container input::-webkit-outer-spin-button,
body.vx-skin .new_order_container input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.vx-skin .new_order_container input:focus,
body.vx-skin .new_order_container select:focus { border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px var(--vx-accent-soft); }
body.vx-skin .new_order_container input:disabled,
body.vx-skin .new_order_container select:disabled { opacity: .6; cursor: not-allowed; }
body.vx-skin .new_order_container select { padding: 0 12px; font-size: 14px; }

body.vx-skin .vx-stepper { display: flex; gap: 6px; direction: ltr; }
body.vx-skin .vx-stepper input { min-width: 0; }
body.vx-skin .vx-step {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--vx-line-strong);
    background: var(--vx-card-2);
    color: var(--vx-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: border-color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
body.vx-skin .vx-step:hover { border-color: var(--vx-accent); color: var(--vx-accent); }
body.vx-skin .vx-step:active { transform: scale(.94); }

body.vx-skin .new_order_container .order_value_display {
    position: static !important;
    display: block;
    margin-top: 6px;
    color: var(--vx-muted) !important;
    font-size: 11px !important;
    text-align: start;
}

body.vx-skin .vx-chart-card {
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 4px;
    box-shadow: var(--vx-shadow);
}
body.vx-skin .vx-chart-card iframe { display: block; }

/* bottom action bar */
body.vx-skin.vx-page-new_order .navbar,
body.vx-skin.vx-page-edit_order .navbar {
    background: var(--vx-card) !important;
    border-top: 1px solid var(--vx-line);
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .6);
}
body.vx-skin .new_order_page .navbar .new_data,
body.vx-skin .new_order_page .navbar .done_cmd { display: flex; gap: 10px; padding: 0; margin: 0; }
body.vx-skin .new_order_page .navbar .new_data > li,
body.vx-skin .new_order_page .navbar .done_cmd > li { flex: 1; width: auto !important; padding: 0 !important; margin: 0 !important; }
body.vx-skin .new_order_page .navbar .send_command,
body.vx-skin .new_order_page .navbar .save_order,
body.vx-skin .new_order_page .navbar .order_btn_loader .btn {
    height: 54px;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: .04em;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
}
body.vx-skin .new_order_page .navbar .send_command.d-none { display: none !important; }
body.vx-skin .new_order_page .navbar .order_btn_loader { padding: 0 !important; }
body.vx-skin .vx-cmd-price { font-size: 11px; font-weight: 600; opacity: .85; letter-spacing: 0; direction: ltr; }
body.vx-skin .vx-cmd-price:empty { display: none; }
body.vx-skin .new_order_page .navbar .send_command:disabled { opacity: .35 !important; filter: grayscale(.4); }

/* ---------- Profile ---------- */
body.vx-skin .vx-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: normal !important;
}
body.vx-skin .vx-alert--ok { background: var(--vx-accent-soft); color: var(--vx-accent); border: 1px solid var(--vx-accent-soft); }

body.vx-skin .vx-profile {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
body.vx-skin .vx-profile-side { display: flex; flex-direction: column; gap: 14px; }
body.vx-skin .vx-card-title-sm { font-size: 14px; font-weight: 700; color: var(--vx-text); margin-bottom: 14px; }

body.vx-skin .vx-id-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px 18px !important;
    background-image: linear-gradient(180deg, var(--vx-accent-soft), transparent 120px) !important;
}
body.vx-skin .vx-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 0 0 4px var(--vx-card), 0 0 0 6px var(--vx-accent-soft);
}
body.vx-skin .vx-avatar .select_img,
body.vx-skin .vx-avatar .selected_img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: var(--vx-card-2);
    border: 0 !important;
}
body.vx-skin .vx-avatar .select_img { background: var(--vx-card-2) !important; color: var(--vx-accent) !important; }
body.vx-skin .vx-avatar .select_img.d-none,
body.vx-skin .vx-avatar .selected_img.d-none { display: none !important; }
body.vx-skin .vx-avatar-initial { font-size: 36px; font-weight: 800; color: var(--vx-accent); }
body.vx-skin .vx-avatar-edit {
    position: absolute;
    inset-inline-end: -2px;
    bottom: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--vx-accent);
    color: var(--vx-accent-ink);
    border: 3px solid var(--vx-card);
    transition: transform .15s;
}
body.vx-skin .vx-avatar:hover .vx-avatar-edit { transform: scale(1.1); }
body.vx-skin .vx-id-name { font-size: 18px; font-weight: 700; color: var(--vx-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.vx-skin .vx-id-email { font-size: 12px; color: var(--vx-muted); margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.vx-skin .vx-id-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0; }
body.vx-skin .vx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
body.vx-skin .vx-badge--ok { background: var(--vx-accent-soft); color: var(--vx-accent); }
body.vx-skin .vx-badge--warn { background: var(--vx-amber-soft); color: var(--vx-amber); }
body.vx-skin .vx-badge--bad { background: var(--vx-red-soft); color: var(--vx-red); }
body.vx-skin .vx-badge--muted { background: var(--vx-card-2); color: var(--vx-muted); }

body.vx-skin .vx-id-meta { width: 100%; margin: 0; border-top: 1px solid var(--vx-line); padding-top: 10px; }
body.vx-skin .vx-id-meta > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 10px; }
body.vx-skin .vx-id-meta dt { font-weight: 500; color: var(--vx-muted); font-size: 12px; }
body.vx-skin .vx-id-meta dd { margin: 0; color: var(--vx-text); font-size: 13px; font-weight: 600; }
body.vx-skin .vx-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed var(--vx-line-strong);
    background: transparent;
    color: var(--vx-text);
    border-radius: 8px;
    padding: 2px 8px;
    font-weight: 600;
    transition: border-color .15s, color .15s, background .15s;
}
body.vx-skin .vx-copy:hover,
body.vx-skin .vx-copy.is-done { border-color: var(--vx-accent); color: var(--vx-accent); background: var(--vx-accent-soft); }
body.vx-skin .vx-hint { display: block; margin-top: 10px; font-size: 11px; color: var(--vx-muted); }

body.vx-skin .vx-sec-row { display: flex; align-items: center; gap: 12px; }
body.vx-skin .vx-sec-ic {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--vx-accent-soft);
    color: var(--vx-accent);
}
body.vx-skin .vx-sec-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
body.vx-skin .vx-sec-txt b { font-size: 13px; color: var(--vx-text); }
body.vx-skin .vx-sec-txt small { color: var(--vx-muted); letter-spacing: 2px; }

body.vx-skin .vx-profile-main { padding: 20px !important; }
body.vx-skin .vx-label { display: block; color: var(--vx-muted); font-size: 12px; font-weight: 600; margin-bottom: 6px; }
body.vx-skin .profile_page .input-group { flex-wrap: nowrap; }
body.vx-skin .profile_page .input-group-text {
    background: var(--vx-card-2) !important;
    border: 1px solid var(--vx-line-strong) !important;
    border-inline-end: 0 !important;
    color: var(--vx-muted) !important;
    border-radius: 10px 0 0 10px !important;
    min-width: 44px;
    justify-content: center;
}
html[dir="rtl"] body.vx-skin .profile_page .input-group-text { border-radius: 0 10px 10px 0 !important; }
body.vx-skin .profile_page .input-group > .form-control,
body.vx-skin .profile_page .input-group > .form-select {
    border-inline-start: 0 !important;
    border-radius: 0 10px 10px 0 !important;
}
html[dir="rtl"] body.vx-skin .profile_page .input-group > .form-control,
html[dir="rtl"] body.vx-skin .profile_page .input-group > .form-select { border-radius: 10px 0 0 10px !important; }
body.vx-skin .profile_page .input-group:focus-within .input-group-text { border-color: var(--vx-accent) !important; color: var(--vx-accent) !important; }
body.vx-skin .profile_page .form-control:disabled { opacity: .7; cursor: not-allowed; }

body.vx-skin .profile_page .main_phone {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--vx-line-strong) !important;
    border-radius: 10px !important;
    background: var(--vx-card-2) !important;
    transition: border-color .15s, box-shadow .15s;
}
body.vx-skin .profile_page .main_phone:focus-within { border-color: var(--vx-accent) !important; box-shadow: 0 0 0 3px var(--vx-accent-soft); }
body.vx-skin .profile_page .main_phone.is-locked { opacity: .7; }
body.vx-skin .profile_page .main_phone { direction: ltr; }
body.vx-skin .profile_page .main_phone .select_country_btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: var(--vx-text) !important; }
body.vx-skin .profile_page .main_phone .country_details,
body.vx-skin .profile_page .main_phone .country_details * { color: var(--vx-text) !important; font-size: 12px; }
body.vx-skin .profile_page .main_phone .country_details img { width: 22px; height: auto; border-radius: 3px; margin: 0 !important; }
body.vx-skin .profile_page .main_phone .country_code_txt { color: var(--vx-muted); font-size: 13px; font-weight: 600; }
body.vx-skin .profile_page .main_phone input[type="text"] {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: 0 !important;
    color: var(--vx-text) !important;
    font-size: 13px;
    height: 40px;
    outline: none;
}
body.vx-skin .profile_page .countries_list li { border-radius: 8px; padding: 4px 6px; cursor: pointer; }
body.vx-skin .profile_page .countries_list li:hover { background: var(--vx-card-2); }

body.vx-skin .vx-form-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid var(--vx-line);
}
body.vx-skin .vx-form-foot .btn { min-width: 160px; height: 44px; }

body.vx-skin .vx-profile-2fa { margin-top: 14px; }
body.vx-skin .profile_page .tfa_card {
    background: var(--vx-card) !important;
    border: 1px solid var(--vx-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--vx-shadow);
    padding: 18px !important;
    overflow: visible !important;
    color: var(--vx-text);
}
body.vx-skin .profile_page .tfa_card .tfa_left > svg { color: var(--vx-accent); }
body.vx-skin .profile_page .tfa_card .tfa_sub { color: var(--vx-muted) !important; }
body.vx-skin .profile_page .tfa_card .fw-bold { font-size: 14px; color: var(--vx-text); }
body.vx-skin .profile_page .tfa_card .tfa_info .mt-1 { font-size: 12px; color: var(--vx-muted); margin-top: 6px !important; }
body.vx-skin .profile_page .tfa_status_badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
body.vx-skin .profile_page .tfa_status_badge.text-success { background: var(--vx-accent-soft); color: var(--vx-accent) !important; }
body.vx-skin .profile_page .tfa_status_badge.text-warning { background: var(--vx-amber-soft); color: var(--vx-amber) !important; }

@media (max-width: 991.98px) {
    body.vx-skin .vx-profile { grid-template-columns: minmax(0, 1fr); }
    body.vx-skin .vx-form-foot .btn { flex: 1; }
}

/* ---------- Verify ---------- */
body.vx-skin .vx-wrap { white-space: normal !important; }
body.vx-skin .vx-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
body.vx-skin .vx-banner b { display: block; font-size: 14px; color: var(--vx-text); }
body.vx-skin .vx-banner small { display: block; font-size: 12px; color: var(--vx-muted); white-space: normal !important; margin-top: 2px; }
body.vx-skin .vx-banner-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; }
body.vx-skin .vx-banner--warn { background: var(--vx-amber-soft); border-color: var(--vx-amber-soft); }
body.vx-skin .vx-banner--warn .vx-banner-ic { background: var(--vx-amber-soft); color: var(--vx-amber); }
body.vx-skin .vx-banner--review { background: var(--vx-blue-soft); border-color: var(--vx-blue-soft); }
body.vx-skin .vx-banner--review .vx-banner-ic { background: var(--vx-blue-soft); color: var(--vx-blue); }

body.vx-skin .vx-progress { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
body.vx-skin .vx-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--vx-card-2); overflow: hidden; }
body.vx-skin .vx-progress-bar span { display: block; height: 100%; background: var(--vx-accent); border-radius: 999px; transition: width .35s cubic-bezier(.2, .7, .2, 1); }
body.vx-skin .vx-progress small { color: var(--vx-muted); font-size: 12px; }
body.vx-skin .vx-progress b { color: var(--vx-text); }

body.vx-skin .vx-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.vx-skin .vx-doc {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px !important;
    margin: 0;
    border-radius: 16px;
    background: var(--vx-card);
    border: 1.5px dashed var(--vx-line-strong);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
    min-width: 0;
}
body.vx-skin .vx-doc:hover,
body.vx-skin .vx-doc.is-drag { border-color: var(--vx-accent); background: var(--vx-accent-soft); }
body.vx-skin .vx-doc.is-drag { transform: scale(1.01); }
body.vx-skin .vx-doc.is-done { border-style: solid; border-color: var(--vx-accent); }
body.vx-skin .vx-doc-ic {
    width: 52px; height: 52px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--vx-card-2);
    color: var(--vx-muted);
    transition: background .15s, color .15s;
}
body.vx-skin .vx-doc:hover .vx-doc-ic,
body.vx-skin .vx-doc.is-done .vx-doc-ic { background: var(--vx-accent-soft); color: var(--vx-accent); }
body.vx-skin .vx-doc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
body.vx-skin .vx-doc-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--vx-text); white-space: normal !important; }
body.vx-skin .vx-doc-title em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--vx-card-2);
    color: var(--vx-muted);
}
body.vx-skin .vx-doc-title em.is-req { background: var(--vx-red-soft); color: var(--vx-red); }
body.vx-skin .vx-doc-empty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vx-muted); white-space: normal !important; }
body.vx-skin .vx-doc-done { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
body.vx-skin .vx-doc-done.d-none { display: none !important; }
body.vx-skin .vx-doc-thumb {
    width: 34px; height: 34px;
    flex: none;
    border-radius: 8px;
    background: var(--vx-accent-soft) center / cover no-repeat;
    position: relative;
}
body.vx-skin .vx-doc-thumb:not([style*="url"])::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--vx-accent);
    font-weight: 800;
}
body.vx-skin .vx-doc-thumb.is-pdf::after { content: "PDF"; font-size: 10px; }
body.vx-skin .vx-doc-file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--vx-text); font-weight: 600; }
body.vx-skin .vx-doc-change { color: var(--vx-accent); font-weight: 700; font-size: 11px; flex: none; }
body.vx-skin .vx-send { height: 50px; font-size: 15px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; max-width: 420px; }
body.vx-skin .vx-send:disabled { opacity: .6; }

@media (max-width: 767.98px) {
    body.vx-skin .vx-docs { grid-template-columns: minmax(0, 1fr); }
    body.vx-skin .vx-send { max-width: none; }
}

/* ---------- Language menu (global) ---------- */
.vx-lang { position: relative; display: inline-block; vertical-align: middle; margin: 0 4px; }
.vx-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px 0 6px;
    border-radius: 12px;
    border: 1px solid var(--vx-line-strong, rgba(140, 160, 175, .26));
    background: var(--vx-card, #172025);
    color: var(--vx-text, #eef3f6);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.vx-lang-btn:hover,
.vx-lang.open .vx-lang-btn { border-color: var(--vx-accent, #27d3a2); }
.vx-lang-flag { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px var(--vx-line, rgba(140, 160, 175, .14)); }
.vx-lang-flag svg { width: 24px; height: 24px; display: block; }
.vx-lang-code { min-width: 16px; text-align: center; letter-spacing: .04em; }
.vx-lang-chev { opacity: .6; transition: transform .2s; }
.vx-lang.open .vx-lang-chev { transform: rotate(180deg); }

.vx-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 210px;
    padding: 6px;
    border-radius: 14px;
    background: var(--vx-card, #172025);
    border: 1px solid var(--vx-line, rgba(140, 160, 175, .14));
    box-shadow: var(--vx-pop, 0 18px 50px -12px rgba(0, 0, 0, .65));
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .15s, transform .15s, visibility .15s;
    text-align: start;
}
html[dir="rtl"] .vx-lang-menu { transform-origin: top left; }
.vx-lang.open .vx-lang-menu { opacity: 1; visibility: visible; transform: none; }
.vx-lang-head {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vx-muted, #8d9ba7);
}
.vx-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--vx-text, #eef3f6) !important;
    transition: background .12s;
    outline: none;
}
.vx-lang-item:hover,
.vx-lang-item:focus-visible { background: var(--vx-card-2, #1c282f); }
.vx-lang-item.is-active { background: var(--vx-accent-soft, rgba(39, 211, 162, .12)); }
.vx-lang-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.vx-lang-txt b { font-size: 13px; font-weight: 700; }
.vx-lang-txt small { font-size: 11px; color: var(--vx-muted, #8d9ba7); }
.vx-lang-item[lang="ar"] .vx-lang-txt b { font-family: "Almarai", sans-serif !important; }
.vx-lang-check { color: var(--vx-accent, #27d3a2); opacity: 0; flex: none; }
.vx-lang-item.is-active .vx-lang-check { opacity: 1; }

/* auth pages: corner placement */
.vx-auth-lang { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 1000; }

/* CSS-only loading spinner (replaces heavy inline SVGs) */
.vx-spin {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: .55;
    vertical-align: middle;
    animation: vx-spin .8s linear infinite;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    body.vx-skin *, body.vx-skin *::before, body.vx-skin *::after { transition: none !important; }
    .vx-spin { animation-duration: 2s; }
}

/* ---------- Admin data pages (transactions + closed symbols) ---------- */
body.vx-skin .vx-page-head .vx-page-title { margin: 0 0 4px; }
body.vx-skin .vx-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.vx-skin .vx-head-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
body.vx-skin .vx-head-actions .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
body.vx-skin .vx-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

/* KPI tiles */
body.vx-skin .vx-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
body.vx-skin .vx-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 14px;
    box-shadow: var(--vx-shadow);
    min-width: 0;
}
body.vx-skin .vx-kpi__ic {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent);
}
body.vx-skin .vx-kpi__ic svg { width: 22px; height: 22px; }
body.vx-skin .vx-kpi.is-out .vx-kpi__ic { background: var(--vx-red-soft); color: var(--vx-red); }
body.vx-skin .vx-kpi.is-net .vx-kpi__ic { background: var(--vx-blue-soft); color: var(--vx-blue); }
body.vx-skin .vx-kpi > div { min-width: 0; }
body.vx-skin .vx-kpi__label { color: var(--vx-muted); font-size: 12px; font-weight: 500; }
body.vx-skin .vx-kpi__value {
    color: var(--vx-text);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.vx-skin .vx-kpi__value.is-loading > span {
    display: inline-block;
    width: 90px;
    height: 18px;
    border-radius: 6px;
    color: transparent;
    background: linear-gradient(90deg, var(--vx-card-2), var(--vx-card-3), var(--vx-card-2));
    background-size: 200% 100%;
    animation: vx-shimmer 1.2s linear infinite;
    vertical-align: middle;
}
@keyframes vx-shimmer { to { background-position: -200% 0; } }

/* filter toolbar */
body.vx-skin .vx-filters {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 14px;
    box-shadow: var(--vx-shadow);
}
body.vx-skin .vx-filters__grid {
    flex: 1 1 560px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
body.vx-skin .vx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.vx-skin .vx-field label { margin: 0; }
body.vx-skin .vx-field .form-control.is-invalid { border-color: var(--vx-red) !important; box-shadow: 0 0 0 3px var(--vx-red-soft) !important; }
body.vx-skin .vx-field-error { flex-basis: 100%; color: var(--vx-red); font-size: 12px; white-space: normal !important; }

/* data card + states */
body.vx-skin .vx-data-card { position: relative; padding: 0 !important; overflow: hidden; }
body.vx-skin .vx-data-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vx-accent), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 2;
    transition: opacity .2s;
}
body.vx-skin .vx-data-card.is-loading::before { opacity: 1; animation: vx-progress 1s linear infinite; }
body.vx-skin .vx-data-card.is-loading .transactions_data { opacity: .55; pointer-events: none; transition: opacity .2s; }
@keyframes vx-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }

body.vx-skin .vx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.vx-skin .vx-table-scroll > .colored_tbl,
body.vx-skin .vx-table-scroll .dataTables_wrapper .colored_tbl { margin: 0 !important; }
body.vx-skin .vx-tx-tbl { min-width: 1080px; }
body.vx-skin .vx-tx-tbl td { white-space: nowrap; }
/* style.css starts with "* { white-space: nowrap !important }" → wrapping needs !important */
body.vx-skin .vx-tx-tbl td.vx-note,
body.vx-skin .vx-tx-tbl td.vx-note * { white-space: normal !important; overflow-wrap: anywhere; }
body.vx-skin .vx-tx-tbl td.vx-note { min-width: 180px; max-width: 280px; color: var(--vx-muted); }
body.vx-skin .vx-tx-tbl .vx-mono,
body.vx-skin .vx-closed-tbl .vx-mono { font-variant-numeric: tabular-nums; }
body.vx-skin .vx-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
body.vx-skin .vx-amt.is-in { color: var(--vx-accent) !important; }
body.vx-skin .vx-amt.is-out { color: var(--vx-red) !important; }
body.vx-skin .vx-dir { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-text); }
body.vx-skin .vx-dir::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vx-accent); flex: none; }
body.vx-skin .vx-dir.is-out::before { background: var(--vx-red); }
body.vx-skin .vx-sub { display: block; color: var(--vx-muted); font-size: 11px; }
body.vx-skin .vx-row-actions { display: inline-flex; align-items: center; gap: 6px; }
body.vx-skin .vx-row-actions form { margin: 0; }
body.vx-skin .vx-row-actions .btn:disabled { opacity: .5; cursor: progress; }
body.vx-skin .vx-crypto { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
body.vx-skin .vx-table-foot { padding: 12px 14px; border-top: 1px solid var(--vx-line); }
body.vx-skin .vx-table-foot:empty { display: none; }
body.vx-skin .vx-table-foot nav { width: 100%; }
body.vx-skin .vx-table-foot p { margin: 0; }
body.vx-skin .vx-data-card .dataTables_wrapper .dataTables_filter { float: none; text-align: end; }
body.vx-skin .vx-empty-state .btn { margin-top: 4px; }
body.vx-skin .vx-empty-state b { color: var(--vx-text); font-size: 14px; }
body.vx-skin .vx-empty-state.is-error svg { color: var(--vx-red); opacity: .8; }

/* closed symbols */
body.vx-skin .vx-closed-tbl { min-width: 760px; }
body.vx-skin .vx-closed-tbl .vx-col-chk { width: 44px; }
body.vx-skin .vx-closed-tbl tbody tr { cursor: pointer; }
body.vx-skin .vx-closed-tbl tbody tr.is-selected td { background: var(--vx-accent-soft) !important; }
body.vx-skin .vx-sym { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--vx-text); }
body.vx-skin .vx-sym img,
body.vx-skin .vx-sym-fallback,
body.vx-skin .vx-sym-market {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}
body.vx-skin .vx-sym-fallback,
body.vx-skin .vx-sym-market {
    display: grid;
    place-items: center;
    background: var(--vx-card-3);
    color: var(--vx-muted);
    font-size: 11px;
    font-weight: 700;
}
body.vx-skin .vx-sym-market { border-radius: 9px; background: var(--vx-blue-soft); color: var(--vx-blue); }
body.vx-skin .vx-sym-market svg { width: 16px; height: 16px; }
body.vx-skin .vx-time {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--vx-card-2);
    border: 1px solid var(--vx-line);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
body.vx-skin .colored_tbl td > span.vx-pill-muted {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--vx-card-3);
    color: var(--vx-muted);
}

@media (max-width: 991.98px) {
    body.vx-skin .vx-filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
    body.vx-skin .vx-filters > .btn { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
    /* phones: account + type full width, the two dates side by side */
    body.vx-skin .vx-filters { padding: 12px; gap: 10px; }
    body.vx-skin .vx-filters__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    body.vx-skin .vx-filters__grid > .vx-field:nth-child(-n+2) { grid-column: 1 / -1; }
    body.vx-skin .vx-kpis { gap: 8px; }
    body.vx-skin .vx-kpi { padding: 12px 14px; gap: 12px; }
    body.vx-skin .vx-kpi__ic { width: 36px; height: 36px; border-radius: 10px; }
    body.vx-skin .vx-kpi__ic svg { width: 18px; height: 18px; }
    body.vx-skin .vx-page-head { align-items: stretch; }
    body.vx-skin .vx-head-actions { width: 100%; }
    body.vx-skin .vx-head-actions .btn { flex: 1 1 0; justify-content: center; }
    body.vx-skin .vx-kpi__value { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    body.vx-skin .vx-kpi__value.is-loading > span,
    body.vx-skin .vx-data-card.is-loading::before { animation: none; }
}

/* keyboard focus (style.css removes every outline) */
body.vx-skin .vx-filters .btn:focus-visible,
body.vx-skin .vx-head-actions .btn:focus-visible,
body.vx-skin .vx-row-actions .btn:focus-visible,
body.vx-skin .vx-table-foot .page-link:focus-visible,
body.vx-skin .vx-empty-state .btn:focus-visible,
body.vx-skin .vx-closed-tbl input[type="checkbox"]:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }
body.vx-skin .vx-page-sub,
body.vx-skin .vx-empty-state span { white-space: normal !important; text-align: center; }
body.vx-skin .vx-page-head .vx-page-sub { text-align: start; }

/* ---------- Admin settings ---------- */
body.vx-skin .vx-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
body.vx-skin .vx-settings-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.vx-skin .vx-set-card {
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 16px;
    box-shadow: var(--vx-shadow);
    padding: 18px;
    min-width: 0;
}
body.vx-skin .vx-set-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body.vx-skin .vx-set-card__head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--vx-text); }
body.vx-skin .vx-set-card__ic {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--vx-accent-soft);
    color: var(--vx-accent);
}
body.vx-skin .vx-set-card__ic svg { width: 18px; height: 18px; }

body.vx-skin .vx-set-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.vx-skin .vx-set-fields > .vx-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.vx-skin .vx-field > label { color: var(--vx-muted) !important; font-size: 12px; font-weight: 500; }

/* "1 :" prefix — the input keeps its own field styles from the Forms section */
body.vx-skin .vx-lev { flex-wrap: nowrap; direction: ltr; }
body.vx-skin .vx-lev .input-group-text {
    background: var(--vx-card-3);
    border: 1px solid var(--vx-line-strong);
    border-inline-end: 0;
    color: var(--vx-muted);
    font-size: 12px;
    font-weight: 700;
    border-radius: 10px 0 0 10px !important;
}
body.vx-skin .vx-lev .form-control { border-radius: 0 10px 10px 0 !important; font-variant-numeric: tabular-nums; font-weight: 600; }
body.vx-skin .vx-set-card .form-control:invalid:not(:placeholder-shown),
body.vx-skin .vx-set-card .form-control:user-invalid { border-color: var(--vx-red) !important; box-shadow: 0 0 0 3px var(--vx-red-soft) !important; }

body.vx-skin .vx-switches { display: flex; flex-direction: column; border: 1px solid var(--vx-line); border-radius: 12px; overflow: hidden; }
body.vx-skin .vx-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
    margin: 0;
    color: var(--vx-text) !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s;
}
body.vx-skin .vx-switch-row + .vx-switch-row { border-top: 1px solid var(--vx-line); }
body.vx-skin .vx-switch-row:hover { background: var(--vx-card-2); }
body.vx-skin .vx-switch-row > span:first-child { white-space: normal !important; }
body.vx-skin .form-switch .form-check-input {
    width: 40px;
    height: 22px;
    margin: 0;
    float: none;
    cursor: pointer;
    /* style.css: body[data-mode=dark] input { background-color: … !important } */
    background-color: var(--vx-card-3) !important;
    border-color: var(--vx-line-strong);
}
body.vx-skin .form-switch .form-check-input:checked { background-color: var(--vx-accent) !important; border-color: var(--vx-accent); }
body.vx-skin .form-switch .form-check-input:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; box-shadow: none; }
html[dir=rtl] body.vx-skin .form-switch .form-check-input { background-position: right center; }
html[dir=rtl] body.vx-skin .form-switch .form-check-input:checked { background-position: left center; }

body.vx-skin .vx-wallets { display: flex; flex-direction: column; gap: 10px; }
body.vx-skin .vx-wallet {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--vx-line);
    border-radius: 12px;
    background: var(--vx-card-2);
}
html[dir=rtl] body.vx-skin .vx-wallet { padding: 8px 12px 8px 8px; }
body.vx-skin .vx-wallet__name { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--vx-text) !important; font-size: 12px; font-weight: 700; }
body.vx-skin .vx-wallet__name svg { flex: none; }
body.vx-skin .vx-wallet__addr { font-size: 12px !important; background: var(--vx-card) !important; text-overflow: ellipsis; }
body.vx-skin .vx-wallet.is-empty .vx-wallet__name { color: var(--vx-muted) !important; }
body.vx-skin .vx-wallet.is-empty .vx-wallet__name svg { filter: grayscale(1); opacity: .6; }

body.vx-skin .vx-savebar {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 14px;
    box-shadow: var(--vx-pop);
}
body.vx-skin .vx-savebar .vx-save-btn { min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.vx-skin .vx-save-state { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; color: var(--vx-amber); font-size: 12px; font-weight: 600; }
body.vx-skin .vx-save-state.d-none { display: none !important; }
body.vx-skin .vx-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

body.vx-skin .vx-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--vx-accent-soft);
    border: 1px solid transparent;
    color: var(--vx-accent);
    font-size: 13px;
    font-weight: 600;
}

body.vx-skin .vx-about { text-align: center; padding: 40px 20px; }
body.vx-skin .vx-about__logo { width: 260px; max-width: 80%; height: auto; }
body.vx-skin .vx-about__name { margin: 20px 0 24px; font-size: 22px; font-weight: 700; color: var(--vx-text); }
body.vx-skin .vx-about__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
}
body.vx-skin .vx-about__facts > div { padding: 14px; border-radius: 12px; background: var(--vx-card-2); border: 1px solid var(--vx-line); }
body.vx-skin .vx-about__facts dt { color: var(--vx-muted); font-size: 11px; font-weight: 500; margin-bottom: 4px; }
body.vx-skin .vx-about__facts dd { margin: 0; color: var(--vx-text); font-size: 15px; font-weight: 700; }

@media (max-width: 1199.98px) {
    body.vx-skin .vx-settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    body.vx-skin .vx-set-card { padding: 14px; }
    body.vx-skin .vx-set-fields { gap: 10px; }
    body.vx-skin .vx-wallet { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px !important; }
    body.vx-skin .vx-about__facts { grid-template-columns: minmax(0, 1fr); }
    body.vx-skin .vx-savebar .vx-save-btn { flex: 1 1 auto; }
    body.vx-skin .vx-page-head .main-nav-container { width: 100%; }
}

/* ---------- Order result (new_order / edit_order) ---------- */
.vx-result { display: flex; justify-content: center; padding: 72px 16px 24px; text-align: center; }
.vx-result.d-none { display: none !important; }
.vx-result svg { margin: 0 !important; color: inherit; } /* style.css: .success_cmd svg, .fail_cmd svg { margin-top: 100px; color: green } */
.vx-result__card {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 24px 26px;
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 20px;
    box-shadow: var(--vx-pop);
    animation: vx-result-in .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.vx-result__icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vx-accent-soft);
    color: var(--vx-accent);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--vx-accent) 6%, transparent);
}
.vx-result.is-error .vx-result__icon {
    background: var(--vx-red-soft);
    color: var(--vx-red);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--vx-red) 6%, transparent);
}
.vx-result__icon svg { width: 56px; height: 56px; }
.vx-result__ring,
.vx-result__mark { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vx-result__ring { stroke-width: 2.5; opacity: .35; stroke-dasharray: 151; stroke-dashoffset: 151; animation: vx-draw .5s ease-out .1s forwards; }
.vx-result__mark { stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: vx-draw .35s ease-out .45s forwards; }
.vx-result__title { margin: 4px 0 0; color: var(--vx-text); font-size: 17px; font-weight: 700; white-space: normal !important; }
/* fills in the same 1.5s client.js waits before redirecting to /trade */
.vx-result__bar { width: 100%; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--vx-card-3); overflow: hidden; }
.vx-result__bar > i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--vx-accent); transform: scaleX(0); transform-origin: left; animation: vx-fill 1.5s linear .2s forwards; }
html[dir=rtl] .vx-result__bar > i { transform-origin: right; }

@keyframes vx-result-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vx-draw { to { stroke-dashoffset: 0; } }
@keyframes vx-fill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    .vx-result__card { animation: none; }
    .vx-result__ring, .vx-result__mark { animation: none; stroke-dashoffset: 0; }
    .vx-result__bar > i { animation-duration: 0s; animation-delay: 0s; }
}

/* ---------- Trade history timeline (admin modal #history_order) ---------- */
.vx-timeline { list-style: none; margin: 0; padding: 4px 0; position: relative; }
.vx-tl { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.vx-tl:last-child { padding-bottom: 0; }
/* connector line between dots */
.vx-tl:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 4px;
    inset-inline-start: 17px;
    width: 2px;
    border-radius: 2px;
    background: var(--vx-line);
}
.vx-tl__dot {
    --c: var(--vx-blue);
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    box-shadow: 0 0 0 4px var(--vx-card);
}
.vx-tl.is-close .vx-tl__dot { --c: var(--vx-muted); }
.vx-tl.is-stop .vx-tl__dot  { --c: var(--vx-red); }
.vx-tl__dot svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vx-tl.is-close .vx-tl__dot svg,
.vx-tl.is-stop .vx-tl__dot svg { border: 1.8px solid currentColor; border-radius: 50%; padding: 1px; width: 20px; height: 20px; }

.vx-tl__body {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    background: var(--vx-card-2);
    border: 1px solid var(--vx-line);
    border-radius: 12px;
}
.vx-tl__title { color: var(--vx-text); font-size: 14px; font-weight: 700; white-space: normal !important; }
.vx-tl__tag {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--vx-red-soft);
    color: var(--vx-red);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}
.vx-tl__change { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.vx-tl__old,
.vx-tl__new { padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vx-tl__old { background: var(--vx-card-3); color: var(--vx-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--vx-muted) 60%, transparent); }
.vx-tl__new { background: var(--vx-accent-soft); color: var(--vx-accent); }
.vx-tl__arrow { width: 16px; height: 16px; fill: none; stroke: var(--vx-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vx-tl__meta { margin-top: 6px; color: var(--vx-muted); font-size: 12px; white-space: normal !important; }
.vx-tl__meta b { color: var(--vx-text); font-weight: 600; }
.vx-tl__time { font-variant-numeric: tabular-nums; }
.vx-tl.is-open .vx-tl__dot  { --c: var(--vx-accent); }
.vx-tl.is-hedge .vx-tl__dot,
.vx-tl.is-warn .vx-tl__dot  { --c: var(--vx-amber); }
.vx-tl.is-warn .vx-tl__dot svg { border: 1.8px solid currentColor; border-radius: 50%; padding: 1px; width: 20px; height: 20px; }

/* ---------- Login / logout history (admin modal #history_order) ---------- */
.vx-logins__day {
    position: sticky;
    top: -16px; /* modal-body padding */
    z-index: 1;
    margin: 0 -4px 8px;
    padding: 6px 4px;
    background: var(--vx-card);
    color: var(--vx-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    text-align: start;
}
.vx-logins__list + .vx-logins__day { margin-top: 16px; }
.vx-logins__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vx-line);
    border-radius: 12px;
    overflow: hidden;
}
.vx-login {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--vx-card-2);
}
.vx-login + .vx-login { border-top: 1px solid var(--vx-line); }
.vx-login__ic {
    --c: var(--vx-accent);
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
}
.vx-login.is-logout .vx-login__ic { --c: var(--vx-red); }
/* icons as CSS masks: sent once, not repeated in every row */
.vx-login__ic::before,
.vx-login__chip::before { content: ""; display: block; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.vx-login__ic::before { width: 17px; height: 17px; }
.vx-login__chip::before { width: 12px; height: 12px; flex: none; }
.vx-login.is-login  .vx-login__ic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5l-5-5m5 5H3'/%3E%3C/svg%3E"); }
.vx-login.is-logout .vx-login__ic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4m7 14l5-5l-5-5m5 5H9'/%3E%3C/svg%3E"); }
html[dir=rtl] .vx-login__ic::before { transform: scaleX(-1); }
.vx-login__chip.is-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2h8a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m3 16h2'/%3E%3C/svg%3E"); }
.vx-login__chip.is-pc    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m4 16h8m-4-4v4'/%3E%3C/svg%3E"); }
.vx-login__chip.is-place { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.vx-logins__more { margin: 12px 0 0; color: var(--vx-muted); font-size: 12px; text-align: center; }
.vx-login__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vx-login__title { color: var(--vx-text); font-size: 13px; font-weight: 700; }
.vx-login__meta { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vx-login__ip,
.vx-login__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--vx-card-3);
    color: var(--vx-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* full IP (IPv6 included) — wraps instead of being cut */
.vx-login__ip { color: var(--vx-text); font-variant-numeric: tabular-nums; display: inline-block; white-space: normal !important; overflow-wrap: anywhere; }
.vx-login__time { flex: none; color: var(--vx-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* =========================================================
   Empty state — client.components.empty_state
   غير مقيّد بـ .vx-skin حتى يعمل على كل صفحات العميل
   ========================================================= */
.vx-es {
    --es-c: var(--vx-accent);
    --es-soft: var(--vx-accent-soft);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 520px;
    margin: 28px auto;
    padding: 36px 24px 32px;
    text-align: center;
    color: var(--vx-muted);
    background: var(--vx-card);
    border: 1px solid var(--vx-line);
    border-radius: 18px;
    box-shadow: var(--vx-shadow);
    animation: vx-es-in .5s cubic-bezier(.2, .7, .2, 1) both;
}
.vx-es--amber { --es-c: var(--vx-amber); --es-soft: var(--vx-amber-soft); }
.vx-es--red   { --es-c: var(--vx-red);   --es-soft: var(--vx-red-soft); }
.vx-es--blue  { --es-c: var(--vx-blue);  --es-soft: var(--vx-blue-soft); }

/* شبكة خفيفة توحي بلوحة الرسم البياني , تتلاشى نحو الأطراف */
.vx-es::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--vx-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--vx-line) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center -1px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);
    opacity: .7;
    pointer-events: none;
}

.vx-es-art {
    position: relative;
    width: 150px;
    height: 150px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--es-soft), transparent);
}
.vx-es-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed var(--vx-line-strong);
    animation: vx-es-spin 36s linear infinite;
}
.vx-es-ring--in { inset: 22px; border-style: solid; border-color: var(--vx-line); animation-duration: 24s; animation-direction: reverse; }
/* نقاط تدور على المدار : لون الحالة + أحمر/أخضر للإيحاء بالسوق */
.vx-es-ring::before,
.vx-es-ring::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--es-c);
    box-shadow: 0 0 0 4px var(--es-soft), 0 0 12px var(--es-c);
}
.vx-es-ring::before { top: -4px; left: calc(50% - 4px); }
.vx-es-ring::after { bottom: 14%; right: 4%; width: 6px; height: 6px; background: var(--vx-red); box-shadow: 0 0 0 3px var(--vx-red-soft); }
.vx-es-ring--in::before { top: auto; bottom: -3px; left: 20%; width: 6px; height: 6px; background: var(--vx-accent); box-shadow: 0 0 0 3px var(--vx-accent-soft); }
.vx-es-ring--in::after { display: none; }

.vx-es-ic {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--es-c);
    background: linear-gradient(145deg, var(--vx-card-3), var(--vx-card));
    border: 1px solid var(--vx-line-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 16px 32px -14px var(--es-c);
    animation: vx-es-float 4.5s ease-in-out infinite;
}
.vx-es-ic svg { width: 32px; height: 32px; }

.vx-es-body { display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.vx-es-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--vx-text);
    white-space: normal !important;
}
.vx-es-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--vx-muted);
    white-space: normal !important;
}

.vx-es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vx-accent-ink) !important;
    background: var(--vx-accent);
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.vx-es-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 22px -10px var(--vx-accent); }
.vx-es-btn:active { transform: scale(.97); }
.vx-es-btn:focus-visible { outline: 2px solid var(--vx-accent) !important; outline-offset: 2px; }

/* داخل بطاقة موجودة : بدون إطار أو خلفية */
.vx-es--bare {
    margin: auto;
    padding: 16px 8px;
    background: none;
    border: 0;
    box-shadow: none;
    max-width: none;
}
.vx-es--bare::before { display: none; }

/* سطر مضغوط : أيقونة + نص + زر */
.vx-es--row {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    max-width: none;
    margin: 0;
    padding: 12px 14px;
    text-align: start;
    background: var(--vx-card-2);
    border-style: dashed;
    border-color: var(--vx-line-strong);
    box-shadow: none;
}
.vx-es--row::before { display: none; }
.vx-es--row .vx-es-art { width: auto; height: auto; background: none; }
.vx-es--row .vx-es-ring { display: none; }
.vx-es--row .vx-es-ic { width: 44px; height: 44px; border-radius: 13px; animation: none; box-shadow: none; }
.vx-es--row .vx-es-ic svg { width: 22px; height: 22px; }
.vx-es--row .vx-es-body { flex: 1; min-width: 0; }
.vx-es--row .vx-es-title { font-size: 14px; font-weight: 600; }
.vx-es--row .vx-es-btn { height: 34px; padding: 0 14px; font-size: 12px; flex: none; }

@media (max-width: 575.98px) {
    .vx-es { margin: 18px auto; padding: 28px 16px 24px; gap: 14px; border-radius: 16px; }
    .vx-es-art { width: 124px; height: 124px; }
    .vx-es-ring--in { inset: 18px; }
    .vx-es-ic { width: 58px; height: 58px; border-radius: 17px; }
    .vx-es-ic svg { width: 28px; height: 28px; }
    .vx-es-title { font-size: 15px; }
    .vx-es-text { font-size: 12px; }
    .vx-es--row { padding: 10px 12px; gap: 10px; }
    .vx-es--row .vx-es-btn svg { display: none; }
}

@keyframes vx-es-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vx-es-spin { to { transform: rotate(360deg); } }
@keyframes vx-es-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
    .vx-es, .vx-es-ring, .vx-es-ic { animation: none !important; }
}