:root {
    --bg: #050816;
    --bg-soft: #0b1220;
    --line: rgba(255,255,255,0.11);
    --text: #eef4ff;
    --muted: #9fb0c9;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #2563EB;
    --shadow: 0 30px 100px rgba(0,0,0,0.42);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    background:
        radial-gradient(circle at 18% 12%, rgba(59,130,246,0.30), transparent 28rem),
        radial-gradient(circle at 82% 18%, rgba(139,92,246,0.22), transparent 30rem),
        linear-gradient(135deg, var(--bg), var(--bg-soft));
    color: var(--text);
}

a { color: inherit; text-decoration: none; }

.topbar {
    min-height: 78px;
    padding: 0 42px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: rgba(5,8,22,0.82);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.nav-spacer { justify-self: start; }

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-centre { justify-self: center; }

.brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 900;
}

.yellow-glow-brand {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(250,204,21,0.09);
    border: 1px solid rgba(250,204,21,0.35);
    box-shadow: 0 0 18px rgba(250,204,21,0.35), 0 0 42px rgba(250,204,21,0.18);
}

.yellow-glow-brand strong {
    color: #FFFFFF;
    font-size: 19px;
    text-shadow: 0 0 8px rgba(250,204,21,0.85);
}

.yellow-brand-mark {
    background: linear-gradient(135deg, #2563EB, #f59e0b, #f97316);
    color: #111827;
}

.nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-right { justify-self: end; }

.nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
}

.nav a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.07);
}

.nav-pill {
    color: white !important;
    background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
}

.hero {
    min-height: calc(100vh - 78px);
    display: grid;
    place-items: center;
    padding: 72px 24px;
}

.hero-grid {
    width: min(1180px,100%);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 54px;
    align-items: center;
}

.badge {
    width: fit-content;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    font-size: 13px;
    font-weight: 800;
}

.badge span {
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--green);
    box-shadow: 0 0 22px var(--green);
}

.hero-copy h1 {
    max-width: 760px;
    margin: 24px 0 20px;
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.hero-copy p {
    max-width: 660px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.hero-actions, .button-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-actions { margin-top: 34px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 900;
    cursor: pointer;
    color: white;
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--purple));
}

.btn-secondary {
    background: rgba(255,255,255,0.07);
    border-color: var(--line);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.btn-small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.full { width: 100%; }

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 36px;
    max-width: 640px;
}

.stats-row div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--line);
}

.stats-row span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.terminal-card {
    padding: 22px;
    border-radius: 28px;
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.terminal-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.terminal-dots span {
    width: 11px;
    height: 11px;
    border-radius: 99px;
}

.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #f59e0b; }
.terminal-dots span:nth-child(3) { background: #22c55e; }

.status-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(2,6,23,0.55);
}

.status-card strong { font-size: 28px; }

.status-card span {
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(34,197,94,0.14);
    color: #bbf7d0;
    font-weight: 900;
    font-size: 12px;
}

.chart {
    margin: 28px 0;
    height: 190px;
    display: flex;
    gap: 13px;
    align-items: end;
    padding: 18px;
    border-radius: 24px;
    background: rgba(2,6,23,0.45);
    border: 1px solid var(--line);
}

.chart i {
    flex: 1;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #22d3ee, #3b82f6);
}

.section, .page-title, .card, .result-card {
    width: min(1180px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.section {
    padding: 76px 0 88px;
}

.section-heading h2 {
    margin: 10px 0 0;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.section-heading span {
    color: #22d3ee;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
}

.feature-grid, .dashboard-grid, .pro-kpis, .pro-actions-grid {
    display: grid;
    gap: 22px;
}

.feature-grid { grid-template-columns: repeat(3,1fr); }
.dashboard-grid { grid-template-columns: repeat(2,1fr); }
.pro-kpis { grid-template-columns: repeat(4,1fr); margin: 22px 0; }
.pro-actions-grid { grid-template-columns: repeat(2,1fr); }

.feature-card, .card, .auth-card, .pro-card, .pro-result-panel {
    padding: 28px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.055);
    box-shadow: 0 20px 70px rgba(0,0,0,0.22);
}

.feature-number {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(59,130,246,0.15);
    color: #bfdbfe;
    font-weight: 900;
    margin-bottom: 18px;
}

.footer {
    border-top: 1px solid var(--line);
    padding: 30px 24px;
    color: var(--muted);
    text-align: center;
    background: rgba(5,8,22,0.62);
}

.footer strong {
    color: #FFFFFF;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(250,204,21,0.75);
}

.auth-shell {
    min-height: calc(100vh - 78px);
    display: grid;
    place-items: center;
    padding: 42px 16px;
}

.auth-card {
    width: min(460px, calc(100% - 32px));
}

.change-password-card {
    width: min(520px, calc(100% - 32px));
}

label {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    font-weight: 800;
    color: #dbeafe;
}

input, select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    background: rgba(2,6,23,0.58);
    color: var(--text);
    border-radius: 14px;
    padding: 0 14px;
    outline: none;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox input {
    width: auto;
    min-height: auto;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin: 18px auto;
    width: min(1180px, calc(100% - 32px));
    border: 1px solid var(--line);
}

.alert-success {
    background: rgba(34,197,94,0.13);
    color: #bbf7d0;
}

.alert-danger {
    background: rgba(239,68,68,0.13);
    color: #fecaca;
}

.page-title {
    margin-top: 42px;
    margin-bottom: 18px;
}

.page-title h1 {
    margin: 0;
    font-size: 44px;
    letter-spacing: -0.04em;
}

.pro-dashboard {
    width: min(1520px, calc(100% - 28px));
    margin: 26px auto 46px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 22px;
    align-items: start;
}

.pro-sidebar {
    position: sticky;
    top: 98px;
    min-height: calc(100vh - 130px);
    padding: 20px;
    border-radius: 26px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(8,18,38,0.98), rgba(3,7,18,0.98));
    box-shadow: var(--shadow);
}

.side-profile {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.055);
    border: 1px solid var(--line);
}

.side-avatar {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #111827;
    font-weight: 950;
    background: linear-gradient(135deg, #2563EB, #f59e0b);
}

.side-profile span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.side-menu {
    display: grid;
    gap: 8px;
    margin: 22px 0;
}

.side-menu a {
    padding: 12px 14px;
    border-radius: 14px;
    color: #a9b7cc;
    font-weight: 850;
    border: 1px solid transparent;
}

.side-menu a:hover,
.side-menu a.active {
    color: #FFFFFF;
    background: rgba(250,204,21,0.075);
    border-color: rgba(250,204,21,0.22);
}

.side-status {
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(250,204,21,0.28);
    background: rgba(250,204,21,0.075);
}

.side-status span {
    display: block;
    color: #fde68a;
    font-weight: 950;
    margin-bottom: 6px;
}

.side-status strong {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}

.pro-hero-panel {
    padding: 28px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(15,23,42,0.86), rgba(2,6,23,0.88));
    box-shadow: 0 28px 90px rgba(0,0,0,0.32);
}

.dash-eyebrow {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    color: #fde68a;
    background: rgba(250,204,21,0.075);
    border: 1px solid rgba(250,204,21,0.24);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.pro-hero-panel h1 {
    margin: 15px 0 8px;
    font-size: clamp(34px, 4vw, 58px);
    letter-spacing: -0.055em;
    line-height: 0.96;
}

.pro-hero-panel p {
    margin: 0;
    color: var(--muted);
    max-width: 720px;
    line-height: 1.65;
}

.confidence-ring {
    width: 152px;
    height: 152px;
    flex: 0 0 152px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, #0b1220 57%, transparent 58%),
        conic-gradient(#22c55e 0 72%, #2563EB 72% 90%, rgba(255,255,255,0.10) 90% 100%);
}

.confidence-ring div { text-align: center; }

.confidence-ring strong {
    display: block;
    font-size: 32px;
}

.confidence-ring span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.pro-kpis article {
    padding: 19px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.055);
}

.pro-kpis span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.pro-kpis strong {
    display: block;
    margin-top: 8px;
    font-size: 26px;
}

.positive { color: #86efac !important; }
.warning { color: #fde68a !important; }

.card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.card-head h2 {
    margin: 0;
    font-size: 21px;
}

.card-head span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.20);
    font-size: 12px;
    font-weight: 850;
}

.account-monitor-card {
    grid-column: span 2;
}

.wallet-query-grid, .form-grid, .pro-inline-form {
    display: grid;
    gap: 14px;
}

.wallet-query-grid, .form-grid {
    grid-template-columns: 1fr 1fr;
}

.pro-inline-form {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
}

.embedded-wallet-panel {
    margin-top: 24px;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(250,204,21,0.28);
    background: rgba(2,6,23,0.42);
}

.wallet-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wallet-overview-grid article {
    padding: 17px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(2,6,23,0.55);
}

.wallet-overview-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
}

.wallet-overview-grid strong {
    display: block;
    margin-top: 8px;
    color: #fef3c7;
    font-size: 22px;
    overflow-wrap: anywhere;
}

.wallet-coin-table-wrap, .table-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
}

table {
    width: 100%;
    border-collapse: collapse;
}

.wallet-coin-table {
    min-width: 720px;
}

th, td {
    padding: 14px 13px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-align: left;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(2,6,23,0.45);
}

td { color: #e5e7eb; }

.wallet-coin-table td strong {
    color: #2563EB;
}

.wallet-empty-note {
    padding: 16px;
    border-radius: 16px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.22);
    color: #fecaca;
    line-height: 1.55;
}

pre {
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(2,6,23,0.72);
    overflow: auto;
    color: #dbeafe;
}

.pill, .status {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.pill {
    background: rgba(59,130,246,0.16);
    color: #bfdbfe;
}

.status.good {
    background: rgba(34,197,94,0.15);
    color: #bbf7d0;
}

.status.bad {
    background: rgba(239,68,68,0.15);
    color: #fecaca;
}

.wallet-status-connected,
.wallet-status-disconnected {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.wallet-status-connected {
    background: rgba(34,197,94,0.14) !important;
    border: 1px solid rgba(34,197,94,0.34) !important;
    color: #bbf7d0 !important;
}

.wallet-status-disconnected {
    background: rgba(239,68,68,0.14) !important;
    border: 1px solid rgba(239,68,68,0.34) !important;
    color: #fecaca !important;
}

.wallet-status-connected::before,
.wallet-status-disconnected::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.wallet-status-connected::before {
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34,197,94,0.85);
}

.wallet-status-disconnected::before {
    background: #ef4444;
    box-shadow: 0 0 12px rgba(239,68,68,0.85);
}

.api-connection-hidden {
    display: none !important;
}

.api-connection-visible {
    display: block !important;
    animation: apiConnectionReveal 0.28s ease-out;
}

@keyframes apiConnectionReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.api-connection-saved-banner {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(34,197,94,0.28);
    background: rgba(34,197,94,0.10);
    color: #bbf7d0;
}

.api-connection-saved-banner button {
    width: fit-content;
    margin-top: 6px;
    border: 1px solid rgba(34,197,94,0.32);
    background: rgba(2,6,23,0.45);
    color: #bbf7d0;
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    font-weight: 850;
}

.api-secret-saved-note {
    display: block;
    margin-top: 7px;
    color: #86efac;
    font-size: 12px;
    font-weight: 800;
}

.password-rules {
    margin: 18px 0;
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(250,204,21,0.24);
    background: rgba(250,204,21,0.07);
    color: #fef3c7;
}

.password-rules strong {
    display: block;
    margin-bottom: 8px;
    color: #fde68a;
}

.password-rules ul {
    margin: 0;
    padding-left: 20px;
}

.password-rules li {
    margin: 5px 0;
    color: #e5e7eb;
}

.terms-lock { overflow: hidden; }

.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.terms-modal.is-visible {
    display: flex;
}

.terms-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,0.86);
    backdrop-filter: blur(16px);
}

.terms-dialog {
    position: relative;
    width: min(670px,100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 26px;
    border-radius: 18px;
    border: 1px solid rgba(250,204,21,0.42);
    background: linear-gradient(180deg, rgba(15,23,42,0.98), rgba(3,7,18,0.98));
    box-shadow: var(--shadow);
}

.terms-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.terms-warning {
    color: #fbbf24;
    font-size: 28px;
}

.terms-heading h2 {
    margin: 0;
    color: #fde68a;
}

.terms-content {
    color: #dbe4f0;
    font-size: 15.5px;
    line-height: 1.58;
}

.terms-check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(250,204,21,0.24);
    background: rgba(250,204,21,0.06);
    color: #fef3c7;
    cursor: pointer;
}

.terms-check-row input {
    width: 19px;
    min-height: 19px;
    height: 19px;
    accent-color: #f59e0b;
}

.terms-agree {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #f97316);
    color: #111827;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
}

.terms-agree:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

@media (max-width: 1180px) {
    .pro-dashboard { grid-template-columns: 1fr; }
    .pro-sidebar { position: relative; top: auto; min-height: auto; }
    .side-menu { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 920px) {
    .hero-grid,
    .feature-grid,
    .dashboard-grid,
    .pro-actions-grid,
    .pro-kpis,
    .wallet-query-grid,
    .wallet-overview-grid,
    .form-grid,
    .pro-inline-form,
    .stats-row {
        grid-template-columns: 1fr;
    }

    .account-monitor-card { grid-column: span 1; }

    .topbar {
        height: auto;
        padding: 18px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .brand-centre,
    .nav-right {
        justify-self: start;
    }

    .nav {
        flex-wrap: wrap;
    }
}
/* ==========================================================
   Tether balance display
   ========================================================== */

.wallet-overview-grid-clean {
    margin-bottom: 0;
}

.tether-amount {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #FFFFFF !important;
}

.tether-logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45), transparent 30%),
        linear-gradient(135deg, #26a17b, #16a34a);
    color: white;
    font-size: 19px;
    font-weight: 950;
    line-height: 1;
    box-shadow:
        0 0 14px rgba(38, 161, 123, 0.55),
        inset 0 0 0 1px rgba(255,255,255,0.25);
}

/* ==========================================================
   Real Tether SVG balance logo
   ========================================================== */

.tether-amount {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #FFFFFF !important;
    line-height: 1.15;
}

.tether-logo-img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-block;
    object-fit: contain;
    border-radius: 999px;
    filter:
        drop-shadow(0 0 7px rgba(0, 147, 147, 0.62))
        drop-shadow(0 0 14px rgba(38, 161, 123, 0.34));
}

/* Hide the older text-based circle if it appears from cache/old markup */
.tether-logo {
    display: none !important;
}

/* ==========================================================
   Larger, brighter wallet balance figures
   ========================================================== */

.embedded-wallet-panel {
    padding: 26px !important;
}

.wallet-overview-grid article {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 60%),
        rgba(2, 6, 23, 0.72) !important;
    border-color: rgba(250, 204, 21, 0.18) !important;
}

.wallet-overview-grid span {
    color: #b7d1ff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: 0.075em !important;
}

.wallet-overview-grid strong {
    margin-top: 14px !important;
    color: #FFFFFF !important;
    font-size: clamp(30px, 2.4vw, 46px) !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;
    line-height: 1 !important;
    text-shadow:
        0 0 10px rgba(250, 204, 21, 0.72),
        0 0 24px rgba(250, 204, 21, 0.38),
        0 0 44px rgba(250, 204, 21, 0.18) !important;
}

.tether-amount {
    gap: 13px !important;
    color: #FFFFFF !important;
    text-shadow:
        0 0 10px rgba(250, 204, 21, 0.72),
        0 0 24px rgba(250, 204, 21, 0.38),
        0 0 44px rgba(250, 204, 21, 0.18) !important;
}

.tether-amount span:last-child {
    color: #FFFFFF !important;
    font-size: clamp(30px, 2.4vw, 46px) !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;
    line-height: 1 !important;
}

.tether-logo-img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    filter:
        drop-shadow(0 0 9px rgba(0, 147, 147, 0.85))
        drop-shadow(0 0 18px rgba(38, 161, 123, 0.55))
        drop-shadow(0 0 30px rgba(38, 161, 123, 0.25)) !important;
}

@media (max-width: 920px) {
    .wallet-overview-grid strong,
    .tether-amount span:last-child {
        font-size: 34px !important;
    }

    .tether-logo-img {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
}

/* ==========================================================
   Wallet balances fit on one line
   ========================================================== */

.wallet-overview-grid article {
    overflow: hidden !important;
}

.wallet-overview-grid strong,
.tether-amount,
.tether-amount span:last-child {
    white-space: nowrap !important;
}

.tether-amount {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.tether-amount span:last-child {
    display: inline-block !important;
    max-width: calc(100% - 36px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(23px, 1.65vw, 34px) !important;
    line-height: 1.05 !important;
}

.wallet-overview-grid strong {
    font-size: clamp(25px, 1.85vw, 36px) !important;
    line-height: 1.05 !important;
}

.tether-logo-img {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
}

@media (max-width: 1200px) {
    .tether-amount span:last-child {
        font-size: clamp(21px, 1.45vw, 30px) !important;
    }

    .wallet-overview-grid strong {
        font-size: clamp(23px, 1.6vw, 32px) !important;
    }

    .tether-logo-img {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }
}

@media (max-width: 920px) {
    .tether-amount span:last-child,
    .wallet-overview-grid strong {
        font-size: 30px !important;
    }

    .tether-logo-img {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }
}

/* ==========================================================
   Admin E2EE key setup
   ========================================================== */

.e2ee-admin-key-card {
    margin-top: 24px;
    border-color: rgba(34, 211, 238, 0.28);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 28rem),
        rgba(255,255,255,0.055);
}

.e2ee-intro {
    color: #9fb0c9;
    line-height: 1.62;
    margin: 0 0 18px;
}

.e2ee-key-status {
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.10);
    color: #bbf7d0;
}

.e2ee-key-status strong {
    color: #dcfce7;
}

.e2ee-key-status span {
    color: #a7f3d0;
    font-size: 13px;
}

.e2ee-admin-key-form {
    margin-top: 10px;
}

.e2ee-status {
    margin: 14px 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.56);
    color: #cbd5e1;
    font-weight: 800;
}

.e2ee-status.is-success {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.10);
    color: #bbf7d0;
}

.e2ee-status.is-error {
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.10);
    color: #fecaca;
}

.e2ee-warning {
    margin: 16px 0 0;
    color: #fde68a;
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================================
   E2EE admin message popup
   ========================================================== */

.e2ee-message-launcher {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 121;
}

.e2ee-message-button {
    min-height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.38);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.24), transparent 55%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    color: #cffafe;
    font-weight: 950;
    cursor: pointer;
    box-shadow:
        0 0 24px rgba(34, 211, 238, 0.20),
        0 18px 42px rgba(0, 0, 0, 0.38);
}

.e2ee-message-button:hover {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.70);
}

.e2ee-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.e2ee-admin-modal.is-visible {
    display: flex;
}

.e2ee-admin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(16px);
}

.e2ee-admin-dialog {
    position: relative;
    width: min(620px, 100%);
    padding: 26px;
    border-radius: 26px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 32rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 0 36px rgba(34, 211, 238, 0.12),
        0 34px 100px rgba(0, 0, 0, 0.56);
}

.e2ee-admin-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.e2ee-admin-head span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.26);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.e2ee-admin-head h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 28px;
    letter-spacing: -0.045em;
}

.e2ee-admin-close {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.e2ee-admin-copy {
    margin: 0 0 18px;
    color: #9fb0c9;
    line-height: 1.55;
}

.e2ee-admin-form textarea {
    min-height: 170px;
    resize: vertical;
    width: 100%;
    border: 1px solid var(--line);
    background: rgba(2,6,23,0.58);
    color: var(--text);
    border-radius: 14px;
    padding: 14px;
    outline: none;
    font-family: inherit;
}

.e2ee-message-status {
    margin: 14px 0;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.56);
    color: #cbd5e1;
    font-weight: 800;
}

.e2ee-message-status.is-ready {
    border-color: rgba(34, 211, 238, 0.34);
    background: rgba(34, 211, 238, 0.10);
    color: #a5f3fc;
}

.e2ee-message-status.is-working {
    border-color: rgba(250, 204, 21, 0.34);
    background: rgba(250, 204, 21, 0.10);
    color: #fde68a;
}

.e2ee-message-status.is-success {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.10);
    color: #bbf7d0;
}

.e2ee-message-status.is-error {
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.10);
    color: #fecaca;
}

.e2ee-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

@media (max-width: 720px) {
    .e2ee-message-launcher {
        right: 14px;
        bottom: 76px;
    }

    .e2ee-message-button {
        min-height: 46px;
        padding: 0 14px;
        font-size: 13px;
    }

    .e2ee-admin-dialog {
        padding: 20px;
    }

    .e2ee-admin-head h2 {
        font-size: 23px;
    }
}

/* ==========================================================
   Admin E2EE browser decryption inbox
   ========================================================== */

.e2ee-admin-inbox-card {
    margin-top: 24px;
    border-color: rgba(34, 211, 238, 0.26);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 28rem),
        rgba(255,255,255,0.055);
}

.e2ee-inbox-unlock {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: end;
    margin: 18px 0;
}

.e2ee-inbox-status {
    margin: 14px 0 18px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.56);
    color: #cbd5e1;
    font-weight: 800;
}

.e2ee-inbox-status.is-working {
    border-color: rgba(250, 204, 21, 0.34);
    background: rgba(250, 204, 21, 0.10);
    color: #fde68a;
}

.e2ee-inbox-status.is-success {
    border-color: rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.10);
    color: #bbf7d0;
}

.e2ee-inbox-status.is-error {
    border-color: rgba(239, 68, 68, 0.34);
    background: rgba(239, 68, 68, 0.10);
    color: #fecaca;
}

.e2ee-inbox-list {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.e2ee-inbox-item {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.06), transparent 24rem),
        rgba(2, 6, 23, 0.48);
}

.e2ee-inbox-meta {
    display: grid;
    gap: 5px;
    margin-bottom: 13px;
}

.e2ee-inbox-meta strong {
    color: #cffafe;
    font-size: 17px;
}

.e2ee-inbox-meta span {
    color: #9fb0c9;
    font-size: 13px;
    line-height: 1.45;
}

.e2ee-decrypted-output {
    margin: 14px 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    background: rgba(15, 23, 42, 0.42);
    color: #94a3b8;
    line-height: 1.6;
}

.e2ee-decrypted-output.is-decrypted {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.08);
    color: #e5e7eb;
}

.e2ee-decrypted-output h4 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 18px;
}

.e2ee-decrypted-output small {
    display: block;
    color: #a7f3d0;
    margin-bottom: 12px;
}

.e2ee-decrypted-output p {
    margin: 0;
    white-space: pre-wrap;
}

@media (max-width: 760px) {
    .e2ee-inbox-unlock {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   E2EE decrypted message popup
   ========================================================== */

.e2ee-decrypt-popup-lock {
    overflow: hidden;
}

.e2ee-decrypt-popup {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.e2ee-decrypt-popup.is-visible {
    display: flex;
}

.e2ee-decrypt-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.84);
    backdrop-filter: blur(18px);
}

.e2ee-decrypt-popup-dialog {
    position: relative;
    width: min(720px, calc(100% - 24px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 26px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.11), transparent 30rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 0 42px rgba(34, 211, 238, 0.16),
        0 34px 100px rgba(0, 0, 0, 0.58);
}

.e2ee-decrypt-popup-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.e2ee-decrypt-popup-head span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.26);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.e2ee-decrypt-popup-head h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 28px;
    letter-spacing: -0.045em;
}

.e2ee-decrypt-popup-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.e2ee-decrypt-popup-content {
    padding: 22px 24px 24px;
    overflow: auto;
    color: #e5e7eb;
    line-height: 1.65;
}

.e2ee-decrypt-popup-content h4 {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-size: 23px;
    letter-spacing: -0.025em;
}

.e2ee-decrypt-popup-content small {
    display: block;
    color: #a7f3d0;
    margin-bottom: 18px;
}

.e2ee-decrypt-popup-content p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 16px;
}

.e2ee-popup-inline-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
    color: #bbf7d0;
    font-weight: 800;
}

.e2ee-decrypted-output.is-decrypted {
    min-height: auto;
}

@media (max-width: 720px) {
    .e2ee-decrypt-popup {
        padding: 14px;
    }

    .e2ee-decrypt-popup-dialog {
        width: 100%;
        max-height: calc(100vh - 28px);
    }

    .e2ee-decrypt-popup-head {
        padding: 20px 18px 14px;
    }

    .e2ee-decrypt-popup-content {
        padding: 18px;
    }

    .e2ee-decrypt-popup-head h2 {
        font-size: 23px;
    }

    .e2ee-popup-inline-notice {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   Collapsible E2EE inbox messages
   ========================================================== */

.e2ee-inbox-item {
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.e2ee-inbox-item.is-collapsed {
    padding-bottom: 14px;
}

.e2ee-inbox-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    align-items: center;
}

.e2ee-inbox-meta strong,
.e2ee-inbox-meta span {
    grid-column: 1;
}

.e2ee-inbox-collapse-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.e2ee-inbox-collapse-toggle {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.30);
    background: rgba(15, 23, 42, 0.78);
    color: #cffafe;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.e2ee-inbox-collapse-toggle:hover {
    border-color: rgba(34, 211, 238, 0.62);
    background: rgba(34, 211, 238, 0.10);
}

.e2ee-inbox-collapsible-body {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.e2ee-inbox-item.is-collapsed .e2ee-inbox-collapsible-body {
    display: none;
}

.e2ee-inbox-item.is-collapsed {
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.04), transparent 18rem),
        rgba(2, 6, 23, 0.42);
}

.e2ee-inbox-item:not(.is-collapsed) {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.06),
        0 18px 40px rgba(0, 0, 0, 0.22);
}

@media (max-width: 720px) {
    .e2ee-inbox-meta {
        grid-template-columns: 1fr;
    }

    .e2ee-inbox-collapse-controls {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

/* ==========================================================
   Collapsible Admin E2EE Browser Decryption Inbox section
   ========================================================== */

.e2ee-admin-inbox-card {
    overflow: hidden;
}

.e2ee-admin-inbox-card .card-head {
    align-items: center;
}

.e2ee-inbox-section-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.e2ee-inbox-section-toggle {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 55%),
        rgba(15, 23, 42, 0.82);
    color: #cffafe;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.e2ee-inbox-section-toggle:hover {
    border-color: rgba(34, 211, 238, 0.70);
    background: rgba(34, 211, 238, 0.12);
}

.e2ee-inbox-section-body {
    display: block;
    margin-top: 16px;
}

.e2ee-admin-inbox-card.is-section-collapsed .e2ee-inbox-section-body {
    display: none;
}

.e2ee-admin-inbox-card.is-section-collapsed {
    padding-bottom: 22px;
}

.e2ee-admin-inbox-card.is-section-collapsed .card-head {
    margin-bottom: 0;
}

.e2ee-admin-inbox-card.is-section-collapsed {
    border-color: rgba(34, 211, 238, 0.18);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.05), transparent 24rem),
        rgba(255,255,255,0.045);
}

@media (max-width: 720px) {
    .e2ee-admin-inbox-card .card-head {
        display: grid;
        gap: 12px;
    }

    .e2ee-inbox-section-controls {
        justify-content: flex-start;
    }
}

/* ==========================================================
   Collapsible Recent Audit Logs section
   ========================================================== */

.audit-logs-card {
    overflow: hidden;
}

.audit-logs-collapse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.audit-logs-collapse-head h2 {
    margin: 0;
}

.audit-logs-collapse-toggle {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.34);
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 55%),
        rgba(15, 23, 42, 0.82);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.audit-logs-collapse-toggle:hover {
    border-color: rgba(250, 204, 21, 0.70);
    background: rgba(250, 204, 21, 0.12);
}

.audit-logs-collapse-body {
    display: block;
}

.audit-logs-card.is-audit-collapsed .audit-logs-collapse-body {
    display: none;
}

.audit-logs-card.is-audit-collapsed {
    padding-bottom: 22px;
    border-color: rgba(250, 204, 21, 0.16);
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.045), transparent 24rem),
        rgba(255,255,255,0.045);
}

.audit-logs-card.is-audit-collapsed .audit-logs-collapse-head {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .audit-logs-collapse-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   Collapsible Users section
   ========================================================== */

.users-section-card {
    overflow: hidden;
}

.users-section-collapse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.users-section-collapse-head h2 {
    margin: 0;
}

.users-section-collapse-toggle {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, 0.38);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.18), transparent 55%),
        rgba(15, 23, 42, 0.82);
    color: #ddd6fe;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.users-section-collapse-toggle:hover {
    border-color: rgba(139, 92, 246, 0.75);
    background: rgba(139, 92, 246, 0.14);
}

.users-section-collapse-body {
    display: block;
}

.users-section-card.is-users-collapsed .users-section-collapse-body {
    display: none;
}

.users-section-card.is-users-collapsed {
    padding-bottom: 22px;
    border-color: rgba(139, 92, 246, 0.18);
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.055), transparent 24rem),
        rgba(255,255,255,0.045);
}

.users-section-card.is-users-collapsed .users-section-collapse-head {
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .users-section-collapse-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   E2EE admin setup + inbox side-by-side layout
   ========================================================== */

.e2ee-admin-two-col-grid {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.e2ee-admin-two-col-grid > .card,
.e2ee-admin-two-col-grid > .result-card,
.e2ee-admin-two-col-grid > .e2ee-two-col-item {
    width: auto !important;
    margin: 0 !important;
}

.e2ee-admin-two-col-grid .e2ee-admin-key-card,
.e2ee-admin-two-col-grid .e2ee-admin-inbox-card {
    min-width: 0;
    align-self: start;
}

.e2ee-admin-two-col-grid .e2ee-admin-inbox-card {
    margin-top: 0 !important;
}

/* Make the two-column E2EE cards a little more compact */
.e2ee-admin-two-col-grid .card-head h2 {
    font-size: 19px;
}

.e2ee-admin-two-col-grid .e2ee-intro {
    font-size: 14px;
}

/* Keep large tables/messages from forcing the grid wider */
.e2ee-admin-two-col-grid .table-wrap,
.e2ee-admin-two-col-grid .e2ee-inbox-list,
.e2ee-admin-two-col-grid .e2ee-inbox-item,
.e2ee-admin-two-col-grid .e2ee-decrypted-output {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 1100px) {
    .e2ee-admin-two-col-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Admin Create User / Users / Risk Settings layout
   ========================================================== */

.admin-user-settings-grid {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
    gap: 22px;
    align-items: start;
}

.admin-user-settings-left,
.admin-user-settings-right {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.admin-user-settings-grid > div > .card,
.admin-user-settings-grid > div > .result-card,
.admin-user-settings-grid .admin-layout-card {
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
}

.admin-user-settings-grid .users-section-card {
    align-self: start;
}

.admin-user-settings-grid .table-wrap {
    max-width: 100%;
    min-width: 0;
}

/* Make the right-side Users table comfortable but compact */
.admin-user-settings-grid .users-section-card table {
    font-size: 14px;
}

.admin-user-settings-grid .users-section-card th,
.admin-user-settings-grid .users-section-card td {
    padding: 12px 11px;
}

@media (max-width: 1100px) {
    .admin-user-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Master admin layout
   E2EE setup + Create User + Risk Settings on left,
   E2EE Inbox + Users on right
   ========================================================== */

.admin-master-layout-grid {
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
    gap: 22px;
    align-items: start;
}

.admin-master-layout-left,
.admin-master-layout-right {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.admin-master-layout-grid > div > .card,
.admin-master-layout-grid > div > .result-card,
.admin-master-layout-card {
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
}

.admin-master-layout-grid .table-wrap,
.admin-master-layout-grid .e2ee-inbox-list,
.admin-master-layout-grid .e2ee-inbox-item,
.admin-master-layout-grid .e2ee-decrypted-output {
    max-width: 100%;
    min-width: 0;
}

/* Keep right-column tables compact enough to sit beside forms */
.admin-master-layout-grid .users-section-card table {
    font-size: 14px;
}

.admin-master-layout-grid .users-section-card th,
.admin-master-layout-grid .users-section-card td {
    padding: 12px 11px;
}

/* Avoid old layout wrappers creating extra width/margins */
.admin-master-layout-grid .e2ee-admin-key-card,
.admin-master-layout-grid .e2ee-admin-inbox-card,
.admin-master-layout-grid .users-section-card {
    align-self: start;
}

@media (max-width: 1100px) {
    .admin-master-layout-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Final uniform admin layout
   ========================================================== */

.admin-final-uniform-layout-grid {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 28px auto 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.admin-final-layout-left,
.admin-final-layout-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    min-width: 0 !important;
    align-items: start !important;
}

.admin-final-layout-card,
.admin-final-uniform-layout-grid .card,
.admin-final-uniform-layout-grid .result-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.admin-final-uniform-layout-grid .card-head {
    width: 100% !important;
    gap: 12px !important;
}

.admin-final-uniform-layout-grid input,
.admin-final-uniform-layout-grid select,
.admin-final-uniform-layout-grid textarea {
    width: 100% !important;
    max-width: 100% !important;
}

.admin-final-uniform-layout-grid .form-grid {
    grid-template-columns: 1fr 1fr !important;
}

.admin-final-uniform-layout-grid .table-wrap,
.admin-final-uniform-layout-grid .e2ee-inbox-list,
.admin-final-uniform-layout-grid .e2ee-inbox-item,
.admin-final-uniform-layout-grid .e2ee-decrypted-output {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}

.admin-final-uniform-layout-grid table {
    width: 100% !important;
    min-width: 680px !important;
}

.admin-final-uniform-layout-grid .users-section-card table {
    font-size: 14px !important;
}

.admin-final-uniform-layout-grid .users-section-card th,
.admin-final-uniform-layout-grid .users-section-card td {
    padding: 12px 10px !important;
}

.admin-final-audit-fullwidth {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 28px auto 0 !important;
}

/* Hide old empty layout wrappers if any cached script leaves them behind */
.e2ee-admin-two-col-grid:empty,
.admin-user-settings-grid:empty,
.admin-master-layout-grid:empty {
    display: none !important;
}

@media (max-width: 1180px) {
    .admin-final-uniform-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .admin-final-uniform-layout-grid .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Row-aligned admin layout
   Users aligns with Create User
   ========================================================== */

.admin-row-aligned-layout-grid {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 28px auto 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 26px !important;
    align-items: start !important;
}

.admin-row-aligned-layout-grid > .card,
.admin-row-aligned-layout-grid > .result-card,
.admin-row-aligned-layout-grid > .admin-final-layout-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Explicit row/column placement */
.admin-row-aligned-layout-grid .admin-grid-e2ee-setup {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.admin-row-aligned-layout-grid .admin-grid-e2ee-inbox {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.admin-row-aligned-layout-grid .admin-grid-create-user {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.admin-row-aligned-layout-grid .admin-grid-users {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.admin-row-aligned-layout-grid .admin-grid-risk-settings {
    grid-column: 1 !important;
    grid-row: 3 !important;
}

/* Keep card internals uniform */
.admin-row-aligned-layout-grid .card-head {
    width: 100% !important;
    gap: 12px !important;
}

.admin-row-aligned-layout-grid input,
.admin-row-aligned-layout-grid select,
.admin-row-aligned-layout-grid textarea {
    width: 100% !important;
    max-width: 100% !important;
}

.admin-row-aligned-layout-grid .form-grid {
    grid-template-columns: 1fr 1fr !important;
}

.admin-row-aligned-layout-grid .table-wrap,
.admin-row-aligned-layout-grid .e2ee-inbox-list,
.admin-row-aligned-layout-grid .e2ee-inbox-item,
.admin-row-aligned-layout-grid .e2ee-decrypted-output {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}

.admin-row-aligned-layout-grid table {
    width: 100% !important;
    min-width: 680px !important;
}

.admin-row-aligned-layout-grid .users-section-card table {
    font-size: 14px !important;
}

.admin-row-aligned-layout-grid .users-section-card th,
.admin-row-aligned-layout-grid .users-section-card td {
    padding: 12px 10px !important;
}

/* Audit logs remains full width underneath */
.admin-final-audit-fullwidth {
    width: min(1180px, calc(100% - 32px)) !important;
    max-width: none !important;
    margin: 28px auto 0 !important;
}

/* Hide old empty wrapper leftovers */
.e2ee-admin-two-col-grid:empty,
.admin-user-settings-grid:empty,
.admin-master-layout-grid:empty {
    display: none !important;
}

@media (max-width: 1180px) {
    .admin-row-aligned-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-row-aligned-layout-grid .admin-grid-e2ee-setup,
    .admin-row-aligned-layout-grid .admin-grid-e2ee-inbox,
    .admin-row-aligned-layout-grid .admin-grid-create-user,
    .admin-row-aligned-layout-grid .admin-grid-users,
    .admin-row-aligned-layout-grid .admin-grid-risk-settings {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}

@media (max-width: 720px) {
    .admin-row-aligned-layout-grid .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Much bigger admin boxes and wider admin layout
   ========================================================== */

/* Make the whole admin working area wider */
.admin-final-uniform-layout-grid,
.admin-row-aligned-layout-grid {
    width: min(1500px, calc(100% - 64px)) !important;
    max-width: 1500px !important;
    grid-template-columns: minmax(560px, 1fr) minmax(560px, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
}

/* Make all cards wider and roomier */
.admin-final-layout-card,
.admin-final-uniform-layout-grid .card,
.admin-final-uniform-layout-grid .result-card,
.admin-row-aligned-layout-grid .card,
.admin-row-aligned-layout-grid .result-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 38px !important;
    border-radius: 30px !important;
}

/* Make the page title align with the wider grid */
.page-title {
    width: min(1500px, calc(100% - 64px)) !important;
    max-width: 1500px !important;
}

/* Make collapsed boxes still look substantial */
.users-section-card.is-users-collapsed,
.e2ee-admin-inbox-card.is-section-collapsed,
.audit-logs-card.is-audit-collapsed {
    padding: 34px 38px !important;
    min-height: 104px !important;
}

/* Make section headers feel bigger */
.admin-final-layout-card h2,
.admin-final-uniform-layout-grid h2,
.admin-row-aligned-layout-grid h2 {
    font-size: 25px !important;
    line-height: 1.16 !important;
}

/* Improve text readability inside bigger boxes */
.admin-final-layout-card p,
.admin-final-uniform-layout-grid p,
.admin-row-aligned-layout-grid p {
    font-size: 15px !important;
    line-height: 1.65 !important;
}

/* Make forms larger and more balanced */
.admin-final-layout-card label,
.admin-final-uniform-layout-grid label,
.admin-row-aligned-layout-grid label {
    margin: 20px 0 !important;
    font-size: 15px !important;
}

.admin-final-layout-card input,
.admin-final-layout-card select,
.admin-final-layout-card textarea,
.admin-final-uniform-layout-grid input,
.admin-final-uniform-layout-grid select,
.admin-final-uniform-layout-grid textarea,
.admin-row-aligned-layout-grid input,
.admin-row-aligned-layout-grid select,
.admin-row-aligned-layout-grid textarea {
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Make buttons bigger */
.admin-final-layout-card .btn,
.admin-final-uniform-layout-grid .btn,
.admin-row-aligned-layout-grid .btn {
    min-height: 56px !important;
    padding-left: 26px !important;
    padding-right: 26px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
}

/* Make status boxes larger */
.e2ee-key-status,
.e2ee-status,
.e2ee-inbox-status,
.wallet-empty-note {
    padding: 20px 22px !important;
    border-radius: 20px !important;
}

/* Make the E2EE setup passphrase grid less cramped */
.admin-final-uniform-layout-grid .form-grid,
.admin-row-aligned-layout-grid .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
}

/* Make Users table box wider and usable */
.admin-final-uniform-layout-grid .table-wrap,
.admin-row-aligned-layout-grid .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
}

.admin-final-uniform-layout-grid table,
.admin-row-aligned-layout-grid table {
    width: 100% !important;
    min-width: 760px !important;
}

/* Audit logs full-width should match the bigger admin width */
.admin-final-audit-fullwidth {
    width: min(1500px, calc(100% - 64px)) !important;
    max-width: 1500px !important;
    padding: 38px !important;
    border-radius: 30px !important;
}

/* Medium screens */
@media (max-width: 1280px) {
    .admin-final-uniform-layout-grid,
    .admin-row-aligned-layout-grid,
    .page-title,
    .admin-final-audit-fullwidth {
        width: min(1120px, calc(100% - 40px)) !important;
    }

    .admin-final-uniform-layout-grid,
    .admin-row-aligned-layout-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 28px !important;
    }
}

/* Stack only when genuinely needed */
@media (max-width: 1050px) {
    .admin-final-uniform-layout-grid,
    .admin-row-aligned-layout-grid {
        grid-template-columns: 1fr !important;
        width: min(900px, calc(100% - 32px)) !important;
    }

    .page-title,
    .admin-final-audit-fullwidth {
        width: min(900px, calc(100% - 32px)) !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .admin-final-layout-card,
    .admin-final-uniform-layout-grid .card,
    .admin-final-uniform-layout-grid .result-card,
    .admin-row-aligned-layout-grid .card,
    .admin-row-aligned-layout-grid .result-card,
    .admin-final-audit-fullwidth {
        padding: 26px !important;
        border-radius: 24px !important;
    }

    .admin-final-uniform-layout-grid .form-grid,
    .admin-row-aligned-layout-grid .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Larger admin font sizes
   ========================================================== */

/* Main admin title */
.page-title h1 {
    font-size: 54px !important;
    line-height: 1.05 !important;
}

.page-title p {
    font-size: 18px !important;
    line-height: 1.55 !important;
}

/* Card headings */
.admin-final-uniform-layout-grid h2,
.admin-row-aligned-layout-grid h2,
.admin-final-layout-card h2,
.admin-final-audit-fullwidth h2,
.card h2 {
    font-size: 28px !important;
    line-height: 1.18 !important;
}

/* General paragraph/helper text */
.admin-final-uniform-layout-grid p,
.admin-row-aligned-layout-grid p,
.admin-final-layout-card p,
.e2ee-intro,
.secure-admin-copy,
.e2ee-admin-copy {
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Labels */
.admin-final-uniform-layout-grid label,
.admin-row-aligned-layout-grid label,
.admin-final-layout-card label,
.card label {
    font-size: 17px !important;
    line-height: 1.35 !important;
}

/* Inputs/selects/textareas */
.admin-final-uniform-layout-grid input,
.admin-final-uniform-layout-grid select,
.admin-final-uniform-layout-grid textarea,
.admin-row-aligned-layout-grid input,
.admin-row-aligned-layout-grid select,
.admin-row-aligned-layout-grid textarea,
.admin-final-layout-card input,
.admin-final-layout-card select,
.admin-final-layout-card textarea,
.card input,
.card select,
.card textarea {
    font-size: 17px !important;
}

/* Buttons */
.admin-final-uniform-layout-grid .btn,
.admin-row-aligned-layout-grid .btn,
.admin-final-layout-card .btn,
.card .btn {
    font-size: 16px !important;
}

/* Small badges/status labels */
.card-head span,
.e2ee-key-status,
.e2ee-status,
.e2ee-inbox-status,
.wallet-empty-note,
.status,
.pill {
    font-size: 15px !important;
}

/* Tables */
.admin-final-uniform-layout-grid table,
.admin-row-aligned-layout-grid table,
.table-wrap table {
    font-size: 16px !important;
}

.admin-final-uniform-layout-grid th,
.admin-final-uniform-layout-grid td,
.admin-row-aligned-layout-grid th,
.admin-row-aligned-layout-grid td,
.table-wrap th,
.table-wrap td {
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* Collapsible section buttons */
.users-section-collapse-toggle,
.audit-logs-collapse-toggle,
.e2ee-inbox-section-toggle,
.e2ee-inbox-collapse-toggle {
    font-size: 15px !important;
}

/* E2EE inbox metadata */
.e2ee-inbox-meta strong {
    font-size: 19px !important;
}

.e2ee-inbox-meta span {
    font-size: 15px !important;
}

/* Decrypted popup message text */
.e2ee-decrypt-popup-content h4 {
    font-size: 26px !important;
}

.e2ee-decrypt-popup-content p {
    font-size: 18px !important;
    line-height: 1.75 !important;
}

/* Mobile scaling */
@media (max-width: 720px) {
    .page-title h1 {
        font-size: 40px !important;
    }

    .admin-final-uniform-layout-grid h2,
    .admin-row-aligned-layout-grid h2,
    .admin-final-layout-card h2,
    .admin-final-audit-fullwidth h2,
    .card h2 {
        font-size: 24px !important;
    }

    .admin-final-uniform-layout-grid p,
    .admin-row-aligned-layout-grid p,
    .admin-final-layout-card p,
    .e2ee-intro {
        font-size: 16px !important;
    }
}

/* ==========================================================
   Platform Risk Settings checkbox alignment fix
   ========================================================== */

/*
   Fix oversized checkbox rows caused by global admin input sizing.
   This targets the risk/settings card checkboxes and restores a compact,
   uniform left-label layout.
*/

.admin-final-layout-card .checkbox,
.admin-final-uniform-layout-grid .checkbox,
.admin-row-aligned-layout-grid .checkbox,
.card .checkbox {
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
    margin: 16px 0 !important;
    width: 100% !important;
    color: #e5e7eb !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
}

/* Critical: stop checkbox inputs inheriting text-input height/width */
.admin-final-layout-card .checkbox input[type="checkbox"],
.admin-final-uniform-layout-grid .checkbox input[type="checkbox"],
.admin-row-aligned-layout-grid .checkbox input[type="checkbox"],
.card .checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 5px !important;
    accent-color: #3b82f6 !important;
    justify-self: start !important;
}

/* Make checkbox text sit next to the checkbox instead of floating right */
.admin-final-layout-card .checkbox,
.admin-final-uniform-layout-grid .checkbox,
.admin-row-aligned-layout-grid .checkbox {
    text-align: left !important;
}

/* Keep Platform Risk Settings form tidy */
.admin-grid-risk-settings form,
.admin-final-layout-card form {
    width: 100% !important;
}

/* Make standard risk settings inputs uniform */
.admin-grid-risk-settings input:not([type="checkbox"]),
.admin-grid-risk-settings select {
    width: 100% !important;
}

/* Better spacing before the Save Settings button */
.admin-grid-risk-settings .btn,
.admin-final-layout-card .checkbox + .btn {
    margin-top: 16px !important;
}

/* If previous font patches made checkbox labels too large, stabilise them */
.admin-grid-risk-settings .checkbox {
    font-size: 18px !important;
}

@media (max-width: 720px) {
    .admin-final-layout-card .checkbox,
    .admin-final-uniform-layout-grid .checkbox,
    .admin-row-aligned-layout-grid .checkbox,
    .card .checkbox {
        grid-template-columns: 20px 1fr !important;
        column-gap: 12px !important;
        font-size: 16px !important;
    }

    .admin-final-layout-card .checkbox input[type="checkbox"],
    .admin-final-uniform-layout-grid .checkbox input[type="checkbox"],
    .admin-row-aligned-layout-grid .checkbox input[type="checkbox"],
    .card .checkbox input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
    }
}

/* ==========================================================
   Delete E2EE admin messages
   ========================================================== */

.e2ee-delete-message-form {
    display: inline-flex;
    margin: 0;
}

.e2ee-delete-message-button {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(239, 68, 68, 0.38);
    background:
        radial-gradient(circle at top left, rgba(239, 68, 68, 0.16), transparent 55%),
        rgba(15, 23, 42, 0.82);
    color: #fecaca;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
}

.e2ee-delete-message-button:hover {
    border-color: rgba(239, 68, 68, 0.76);
    background: rgba(239, 68, 68, 0.14);
    color: #fee2e2;
}

.e2ee-inbox-collapse-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .e2ee-delete-message-button {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* ==========================================================
   Admin dashboard new E2EE messages pill
   ========================================================== */

.side-menu .admin-new-message-pill,
.admin-new-message-pill {
    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(34, 211, 238, 0.32) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 55%),
        rgba(15, 23, 42, 0.78) !important;
    color: #cffafe !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

.side-menu .admin-new-message-pill:hover,
.admin-new-message-pill:hover {
    border-color: rgba(34, 211, 238, 0.70) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.24), transparent 55%),
        rgba(8, 47, 73, 0.72) !important;
    color: #ecfeff !important;
}

.admin-new-message-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.admin-new-message-text {
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.admin-new-message-pill strong {
    min-width: 28px !important;
    height: 24px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    box-shadow:
        0 0 10px rgba(34, 211, 238, 0.35),
        0 0 18px rgba(59, 130, 246, 0.22) !important;
}

@media (max-width: 920px) {
    .side-menu .admin-new-message-pill,
    .admin-new-message-pill {
        max-width: 280px !important;
    }
}

/* ==========================================================
   Live admin new message count states
   ========================================================== */

.admin-new-message-pill.has-new-messages {
    border-color: rgba(250, 204, 21, 0.62) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.22), transparent 55%),
        rgba(15, 23, 42, 0.84) !important;
    color: #FFFFFF !important;
}

.admin-new-message-pill.has-new-messages strong {
    background: linear-gradient(135deg, #2563EB, #f97316) !important;
    color: #111827 !important;
    box-shadow:
        0 0 12px rgba(250, 204, 21, 0.55),
        0 0 24px rgba(249, 115, 22, 0.32) !important;
}

.admin-new-message-pill.new-message-pulse {
    animation: adminNewMessagePulse 0.9s ease-out 1;
}

@keyframes adminNewMessagePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }

    35% {
        transform: scale(1.025);
        box-shadow: 0 0 28px rgba(250, 204, 21, 0.38);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(250, 204, 21, 0);
    }
}

/* ==========================================================
   Reliable New Messages pill icon
   ========================================================== */

.side-menu .admin-new-message-pill,
.admin-new-message-pill {
    grid-template-columns: 28px 1fr auto !important;
}

.admin-new-message-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.42), transparent 32%),
        linear-gradient(135deg, #22d3ee, #3b82f6) !important;
    box-shadow:
        0 0 10px rgba(34, 211, 238, 0.45),
        inset 0 0 0 1px rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    line-height: 1 !important;
    flex: 0 0 28px !important;
}

/* Envelope icon drawn with CSS, so it does not rely on emoji fonts */
.admin-new-message-icon::before {
    content: "";
    width: 15px;
    height: 11px;
    display: block;
    border: 2px solid #ffffff;
    border-radius: 3px;
    box-sizing: border-box;
    position: relative;
}

.admin-new-message-icon::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translateY(-1px);
    transform-origin: center;
}

/* If there are unread messages, make the icon gold */
.admin-new-message-pill.has-new-messages .admin-new-message-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.46), transparent 32%),
        linear-gradient(135deg, #2563EB, #f97316) !important;
    box-shadow:
        0 0 12px rgba(250, 204, 21, 0.55),
        0 0 24px rgba(249, 115, 22, 0.32),
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}

.admin-new-message-pill.has-new-messages .admin-new-message-icon::before,
.admin-new-message-pill.has-new-messages .admin-new-message-icon::after {
    border-color: #111827 !important;
}

/* ==========================================================
   E2EE read/unread visual state
   ========================================================== */

.e2ee-inbox-item.is-read {
    border-color: rgba(34, 197, 94, 0.22) !important;
}

.e2ee-inbox-item.is-read .e2ee-inbox-meta strong::after {
    content: "Read";
    display: inline-flex;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
    color: #bbf7d0;
    font-size: 11px;
    font-weight: 950;
    vertical-align: middle;
}

/* E2EE MESSAGE ADMIN LOCK ICON START */

.e2ee-message-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

.e2ee-message-button-lock {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    display: inline-block !important;
    position: relative !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #22d3ee, #3b82f6) !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.45) !important;
}

.e2ee-message-button-lock::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 10px;
    height: 8px;
    border: 2px solid #ffffff;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
}

.e2ee-message-button-lock::after {
    content: "";
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 14px;
    height: 10px;
    border-radius: 3px;
    background: #ffffff;
}

/* E2EE MESSAGE ADMIN LOCK ICON END */

/* ==========================================================
   Polished Users table Toggle button
   ========================================================== */

/* Keep the toggle form compact inside the Users table */
.users-section-card form,
.admin-grid-users form,
.admin-row-aligned-layout-grid .users-section-card form,
.admin-final-uniform-layout-grid .users-section-card form {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Restyle only the Users table Toggle button */
.users-section-card button.btn-small,
.admin-grid-users button.btn-small,
.admin-row-aligned-layout-grid .users-section-card button.btn-small,
.admin-final-uniform-layout-grid .users-section-card button.btn-small {
    min-height: 38px !important;
    height: 38px !important;
    min-width: 92px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(139, 92, 246, 0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.26), transparent 55%),
        linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
    color: #ddd6fe !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.035) inset,
        0 8px 18px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer !important;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease !important;
}

/* Better hover state */
.users-section-card button.btn-small:hover,
.admin-grid-users button.btn-small:hover,
.admin-row-aligned-layout-grid .users-section-card button.btn-small:hover,
.admin-final-uniform-layout-grid .users-section-card button.btn-small:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(167, 139, 250, 0.78) !important;
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.32), transparent 55%),
        linear-gradient(135deg, rgba(49, 46, 129, 0.88), rgba(30, 41, 59, 0.98)) !important;
    color: #f5f3ff !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 0 18px rgba(139, 92, 246, 0.22),
        0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Pressed state */
.users-section-card button.btn-small:active,
.admin-grid-users button.btn-small:active,
.admin-row-aligned-layout-grid .users-section-card button.btn-small:active,
.admin-final-uniform-layout-grid .users-section-card button.btn-small:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Keep the action column neatly aligned */
.users-section-card td:last-child,
.admin-grid-users td:last-child,
.admin-row-aligned-layout-grid .users-section-card td:last-child,
.admin-final-uniform-layout-grid .users-section-card td:last-child {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Avoid oversized global button rules making this button huge */
.users-section-card .btn.btn-small,
.admin-grid-users .btn.btn-small {
    width: auto !important;
    max-width: 120px !important;
}

/* Mobile/tablet tweak */
@media (max-width: 720px) {
    .users-section-card button.btn-small,
    .admin-grid-users button.btn-small,
    .admin-row-aligned-layout-grid .users-section-card button.btn-small,
    .admin-final-uniform-layout-grid .users-section-card button.btn-small {
        min-width: 82px !important;
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================
   Admin edit user popup
   ========================================================== */

.admin-user-actions-cell {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.admin-edit-user-button {
    min-height: 38px;
    height: 38px;
    min-width: 78px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.38);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.20), transparent 55%),
        rgba(15, 23, 42, 0.86);
    color: #cffafe;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}

.admin-edit-user-button:hover {
    border-color: rgba(34, 211, 238, 0.72);
    background: rgba(8, 47, 73, 0.78);
    color: #ecfeff;
}

.admin-edit-user-lock {
    overflow: hidden;
}

.admin-edit-user-modal {
    position: fixed;
    inset: 0;
    z-index: 10040;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.admin-edit-user-modal.is-visible {
    display: flex;
}

.admin-edit-user-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.84);
    backdrop-filter: blur(16px);
}

.admin-edit-user-dialog {
    position: relative;
    width: min(680px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px;
    border-radius: 26px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 32rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    box-shadow:
        0 0 36px rgba(34, 211, 238, 0.12),
        0 34px 100px rgba(0, 0, 0, 0.56);
}

.admin-edit-user-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.admin-edit-user-head span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.26);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-edit-user-head h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 28px;
    letter-spacing: -0.045em;
}

.admin-edit-user-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.admin-edit-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.admin-edit-active-row {
    margin-top: 20px !important;
}

@media (max-width: 720px) {
    .admin-edit-user-dialog {
        padding: 22px;
    }

    .admin-edit-user-head h2 {
        font-size: 23px;
    }
}

/* CAT CLEAN HOME START */

.cat-home {
    overflow: hidden;
}

.cat-hero {
    position: relative;
    min-height: calc(100vh - 84px);
    padding: 72px 24px 72px;
    display: grid;
    place-items: center;
}

.cat-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(6px);
}

.cat-glow-blue {
    width: 540px;
    height: 540px;
    top: -150px;
    left: -160px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 68%);
}

.cat-glow-gold {
    width: 540px;
    height: 540px;
    right: -170px;
    bottom: -190px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.18), transparent 68%);
}

.cat-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1280px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 0.78fr);
    gap: 48px;
    align-items: center;
}

.cat-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.30);
    background: rgba(250, 204, 21, 0.08);
    color: #fef3c7;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cat-kicker span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.85);
}

.cat-hero-copy h1 {
    max-width: 820px;
    margin: 24px 0 20px;
    color: #f8fafc;
    font-size: clamp(48px, 5.7vw, 82px);
    line-height: 0.94;
    letter-spacing: -0.07em;
    text-shadow:
        0 0 28px rgba(59, 130, 246, 0.18),
        0 0 62px rgba(34, 211, 238, 0.08);
}

.cat-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: #a9b7cc;
    font-size: 19px;
    line-height: 1.7;
}

.cat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.cat-actions .btn {
    min-height: 56px;
    min-width: 184px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 1000;
    justify-content: center;
}

.cat-preview {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 22rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.95));
    box-shadow:
        0 34px 90px rgba(0,0,0,0.42),
        inset 0 0 0 1px rgba(255,255,255,0.03);
}

.cat-window-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.cat-window-dots span {
    width: 13px;
    height: 13px;
    border-radius: 999px;
}

.cat-window-dots span:nth-child(1) {
    background: #ef4444;
}

.cat-window-dots span:nth-child(2) {
    background: #f59e0b;
}

.cat-window-dots span:nth-child(3) {
    background: #22c55e;
}

.cat-status-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(2, 6, 23, 0.56);
}

.cat-status-card small {
    display: inline-flex;
    min-width: 230px;
    padding: 9px 14px;
    border-radius: 999px;
    color: #FFFFFF;
    background: rgba(250, 204, 21, 0.08);
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cat-mode-list {
    display: grid;
    gap: 11px;
    margin: 14px 0 16px;
}

.cat-mode {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 1000;
}

.cat-mode i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.cat-mode strong {
    color: #ecfeff;
    font-size: 25px;
}

.cat-mode em {
    color: #bbf7d0;
    font-style: normal;
    font-size: 13px;
    font-weight: 950;
}

.cat-mode-spot {
    border: 1px solid rgba(34, 197, 94, 0.34);
    background: rgba(34, 197, 94, 0.16);
}

.cat-mode-spot i {
    background: #22c55e;
}

.cat-mode-margin {
    border: 1px solid rgba(250, 204, 21, 0.34);
    background: rgba(250, 204, 21, 0.10);
}

.cat-mode-margin i {
    background: #2563EB;
}

.cat-status-card h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.cat-online {
    flex: 0 0 auto;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #bbf7d0;
    font-weight: 1000;
}

.cat-chart {
    height: 170px;
    margin-top: 22px;
    padding: 24px 20px 18px;
    display: flex;
    align-items: end;
    gap: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(2, 6, 23, 0.54);
}

.cat-chart span {
    flex: 1;
    min-height: 28px;
    border-radius: 16px 16px 5px 5px;
    background: linear-gradient(180deg, #22d3ee, #3b82f6);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.20);
}

.cat-chart span:nth-child(even) {
    background: linear-gradient(180deg, #34d399, #14b8a6);
}

.cat-features {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto 78px;
    padding-top: 38px;
}

.cat-section-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.cat-section-head span {
    color: #fde68a;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.cat-section-head h2 {
    margin: 10px 0 0;
    color: #f8fafc;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.cat-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.cat-feature-grid article {
    min-height: 220px;
    padding: 26px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.11);
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 65%),
        rgba(255,255,255,0.055);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025);
}

.cat-feature-grid b {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 17px;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
    font-weight: 1000;
}

.cat-feature-grid h3 {
    margin: 0 0 12px;
    color: #f8fafc;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.cat-feature-grid p {
    margin: 0;
    color: #a9b7cc;
    line-height: 1.65;
}

@media (max-width: 1180px) {
    .cat-hero-inner {
        grid-template-columns: 1fr;
    }

    .cat-preview {
        max-width: 720px;
    }

    .cat-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .cat-hero {
        padding: 54px 18px 50px;
    }

    .cat-hero-copy h1 {
        font-size: clamp(40px, 12vw, 62px);
    }

    .cat-hero-copy p {
        font-size: 17px;
    }

    .cat-actions .btn {
        width: 100%;
    }

    .cat-status-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .cat-status-card small {
        min-width: 0;
        width: 100%;
    }

    .cat-chart {
        height: 150px;
        gap: 9px;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* CAT CLEAN HOME END */

/* CAT VISUAL RESTORE START */

/*
   Scoped premium visual restore for the clean home page only.
   Uses .cat-* selectors to avoid breaking admin/dashboard pages.
*/

.cat-home {
    position: relative;
    overflow: hidden;
}

.cat-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 8%, rgba(59, 130, 246, 0.20), transparent 34rem),
        radial-gradient(circle at 88% 14%, rgba(250, 204, 21, 0.12), transparent 30rem),
        radial-gradient(circle at 50% 100%, rgba(34, 211, 238, 0.09), transparent 36rem),
        #020617;
}

.cat-home::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.38;
    mask-image: radial-gradient(circle at center, black, transparent 76%);
}

/* Hero atmosphere */
.cat-hero {
    isolation: isolate;
}

.cat-glow-blue {
    opacity: 0.95;
    animation: catGlowDriftBlue 10s ease-in-out infinite;
}

.cat-glow-gold {
    opacity: 0.88;
    animation: catGlowDriftGold 12s ease-in-out infinite;
}

@keyframes catGlowDriftBlue {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(26px, 18px, 0) scale(1.04);
    }
}

@keyframes catGlowDriftGold {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-22px, -18px, 0) scale(1.05);
    }
}

/* Badge polish */
.cat-kicker {
    box-shadow:
        0 0 22px rgba(250, 204, 21, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035);
}

.cat-kicker span {
    animation: catLivePulse 1.8s ease-in-out infinite;
}

@keyframes catLivePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.45);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.90);
    }
}

/* Headline and copy */
.cat-hero-copy h1 {
    text-shadow:
        0 0 30px rgba(59, 130, 246, 0.20),
        0 0 72px rgba(34, 211, 238, 0.10);
}

.cat-hero-copy p {
    color: #b4c2d6 !important;
}

/* Buttons */
.cat-actions .btn {
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.cat-actions .btn:hover {
    transform: translateY(-2px);
}

.cat-actions .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.28), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    box-shadow:
        0 0 22px rgba(14, 165, 233, 0.34),
        0 16px 34px rgba(0, 0, 0, 0.34) !important;
}

.cat-actions .btn-secondary {
    border-color: rgba(250, 204, 21, 0.34) !important;
    color: #FFFFFF !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.78) !important;
}

/* Preview card premium glass */
.cat-preview {
    backdrop-filter: blur(14px);
    box-shadow:
        0 38px 120px rgba(0,0,0,0.52),
        0 0 48px rgba(34, 211, 238, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
    animation: catPreviewFloat 7s ease-in-out infinite;
}

@keyframes catPreviewFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.cat-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%, transparent 100%);
    opacity: 0.10;
}

/* Status card */
.cat-status-card {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 18px 46px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025);
}

.cat-status-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 45%),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.08), transparent 45%);
}

.cat-status-card > * {
    position: relative;
    z-index: 2;
}

/* Trading mode pills */
.cat-mode {
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.cat-mode:hover {
    transform: translateY(-2px);
}

.cat-mode-spot {
    box-shadow:
        0 0 22px rgba(34, 197, 94, 0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025);
}

.cat-mode-margin {
    box-shadow:
        0 0 22px rgba(250, 204, 21, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.025);
}

/* Chart visual restore */
.cat-chart {
    position: relative;
    overflow: hidden;
    box-shadow:
        0 18px 48px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025);
}

.cat-chart::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.11), transparent);
    transform: translateX(-120%);
    animation: catChartSweep 4.8s ease-in-out infinite;
}

@keyframes catChartSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    70% {
        transform: translateX(120%);
        opacity: 0.85;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

.cat-chart span {
    position: relative;
    transform-origin: bottom center;
    animation:
        catCandlePulse 2.8s ease-in-out infinite,
        catCandleGlow 3.4s ease-in-out infinite;
}

.cat-chart span::before,
.cat-chart span::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(165, 243, 252, 0.92);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.38);
}

.cat-chart span::before {
    height: 20px;
    top: -18px;
}

.cat-chart span::after {
    height: 14px;
    bottom: -12px;
}

.cat-chart span:nth-child(2) {
    animation-delay: 0.14s, 0.08s;
}

.cat-chart span:nth-child(3) {
    animation-delay: 0.28s, 0.16s;
}

.cat-chart span:nth-child(4) {
    animation-delay: 0.42s, 0.24s;
}

.cat-chart span:nth-child(5) {
    animation-delay: 0.56s, 0.32s;
}

.cat-chart span:nth-child(6) {
    animation-delay: 0.70s, 0.40s;
}

@keyframes catCandlePulse {
    0%, 100% {
        transform: scaleY(0.94);
    }

    50% {
        transform: scaleY(1.08);
    }
}

@keyframes catCandleGlow {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 16px rgba(34, 211, 238, 0.18);
    }

    50% {
        filter: brightness(1.18);
        box-shadow: 0 0 28px rgba(34, 211, 238, 0.34);
    }
}

/* Feature cards */
.cat-feature-grid article {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.cat-feature-grid article::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 30%, transparent 100%);
    opacity: 0.10;
}

.cat-feature-grid article > * {
    position: relative;
    z-index: 2;
}

.cat-feature-grid article:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.30);
    box-shadow:
        0 30px 86px rgba(0,0,0,0.32),
        0 0 32px rgba(34, 211, 238, 0.09),
        inset 0 0 0 1px rgba(255,255,255,0.035);
}

.cat-feature-grid b {
    box-shadow:
        0 0 18px rgba(14, 165, 233, 0.34),
        inset 0 0 0 1px rgba(255,255,255,0.20);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .cat-glow-blue,
    .cat-glow-gold,
    .cat-kicker span,
    .cat-preview,
    .cat-chart::before,
    .cat-chart span {
        animation: none !important;
    }
}

@media (max-width: 780px) {
    .cat-preview {
        animation: none;
    }

    .cat-chart span::before {
        height: 15px;
        top: -14px;
    }

    .cat-chart span::after {
        height: 10px;
        bottom: -9px;
    }
}

/* CAT VISUAL RESTORE END */

/* FOREX TRADING MODE START */

/* Forex Trading pill inside the home-page Trading Modes card */
.cat-mode-forex {
    border: 1px solid rgba(168, 85, 247, 0.40) !important;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.20), transparent 55%),
        rgba(88, 28, 135, 0.18) !important;
    box-shadow:
        0 0 22px rgba(168, 85, 247, 0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.cat-mode-forex i {
    background: #a855f7 !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.75) !important;
}

.cat-mode-forex em {
    color: #e9d5ff !important;
}

/* Make the trading modes stack fit neatly with the extra Forex row */
.cat-mode-list {
    gap: 10px !important;
}

.cat-mode {
    min-height: 46px !important;
}

/* Keep the card balanced after adding a third trading mode */
.cat-status-card {
    align-items: flex-start !important;
}

.cat-online {
    margin-top: 92px !important;
}

/* Mobile: keep online pill directly below modes */
@media (max-width: 780px) {
    .cat-online {
        margin-top: 0 !important;
    }
}

/* FOREX TRADING MODE END */

/* STAGGER TRADING MODE PILLS START */

/*
   Slightly steps/staggers the Spot, Margin and Forex pills
   inside the home page Trading Modes card.
*/

.cat-mode-list {
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Spot starts normal */
.cat-mode-list .cat-mode:nth-child(1) {
    margin-left: 0 !important;
}

/* Margin steps slightly to the right */
.cat-mode-list .cat-mode:nth-child(2) {
    margin-left: 18px !important;
}

/* Forex steps a little more to the right */
.cat-mode-list .cat-mode:nth-child(3) {
    margin-left: 36px !important;
}

/* Keep the pills compact and balanced */
.cat-mode {
    min-width: 220px !important;
    justify-content: flex-start !important;
}

/* Prevent the Active text from sitting too close */
.cat-status-card h2 {
    margin-top: 18px !important;
}

/* Mobile: remove stagger so the layout does not overflow */
@media (max-width: 780px) {
    .cat-mode-list .cat-mode:nth-child(1),
    .cat-mode-list .cat-mode:nth-child(2),
    .cat-mode-list .cat-mode:nth-child(3) {
        margin-left: 0 !important;
    }

    .cat-mode {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* STAGGER TRADING MODE PILLS END */

/* HIDE ACTIVE STATUS TEXT START */

/* Hide leftover Active status text in the home preview card if any remains */
.cat-status-card h2 {
    display: none !important;
}

/* HIDE ACTIVE STATUS TEXT END */

/* CENTER TRADING MODES GROUP START */

/*
   Moves the Trading Modes group slightly more toward the centre
   of the home preview card while keeping the Online pill on the right.
*/

.cat-status-card > div:first-child {
    margin-left: 26px !important;
}

/* Keep the label and pills grouped neatly */
.cat-status-card small,
.cat-mode-list {
    margin-left: 0 !important;
}

/* Adjust stagger from the new centred starting position */
.cat-mode-list .cat-mode:nth-child(1) {
    margin-left: 0 !important;
}

.cat-mode-list .cat-mode:nth-child(2) {
    margin-left: 18px !important;
}

.cat-mode-list .cat-mode:nth-child(3) {
    margin-left: 36px !important;
}

/* Make sure the group does not collide with the Online pill */
.cat-status-card {
    gap: 28px !important;
}

/* Mobile: remove centering offset so it fits cleanly */
@media (max-width: 780px) {
    .cat-status-card > div:first-child {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .cat-mode-list .cat-mode:nth-child(1),
    .cat-mode-list .cat-mode:nth-child(2),
    .cat-mode-list .cat-mode:nth-child(3) {
        margin-left: 0 !important;
    }
}

/* CENTER TRADING MODES GROUP END */

/* MORE STAGGER TRADING MODE PILLS START */

/*
   Increases the stepped/staggered offset for the Spot, Margin and Forex pills.
   Keeps the group inside the trading modes card.
*/

/* Keep the overall group slightly centred */
.cat-status-card > div:first-child {
    margin-left: 24px !important;
}

/* Spot starts slightly in */
.cat-mode-list .cat-mode:nth-child(1) {
    margin-left: 0 !important;
}

/* Margin steps further right */
.cat-mode-list .cat-mode:nth-child(2) {
    margin-left: 34px !important;
}

/* Forex steps further again */
.cat-mode-list .cat-mode:nth-child(3) {
    margin-left: 68px !important;
}

/* Keep pill width controlled */
.cat-mode {
    min-width: 230px !important;
    max-width: 310px !important;
}

/* Add a little more vertical breathing room */
.cat-mode-list {
    gap: 14px !important;
}

/* Mobile: remove stagger to prevent overflow */
@media (max-width: 780px) {
    .cat-status-card > div:first-child {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .cat-mode-list .cat-mode:nth-child(1),
    .cat-mode-list .cat-mode:nth-child(2),
    .cat-mode-list .cat-mode:nth-child(3) {
        margin-left: 0 !important;
    }

    .cat-mode {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* MORE STAGGER TRADING MODE PILLS END */

/* MOVE TRADING MODES LEFT START */

/*
   Moves the Trading Modes group further left inside the home preview card,
   while keeping the Spot / Margin / Forex stepped layout.
*/

/* Pull the whole Trading Modes group left */
.cat-status-card > div:first-child {
    margin-left: 0 !important;
    transform: translateX(-18px) !important;
}

/* Keep the staggered/stepped layout */
.cat-mode-list .cat-mode:nth-child(1) {
    margin-left: 0 !important;
}

.cat-mode-list .cat-mode:nth-child(2) {
    margin-left: 34px !important;
}

.cat-mode-list .cat-mode:nth-child(3) {
    margin-left: 68px !important;
}

/* Keep enough space between the modes and Online pill */
.cat-status-card {
    gap: 26px !important;
}

/* Mobile: no left shift or stagger to prevent overflow */
@media (max-width: 780px) {
    .cat-status-card > div:first-child {
        transform: none !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .cat-mode-list .cat-mode:nth-child(1),
    .cat-mode-list .cat-mode:nth-child(2),
    .cat-mode-list .cat-mode:nth-child(3) {
        margin-left: 0 !important;
    }
}

/* MOVE TRADING MODES LEFT END */

/* MOVE TRADING PILLS RIGHT ONLY START */

/*
   Moves only the Spot / Margin / Forex pills to the right.
   The "Trading Modes" label stays where it is.
*/

/* Do not move the whole Trading Modes group */
.cat-status-card > div:first-child {
    margin-left: 0 !important;
    transform: none !important;
}

/* Keep Trading Modes label fixed */
.cat-status-card small {
    margin-left: 0 !important;
    transform: none !important;
}

/* Move only the pill stack right */
.cat-mode-list {
    margin-left: 34px !important;
    gap: 14px !important;
}

/* Preserve stepped layout from the new pill-stack starting point */
.cat-mode-list .cat-mode:nth-child(1) {
    margin-left: 0 !important;
}

.cat-mode-list .cat-mode:nth-child(2) {
    margin-left: 34px !important;
}

.cat-mode-list .cat-mode:nth-child(3) {
    margin-left: 68px !important;
}

/* Keep pills contained and neat */
.cat-mode {
    min-width: 230px !important;
    max-width: 320px !important;
}

/* Mobile: remove right shift/stagger to avoid overflow */
@media (max-width: 780px) {
    .cat-mode-list {
        margin-left: 0 !important;
    }

    .cat-mode-list .cat-mode:nth-child(1),
    .cat-mode-list .cat-mode:nth-child(2),
    .cat-mode-list .cat-mode:nth-child(3) {
        margin-left: 0 !important;
    }

    .cat-mode {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* MOVE TRADING PILLS RIGHT ONLY END */

/* MOVE PLATFORM MODULES UP START */

/*
   Moves the Platform Modules section slightly higher on the home page.
   This only affects the clean home page module section.
*/

.cat-features {
    margin-top: -42px !important;
    padding-top: 0 !important;
}

/* Keep heading spacing neat after moving upward */
.cat-section-head {
    margin-bottom: 28px !important;
}

/* Mobile: use a smaller upward shift */
@media (max-width: 780px) {
    .cat-features {
        margin-top: -20px !important;
        padding-top: 0 !important;
    }
}

/* MOVE PLATFORM MODULES UP END */

/* MOVE HOME CONTENT UP START */

/*
   Moves the clean home page content slightly upward overall.
   Scoped only to .cat-* home page classes.
*/

/* Pull the whole hero area up slightly */
.cat-hero {
    padding-top: 42px !important;
    padding-bottom: 50px !important;
    min-height: calc(100vh - 126px) !important;
}

/* Tighten hero headline spacing */
.cat-hero-copy h1 {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* Tighten button spacing */
.cat-actions {
    margin-top: 24px !important;
}

/* Pull Platform Modules section up as well */
.cat-features {
    margin-top: -70px !important;
    padding-top: 0 !important;
}

/* Reduce gap before feature cards */
.cat-section-head {
    margin-bottom: 22px !important;
}

/* Keep feature cards visually balanced */
.cat-feature-grid article {
    min-height: 210px !important;
}

/* Mobile: use less aggressive upward movement */
@media (max-width: 780px) {
    .cat-hero {
        padding-top: 32px !important;
        padding-bottom: 42px !important;
        min-height: auto !important;
    }

    .cat-features {
        margin-top: -28px !important;
        padding-top: 0 !important;
    }

    .cat-actions {
        margin-top: 20px !important;
    }
}

/* MOVE HOME CONTENT UP END */

/* HIDE PLATFORM MODULES LABEL START */

/* Hide only the small Platform Modules label above the home feature heading */
.cat-section-head > span {
    display: none !important;
}

/* HIDE PLATFORM MODULES LABEL END */

/* GREEN BALL PULSE START */

/*
   Gentle non-flashing glow for the green status ball.
   This removes the blinking effect and keeps a smooth premium pulse.
*/

.cat-kicker span {
    position: relative !important;
    opacity: 1 !important;
    background: #22c55e !important;
    animation: greenBallGentlePulse 2.4s ease-in-out infinite !important;
}

.cat-kicker span::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.16);
    animation: greenBallSoftHalo 2.4s ease-in-out infinite !important;
    pointer-events: none;
}

@keyframes greenBallGentlePulse {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 8px rgba(34, 197, 94, 0.45),
            0 0 16px rgba(34, 197, 94, 0.18);
    }

    50% {
        transform: scale(1.10);
        box-shadow:
            0 0 12px rgba(34, 197, 94, 0.70),
            0 0 24px rgba(34, 197, 94, 0.28);
    }

    100% {
        transform: scale(1);
        box-shadow:
            0 0 8px rgba(34, 197, 94, 0.45),
            0 0 16px rgba(34, 197, 94, 0.18);
    }
}

@keyframes greenBallSoftHalo {
    0% {
        transform: scale(0.90);
        opacity: 0.42;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.22;
    }

    100% {
        transform: scale(0.90);
        opacity: 0.42;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-kicker span,
    .cat-kicker span::after {
        animation: none !important;
    }
}

/* GREEN BALL PULSE END */

/* FOUR FEATURE CARDS START */

/*
   Makes the Platform Modules section support 4 cards neatly.
*/

.cat-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.cat-feature-grid article {
    min-height: 230px !important;
}

/* Give the 4th Secure Messaging number badge a purple/blue accent */
.cat-feature-grid article:nth-child(4) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
    box-shadow:
        0 0 18px rgba(139, 92, 246, 0.34),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}

/* Tablet: 2 by 2 grid */
@media (max-width: 1180px) {
    .cat-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: single column */
@media (max-width: 720px) {
    .cat-feature-grid {
        grid-template-columns: 1fr !important;
    }
}

/* FOUR FEATURE CARDS END */

/* SUPPORTED EXCHANGES CARD START */

/*
   Adds styling for the 5th Supported Exchanges card.
   Uses CSS logo-style badges rather than external image files.
*/

.cat-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.cat-feature-grid article {
    min-height: 250px !important;
}

/* 5th card badge accent */
.cat-feature-grid article:nth-child(5) b,
.cat-supported-exchanges-card b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #2563EB, #f97316) !important;
    color: #111827 !important;
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.34),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}

.cat-exchange-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.cat-exchange-badge {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

.cat-exchange-badge em {
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* ByBit badge */
.cat-exchange-bybit {
    border: 1px solid rgba(250, 204, 21, 0.34);
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.74);
    color: #f8fafc;
}

.cat-bybit-logo {
    color: #f8fafc;
    font-size: 13px;
    letter-spacing: 0.07em;
}

.cat-bybit-logo span {
    color: #2563EB;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
}

.cat-exchange-bybit em {
    color: #FFFFFF;
}

/* Binance badge */
.cat-exchange-binance {
    border: 1px solid rgba(252, 213, 53, 0.38);
    background:
        radial-gradient(circle at top left, rgba(252, 213, 53, 0.18), transparent 55%),
        rgba(11, 14, 17, 0.82);
    color: #fcd535;
}

.cat-binance-logo {
    width: 19px;
    height: 19px;
    position: relative;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 4px;
    background: #fcd535;
    box-shadow: 0 0 12px rgba(252, 213, 53, 0.46);
}

.cat-binance-logo::before,
.cat-binance-logo::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #0b0e11;
}

.cat-binance-logo::before {
    left: 2px;
    top: 2px;
}

.cat-binance-logo::after {
    right: 2px;
    bottom: 2px;
}

.cat-exchange-binance em {
    color: #fcd535;
}

/* Make card text slightly tighter to fit five cards */
.cat-feature-grid h3 {
    font-size: 21px !important;
}

.cat-feature-grid p {
    font-size: 15px !important;
}

/* Medium screens: 3 then 2 */
@media (max-width: 1280px) {
    .cat-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .cat-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 720px) {
    .cat-feature-grid {
        grid-template-columns: 1fr !important;
    }

    .cat-feature-grid article {
        min-height: auto !important;
    }
}

/* SUPPORTED EXCHANGES CARD END */

/* FEATURE CARDS FINAL ORDER START */

/*
   Final Platform Modules order:
   01 Encrypted API Vault
   02 Live Wallet Intelligence
   03 Supported Exchanges
   04 Secure Messaging
*/

.cat-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.cat-feature-grid article {
    min-height: 250px !important;
}

/* Number badge colour accents */
.cat-feature-grid article:nth-child(1) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #ffffff !important;
}

.cat-feature-grid article:nth-child(2) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #ffffff !important;
}

.cat-supported-exchanges-card b,
.cat-feature-grid article:nth-child(3) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #2563EB, #f97316) !important;
    color: #111827 !important;
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.34),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}

.cat-feature-grid article:nth-child(4) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
    color: #ffffff !important;
}

/* Supported Exchanges badge layout */
.cat-exchange-list {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.cat-exchange-badge {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

.cat-exchange-badge em {
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* ByBit badge */
.cat-exchange-bybit {
    border: 1px solid rgba(250, 204, 21, 0.34);
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.74);
    color: #f8fafc;
}

.cat-bybit-logo {
    color: #f8fafc;
    font-size: 13px;
    letter-spacing: 0.07em;
}

.cat-bybit-logo span {
    color: #2563EB;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
}

.cat-exchange-bybit em {
    color: #FFFFFF;
}

/* Binance badge */
.cat-exchange-binance {
    border: 1px solid rgba(252, 213, 53, 0.38);
    background:
        radial-gradient(circle at top left, rgba(252, 213, 53, 0.18), transparent 55%),
        rgba(11, 14, 17, 0.82);
    color: #fcd535;
}

.cat-binance-logo {
    width: 19px;
    height: 19px;
    position: relative;
    display: inline-block;
    transform: rotate(45deg);
    border-radius: 4px;
    background: #fcd535;
    box-shadow: 0 0 12px rgba(252, 213, 53, 0.46);
}

.cat-binance-logo::before,
.cat-binance-logo::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #0b0e11;
}

.cat-binance-logo::before {
    left: 2px;
    top: 2px;
}

.cat-binance-logo::after {
    right: 2px;
    bottom: 2px;
}

.cat-exchange-binance em {
    color: #fcd535;
}

/* Tablet: 2 by 2 */
@media (max-width: 1180px) {
    .cat-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: single column */
@media (max-width: 720px) {
    .cat-feature-grid {
        grid-template-columns: 1fr !important;
    }

    .cat-feature-grid article {
        min-height: auto !important;
    }
}

/* FEATURE CARDS FINAL ORDER END */

/* API VAULT SECURITY BADGE START */

/*
   Security badge for the Encrypted API Vault card.
*/

.cat-card-security-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.34);
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.62);
    color: #cffafe;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow:
        0 0 18px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035);
}

.cat-card-security-pill::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.72);
}

/* API VAULT SECURITY BADGE END */

/* CENTRE PLATFORM MODULE CARDS START */

/*
   Centres the Platform Modules cards neatly within the page.
   Keeps card text left-aligned for readability.
*/

.cat-features {
    width: min(1500px, calc(100% - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cat-feature-grid {
    width: 100% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    gap: 24px !important;
}

.cat-feature-grid article {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 255px !important;
}

/* Keep heading aligned with centred cards */
.cat-section-head {
    width: min(1440px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Tablet: centred 2-column layout */
@media (max-width: 1180px) {
    .cat-feature-grid {
        max-width: 820px !important;
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    }
}

/* Mobile: single centred column */
@media (max-width: 720px) {
    .cat-features {
        width: min(100% - 32px, 520px) !important;
    }

    .cat-feature-grid {
        max-width: 520px !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .cat-feature-grid article {
        min-height: auto !important;
    }
}

/* CENTRE PLATFORM MODULE CARDS END */

/* STRATEGY AUTOMATION CARD START */

/*
   Adds support for the 5th Strategy Automation card.
*/

.cat-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.cat-feature-grid article {
    min-height: 255px !important;
}

/* Strategy Automation 05 badge */
.cat-strategy-automation-card b,
.cat-feature-grid article:nth-child(5) b {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.36), transparent 32%),
        linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 18px rgba(236, 72, 153, 0.30),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}

/* Slightly tighten text so five cards fit cleanly */
.cat-feature-grid h3 {
    font-size: 21px !important;
}

.cat-feature-grid p {
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Large tablet: 3 cards then 2 cards */
@media (max-width: 1280px) {
    .cat-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Tablet: 2 columns */
@media (max-width: 980px) {
    .cat-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 720px) {
    .cat-feature-grid {
        grid-template-columns: 1fr !important;
    }

    .cat-feature-grid article {
        min-height: auto !important;
    }
}

/* STRATEGY AUTOMATION CARD END */

/* OANDA EXCHANGE BADGE START */

/*
   OANDA exchange-style badge inside Supported Exchanges card.
   Uses CSS styling instead of an external image file.
*/

.cat-exchange-oanda {
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.10), transparent 55%),
        rgba(2, 20, 18, 0.82) !important;
    color: #bbf7d0 !important;
}

.cat-oanda-logo {
    width: 22px;
    height: 22px;
    position: relative;
    display: inline-block;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0 23%, transparent 24%),
        conic-gradient(from 40deg, #22c55e, #14b8a6, #38bdf8, #22c55e);
    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.42),
        inset 0 0 0 1px rgba(255,255,255,0.18);
}

.cat-oanda-logo::after {
    content: "";
    position: absolute;
    inset: 6px 4px;
    border-radius: 999px;
    border-left: 3px solid #052e2b;
    border-right: 3px solid #052e2b;
    transform: rotate(-18deg);
    opacity: 0.85;
}

.cat-exchange-oanda em {
    color: #bbf7d0 !important;
    letter-spacing: 0.04em !important;
}

/* Tighten exchange list slightly now there are three badges */
.cat-exchange-list {
    gap: 9px !important;
}

.cat-exchange-badge {
    min-height: 42px !important;
}

/* OANDA EXCHANGE BADGE END */

/* FIX EXCHANGE BADGE ROWS START */

/*
   Ensures ByBit, Binance and OANDA each render as separate rows
   inside the Supported Exchanges card.
*/

.cat-exchange-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.cat-exchange-badge {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

.cat-exchange-badge > span:first-child {
    flex: 0 0 auto !important;
}

.cat-exchange-badge em {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* OANDA should look like a full exchange row, not a nested pill */
.cat-exchange-oanda {
    border: 1px solid rgba(34, 197, 94, 0.40) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.10), transparent 55%),
        rgba(2, 20, 18, 0.82) !important;
    color: #bbf7d0 !important;
}

.cat-oanda-logo {
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
    display: inline-block !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0 23%, transparent 24%),
        conic-gradient(from 40deg, #22c55e, #14b8a6, #38bdf8, #22c55e) !important;
    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.42),
        inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}

.cat-oanda-logo::after {
    content: "";
    position: absolute;
    inset: 6px 4px;
    border-radius: 999px;
    border-left: 3px solid #052e2b;
    border-right: 3px solid #052e2b;
    transform: rotate(-18deg);
    opacity: 0.85;
}

.cat-exchange-oanda em {
    color: #bbf7d0 !important;
    letter-spacing: 0.04em !important;
}

/* FIX EXCHANGE BADGE ROWS END */

/* DASHBOARD VISUAL AUDIT POLISH START */

/*
   Logged-in dashboard visual polish.
   CSS-only. Scoped to common dashboard structures while avoiding the home .cat-* layout.
*/

/* Main dashboard atmosphere */
.dashboard,
.dashboard-page,
.app-dashboard,
main.dashboard,
main.dashboard-page {
    position: relative;
    overflow: hidden;
}

.dashboard::before,
.dashboard-page::before,
.app-dashboard::before,
main.dashboard::before,
main.dashboard-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 8%, rgba(59, 130, 246, 0.16), transparent 34rem),
        radial-gradient(circle at 88% 16%, rgba(250, 204, 21, 0.09), transparent 30rem),
        radial-gradient(circle at 50% 100%, rgba(34, 211, 238, 0.07), transparent 36rem),
        #020617;
}

/* General dashboard containers */
.dashboard .container,
.dashboard-page .container,
.app-dashboard .container,
.dashboard-shell,
.dashboard-content,
.main-content {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Dashboard headings */
.dashboard h1,
.dashboard-page h1,
.app-dashboard h1,
.dashboard h2,
.dashboard-page h2,
.app-dashboard h2 {
    color: #f8fafc;
    letter-spacing: -0.035em;
}

.dashboard p,
.dashboard-page p,
.app-dashboard p {
    color: #a9b7cc;
}

/* Dashboard cards and panels */
.dashboard .card,
.dashboard-page .card,
.app-dashboard .card,
.dashboard-card,
.wallet-card,
.api-card,
.message-card,
.secure-message-card,
.panel,
.stat-card {
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 65%),
        rgba(255, 255, 255, 0.055) !important;
    border-radius: 26px !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    backdrop-filter: blur(10px);
}

/* Card hover polish */
.dashboard .card,
.dashboard-page .card,
.app-dashboard .card,
.dashboard-card,
.wallet-card,
.api-card,
.message-card,
.secure-message-card,
.panel,
.stat-card {
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.dashboard .card:hover,
.dashboard-page .card:hover,
.app-dashboard .card:hover,
.dashboard-card:hover,
.wallet-card:hover,
.api-card:hover,
.message-card:hover,
.secure-message-card:hover,
.panel:hover,
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.26) !important;
    box-shadow:
        0 28px 84px rgba(0, 0, 0, 0.30),
        0 0 26px rgba(34, 211, 238, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Dashboard grids */
.dashboard-grid,
.cards-grid,
.stats-grid,
.wallet-grid,
.api-grid {
    gap: 22px !important;
}

/* Forms inside dashboard */
.dashboard input,
.dashboard-page input,
.app-dashboard input,
.dashboard select,
.dashboard-page select,
.app-dashboard select,
.dashboard textarea,
.dashboard-page textarea,
.app-dashboard textarea {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.58) !important;
    color: #e5e7eb !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.dashboard input:focus,
.dashboard-page input:focus,
.app-dashboard input:focus,
.dashboard select:focus,
.dashboard-page select:focus,
.app-dashboard select:focus,
.dashboard textarea:focus,
.dashboard-page textarea:focus,
.app-dashboard textarea:focus {
    outline: none !important;
    border-color: rgba(34, 211, 238, 0.50) !important;
    box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Dashboard buttons */
.dashboard .btn,
.dashboard-page .btn,
.app-dashboard .btn,
.dashboard button,
.dashboard-page button,
.app-dashboard button {
    border-radius: 14px !important;
    font-weight: 900 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease;
}

.dashboard .btn:hover,
.dashboard-page .btn:hover,
.app-dashboard .btn:hover,
.dashboard button:hover,
.dashboard-page button:hover,
.app-dashboard button:hover {
    transform: translateY(-1px);
}

/* Primary buttons */
.dashboard .btn-primary,
.dashboard-page .btn-primary,
.app-dashboard .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.26), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    box-shadow:
        0 0 18px rgba(14, 165, 233, 0.24),
        0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

/* Table polish */
.dashboard table,
.dashboard-page table,
.app-dashboard table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    border-radius: 18px;
}

.dashboard th,
.dashboard-page th,
.app-dashboard th {
    color: #f8fafc !important;
    background: rgba(15, 23, 42, 0.82) !important;
}

.dashboard td,
.dashboard-page td,
.app-dashboard td {
    border-color: rgba(255,255,255,0.08) !important;
    color: #cbd5e1;
}

/* Small status pills */
.status-pill,
.badge,
.pill,
.tag {
    border-radius: 999px !important;
    font-weight: 900 !important;
}

/* Mobile spacing */
@media (max-width: 780px) {
    .dashboard .container,
    .dashboard-page .container,
    .app-dashboard .container,
    .dashboard-shell,
    .dashboard-content,
    .main-content {
        width: min(100% - 28px, 560px);
    }

    .dashboard .card,
    .dashboard-page .card,
    .app-dashboard .card,
    .dashboard-card,
    .wallet-card,
    .api-card,
    .message-card,
    .secure-message-card,
    .panel,
    .stat-card {
        border-radius: 22px !important;
    }
}

/* DASHBOARD VISUAL AUDIT POLISH END */

/* DASHBOARD SIDEBAR POLISH START */

/*
   Logged-in dashboard left sidebar polish.
   Applied only after dashboard-sidebar-polish.js identifies the dashboard sidebar.
*/

.cat-dashboard-sidebar {
    position: relative !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(255,255,255,0.08) !important;
    background:
        radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.16), transparent 16rem),
        linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.90)) !important;
    box-shadow:
        18px 0 48px rgba(0,0,0,0.18),
        inset -1px 0 0 rgba(255,255,255,0.025) !important;
}

.cat-dashboard-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 34px 34px;
    opacity: 0.18;
    mask-image: linear-gradient(180deg, black, transparent 85%);
}

/* Keep real sidebar content above visual texture */
.cat-dashboard-sidebar > * {
    position: relative;
    z-index: 2;
}

/* User/profile card */
.cat-dashboard-sidebar .cat-sidebar-profile-card {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 60%),
        rgba(255,255,255,0.055) !important;
    border-radius: 18px !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Main nav links */
.cat-dashboard-sidebar .cat-sidebar-link {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease !important;
}

.cat-dashboard-sidebar .cat-sidebar-link:hover {
    transform: translateX(2px) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 60%),
        rgba(15, 23, 42, 0.76) !important;
    border-color: rgba(34, 211, 238, 0.24) !important;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Overview gets gold focus */
.cat-dashboard-sidebar .cat-sidebar-overview-link {
    border-color: rgba(250, 204, 21, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 62%),
        rgba(15, 23, 42, 0.78) !important;
    color: #FFFFFF !important;
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* New Messages row */
.cat-dashboard-sidebar .cat-sidebar-message-link {
    border-color: rgba(34, 211, 238, 0.38) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 58%),
        rgba(8, 47, 73, 0.62) !important;
    color: #ecfeff !important;
    box-shadow:
        0 0 22px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Any message count bubble inside New Messages */
.cat-dashboard-sidebar .cat-sidebar-message-link span:last-child,
.cat-dashboard-sidebar .cat-sidebar-message-link .badge,
.cat-dashboard-sidebar .cat-sidebar-message-link .pill {
    box-shadow:
        0 0 14px rgba(34, 211, 238, 0.42),
        inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}

/* ByBit account access note */
.cat-dashboard-sidebar .cat-sidebar-help-card {
    border: 1px solid rgba(250, 204, 21, 0.28) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 65%),
        rgba(2, 6, 23, 0.64) !important;
    border-radius: 16px !important;
    box-shadow:
        0 16px 36px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Improve small sidebar text readability */
.cat-dashboard-sidebar small,
.cat-dashboard-sidebar p,
.cat-dashboard-sidebar span {
    text-rendering: geometricPrecision;
}

/* Mobile: avoid over-shifting links */
@media (max-width: 780px) {
    .cat-dashboard-sidebar .cat-sidebar-link:hover {
        transform: none !important;
    }
}

/* DASHBOARD SIDEBAR POLISH END */

/* SIDEBAR PROFILE NESTING FIX START */

/*
   Prevents the user name/admin account text from becoming a second inner card.
*/

.cat-dashboard-sidebar .cat-sidebar-profile-card .cat-sidebar-profile-card,
.cat-dashboard-sidebar .cat-sidebar-profile-card [class*="cat-sidebar-profile-card"] {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Keep profile card content clean and aligned */
.cat-dashboard-sidebar .cat-sidebar-profile-card {
    padding: 14px !important;
}

.cat-dashboard-sidebar .cat-sidebar-profile-card * {
    box-shadow: none;
}

/* Preserve only the profile outer card shadow */
.cat-dashboard-sidebar .cat-sidebar-profile-card {
    box-shadow:
        0 18px 44px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* SIDEBAR PROFILE NESTING FIX END */

/* HIDE BYBIT ACCOUNT ACCESS SIDEBAR NOTE START */

/*
   Removes/hides the old ByBit account access note from the dashboard sidebar.
*/

.cat-dashboard-sidebar .cat-sidebar-help-card {
    display: none !important;
}

/* HIDE BYBIT ACCOUNT ACCESS SIDEBAR NOTE END */

/* DASHBOARD TOP KPI POLISH START */

/*
   Polishes only the logged-in dashboard top KPI cards:
   API Status, Wallet Access, Order Limit and Mode.
   Scoped to .pro-dashboard .pro-main .pro-kpis.
*/

.pro-dashboard .pro-main .pro-kpis {
    gap: 22px !important;
    align-items: stretch !important;
}

/* KPI card base */
.pro-dashboard .pro-main .pro-kpis > article {
    position: relative !important;
    overflow: hidden !important;
    min-height: 116px !important;
    padding: 22px 22px 20px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.72)) !important;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease !important;
}

/* Soft highlight sweep */
.pro-dashboard .pro-main .pro-kpis > article::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 26%, transparent 100%);
    opacity: 0.10;
}

/* Keep card contents above highlight */
.pro-dashboard .pro-main .pro-kpis > article > * {
    position: relative;
    z-index: 2;
}

/* Card hover */
.pro-dashboard .pro-main .pro-kpis > article:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(34, 211, 238, 0.28) !important;
    box-shadow:
        0 30px 84px rgba(0, 0, 0, 0.32),
        0 0 28px rgba(34, 211, 238, 0.09),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Labels */
.pro-dashboard .pro-main .pro-kpis > article span,
.pro-dashboard .pro-main .pro-kpis > article small:first-child {
    display: block !important;
    margin-bottom: 8px !important;
    color: #9fb0c9 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Main values */
.pro-dashboard .pro-main .pro-kpis > article strong {
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 7px !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
}

/* Supporting text */
.pro-dashboard .pro-main .pro-kpis > article small {
    color: #b6c5da !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Individual accent colours */
.pro-dashboard .pro-main .pro-kpis > article:nth-child(1) {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.72)) !important;
}

.pro-dashboard .pro-main .pro-kpis > article:nth-child(1) strong {
    color: #86efac !important;
    text-shadow: 0 0 18px rgba(34, 197, 94, 0.18);
}

.pro-dashboard .pro-main .pro-kpis > article:nth-child(2) {
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.72)) !important;
}

.pro-dashboard .pro-main .pro-kpis > article:nth-child(3) {
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.13), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.72)) !important;
}

.pro-dashboard .pro-main .pro-kpis > article:nth-child(4) {
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.16), transparent 62%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.72)) !important;
}

.pro-dashboard .pro-main .pro-kpis > article:nth-child(4) strong {
    color: #86efac !important;
    text-shadow: 0 0 18px rgba(34, 197, 94, 0.16);
}

/* Mobile/tablet safety */
@media (max-width: 980px) {
    .pro-dashboard .pro-main .pro-kpis {
        gap: 16px !important;
    }

    .pro-dashboard .pro-main .pro-kpis > article {
        min-height: 104px !important;
        border-radius: 20px !important;
        padding: 18px !important;
    }
}

/* DASHBOARD TOP KPI POLISH END */

/* DASHBOARD ACCOUNT MONITOR POLISH START */

/*
   Polishes only the ByBit Account Monitor panel.
   Scoped to:
   .pro-dashboard .pro-main .account-monitor-card
*/

.pro-dashboard .pro-main .account-monitor-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.13), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.08), transparent 26rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78)) !important;
    box-shadow:
        0 28px 82px rgba(0, 0, 0, 0.30),
        0 0 34px rgba(34, 211, 238, 0.07),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* Subtle top highlight */
.pro-dashboard .pro-main .account-monitor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%, transparent 100%);
    opacity: 0.10;
}

/* Keep content above highlight */
.pro-dashboard .pro-main .account-monitor-card > * {
    position: relative;
    z-index: 2;
}

/* Header row */
.pro-dashboard .pro-main .account-monitor-card .card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Header title */
.pro-dashboard .pro-main .account-monitor-card .card-head h2,
.pro-dashboard .pro-main .account-monitor-card .card-head h3 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    text-shadow:
        0 0 24px rgba(34, 211, 238, 0.10),
        0 0 46px rgba(59, 130, 246, 0.08);
}

/* Header supporting text */
.pro-dashboard .pro-main .account-monitor-card .card-head p,
.pro-dashboard .pro-main .account-monitor-card .card-head small,
.pro-dashboard .pro-main .account-monitor-card .card-head span {
    color: #a9b7cc !important;
}

/* Any badge/status in the header */
.pro-dashboard .pro-main .account-monitor-card .card-head .badge,
.pro-dashboard .pro-main .account-monitor-card .card-head .pill,
.pro-dashboard .pro-main .account-monitor-card .card-head small {
    border-radius: 999px !important;
}

/* Wallet balance form */
.pro-dashboard .pro-main .account-monitor-card #walletBalanceForm {
    display: grid !important;
    gap: 16px !important;
}

/* Form rows/inputs */
.pro-dashboard .pro-main .account-monitor-card input,
.pro-dashboard .pro-main .account-monitor-card select,
.pro-dashboard .pro-main .account-monitor-card textarea {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.60) !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 12px 26px rgba(0,0,0,0.12) !important;
}

/* Input focus */
.pro-dashboard .pro-main .account-monitor-card input:focus,
.pro-dashboard .pro-main .account-monitor-card select:focus,
.pro-dashboard .pro-main .account-monitor-card textarea:focus {
    outline: none !important;
    border-color: rgba(34, 211, 238, 0.52) !important;
    box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Buttons inside the account monitor card */
.pro-dashboard .pro-main .account-monitor-card .btn,
.pro-dashboard .pro-main .account-monitor-card button {
    border-radius: 16px !important;
    font-weight: 950 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

.pro-dashboard .pro-main .account-monitor-card .btn:hover,
.pro-dashboard .pro-main .account-monitor-card button:hover {
    transform: translateY(-1px) !important;
}

/* Primary action inside account monitor */
.pro-dashboard .pro-main .account-monitor-card .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.26), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    box-shadow:
        0 0 20px rgba(14, 165, 233, 0.26),
        0 14px 30px rgba(0,0,0,0.28) !important;
}

/* Wallet/result area if present */
.pro-dashboard .pro-main .account-monitor-card .wallet-result,
.pro-dashboard .pro-main .account-monitor-card .account-result,
.pro-dashboard .pro-main .account-monitor-card .balance-result,
.pro-dashboard .pro-main .account-monitor-card .result-card {
    border: 1px solid rgba(34, 211, 238, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 60%),
        rgba(2, 6, 23, 0.56) !important;
    border-radius: 22px !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Mobile safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main .account-monitor-card {
        border-radius: 22px !important;
    }

    .pro-dashboard .pro-main .account-monitor-card .card-head {
        flex-direction: column !important;
    }
}

/* DASHBOARD ACCOUNT MONITOR POLISH END */

/* DASHBOARD MARKET TOOLS POLISH START */

/*
   Polishes only the Market Tools panel.
   Scoped to:
   .pro-dashboard .pro-main #market.pro-card
*/

.pro-dashboard .pro-main #market.pro-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.13), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(34, 211, 238, 0.08), transparent 26rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78)) !important;
    box-shadow:
        0 28px 82px rgba(0, 0, 0, 0.30),
        0 0 34px rgba(250, 204, 21, 0.06),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* Subtle premium highlight */
.pro-dashboard .pro-main #market.pro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%, transparent 100%);
    opacity: 0.10;
}

/* Keep content above highlight */
.pro-dashboard .pro-main #market.pro-card > * {
    position: relative;
    z-index: 2;
}

/* Header row */
.pro-dashboard .pro-main #market.pro-card .card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Title */
.pro-dashboard .pro-main #market.pro-card .card-head h2,
.pro-dashboard .pro-main #market.pro-card .card-head h3 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    text-shadow:
        0 0 24px rgba(250, 204, 21, 0.10),
        0 0 46px rgba(59, 130, 246, 0.08);
}

/* Supporting text */
.pro-dashboard .pro-main #market.pro-card p,
.pro-dashboard .pro-main #market.pro-card small,
.pro-dashboard .pro-main #market.pro-card span {
    color: #a9b7cc;
}

/* Form controls inside Market Tools */
.pro-dashboard .pro-main #market.pro-card input,
.pro-dashboard .pro-main #market.pro-card select,
.pro-dashboard .pro-main #market.pro-card textarea {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.60) !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 12px 26px rgba(0,0,0,0.12) !important;
}

/* Focus */
.pro-dashboard .pro-main #market.pro-card input:focus,
.pro-dashboard .pro-main #market.pro-card select:focus,
.pro-dashboard .pro-main #market.pro-card textarea:focus {
    outline: none !important;
    border-color: rgba(250, 204, 21, 0.52) !important;
    box-shadow:
        0 0 0 3px rgba(250, 204, 21, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Buttons */
.pro-dashboard .pro-main #market.pro-card .btn,
.pro-dashboard .pro-main #market.pro-card button {
    border-radius: 16px !important;
    font-weight: 950 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

.pro-dashboard .pro-main #market.pro-card .btn:hover,
.pro-dashboard .pro-main #market.pro-card button:hover {
    transform: translateY(-1px) !important;
}

/* Primary-style buttons in market card */
.pro-dashboard .pro-main #market.pro-card .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.24), transparent 34%),
        linear-gradient(135deg, #2563EB, #f97316) !important;
    color: #111827 !important;
    box-shadow:
        0 0 20px rgba(250, 204, 21, 0.24),
        0 14px 30px rgba(0,0,0,0.28) !important;
}

/* Result/table areas if present */
.pro-dashboard .pro-main #market.pro-card table,
.pro-dashboard .pro-main #market.pro-card .market-result,
.pro-dashboard .pro-main #market.pro-card .result-card,
.pro-dashboard .pro-main #market.pro-card .price-card,
.pro-dashboard .pro-main #market.pro-card .market-output {
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 60%),
        rgba(2, 6, 23, 0.56) !important;
    border-radius: 22px !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Mobile safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main #market.pro-card {
        border-radius: 22px !important;
    }

    .pro-dashboard .pro-main #market.pro-card .card-head {
        flex-direction: column !important;
    }
}

/* DASHBOARD MARKET TOOLS POLISH END */

/* DASHBOARD TRADE PANEL POLISH START */

/*
   Polishes only the Order Execution / Trade panel.
   Scoped to:
   .pro-dashboard .pro-main #trade.trade-card
*/

.pro-dashboard .pro-main #trade.trade-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.14), transparent 30rem),
        radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.09), transparent 26rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78)) !important;
    box-shadow:
        0 28px 82px rgba(0, 0, 0, 0.30),
        0 0 34px rgba(139, 92, 246, 0.07),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

/* Soft top highlight */
.pro-dashboard .pro-main #trade.trade-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%, transparent 100%);
    opacity: 0.10;
}

/* Keep content above highlight */
.pro-dashboard .pro-main #trade.trade-card > * {
    position: relative;
    z-index: 2;
}

/* Header row */
.pro-dashboard .pro-main #trade.trade-card .card-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Title */
.pro-dashboard .pro-main #trade.trade-card .card-head h2,
.pro-dashboard .pro-main #trade.trade-card .card-head h3 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
    text-shadow:
        0 0 24px rgba(139, 92, 246, 0.12),
        0 0 46px rgba(34, 197, 94, 0.08);
}

/* Supporting text */
.pro-dashboard .pro-main #trade.trade-card p,
.pro-dashboard .pro-main #trade.trade-card small,
.pro-dashboard .pro-main #trade.trade-card span {
    color: #a9b7cc;
}

/* Labels inside trade panel */
.pro-dashboard .pro-main #trade.trade-card label {
    color: #dbeafe !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
}

/* Inputs/selects/textareas */
.pro-dashboard .pro-main #trade.trade-card input,
.pro-dashboard .pro-main #trade.trade-card select,
.pro-dashboard .pro-main #trade.trade-card textarea {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.60) !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 12px 26px rgba(0,0,0,0.12) !important;
}

/* Focus state */
.pro-dashboard .pro-main #trade.trade-card input:focus,
.pro-dashboard .pro-main #trade.trade-card select:focus,
.pro-dashboard .pro-main #trade.trade-card textarea:focus {
    outline: none !important;
    border-color: rgba(139, 92, 246, 0.58) !important;
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.14),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Buttons */
.pro-dashboard .pro-main #trade.trade-card .btn,
.pro-dashboard .pro-main #trade.trade-card button {
    border-radius: 16px !important;
    font-weight: 950 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

.pro-dashboard .pro-main #trade.trade-card .btn:hover,
.pro-dashboard .pro-main #trade.trade-card button:hover {
    transform: translateY(-1px) !important;
}

/* Primary execution button */
.pro-dashboard .pro-main #trade.trade-card .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.24), transparent 34%),
        linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.28),
        0 14px 30px rgba(0,0,0,0.28) !important;
}

/* Trade result / execution feedback areas */
.pro-dashboard .pro-main #trade.trade-card .trade-result,
.pro-dashboard .pro-main #trade.trade-card .order-result,
.pro-dashboard .pro-main #trade.trade-card .execution-result,
.pro-dashboard .pro-main #trade.trade-card .result-card,
.pro-dashboard .pro-main #trade.trade-card .trade-output {
    border: 1px solid rgba(139, 92, 246, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(139, 92, 246, 0.11), transparent 60%),
        rgba(2, 6, 23, 0.56) !important;
    border-radius: 22px !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Warning/risk notes if present */
.pro-dashboard .pro-main #trade.trade-card .warning,
.pro-dashboard .pro-main #trade.trade-card .risk-note,
.pro-dashboard .pro-main #trade.trade-card .alert {
    border-radius: 18px !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 60%),
        rgba(2, 6, 23, 0.52) !important;
    color: #fde68a !important;
}

/* Mobile safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main #trade.trade-card {
        border-radius: 22px !important;
    }

    .pro-dashboard .pro-main #trade.trade-card .card-head {
        flex-direction: column !important;
    }
}

/* DASHBOARD TRADE PANEL POLISH END */

/* DASHBOARD OVERVIEW PANEL POLISH START */

/*
   Polishes only the dashboard overview / hero panel.
   Scoped to:
   .pro-dashboard .pro-main #overview.pro-hero-panel
*/

.pro-dashboard .pro-main #overview.pro-hero-panel {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(59, 130, 246, 0.20), transparent 30rem),
        radial-gradient(circle at 92% 18%, rgba(250, 204, 21, 0.10), transparent 28rem),
        radial-gradient(circle at 72% 90%, rgba(34, 211, 238, 0.08), transparent 30rem),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.82)) !important;
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(34, 211, 238, 0.07),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Subtle grid/shine overlay */
.pro-dashboard .pro-main #overview.pro-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 28%, transparent 100%);
    background-size: 42px 42px, 42px 42px, auto;
    opacity: 0.20;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
}

/* Keep content above overlay */
.pro-dashboard .pro-main #overview.pro-hero-panel > * {
    position: relative;
    z-index: 2;
}

/* Headings */
.pro-dashboard .pro-main #overview.pro-hero-panel h1,
.pro-dashboard .pro-main #overview.pro-hero-panel h2,
.pro-dashboard .pro-main #overview.pro-hero-panel h3 {
    color: #f8fafc !important;
    letter-spacing: -0.055em !important;
    text-shadow:
        0 0 28px rgba(59, 130, 246, 0.18),
        0 0 56px rgba(34, 211, 238, 0.08);
}

/* Paragraph/supporting text */
.pro-dashboard .pro-main #overview.pro-hero-panel p,
.pro-dashboard .pro-main #overview.pro-hero-panel small,
.pro-dashboard .pro-main #overview.pro-hero-panel span {
    color: #a9b7cc;
}

/* Pills/badges inside overview */
.pro-dashboard .pro-main #overview.pro-hero-panel .badge,
.pro-dashboard .pro-main #overview.pro-hero-panel .pill,
.pro-dashboard .pro-main #overview.pro-hero-panel .tag {
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.28) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 55%),
        rgba(15, 23, 42, 0.72) !important;
    color: #FFFFFF !important;
    font-weight: 950 !important;
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Buttons in overview */
.pro-dashboard .pro-main #overview.pro-hero-panel .btn,
.pro-dashboard .pro-main #overview.pro-hero-panel button {
    border-radius: 16px !important;
    font-weight: 950 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

.pro-dashboard .pro-main #overview.pro-hero-panel .btn:hover,
.pro-dashboard .pro-main #overview.pro-hero-panel button:hover {
    transform: translateY(-1px) !important;
}

/* Primary action in overview */
.pro-dashboard .pro-main #overview.pro-hero-panel .btn-primary {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.26), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    box-shadow:
        0 0 20px rgba(14, 165, 233, 0.28),
        0 14px 30px rgba(0,0,0,0.28) !important;
}

/* Inputs/selects if any exist in overview panel */
.pro-dashboard .pro-main #overview.pro-hero-panel input,
.pro-dashboard .pro-main #overview.pro-hero-panel select,
.pro-dashboard .pro-main #overview.pro-hero-panel textarea {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.58) !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
}

/* Mobile safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main #overview.pro-hero-panel {
        border-radius: 24px !important;
    }
}

/* DASHBOARD OVERVIEW PANEL POLISH END */

/* DASHBOARD OVERVIEW VISIBLE UPDATE START */

/*
   More visible update for the dashboard overview hero panel:
   - stronger badge treatment
   - status chips under subtitle
   - improved spacing inside only #overview.pro-hero-panel
*/

.pro-dashboard .pro-main #overview.pro-hero-panel {
    padding: clamp(28px, 3.2vw, 44px) !important;
}

/* Make the top badge more obviously updated */
.pro-dashboard .pro-main #overview.pro-hero-panel > span:first-child,
.pro-dashboard .pro-main #overview.pro-hero-panel .badge:first-child,
.pro-dashboard .pro-main #overview.pro-hero-panel .pill:first-child,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="badge"]:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: fit-content !important;
    padding: 11px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34, 211, 238, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 58%),
        rgba(15, 23, 42, 0.78) !important;
    color: #ecfeff !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    box-shadow:
        0 0 24px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Dashboard chips under the subtitle */
.pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 55%),
        rgba(2, 6, 23, 0.52) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.72);
}

.pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips span:nth-child(2)::before {
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.72);
}

.pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips span:nth-child(3)::before {
    background: #2563EB;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.72);
}

/* Tighten the subtitle so it sits nicely with chips */
.pro-dashboard .pro-main #overview.pro-hero-panel p {
    max-width: 940px !important;
    line-height: 1.55 !important;
}

/* Mobile */
@media (max-width: 780px) {
    .pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips {
        gap: 8px !important;
    }

    .pro-dashboard .pro-main #overview.pro-hero-panel .pro-hero-chips span {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* DASHBOARD OVERVIEW VISIBLE UPDATE END */

/* DASHBOARD AES RING POLISH START */

/*
   Polishes the AES-256 circular security widget inside the dashboard overview panel.
   Scoped only to #overview.pro-hero-panel.
*/

/* Likely AES/security circle containers inside the overview panel */
.pro-dashboard .pro-main #overview.pro-hero-panel .security-ring,
.pro-dashboard .pro-main #overview.pro-hero-panel .aes-ring,
.pro-dashboard .pro-main #overview.pro-hero-panel .encryption-ring,
.pro-dashboard .pro-main #overview.pro-hero-panel .hero-ring,
.pro-dashboard .pro-main #overview.pro-hero-panel .pro-ring,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"],
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"] {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    isolation: isolate !important;
}

/* Improve the ring look without touching the whole overview panel */
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"] {
    filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.18)) !important;
}

/* Subtle outer glow */
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"]::before,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"]::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 66%);
    opacity: 0.85;
    animation: aesRingSoftGlow 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* Make AES number/text feel sharper */
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"] strong,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"] strong {
    color: #f8fafc !important;
    font-weight: 1000 !important;
    letter-spacing: -0.04em !important;
    text-shadow:
        0 0 16px rgba(255,255,255,0.14),
        0 0 28px rgba(34, 197, 94, 0.18) !important;
}

/* AES label */
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"] span,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"] span,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"] small,
.pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"] small {
    color: #dbeafe !important;
    font-weight: 900 !important;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.12) !important;
}

/* Gentle non-flashing animation */
@keyframes aesRingSoftGlow {
    0% {
        transform: scale(0.96);
        opacity: 0.48;
    }

    50% {
        transform: scale(1.04);
        opacity: 0.90;
    }

    100% {
        transform: scale(0.96);
        opacity: 0.48;
    }
}

/* If the ring uses SVG/circle elements */
.pro-dashboard .pro-main #overview.pro-hero-panel svg {
    filter:
        drop-shadow(0 0 12px rgba(34, 197, 94, 0.20))
        drop-shadow(0 0 20px rgba(250, 204, 21, 0.10)) !important;
}

.pro-dashboard .pro-main #overview.pro-hero-panel circle {
    stroke-linecap: round !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pro-dashboard .pro-main #overview.pro-hero-panel [class*="ring"]::before,
    .pro-dashboard .pro-main #overview.pro-hero-panel [class*="encrypt"]::before {
        animation: none !important;
    }
}

/* DASHBOARD AES RING POLISH END */

/* CONFIDENCE RING POLISH START */

/*
   Exact polish for the dashboard AES-256 confidence ring.
   Targets:
   #overview.pro-hero-panel .confidence-ring
*/

.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring {
    position: relative !important;
    width: 190px !important;
    height: 190px !important;
    min-width: 190px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background:
        conic-gradient(
            from -35deg,
            #22c55e 0deg,
            #22c55e 255deg,
            #2563EB 255deg,
            #2563EB 315deg,
            rgba(255,255,255,0.14) 315deg,
            rgba(255,255,255,0.14) 360deg
        ) !important;
    box-shadow:
        0 0 34px rgba(34, 197, 94, 0.24),
        0 0 54px rgba(250, 204, 21, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.08) !important;
    animation: confidenceRingGlow 3.2s ease-in-out infinite !important;
}

/* Inner dark circle */
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 32%, rgba(59, 130, 246, 0.18), transparent 56%),
        #020617;
    box-shadow:
        inset 0 0 24px rgba(0,0,0,0.70),
        inset 0 0 0 1px rgba(255,255,255,0.05);
    z-index: 1;
}

/* Soft outside halo */
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(34, 197, 94, 0.18), transparent 68%);
    z-index: 0;
    pointer-events: none;
}

/* Keep existing text above inner circle */
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Main 256 text */
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring strong,
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring b {
    color: #ffffff !important;
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.04em !important;
    text-shadow:
        0 0 18px rgba(255,255,255,0.16),
        0 0 30px rgba(34,197,94,0.20) !important;
}

/* AES encryption label */
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring span,
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring small,
.pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring p {
    color: #dbeafe !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-shadow: 0 0 12px rgba(34,211,238,0.14) !important;
}

/* Gentle glow, not flashing */
@keyframes confidenceRingGlow {
    0% {
        filter: drop-shadow(0 0 10px rgba(34,197,94,0.18));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(34,197,94,0.30));
        transform: scale(1.015);
    }

    100% {
        filter: drop-shadow(0 0 10px rgba(34,197,94,0.18));
        transform: scale(1);
    }
}

/* Mobile safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
    }

    .pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring strong,
    .pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring b {
        font-size: 32px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pro-dashboard .pro-main #overview.pro-hero-panel .confidence-ring {
        animation: none !important;
    }
}

/* CONFIDENCE RING POLISH END */

/* DASHBOARD RESULT SNAPSHOT START */

/*
   Styles the generated Market Snapshot above the raw ByBit JSON response.
   Scoped to the dashboard result panel.
*/

.pro-dashboard .pro-main .pro-result-panel {
    overflow: hidden !important;
}

/* Snapshot container */
.pro-dashboard .pro-main .result-market-snapshot {
    margin-bottom: 22px !important;
    padding: 24px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(34, 211, 238, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.13), transparent 60%),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.08), transparent 60%),
        rgba(2, 6, 23, 0.58) !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.028) !important;
}

/* Snapshot header */
.pro-dashboard .pro-main .result-market-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

/* Market Snapshot label */
.pro-dashboard .pro-main .result-market-head span {
    display: inline-flex !important;
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Symbol heading */
.pro-dashboard .pro-main .result-market-head h3 {
    margin: 6px 0 0 !important;
    color: #f8fafc !important;
    font-size: clamp(32px, 3vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
    text-shadow:
        0 0 24px rgba(34, 211, 238, 0.10),
        0 0 44px rgba(59, 130, 246, 0.08);
}

/* Live API Data pill */
.pro-dashboard .pro-main .result-market-head b {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34,197,94,0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.16), transparent 55%),
        rgba(34,197,94,0.10) !important;
    color: #bbf7d0 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
    box-shadow:
        0 0 18px rgba(34,197,94,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .result-market-head b::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 12px rgba(34,197,94,0.75);
}

/* Metric grid */
.pro-dashboard .pro-main .result-market-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

/* Individual metric cards */
.pro-dashboard .pro-main .result-metric {
    min-height: 96px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.10), transparent 60%),
        rgba(2,6,23,0.55) !important;
    box-shadow:
        0 12px 30px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.022) !important;
}

/* Metric labels */
.pro-dashboard .pro-main .result-metric span {
    display: block !important;
    margin-bottom: 10px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

/* Metric values */
.pro-dashboard .pro-main .result-metric strong {
    color: #f8fafc !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.035em !important;
}

/* Accent values */
.pro-dashboard .pro-main .result-metric.positive strong,
.pro-dashboard .pro-main .result-metric.green strong {
    color: #86efac !important;
}

.pro-dashboard .pro-main .result-metric.negative strong {
    color: #fca5a5 !important;
}

.pro-dashboard .pro-main .result-metric.gold strong {
    color: #fde68a !important;
}

.pro-dashboard .pro-main .result-metric.blue strong {
    color: #bae6fd !important;
}

.pro-dashboard .pro-main .result-metric.purple strong {
    color: #ddd6fe !important;
}

/* Raw JSON details button */
.pro-dashboard .pro-main .result-json-details summary {
    cursor: pointer !important;
    width: fit-content !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 55%),
        rgba(15,23,42,0.78) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Collapsed raw JSON block */
.pro-dashboard .pro-main .result-json-details pre {
    margin-top: 14px !important;
    max-height: 360px !important;
    overflow: auto !important;
    border-radius: 20px !important;
}

/* Tablet */
@media (max-width: 980px) {
    .pro-dashboard .pro-main .result-market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 720px) {
    .pro-dashboard .pro-main .result-market-head {
        flex-direction: column !important;
    }

    .pro-dashboard .pro-main .result-market-grid {
        grid-template-columns: 1fr !important;
    }
}

/* DASHBOARD RESULT SNAPSHOT END */

/* DASHBOARD SECURE MESSAGE POLISH START */

/*
   Polishes the logged-in dashboard secure/admin message launcher and modal.
   CSS-only. No PHP/API/database/trading logic changes.
*/

/* Floating secure message launcher */
.e2e-message-launcher {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 950 !important;
    width: 58px !important;
    height: 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34, 211, 238, 0.42) !important;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 32%),
        linear-gradient(135deg, #0284c7, #06b6d4) !important;
    box-shadow:
        0 0 24px rgba(34, 211, 238, 0.34),
        0 18px 38px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255,255,255,0.16) !important;
    cursor: pointer !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease !important;
}

.e2e-message-launcher:hover {
    transform: translateY(-3px) scale(1.035) !important;
    border-color: rgba(250, 204, 21, 0.46) !important;
    box-shadow:
        0 0 30px rgba(34, 211, 238, 0.46),
        0 0 18px rgba(250, 204, 21, 0.18),
        0 22px 44px rgba(0, 0, 0, 0.40),
        inset 0 0 0 1px rgba(255,255,255,0.20) !important;
}

/* Add a subtle encrypted glow ring */
.e2e-message-launcher::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.22);
    opacity: 0.75;
    pointer-events: none;
    animation: secureMessageSoftPulse 2.6s ease-in-out infinite;
}

@keyframes secureMessageSoftPulse {
    0% {
        transform: scale(0.94);
        opacity: 0.36;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.78;
    }

    100% {
        transform: scale(0.94);
        opacity: 0.36;
    }
}

/* Message modal shell */
#e2eAdminMessageModal,
.e2e-admin-modal,
.e2e-modal {
    backdrop-filter: blur(10px) !important;
}

/* Modal card/content */
#e2eAdminMessageModal .modal-content,
#e2eAdminMessageModal .modal-card,
#e2eAdminMessageModal .e2e-modal-card,
.e2e-admin-modal .modal-content,
.e2e-admin-modal .modal-card,
.e2e-modal .modal-content,
.e2e-modal .modal-card {
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 28rem),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.08), transparent 24rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.92)) !important;
    box-shadow:
        0 34px 110px rgba(0,0,0,0.48),
        0 0 42px rgba(34, 211, 238, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Modal headings */
#e2eAdminMessageModal h2,
#e2eAdminMessageModal h3,
.e2e-admin-modal h2,
.e2e-admin-modal h3,
.e2e-modal h2,
.e2e-modal h3 {
    color: #f8fafc !important;
    letter-spacing: -0.04em !important;
    text-shadow:
        0 0 24px rgba(34, 211, 238, 0.12),
        0 0 44px rgba(59, 130, 246, 0.08) !important;
}

/* Modal helper text */
#e2eAdminMessageModal p,
#e2eAdminMessageModal small,
.e2e-admin-modal p,
.e2e-admin-modal small,
.e2e-modal p,
.e2e-modal small {
    color: #a9b7cc !important;
}

/* Inputs/textareas inside secure message modal */
#e2eAdminMessageModal input,
#e2eAdminMessageModal textarea,
#e2eAdminMessageModal select,
.e2e-admin-modal input,
.e2e-admin-modal textarea,
.e2e-admin-modal select,
.e2e-modal input,
.e2e-modal textarea,
.e2e-modal select {
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(2, 6, 23, 0.62) !important;
    color: #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 12px 26px rgba(0,0,0,0.12) !important;
}

#e2eAdminMessageModal input:focus,
#e2eAdminMessageModal textarea:focus,
#e2eAdminMessageModal select:focus,
.e2e-admin-modal input:focus,
.e2e-admin-modal textarea:focus,
.e2e-admin-modal select:focus,
.e2e-modal input:focus,
.e2e-modal textarea:focus,
.e2e-modal select:focus {
    outline: none !important;
    border-color: rgba(34, 211, 238, 0.52) !important;
    box-shadow:
        0 0 0 3px rgba(34, 211, 238, 0.12),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Buttons inside modal */
#e2eAdminMessageModal .btn,
#e2eAdminMessageModal button,
.e2e-admin-modal .btn,
.e2e-admin-modal button,
.e2e-modal .btn,
.e2e-modal button {
    border-radius: 16px !important;
    font-weight: 950 !important;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease !important;
}

#e2eAdminMessageModal .btn:hover,
#e2eAdminMessageModal button:hover,
.e2e-admin-modal .btn:hover,
.e2e-admin-modal button:hover,
.e2e-modal .btn:hover,
.e2e-modal button:hover {
    transform: translateY(-1px) !important;
}

/* Mobile */
@media (max-width: 780px) {
    .e2e-message-launcher {
        right: 16px !important;
        bottom: 16px !important;
        width: 54px !important;
        height: 54px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .e2e-message-launcher::after {
        animation: none !important;
    }
}

/* DASHBOARD SECURE MESSAGE POLISH END */


    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(34,211,238,0.13), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(250,204,21,0.08), transparent 28rem),
        linear-gradient(180deg, rgba(15,23,42,0.94), rgba(2,6,23,0.82)) !important;
    box-shadow:
        0 28px 82px rgba(0,0,0,0.30),
        0 0 34px rgba(34,211,238,0.07),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .live-crypto-board-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.pro-dashboard .pro-main .live-crypto-eyebrow {
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.pro-dashboard .pro-main .live-crypto-board h2 {
    margin: 8px 0 8px !important;
    color: #f8fafc !important;
    font-size: clamp(30px, 3vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
}

.pro-dashboard .pro-main .live-crypto-board p {
    margin: 0 !important;
    color: #a9b7cc !important;
    line-height: 1.5 !important;
}

.pro-dashboard .pro-main .live-crypto-status {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(15,23,42,0.78) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .live-crypto-status b {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live {
    border-color: rgba(34,197,94,0.30) !important;
    background: rgba(34,197,94,0.10) !important;
    color: #bbf7d0 !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live b {
    background: #22c55e !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.75) !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-loading b {
    background: #22d3ee !important;
    box-shadow: 0 0 12px rgba(34,211,238,0.75) !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-error {
    border-color: rgba(248,113,113,0.35) !important;
    color: #fecaca !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-error b {
    background: #f87171 !important;
}

.pro-dashboard .pro-main .live-crypto-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(15,23,42,0.72) !important;
    color: #cbd5e1 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button.is-active {
    border-color: rgba(250,204,21,0.36) !important;
    background:
        radial-gradient(circle at top left, rgba(250,204,21,0.16), transparent 58%),
        rgba(15,23,42,0.86) !important;
    color: #FFFFFF !important;
}

.pro-dashboard .pro-main .live-crypto-table-wrap {
    overflow-x: auto !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(2,6,23,0.48) !important;
}

.pro-dashboard .pro-main .live-crypto-table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: 880px !important;
}

.pro-dashboard .pro-main .live-crypto-table th {
    padding: 14px 16px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    background: rgba(15,23,42,0.72) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.pro-dashboard .pro-main .live-crypto-table td {
    padding: 15px 16px !important;
    color: #dbeafe !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    vertical-align: middle !important;
}

.pro-dashboard .pro-main .live-crypto-table tbody tr:hover {
    background: rgba(34,211,238,0.055) !important;
}

/* LIVE CRYPTO MARKET BOARD START */

.pro-dashboard .pro-main .live-crypto-board {
    padding: 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(34,211,238,0.13), transparent 32rem),
        radial-gradient(circle at bottom right, rgba(250,204,21,0.08), transparent 28rem),
        linear-gradient(180deg, rgba(15,23,42,0.94), rgba(2,6,23,0.82)) !important;
    box-shadow:
        0 28px 82px rgba(0,0,0,0.30),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .live-crypto-board-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding-bottom: 20px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.pro-dashboard .pro-main .live-crypto-eyebrow {
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.pro-dashboard .pro-main .live-crypto-board h2 {
    margin: 8px 0 !important;
    color: #f8fafc !important;
    font-size: clamp(30px, 3vw, 46px) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
}

.pro-dashboard .pro-main .live-crypto-board p {
    margin: 0 !important;
    color: #a9b7cc !important;
}

.pro-dashboard .pro-main .live-crypto-status {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(15,23,42,0.78) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-status b {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live {
    border-color: rgba(34,197,94,0.30) !important;
    background: rgba(34,197,94,0.10) !important;
    color: #bbf7d0 !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live b {
    background: #22c55e !important;
    box-shadow: 0 0 12px rgba(34,197,94,0.75) !important;
}

.pro-dashboard .pro-main .live-crypto-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(15,23,42,0.72) !important;
    color: #cbd5e1 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button.is-active {
    border-color: rgba(250,204,21,0.36) !important;
    background: rgba(15,23,42,0.86) !important;
    color: #FFFFFF !important;
}

.pro-dashboard .pro-main .live-crypto-table-wrap {
    overflow-x: auto !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background: rgba(2,6,23,0.48) !important;
}

.pro-dashboard .pro-main .live-crypto-table {
    width: 100% !important;
    min-width: 880px !important;
    border-collapse: collapse !important;
}

.pro-dashboard .pro-main .live-crypto-table th,
.pro-dashboard .pro-main .live-crypto-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    text-align: left !important;
}

.pro-dashboard .pro-main .live-crypto-table th {
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: rgba(15,23,42,0.72) !important;
}

.pro-dashboard .pro-main .live-crypto-table td {
    color: #dbeafe !important;
}

.pro-dashboard .pro-main .live-crypto-table td strong {
    display: block !important;
    color: #f8fafc !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table td small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
}

.pro-dashboard .pro-main .live-crypto-table .price {
    color: #bae6fd !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.positive {
    color: #86efac !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.negative {
    color: #fca5a5 !important;
    font-weight: 1000 !important;
}

/* LIVE CRYPTO MARKET BOARD END */

/* LIVE CRYPTO BOARD REFINEMENT START */

/*
   Refinement for the Live Crypto Prices board:
   - separates asset/symbol text
   - styles tabs properly
   - styles live status pill
   - improves table spacing/readability
*/

.pro-dashboard .pro-main .live-crypto-board {
    margin-top: 0 !important;
}

.pro-dashboard .pro-main .live-crypto-board-head {
    align-items: flex-start !important;
}

.pro-dashboard .pro-main .live-crypto-status {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(34, 211, 238, 0.26) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.82) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .live-crypto-status b {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #22d3ee !important;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.72) !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live {
    border-color: rgba(34, 197, 94, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 58%),
        rgba(20, 83, 45, 0.22) !important;
    color: #bbf7d0 !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-live b {
    background: #22c55e !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.78) !important;
}

.pro-dashboard .pro-main .live-crypto-status.is-error {
    border-color: rgba(248, 113, 113, 0.36) !important;
    background: rgba(127, 29, 29, 0.22) !important;
    color: #fecaca !important;
}

.pro-dashboard .pro-main .live-crypto-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 18px 0 18px !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.78) !important;
    color: #cbd5e1 !important;
    font-weight: 950 !important;
    cursor: pointer !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.16),
        inset 0 0 0 1px rgba(255,255,255,0.02) !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button:hover {
    border-color: rgba(34, 211, 238, 0.34) !important;
    transform: translateY(-1px) !important;
}

.pro-dashboard .pro-main .live-crypto-tabs button.is-active {
    border-color: rgba(250, 204, 21, 0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.18), transparent 58%),
        rgba(15, 23, 42, 0.90) !important;
    color: #FFFFFF !important;
    box-shadow:
        0 0 18px rgba(250, 204, 21, 0.12),
        0 10px 24px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(1),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(1) {
    width: 48px !important;
    color: #94a3b8 !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(2),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(2) {
    min-width: 155px !important;
}

.pro-dashboard .pro-main .live-crypto-table td:nth-child(2) {
    white-space: normal !important;
}

.pro-dashboard .pro-main .live-crypto-table td strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #f8fafc !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
    line-height: 1.05 !important;
}

.pro-dashboard .pro-main .live-crypto-table td small {
    display: block !important;
    margin-top: 0 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em !important;
}

.pro-dashboard .pro-main .live-crypto-table .price {
    color: #bae6fd !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table .change {
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.positive {
    color: #86efac !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.negative {
    color: #fca5a5 !important;
}

.pro-dashboard .pro-main .live-crypto-table tbody tr:hover {
    background: rgba(34, 211, 238, 0.055) !important;
}

/* Mobile/tablet safety */
@media (max-width: 780px) {
    .pro-dashboard .pro-main .live-crypto-board-head {
        flex-direction: column !important;
    }

    .pro-dashboard .pro-main .live-crypto-status {
        width: fit-content !important;
    }
}

/* LIVE CRYPTO BOARD REFINEMENT END */

/* LIVE CRYPTO SINGLE LIST START */

/*
   Single-list mode for Live Crypto Prices.
   Hides old Major/Top 30 tabs if old markup remains cached.
*/

.pro-dashboard .pro-main .live-crypto-tabs {
    display: none !important;
}

/* LIVE CRYPTO SINGLE LIST END */

/* MARKET TABLE VISUAL POLISH START */

/*
   Visual-only polish for the Live Crypto Prices table.
   Does not change API logic, ranking, data source, database or trading behaviour.
*/

/* Slightly better board/table rhythm */
.pro-dashboard .pro-main .live-crypto-board {
    padding-bottom: 30px !important;
}

.pro-dashboard .pro-main .live-crypto-table-wrap {
    border-radius: 24px !important;
    overflow-x: auto !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.060), transparent 52%),
        rgba(2, 6, 23, 0.62) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
}

/* Cleaner table sizing */
.pro-dashboard .pro-main .live-crypto-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    min-width: 980px !important;
}

/* Header polish */
.pro-dashboard .pro-main .live-crypto-table th {
    padding-top: 17px !important;
    padding-bottom: 17px !important;
    color: #9fb4d1 !important;
    font-size: 11px !important;
    letter-spacing: 0.105em !important;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.66)) !important;
}

/* Row spacing */
.pro-dashboard .pro-main .live-crypto-table td {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Subtle row hover */
.pro-dashboard .pro-main .live-crypto-table tbody tr {
    transition:
        background 0.16s ease,
        box-shadow 0.16s ease !important;
}

.pro-dashboard .pro-main .live-crypto-table tbody tr:hover {
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.070), rgba(15, 23, 42, 0.015)) !important;
}

/* Rank column */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(1),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(1) {
    width: 52px !important;
    color: #93c5fd !important;
    text-align: center !important;
    font-weight: 900 !important;
}

/* Asset column */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(2),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(2) {
    min-width: 210px !important;
    text-align: left !important;
}

/* Numeric columns right-aligned */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(3),
.pro-dashboard .pro-main .live-crypto-table th:nth-child(5),
.pro-dashboard .pro-main .live-crypto-table th:nth-child(6),
.pro-dashboard .pro-main .live-crypto-table th:nth-child(7),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(3),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(5),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(6),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(7) {
    text-align: right !important;
}

/* 24h column centred */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(4),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(4) {
    text-align: center !important;
}

/* Add subtle separator before market data columns */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(3),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(3) {
    border-left: 1px solid rgba(148, 163, 184, 0.075) !important;
}

/* Price column stronger */
.pro-dashboard .pro-main .live-crypto-table .price {
    color: #bae6fd !important;
    font-size: 15px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.015em !important;
}

/* 24h badge */
.pro-dashboard .pro-main .live-crypto-table .change {
    display: inline-flex !important;
    min-width: 74px !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.positive {
    color: #86efac !important;
    background: rgba(34, 197, 94, 0.105) !important;
    border: 1px solid rgba(34, 197, 94, 0.18) !important;
}

.pro-dashboard .pro-main .live-crypto-table .change.negative {
    color: #fca5a5 !important;
    background: rgba(248, 113, 113, 0.105) !important;
    border: 1px solid rgba(248, 113, 113, 0.18) !important;
}

/* CMC USD Volume column emphasis */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(7) {
    color: #fde68a !important;
}

.pro-dashboard .pro-main .live-crypto-table td:nth-child(7) {
    color: #FFFFFF !important;
    font-weight: 1000 !important;
    letter-spacing: -0.01em !important;
    background:
        linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.035)) !important;
}

/* Asset text refinement */
.pro-dashboard .pro-main .live-crypto-table .asset-copy strong,
.pro-dashboard .pro-main .live-crypto-table td strong {
    font-size: 16px !important;
    letter-spacing: -0.015em !important;
}

.pro-dashboard .pro-main .live-crypto-table .asset-copy small,
.pro-dashboard .pro-main .live-crypto-table td small {
    color: #7f93ad !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
}

/* Small-screen safety */
@media (max-width: 900px) {
    .pro-dashboard .pro-main .live-crypto-table {
        min-width: 940px !important;
    }

    .pro-dashboard .pro-main .live-crypto-table th,
    .pro-dashboard .pro-main .live-crypto-table td {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

/* MARKET TABLE VISUAL POLISH END */

/* DAILY PATTERN COLUMN START */

/*
   Visual-only styling for Daily Pattern column.
   Pattern values are generated server-side from Bybit daily candles.
*/

.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    text-align: left !important;
    min-width: 170px !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(8) {
    color: #c4b5fd !important;
}

.pro-dashboard .pro-main .live-crypto-table td.daily-pattern-cell {
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .daily-pattern-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.76) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 58%),
        rgba(20, 83, 45, 0.18) !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-bearish {
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.18) !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167, 139, 250, 0.28) !important;
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.14), transparent 58%),
        rgba(49, 46, 129, 0.16) !important;
}

/* Make room for the new final column */
.pro-dashboard .pro-main .live-crypto-table {
    min-width: 1130px !important;
}

@media (max-width: 900px) {
    .pro-dashboard .pro-main .live-crypto-table {
        min-width: 1120px !important;
    }
}

/* DAILY PATTERN COLUMN END */

/* DAILY PATTERN VISUAL POLISH START */

/*
   Visual-only polish for the Daily Pattern column.
   No API, detection, ranking, database, or trading logic is changed.
*/

/* Keep the final pattern column readable */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 190px !important;
    text-align: left !important;
}

/* Header highlight for pattern column */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(8) {
    color: #c4b5fd !important;
}

/* Base pattern pill */
.pro-dashboard .pro-main .daily-pattern-pill {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 58%),
        rgba(15, 23, 42, 0.82) !important;
    color: #dbeafe !important;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* Small icon dot/arrow area */
.pro-dashboard .pro-main .daily-pattern-pill::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

/* Bullish patterns */
.pro-dashboard .pro-main .daily-pattern-pill.pattern-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, 0.36) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.22), transparent 58%),
        rgba(20, 83, 45, 0.24) !important;
    box-shadow:
        0 0 18px rgba(34, 197, 94, 0.10),
        0 10px 22px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-bullish::before {
    content: "↑" !important;
    color: #052e16 !important;
    background: #86efac !important;
}

/* Bearish patterns */
.pro-dashboard .pro-main .daily-pattern-pill.pattern-bearish {
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.38) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.22), transparent 58%),
        rgba(127, 29, 29, 0.24) !important;
    box-shadow:
        0 0 18px rgba(248, 113, 113, 0.10),
        0 10px 22px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-bearish::before {
    content: "↓" !important;
    color: #450a0a !important;
    background: #fca5a5 !important;
}

/* Neutral / no clear / inside day patterns */
.pro-dashboard .pro-main .daily-pattern-pill.pattern-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167, 139, 250, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.18), transparent 58%),
        rgba(49, 46, 129, 0.20) !important;
}

.pro-dashboard .pro-main .daily-pattern-pill.pattern-neutral::before {
    content: "•" !important;
    color: #312e81 !important;
    background: #c4b5fd !important;
}

/* Slightly de-emphasise No Clear Pattern while keeping it readable */
.pro-dashboard .pro-main .daily-pattern-pill.pattern-neutral {
    opacity: 0.94 !important;
}

/* Row hover makes pattern pill pop slightly */
.pro-dashboard .pro-main .live-crypto-table tbody tr:hover .daily-pattern-pill {
    transform: translateY(-1px) !important;
}

/* DAILY PATTERN VISUAL POLISH END */

/* DAILY PATTERN PILL FIX START */

/*
   Strong styling for Daily Pattern cells.
   Frontend-only: no API, data, ranking, database, or trading logic changed.
*/

.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 210px !important;
    text-align: left !important;
}

.pro-dashboard .pro-main .live-crypto-table td.daily-pattern-cell {
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34,197,94,0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.22), transparent 58%),
        rgba(20,83,45,0.28) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bullish::before {
    content: "↑" !important;
    color: #052e16 !important;
    background: #86efac !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bearish {
    color: #fecaca !important;
    border-color: rgba(248,113,113,0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(248,113,113,0.22), transparent 58%),
        rgba(127,29,29,0.28) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bearish::before {
    content: "↓" !important;
    color: #450a0a !important;
    background: #fca5a5 !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167,139,250,0.38) !important;
    background:
        radial-gradient(circle at top left, rgba(167,139,250,0.18), transparent 58%),
        rgba(49,46,129,0.24) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-neutral::before {
    content: "•" !important;
    color: #312e81 !important;
    background: #c4b5fd !important;
}

/* DAILY PATTERN PILL FIX END */

/* DAILY PATTERN FINAL PILL FIX START */

.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 210px !important;
    text-align: left !important;
}

.pro-dashboard .pro-main .live-crypto-table td.daily-pattern-cell {
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill::before {
    display: inline-grid !important;
    place-items: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34,197,94,0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.22), transparent 58%),
        rgba(20,83,45,0.28) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bullish::before {
    content: "↑" !important;
    color: #052e16 !important;
    background: #86efac !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bearish {
    color: #fecaca !important;
    border-color: rgba(248,113,113,0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(248,113,113,0.22), transparent 58%),
        rgba(127,29,29,0.28) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-bearish::before {
    content: "↓" !important;
    color: #450a0a !important;
    background: #fca5a5 !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167,139,250,0.38) !important;
    background:
        radial-gradient(circle at top left, rgba(167,139,250,0.18), transparent 58%),
        rgba(49,46,129,0.24) !important;
}

.pro-dashboard .pro-main .live-crypto-table .daily-pattern-pill.pattern-neutral::before {
    content: "•" !important;
    color: #312e81 !important;
    background: #c4b5fd !important;
}

/* DAILY PATTERN FINAL PILL FIX END */

/* SIGNAL SCORE COLUMN START */

/*
   Signal Score column styling.
   Visual-only styling; score values come from server-side daily pattern rules.
*/

.pro-dashboard .pro-main .live-crypto-table {
    min-width: 1250px !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(9),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(9) {
    min-width: 135px !important;
    text-align: left !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(9) {
    color: #fde68a !important;
}

.pro-dashboard .pro-main .signal-score-cell {
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .signal-score-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.84) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34,197,94,0.40) !important;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.18), transparent 58%),
        rgba(20,83,45,0.24) !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-bearish {
    color: #fecaca !important;
    border-color: rgba(248,113,113,0.40) !important;
    background:
        radial-gradient(circle at top left, rgba(248,113,113,0.18), transparent 58%),
        rgba(127,29,29,0.24) !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167,139,250,0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(167,139,250,0.14), transparent 58%),
        rgba(49,46,129,0.20) !important;
}

@media (max-width: 900px) {
    .pro-dashboard .pro-main .live-crypto-table {
        min-width: 1240px !important;
    }
}

/* SIGNAL SCORE COLUMN END */

/* SIGNAL SUMMARY STRIP START */

/*
   Signal Summary strip above the market table.
   Visual/frontend only. Does not highlight rows or change backend logic.
*/

.pro-dashboard .pro-main .signal-summary-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 0 16px !important;
    padding: 2px 0 !important;
}

.pro-dashboard .pro-main .signal-summary-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 58%),
        rgba(15, 23, 42, 0.76) !important;
    color: #dbeafe !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    box-shadow:
        0 10px 24px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .signal-summary-chip b {
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .signal-summary-bullish {
    color: #bbf7d0 !important;
    border-color: rgba(34,197,94,0.32) !important;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.16), transparent 58%),
        rgba(20,83,45,0.18) !important;
}

.pro-dashboard .pro-main .signal-summary-neutral {
    color: #ddd6fe !important;
    border-color: rgba(167,139,250,0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(167,139,250,0.14), transparent 58%),
        rgba(49,46,129,0.16) !important;
}

.pro-dashboard .pro-main .signal-summary-bearish {
    color: #fecaca !important;
    border-color: rgba(248,113,113,0.32) !important;
    background:
        radial-gradient(circle at top left, rgba(248,113,113,0.16), transparent 58%),
        rgba(127,29,29,0.18) !important;
}

.pro-dashboard .pro-main .signal-summary-total {
    color: #fde68a !important;
    border-color: rgba(250,204,21,0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(250,204,21,0.14), transparent 58%),
        rgba(113,63,18,0.15) !important;
}

@media (max-width: 780px) {
    .pro-dashboard .pro-main .signal-summary-row {
        gap: 8px !important;
    }

    .pro-dashboard .pro-main .signal-summary-chip {
        min-height: 32px !important;
        padding: 0 11px !important;
        font-size: 11px !important;
    }
}

/* SIGNAL SUMMARY STRIP END */

/* STRONG BULLISH SUMMARY START */

/*
   Strong Bullish chip for Signal Summary.
   Frontend visual only.
*/

.pro-dashboard .pro-main .signal-summary-strong-bullish {
    color: #dcfce7 !important;
    border-color: rgba(74, 222, 128, 0.44) !important;
    background:
        radial-gradient(circle at top left, rgba(74, 222, 128, 0.22), transparent 58%),
        rgba(20, 83, 45, 0.28) !important;
    box-shadow:
        0 0 18px rgba(34, 197, 94, 0.12),
        0 10px 24px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .signal-summary-strong-bullish b {
    color: #86efac !important;
}

/* STRONG BULLISH SUMMARY END */

/* STRONG BEARISH SUMMARY START */

/*
   Strong Bearish chip for Signal Summary.
   Frontend visual only.
*/

.pro-dashboard .pro-main .signal-summary-strong-bearish {
    color: #fee2e2 !important;
    border-color: rgba(248, 113, 113, 0.48) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.24), transparent 58%),
        rgba(127, 29, 29, 0.30) !important;
    box-shadow:
        0 0 18px rgba(248, 113, 113, 0.12),
        0 10px 24px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

.pro-dashboard .pro-main .signal-summary-strong-bearish b {
    color: #fca5a5 !important;
}

/* STRONG BEARISH SUMMARY END */

/* SIGNAL SUMMARY POLISH START */

/*
   Visual polish for Signal Summary strip.
   CSS-only: no API, signal scoring, data, database, or trading logic changed.
*/

/* Centre the summary strip as a dashboard-level overview */
.pro-dashboard .pro-main .signal-summary-row {
    justify-content: center !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 4px auto 20px !important;
    padding: 10px 12px !important;
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.055), transparent 58%),
        rgba(2, 6, 23, 0.22) !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
}

/* Make all summary chips consistent and balanced */
.pro-dashboard .pro-main .signal-summary-chip {
    min-height: 36px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    transform: translateZ(0) !important;
    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease !important;
}

/* Number emphasis */
.pro-dashboard .pro-main .signal-summary-chip b {
    min-width: 14px !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Gentle hover polish */
.pro-dashboard .pro-main .signal-summary-chip:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 14px 28px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

/* Strong Bullish: most positive */
.pro-dashboard .pro-main .signal-summary-strong-bullish {
    border-color: rgba(74, 222, 128, 0.48) !important;
    background:
        radial-gradient(circle at top left, rgba(74, 222, 128, 0.24), transparent 58%),
        rgba(20, 83, 45, 0.30) !important;
}

/* Bullish: positive but softer */
.pro-dashboard .pro-main .signal-summary-bullish {
    border-color: rgba(34, 197, 94, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 58%),
        rgba(20, 83, 45, 0.20) !important;
}

/* Neutral: calm purple */
.pro-dashboard .pro-main .signal-summary-neutral {
    border-color: rgba(167, 139, 250, 0.32) !important;
    background:
        radial-gradient(circle at top left, rgba(167, 139, 250, 0.15), transparent 58%),
        rgba(49, 46, 129, 0.18) !important;
}

/* Bearish: negative but softer */
.pro-dashboard .pro-main .signal-summary-bearish {
    border-color: rgba(248, 113, 113, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.20) !important;
}

/* Strong Bearish: most negative */
.pro-dashboard .pro-main .signal-summary-strong-bearish {
    border-color: rgba(248, 113, 113, 0.48) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.24), transparent 58%),
        rgba(127, 29, 29, 0.30) !important;
}

/* Total: separate gold tone */
.pro-dashboard .pro-main .signal-summary-total {
    border-color: rgba(250, 204, 21, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 58%),
        rgba(113, 63, 18, 0.17) !important;
}

/* Mobile/tablet safety */
@media (max-width: 900px) {
    .pro-dashboard .pro-main .signal-summary-row {
        width: 100% !important;
        justify-content: flex-start !important;
        border-radius: 22px !important;
        overflow-x: auto !important;
        padding: 10px !important;
    }

    .pro-dashboard .pro-main .signal-summary-chip {
        min-height: 34px !important;
        padding: 0 13px !important;
        font-size: 11px !important;
    }
}

/* SIGNAL SUMMARY POLISH END */

/* TOP SIGNAL PANEL START */

/*
   Top Signal mini panel.
   Frontend-only: does not change signal scoring, API logic, database, or trading logic.
*/

.pro-dashboard .pro-main .top-signal-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    margin: 2px 0 16px !important;
}

.pro-dashboard .pro-main .top-signal-card {
    min-height: 92px !important;
    border-radius: 22px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.70) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .top-signal-label {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin-bottom: 9px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}

.pro-dashboard .pro-main .top-signal-card strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #f8fafc !important;
    font-size: 17px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.02em !important;
}

.pro-dashboard .pro-main .top-signal-card small {
    display: block !important;
    color: #9ca3af !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.pro-dashboard .pro-main .top-signal-bullish {
    border-color: rgba(34, 197, 94, 0.26) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 58%),
        rgba(20, 83, 45, 0.18) !important;
}

.pro-dashboard .pro-main .top-signal-bullish .top-signal-label {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border: 1px solid rgba(34, 197, 94, 0.24) !important;
}

.pro-dashboard .pro-main .top-signal-bearish {
    border-color: rgba(248, 113, 113, 0.26) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.18), transparent 58%),
        rgba(127, 29, 29, 0.18) !important;
}

.pro-dashboard .pro-main .top-signal-bearish .top-signal-label {
    color: #fecaca !important;
    background: rgba(248, 113, 113, 0.14) !important;
    border: 1px solid rgba(248, 113, 113, 0.24) !important;
}

@media (max-width: 900px) {
    .pro-dashboard .pro-main .top-signal-panel {
        grid-template-columns: 1fr !important;
    }
}

/* TOP SIGNAL PANEL END */

/* SIGNAL DETAILS LINE START */

/*
   Signal Details line under Daily Pattern.
   Frontend-only visual/readability layer.
*/

.pro-dashboard .pro-main .live-crypto-table td.daily-pattern-cell {
    white-space: normal !important;
    vertical-align: middle !important;
}

.pro-dashboard .pro-main .daily-pattern-reason {
    display: block !important;
    margin-top: 7px !important;
    max-width: 260px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
}

.pro-dashboard .pro-main .daily-pattern-cell .daily-pattern-pill.pattern-bullish + .daily-pattern-reason {
    color: #86efac !important;
    opacity: 0.78 !important;
}

.pro-dashboard .pro-main .daily-pattern-cell .daily-pattern-pill.pattern-bearish + .daily-pattern-reason {
    color: #fca5a5 !important;
    opacity: 0.78 !important;
}

.pro-dashboard .pro-main .daily-pattern-cell .daily-pattern-pill.pattern-neutral + .daily-pattern-reason {
    color: #c4b5fd !important;
    opacity: 0.76 !important;
}

/* Make extra detail line fit comfortably */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 275px !important;
}

/* Slightly increase row height only when details are present */
.pro-dashboard .pro-main .live-crypto-table td {
    padding-top: 19px !important;
    padding-bottom: 19px !important;
}

/* SIGNAL DETAILS LINE END */

/* HOW TO GUIDES START */

/* Navigation pill */
.howto-nav-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    margin: 8px 0 !important;
    border-radius: 14px !important;
    color: #bfdbfe !important;
    text-decoration: none !important;
    font-weight: 1000 !important;
    letter-spacing: -0.01em !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 58%),
        rgba(15, 23, 42, 0.72) !important;
    border: 1px solid rgba(147, 197, 253, 0.20) !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.howto-nav-pill:hover {
    color: #e0f2fe !important;
    border-color: rgba(147, 197, 253, 0.34) !important;
    transform: translateY(-1px) !important;
}

/* Guide pages */
.howto-body {
    min-height: 100vh;
    /* Background inherited from the site-wide `body` rule so the guides match
       every other page - they used to set their own darker gradient here. */
    color: #e5eefc;
}

.howto-shell {
    width: min(1120px, calc(100% - 36px));
    margin: 0 auto;
    padding: 34px 0 70px;
}

.howto-hero {
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(34,211,238,0.10), transparent 52%),
        rgba(15,23,42,0.78);
    border: 1px solid rgba(148,163,184,0.16);
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}

.howto-back {
    display: inline-flex;
    margin-bottom: 18px;
    color: #93c5fd;
    text-decoration: none;
    font-weight: 900;
}

.howto-eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #bae6fd;
    background: rgba(14,165,233,0.12);
    border: 1px solid rgba(125,211,252,0.18);
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.howto-hero h1 {
    margin: 0 0 10px;
    color: #f8fafc;
    font-size: clamp(32px, 5vw, 52px);
    letter-spacing: -0.05em;
}

.howto-hero p {
    margin: 0;
    max-width: 780px;
    color: #9fb4d1;
    font-size: 16px;
    line-height: 1.65;
}

.howto-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.howto-card {
    display: block;
    padding: 24px;
    min-height: 170px;
    border-radius: 24px;
    color: #e5eefc;
    text-decoration: none;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 52%),
        rgba(15,23,42,0.74);
    border: 1px solid rgba(148,163,184,0.15);
    box-shadow: 0 18px 42px rgba(0,0,0,0.22);
}

.howto-card:hover {
    border-color: rgba(125,211,252,0.32);
    transform: translateY(-2px);
}

.howto-card-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(59,130,246,0.14);
}

.howto-card strong {
    display: block;
    margin-bottom: 8px;
    color: #f8fafc;
    font-size: 20px;
}

.howto-card small {
    color: #9fb4d1;
    line-height: 1.55;
}

.howto-parent 52%),
        rgba(15,23,42,0.76);
}

.howto-doc h2 {
    margin: 28px 0 12px;
    color: #f8fafc;
    font-size: 24px;
    letter-spacing: -0.03em;
}

.howto-doc h2:first-child {
    margin-top: 0;
}

.howto-doc h3 {
    color: #dbeafe;
}

.howto-doc p,
.howto-doc li,
.howto-alert p {
    color: #b6c6dc;
    line-height: 1.65;
}

.howto-doc a {
    color: #93c5fd;
}

.howto-shot {
    display: grid;
    place-items: center;
    min-height: 220px;
    margin: 18px 0 26px;
    padding: 24px;
    border-radius: 22px;
    border: 1px dashed rgba(147,197,253,0.32);
    background:
        radial-gradient(circle at center, rgba(59,130,246,0.10), transparent 55%),
        rgba(2,6,23,0.46);
    text-align: center;
}

.howto-shot span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #bfdbfe;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(147,197,253,0.20);
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.howto-shot p {
    margin: 0;
    color: #94a3b8;
    font-weight: 850;
}

.howto-settings {
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(2,6,23,0.38);
    border: 1px solid rgba(148,163,184,0.12);
}

@media (max-width: 780px) {
    .howto-card-grid {
        grid-template-columns: 1fr;
    }

    .howto-shell {
        width: min(100% - 24px, 1120px);
        padding-top: 22px;
    }

    .howto-hero,
    .howto-doc,
    .howto-alert {
        padding: 22px;
    }
}

/* HOW TO GUIDES END */

/* HOW TO GUIDES LAYOUT FIX START */

/*
   Layout repair for How to Guides pages.
   Fixes narrow cards and improves readability.
*/

.howto-body {
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

.howto-shell {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 36px 0 72px !important;
}

.howto-hero {
    width: 100% !important;
    box-sizing: border-box !important;
}

.howto-card-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
}

.howto-card {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 210px !important;
    padding: 28px !important;
    border-radius: 26px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.howto-card-icon {
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 18px !important;
    font-size: 21px !important;
}

.howto-card strong {
    display: block !important;
    width: 100% !important;
    max-width1.08 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.howto-card small {
    display: block !important;
    width: 100% !important;
    max-width: 680px !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Guide content should stay comfortably readable */
.howto-doc,
.howto-alert {
    width: 100% !important;
    box-sizing: border-box !important;
}

.howto-doc {
    max-width: 980px !important;
}

/* Screenshot placeholder sizing */
.howto-shot {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablet/mobile */
@media (max-width: 900px) {
    .howto-shell {
        width: min(100% - 28px, 1180px) !important;
        padding-top: 24px !important;
    }

    .howto-card-grid {
        grid-template-columns: 1fr !important;
    }

    .howto-card {
        min-height: 180px !important;
        padding: 24px !important;
    }

    .howto-card strong {
        font-size: 24px !important;
    }
}

/* HOW TO GUIDES LAYOUT FIX END */

/* HOW TO GUIDES FINAL LAYOUT START */

/*
   Final layout repair for How to Guides pages.
   Makes the guide index full-width, centred and readable.
*/

body.howto-body {
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    /* Background comes from the site-wide `body` rule now, so guides sit on
       the same atmosphere as the rest of the site. */
    color: #e5eefc !important;
}

/* Override any dashboard/sidebar sizing */
body.howto-body .howto-shell {
    display: block !important;
    width: min(1120px, calc(100vw - 64px)) !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 40px 0 80px !important;
    box-sizing: border-box !important;
}

/* Wide header instead of narrow vertical card */
body.howto-body .howto-hero {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 24px !important;
    padding: 34px 38px !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at top left, rgba(34,211,238,0.12), transparent 54%),
        rgba(15,23,42,0.78) !important;
    border: 1px solid rgba(148,163,184,0.16) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important;
}

body.howto-body .howto-back {
    display: inline-flex !important;
    margin-bottom: 18px !important;
    color: #93c5fd !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

body.howto-body .howto-eyebrow {
    display: inline-flex !important;
    width: auto !important;
    margin-bottom: 14px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    color: #bae6fd !important;
    background: rgba(14,165,233,0.12) !important;
    border: 1px solid rgba(125,211,252,0.18) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Prevent stacked title words */
body.howto-body .howto-hero h1 {
    display: block !important;
    max-width: 760px !important;
    margin: 0 0 12px !important;
    color: #f8fafc !important;
    font-size: clamp(42px, 5.5vw, 70px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.065em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.howto-body .howto-hero p {
    display: block !important;
    max-width: 720px !important;
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Cards underneath as proper wide cards */
body.howto-body .howto-card-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

body.howto-body .howto-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 210px !important;
    padding: 30px !important;
    border-radius: 26px !important;
    color: #e5eefc !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.12), transparent 52%),
        rgba(15,23,42,0.74) !important;
    border: 1px solid rgba(148,163,184,0.15) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.22) !important;
}

body.howto-body .howto-card:hover {
    border-color: rgba(125,211,252,0.32) !important;
    transform: translateY(-2px) !important;
}

body.howto-body .howto-card-icon {
important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 18px !important;
    border-radius: 14px !important;
    background: rgba(59,130,246,0.14) !important;
    font-size: 21px !important;
}

body.howto-body .howto-card strong {
    display: block !important;
    width: 100% !important;
    margin: 0 0 11px !important;
    color: #f8fafc !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.howto-body .howto-card small {
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Content guide pages */
body.howto-body .howto-doc,
body.howto-body .howto-alert {
    width: 100% !important;
    max-width: 980px !important;
    box-sizing: border-box !important;
}

/* Mobile/tablet */
@media (max-width: 900px) {
    body.howto-body .howto-shell {
        width: min(100vw - 28px, 1120px) !important;
        padding-top: 24px !important;
    }

    body.howto-body .howto-hero {
        padding: 28px 24px !important;
        border-radius: 24px !important;
    }

    body.howto-body .howto-hero h1 {
        font-size: clamp(38px, 13vw, 54px) !important;
    }

    body.howto-body .howto-card-grid {
        grid-template-columns: 1fr !important;
    }

    body.howto-body .howto-card {
        min-height: 180px !important;
        padding: 24px !important;
    }
}

/* HOW TO GUIDES FINAL LAYOUT END */

/* HOW TO GUIDES CENTER POLISH START */

/*
   Centres the How to Guides landing page.
   CSS-only: no backend, crypto board, API, database, or trading logic changed.
*/

body.howto-body .howto-shell {
    width: min(1040px, calc(100vw - 72px)) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 44px !important;
}

/* Make the hero feel like a centred page heading */
body.howto-body .howto-hero {
    text-align: center !important;
    padding: 38px 44px !important;
}

body.howto-body .howto-back {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.howto-body .howto-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.howto-body .howto-hero h1 {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.howto-body .howto-hero p {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Centre the card grid beneath the hero */
body.howto-body .howto-card-grid {
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

/* More balanced cards */
body.howto-body .howto-card {
    min-height: 220px !important;
    padding: 32px 34px !important;
}

/* Keep card content left-aligned for readability */
body.howto-body .howto-card {
    text-align: left !important;
}

body.howto-body .howto-card strong {
    max-width: 520px !important;
}

body.howto-body .howto-card small {
    max-width: 520px !important;
}

/* Slightly nicer desktop spacing */
@media (min-width: 1100px) {
    body.howto-body .howto-shell {
        padding-top: 52px !important;
    }

    body.howto-body .howto-hero {
        margin-bottom: 26px !important;
    }
}

/* Tablet/mobile */
@media (max-width: 900px) {
    body.howto-body .howto-shell {
        width: min(100vw - 28px, 1040px) !important;
        padding-top: 24px !important;
    }

    body.howto-body .howto-card-grid {
        grid-template-columns: 1fr !important;
    }

    body.howto-body .howto-hero {
        text-align: left !important;
        padding: 28px 24px !important;
    }

    body.howto-body .howto-back,
    body.howto-body .howto-eyebrow,
    body.howto-body .howto-hero h1,
    body.howto-body .howto-hero p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* HOW TO GUIDES CENTER POLISH END */

/* HOW TO GUIDES TRUE CENTER START */

/*
   True centring for standalone How to Guides pages.
   Removes dashboard-layout influence and centres content in the viewport.
*/

html:has(body.howto-body),
body.howto-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body.howto-body {
    display: block !important;
    min-height: 100vh !important;
    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.16), transparent 34%),
        radial-gradient(circle at top right, rgba(34,211,238,0.10), transparent 30%),
        #020617 !important;
    color: #e5eefc !important;
}

/* This is the key: centre the content column in the actual viewport */
body.howto-body .howto-shell {
    display: block !important;
    width: min(1120px, calc(100vw - 80px)) !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 52px 0 80px !important;
    box-sizing: border-box !important;
}

/* Wide centred hero */
body.howto-body .howto-hero {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto 28px !important;
    padding: 40px 44px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    border-radius: 30px !important;
}

/* Header alignment */
body.howto-body .howto-back,
body.howto-body .howto-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.howto-body .howto-hero h1 {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    word-break: normal !important;
}

body.howto-body .howto-hero p {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Cards centred below the hero */
body.howto-body .howto-card-grid {
    width: 100% !important;
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

body.howto-body .howto-card {
    width: 100% !important;
    max box-sizing: border-box !important;
    text-align: left !important;
}

/* Content pages also centred */
body.howto-body .howto-doc,
body.howto-body .howto-alert {
    width: 100% !important;
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile/tablet */
@media (max-width: 900px) {
    body.howto-body .howto-shell {
        width: min(100vw - 28px, 1120px) !important;
        padding-top: 24px !important;
    }

    body.howto-body .howto-hero {
        padding: 28px 24px !important;
        text-align: left !important;
    }

    body.howto-body .howto-back,
    body.howto-body .howto-eyebrow,
    body.howto-body .howto-hero h1,
    body.howto-body .howto-hero p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.howto-body .howto-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* HOW TO GUIDES TRUE CENTER END */

/* FUTURES LONG SHORT BOARD START */

/*
   Visual naming layer for Futures / Long-Short board.
   No backend trading/order execution logic included.
*/

.pro-dashboard .pro-main .live-crypto-eyebrow {
    color: #fde68a !important;
    border-color: rgba(250,204,21,0.26) !important;
    background: rgba(113,63,18,0.16) !important;
}

/* Reuse green/red classes as Long/Short visual directions */
.pro-dashboard .pro-main .top-signal-bullish .top-signal-label::before {
    content: "↗";
    margin-right: 6px;
}

.pro-dashboard .pro-main .top-signal-bearish .top-signal-label::before {
    content: "↘";
    margin-right: 6px;
}

/* FUTURES LONG SHORT BOARD END */

/* REMOVE FUNDING OI RESET START */

/*
   Restores table sizing after removing Funding and Open Interest columns.
   CSS-only. No API, database, scoring, or trading logic changed.
*/

.pro-dashboard .pro-main .live-crypto-table {
    min-width: 1250px !important;
}

/* Daily Pattern returns to column 8 */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 275px !important;
    text-align: left !important;
}

/* Signal returns to column 9 */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(9),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(9) {
    min-width: 135px !important;
    text-align: left !important;
}

@media (max-width: 900px) {
    .pro-dashboard .pro-main .live-crypto-table {
        min-width: 1240px !important;
    }
}

/* REMOVE FUNDING OI RESET END */

/* RESTORE FUTURES BOARD NO FUNDING OI START */

/*
   Restores the Futures Trading Board after removing Funding/Open Interest columns.
   CSS-only. No API, database, scoring, or trading logic changed.
*/

.pro-dashboard .pro-main .live-market-board-panel {
    min-height: 220px !important;
}

.pro-dashboard .pro-main .live-crypto-table {
    min-width: 1250px !important;
}

/* CMC USD Volume remains column 7 */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(7),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(7) {
    text-align: right !important;
}

/* Daily Pattern is column 8 */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(8),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(8) {
    min-width: 275px !important;
    text-align: left !important;
}

/* Signal is column 9 */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(9),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(9) {
    min-width: 135px !important;
    text-align: left !important;
}

@media (max-width: 900px) {
    .pro-dashboard .pro-main .live-crypto-table {
        min-width: 1240px !important;
    }
}

/* RESTORE FUTURES BOARD NO FUNDING OI END */

/* HOWTO FUTURES GUIDE UPDATE START */

/*
   Small guide-page polish for the futures board documentation.
   Documentation only. No dashboard/API/database/trading logic changed.
*/

body.howto-body .howto-alert strong {
    display: block !important;
    margin-bottom: 8px !important;
    color: #fde68a !important;
    font-size: 16px !important;
    font-weight: 1000 !important;
}

body.howto-body .howto-doc pre {
    overflow-x: auto !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background: rgba(2, 6, 23, 0.62) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

body.howto-body .howto-doc code {
    color: #bfdbfe !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

/* HOWTO FUTURES GUIDE UPDATE END */

/* TRADE READINESS SIGNAL START */

/*
   Trade Readiness line inside the existing Signal column.
   Frontend-only. No API, database, scoring, or trading execution logic changed.
*/

.pro-dashboard .pro-main .live-crypto-table td.signal-score-cell {
    white-space: normal !important;
    vertical-align: middle !important;
}

.pro-dashboard .pro-main .signal-readiness-line {
    display: block !important;
    margin-top: 7px !important;
    max-width: 150px !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-bullish + .signal-readiness-line {
    color: #86efac !important;
    opacity: 0.82 !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-bearish + .signal-readiness-line {
    color: #fca5a5 !important;
    opacity: 0.82 !important;
}

.pro-dashboard .pro-main .signal-score-pill.score-neutral + .signal-readiness-line {
    color: #c4b5fd !important;
    opacity: 0.78 !important;
}

/* Give the signal column a little more room for the second line */
.pro-dashboard .pro-main .live-crypto-table th:nth-child(9),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(9) {
    min-width: 160px !important;
}

/* TRADE READINESS SIGNAL END */

/* TRADE READINESS STATE POLISH START */

/*
   Trade Readiness now accounts for whether the pattern is Formed or Forming.
   Visual-only polish for slightly longer labels.
*/

.pro-dashboard .pro-main .signal-readiness-line {
    max-width: 180px !important;
}

.pro-dashboard .pro-main .live-crypto-table th:nth-child(9),
.pro-dashboard .pro-main .live-crypto-table td:nth-child(9) {
    min-width: 180px !important;
}

/* TRADE READINESS STATE POLISH END */

/* FUTURES TRADE SETTINGS PANEL START */

/*
   Futures Trade Settings panel.
   Planning/settings UI only. Does not place trades or change Bybit account settings.
*/

.pro-dashboard .pro-main .futures-settings-panel {
    margin: 0 0 24px !important;
    padding: 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .futures-settings-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}

.pro-dashboard .pro-main .futures-settings-eyebrow {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.18) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.pro-dashboard .pro-main .futures-settings-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: -0.045em !important;
}

.pro-dashboard .pro-main .futures-settings-head p {
    margin: 0 !important;
    max-width: 760px !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.pro-dashboard .pro-main .futures-settings-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .futures-settings-status.is-saved {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(34, 197, 94, 0.26) !important;
}

.pro-dashboard .pro-main .futures-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.pro-dashboard .pro-main .futures-setting-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.pro-dashboard .pro-main .futures-setting-field span {
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .futures-setting-field small {
    color: #7f93ad !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.pro-dashboard .pro-main .futures-setting-field input,
.pro-dashboard .pro-main .futures-setting-field select {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #f8fafc !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    outline: none !important;
}

.pro-dashboard .pro-main .futures-setting-field input:focus,
.pro-dashboard .pro-main .futures-setting-field select:focus {
    border-color: rgba(125, 211, 252, 0.38) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.10) !important;
}

.pro-dashboard .pro-main .futures-settings-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    padding-top: 4px !important;
}

.pro-dashboard .pro-main .futures-settings-actions button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.pro-dashboard .pro-main .futures-settings-actions button[type="submit"] {
    color: #052e16 !important;
    background: #86efac !important;
    border-color: rgba(134, 239, 172, 0.60) !important;
}

.pro-dashboard .pro-main .futures-settings-note {
    display: flex !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.pro-dashboard .pro-main .futures-settings-note strong {
    white-space: nowrap !important;
}

@media (max-width: 1100px) {
    .pro-dashboard .pro-main .futures-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .futures-settings-head {
        flex-direction: column !important;
    }

    .pro-dashboard .pro-main .futures-settings-grid {
        grid-template-columns: 1fr !important;
    }

    .pro-dashboard .pro-main .futures-settings-actions {
        justify-content: flex-start !important;
    }
}

/* FUTURES TRADE SETTINGS PANEL END */

/* FUTURES TRADE STATUS BEHAVIOUR START */

/*
   Trading Status behaviour for Futures Trade Settings.
   UI only. Does not execute trades or change Bybit account settings.
*/

/* Disabled mode: muted, greyed planning controls */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled {
    border-color: rgba(148, 163, 184, 0.12) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.075), transparent 52%),
        rgba(15, 23, 42, 0.62) !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-setting-field:not(:has([name="tradingStatus"])) {
    opacity: 0.48 !important;
    filter: grayscale(0.55) !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-setting-field:not(:has([name="tradingStatus"])) input,
.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-setting-field:not(:has([name="tradingStatus"])) select {
    cursor: not-allowed !important;
    color: #94a3b8 !important;
    background: rgba(15, 23, 42, 0.52) !important;
    border-color: rgba(148, 163, 184, 0.10) !important;
}

.pro-dashboard .pro-main .futures-settings-status.is-disabled-mode {
    color: #cbd5e1 !important;
    background: rgba(100, 116, 139, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

/* Paper mode: blue/testnet styling */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-paper {
    border-color: rgba(96, 165, 250, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.105), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
}

.pro-dashboard .pro-main .futures-settings-status.is-paper-mode {
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(147, 197, 253, 0.26) !important;
}

/* Live mode: danger/red styling */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-live {
    border-color: rgba(248, 113, 113, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.13), transparent 52%),
        rgba(15, 23, 42, 0.78) !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        0 0 24px rgba(248, 113, 113, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .futures-settings-status.is-live-mode {
    color: #fee2e2 !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.22), transparent 58%),
        rgba(127, 29, 29, 0.30) !important;
    border-color: rgba(248, 113, 113, 0.44) !important;
}

/* Keep the Trading Status field visually active even when disabled mode greys the rest */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-setting-field:has([name="tradingStatus"]) {
    opacity: 1 !important;
    filter: none !important;
    border-color: rgba(250, 204, 21, 0.20) !important;
}

/* Fallback for browsers that do not fully support :has() */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-settings-actions {
    opacity: 1 !important;
    filter: none !important;
}

/* FUTURES TRADE STATUS BEHAVIOUR END */

/* FUTURES ENVIRONMENT LOCK START */

/*
   Environment is restricted by Trading Status:
   Paper = Testnet only.
   Live = Mainnet only.
   Disabled = Testnet and controls greyed out.
   UI only. No trading or Bybit account changes.
*/

.pro-dashboard .pro-main .futures-settings-panel.is-trading-paper [name="environment"] {
    color: #bfdbfe !important;
    border-color: rgba(147, 197, 253, 0.30) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-live [name="environment"] {
    color: #fee2e2 !important;
    border-color: rgba(248, 113, 113, 0.44) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.26) !important;
}

/* Make the Live Trading Status option feel dangerous/clear */
.pro-dashboard .pro-main .futures-settings-panel.is-trading-live [name="tradingStatus"] {
    color: #fee2e2 !important;
    border-color: rgba(248, 113, 113, 0.48) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.30) !important;
}

/* FUTURES ENVIRONMENT LOCK END */

/* ADMIN CHANGE HISTORY START */

/*
   Rough admin Change History panel.
   Can be moved/tidied later.
*/

.admin-change-history-panel {
    margin: 24px 0 !important;
    padding: 24px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
    color: #e5eefc !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-change-history-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

.admin-change-history-eyebrow {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.14) !important;
    border: 1px solid rgba(147, 197, 253, 0.20) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-change-history-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: -0.045em !important;
}

.admin-change-history-head p {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.admin-change-history-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.16) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-change-history-list {
    display: grid !important;
    gap: 12px !important;
}

.admin-change-history-item {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 14px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.admin-change-history-item time {
    color: #93c5fd !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.admin-change-history-item strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
}

.admin-change-history-item p {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

@media (max-width: 720px) {
    .admin-change-history-head {
        flex-direction: column !important;
    }

    .admin-change-history-item {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN CHANGE HISTORY END */

/* ADMIN VERSIONED CHANGE HISTORY START */

/*
   Versioned collapsible admin Change History.
*/

.admin-change-history-panel {
    display: block !important;
    margin: 24px 0 !important;
    padding: 0 !important;
    border-radius: 26px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
    color: #e5eefc !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    overflow: hidden !important;
}

.admin-change-history-summary {
    cursor: pointer !important;
    list-style: none !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    padding: 24px !important;
}

.admin-change-history-summary::-webkit-details-marker {
    display: none !important;
}

.admin-change-history-summary-main {
    display: grid !important;
    gap: 7px !important;
}

.admin-change-history-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.14) !important;
    border: 1px solid rgba(147, 197, 253, 0.20) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-change-history-title {
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 1000 !important;
    letter-spacing: -0.045em !important;
}

.admin-change-history-subtitle {
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.admin-change-history-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.16) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-change-history-panel[open] .admin-change-history-summary {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.admin-change-version-rule {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 16px 24px !important;
    color: #cbd5e1 !important;
    background: rgba(2, 6, 23, 0.25) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.admin-change-version-rule strong {
    color: #fde68a !important;
}

.admin-change-history-list {
    display: grid !important;
    gap: 12px !important;
    padding: 18px 24px 24px !important;
}

.admin-change-history-item {
    display: grid !important;
    grid-template-columns: 150px 1fr !important;
    gap: 14px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.admin-change-history-meta {
    display: grid !important;
    align-content: start !important;
    gap: 7px !important;
}

.admin-change-version {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.admin-change-history-item time {
    color: #93c5fd !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.admin-change-type {
    color: #c4b5fd !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
}

.admin-change-history-item strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
}

.admin-change-history-item p {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

@media (max-width: 720px) {
    .admin-change-history-summary {
        flex-direction: column !important;
    }

    .admin-change-history-item {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN VERSIONED CHANGE HISTORY END */

/* FUTURES MODE WARNING START */

/*
   Mode warning summary for Futures Trade Settings.
   UI only. Does not execute trades or change Bybit account settings.
*/

.pro-dashboard .pro-main .futur*s-mode-warning {
    display: flex*!important;
    align-items: flex-*tart !important;
    gap: 10px !im*ortant;
    margin: 0 0 18px !impo*tant;
    padding: 14px 16px !impo*tant;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(15, 23, 42, 0.70) !important;
    color: #cbd5e1 !important;
    box-shadow:
        0 12px 28px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .futures-mode-warning strong {
    flex: 0 0 auto !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .futures-mode-warning span {
    color: #9fb4d1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-disabled-mode {
    border-color: rgba(148, 163, 184, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.68) !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-paper-mode {
    border-color: rgba(147, 197, 253, 0.28) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.16), transparent 58%),
        rgba(30, 41, 59, 0.54) !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-paper-mode strong {
    color: #bfdbfe !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-live-mode {
    border-color: rgba(248, 113, 113, 0.42) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.20), transparent 58%),
        rgba(127, 29, 29, 0.24) !important;
    box-shadow:
        0 0 22px rgba(248, 113, 113, 0.10),
        0 12px 28px rgba(0,0,0,0.16),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-live-mode strong {
    color: #fee2e2 !important;
}

.pro-dashboard .pro-main .futures-mode-warning.is-live-mode span {
    color: #fecaca !important;
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .futures-mode-warning {
        flex-direction: column !important;
    }
}

/* FUTURES MODE WARNING END */

/* MULTI API CONNECTIONS START */

/*
   Multi-exchange API Connections.
   Stores exchange/market/environment/API Key/API Secret context for future admin reporting.
*/

.pro-dashboard .pro-main .api-connections-panel,
.admin-api-connections-panel {
    margin: 24px 0 !important;
    padding: 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
    color: #e5eefc !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .api-connections-head,
.admin-api-connections-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

.pro-dashboard .pro-main .api-connections-eyebrow,
.admin-api-connections-eyebrow {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bae6fd !important;
    background: rgba(14,165,233,0.12) !important;
    border: 1px solid rgba(125,211,252,0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.pro-dashboard .pro-main .api-connections-head h2,
.admin-api-connections-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: -0.045em !important;
}

.pro-dashboard .pro-main .api-connections-head p,
.admin-api-connections-head p {
    margin: 0 !important;
    max-width: 820px !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.pro-dashboard .pro-main .api-connections-secure,
.admin-api-connections-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .api-connections-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.pro-dashboard .pro-main .api-connections-form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.pro-dashboard .pro-main .api-connections-form label span {
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .api-connections-form input,
.pro-dashboard .pro-main .api-connections-form select {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #f8fafc !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    outline: none !important;
}

.pro-dashboard .pro-main .api-connections-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.pro-dashboard .pro-main .api-connections-actions button {
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(134, 239, 172, 0.60) !important;
    background: #86efac !important;
    color: #052e16 !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.pro-dashboard .pro-main #apiConnectionsStatus {
    color: #9fb4d1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.pro-dashboard .pro-main #apiConnectionsStatus.is-saved {
    color: #86efac !important;
}

.pro-dashboard .pro-main #apiConnectionsStatus.is-error {
    color: #fca5a5 !important;
}

.pro-dashboard .pro-main .api-connections-list-wrap {
    margin-top: 18px !important;
}

.pro-dashboard .pro-main .api-connections-list-wrap h3 {
    margin: 0 0 10px !important;
    color: #f8fafc !important;
    font-size: 16px !important;
}

.pro-dashboard .pro-main .api-connections-list,
.admin-api-connections-list {
    display: grid !important;
    gap: 10px !important;
}

.pro-dashboard .pro-main .api-connection-item,
.admin-api-connection-item {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 14px 15px !important;
    border-radius: 16px !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
}

.pro-dashboard .pro-main .api-connection-item strong,
.admin-api-connection-item strong {
    display: block !important;
    color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
}

.pro-dashboard .pro-main .api-connection-item small,
.admin-api-connection-item small {
    display: block !important;
    margin-top: 4px !important;
    color: #9fb4d1 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.pro-dashboard .pro-main .api-connection-item > span,
.admin-api-connection-item > span {
    color: #bfdbfe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .api-connections-empty,
.admin-api-connections-empty {
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.pro-dashboard .pro-main .api-connections-note {
    margin: 16px 0 0 !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

@media (max-width: 1100px) {
    .pro-dashboard .pro-main .api-connections-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .api-connections-head,
    .admin-api-connections-head {
        flex-direction: column !important;
    }

    .pro-dashboard .pro-main .api-connections-form {
        grid-template-columns: 1fr !important;
    }

    .pro-dashboard .pro-main .api-connection-item,
    .admin-api-connection-item {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* MULTI API CONNECTIONS END */

/* API CONNECTIONS VISIBILITY CLEANUP START */

/*
   API Connections is now the primary credentials panel.
   Old singular API Connection panel is hidden.
   Blue API Connections panel is hidden on load and opened from the API Keys menu.
*/

.pro-dashboard .pro-main .legacy-api-panel-hidden {
    display: none !important;
}

.pro-dashboard .pro-main .api-connections-panel.is-api-connections-hidden {
    display: none !important;
}

/* Make API Connections occupy the same broad dashboard width as larger monitor panels */
.pro-dashboard .pro-main .api-connections-panel.api-connections-wide {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
}

/* Header now has the AES badge plus hide action cleanly aligned */
.pro-dashboard .pro-main .api-connections-panel .api-connections-head {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.pro-dashboard .pro-main .api-connections-head-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.pro-dashboard .pro-main .api-connections-hide-button {
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(134, 239, 172, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.84) !important;
    color: #bbf7d0 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .api-connections-hide-button:hover {
    border-color: rgba(134, 239, 172, 0.52) !important;
    transform: translateY(-1px) !important;
}

/* Give the wider API Connections panel a more even form layout */
.pro-dashboard .pro-main .api-connections-panel.api-connections-wide .api-connections-form {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
}

/* Keep saved connection list full width */
.pro-dashboard .pro-main .api-connections-panel.api-connections-wide .api-connections-list-wrap,
.pro-dashboard .pro-main .api-connections-panel.api-connections-wide .api-connections-note {
    width: 100% !important;
}

@media (max-width: 1100px) {
    .pro-dashboard .pro-main .api-connections-panel .api-connections-head {
        grid-template-columns: 1fr auto !important;
    }

    .pro-dashboard .pro-main .api-connections-head-actions {
        grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
    }

    .pro-dashboard .pro-main .api-connections-panel.api-connections-wide .api-connections-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .api-connections-panel .api-connections-head {
        grid-template-columns: 1fr !important;
    }

    .pro-dashboard .pro-main .api-connections-panel.api-connections-wide .api-connections-form {
        grid-template-columns: 1fr !important;
    }
}

/* API CONNECTIONS VISIBILITY CLEANUP END */

/* FUTURES ACTIVE API CONNECTION START */

/*
   Active API Connection selector for Futures Trade Settings.
   Links saved API Connections to local futures planning settings.
   No order execution is performed.
*/

.pro-dashboard .pro-main .futures-active-api-field {
    border-color: rgba(125, 211, 252, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 58%),
        rgba(2, 6, 23, 0.34) !important;
}

.pro-dashboard .pro-main .futures-active-api-field select {
    color: #bfdbfe !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-live .futures-active-api-field {
    border-color: rgba(248, 113, 113, 0.26) !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.10), transparent 58%),
        rgba(2, 6, 23, 0.34) !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-live .futures-active-api-field select {
    color: #fee2e2 !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-paper .futures-active-api-field {
    border-color: rgba(147, 197, 253, 0.24) !important;
}

.pro-dashboard .pro-main .futures-settings-panel.is-trading-disabled .futures-active-api-field {
    opacity: 0.48 !important;
    filter: grayscale(0.55) !important;
}

/* FUTURES ACTIVE API CONNECTION END */

/* ADMIN PERFORMANCE SUMMARY START */

/*
   Placeholder Admin Performance / Win-Loss summary.
   Trade records are not connected yet.
*/

.admin-performance-summary-panel {
    margin: 24px 0 !important;
    padding: 24px !important;
    border-radius: 28px !important;
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.09), transparent 52%),
        rgba(15, 23, 42, 0.76) !important;
    color: #e5eefc !important;
    box-shadow:
        0 22px 54px rgba(0,0,0,0.24),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-performance-summary-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

.admin-performance-summary-eyebrow {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-performance-summary-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    letter-spacing: -0.045em !important;
}

.admin-performance-summary-head p {
    margin: 0 !important;
    max-width: 860px !important;
    color: #9fb4d1 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.admin-performance-summary-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.16) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-performance-empty {
    padding: 16px !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    background: rgba(2, 6, 23, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.admin-performance-table-wrap {
    overflow-x: auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: rgba(2, 6, 23, 0.30) !important;
}

.admin-performance-table {
    width: 100% !important;
    min-width: 980px !important;
    border-collapse: collapse !important;
}

.admin-performance-table th,
.admin-performance-table td {
    padding: 14px 15px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    text-align: left !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.admin-performance-table th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: rgba(15, 23, 42, 0.56) !important;
}

.admin-performance-table td strong {
    display: block !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
}

.admin-performance-table td small {
    display: block !important;
    margin-top: 4px !important;
    color: #7f93ad !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

.admin-performance-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
}

.admin-performance-status.is-active {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
}

.admin-performance-status.is-inactive {
    color: #cbd5e1 !important;
    background: rgba(100, 116, 139, 0.13) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.admin-performance-note {
    margin: 16px 0 0 !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.admin-performance-note code {
    color: #bfdbfe !important;
    font-weight: 1000 !important;
}

@media (max-width: 720px) {
    .admin-performance-summary-head {
        flex-direction: column !important;
    }
}

/* ADMIN PERFORMANCE SUMMARY END */

/* API CONNECTION PURPOSE UI START */

/*
   API Connection Purpose UI.
   Separates Trading / Execution keys from Reporting / Read Only keys.
*/

.pro-dashboard .pro-main .api-purpose-field {
    border-color: rgba(250, 204, 21, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 58%),
        rgba(2, 6, 23, 0.34) !important;
}

.pro-dashboard .pro-main .api-purpose-field small {
    color: #fde68a !important;
    opacity: 0.78 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
}

.pro-dashboard .pro-main .api-connections-purpose-warning {
    margin: 16px 0 0 !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 58%),
        rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
}

.pro-dashboard .pro-main .api-connections-purpose-warning strong {
    color: #fde68a !important;
}

/* API CONNECTION PURPOSE UI END */

/* ADMIN API PURPOSE BADGES START */

/*
   Purpose badges for Admin API Connections.
   Clarifies Trading / Execution vs Reporting / Read Only keys.
*/

.admin-api-connection-item {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    align-items: center !important;
}

.admin-api-connection-main {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.admin-api-connection-side {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.admin-api-purpose-badge {
    display: inline-flex !important;
    width: fit-content !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: rgba(15, 23, 42, 0.78) !important;
}

.admin-api-purpose-badge.is-trading {
    color: #fde68a !important;
    border-color: rgba(250, 204, 21, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.16), transparent 58%),
        rgba(113, 63, 18, 0.18) !important;
}

.admin-api-purpose-badge.is-reporting {
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, 0.34) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 58%),
        rgba(20, 83, 45, 0.20) !important;
}

.admin-api-key-mask {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-api-status {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-api-status.is-active {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
}

.admin-api-status.is-inactive {
    color: #cbd5e1 !important;
    background: rgba(100, 116, 139, 0.13) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.admin-api-connections-note {
    margin: 16px 0 0 !important;
    padding: 13px 15px !important;
    border-radius: 16px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.admin-api-connections-note strong {
    color: #fde68a !important;
}

@media (max-width: 760px) {
    .admin-api-connection-item {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .admin-api-connection-side {
        justify-content: flex-start !important;
    }
}

/* ADMIN API PURPOSE BADGES END */

/* API CONNECTION DELETE START */

/*
   Delete button for saved API Connections.
*/

.pro-dashboard .pro-main .api-connection-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pro-dashboard .pro-main .api-connection-row-actions > span {
    color: #bfdbfe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .api-connection-delete-button {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(248, 113, 113, 0.36) !important;
    color: #fecaca !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.pro-dashboard .pro-main .api-connection-delete-button:hover {
    border-color: rgba(248, 113, 113, 0.56) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .api-connection-row-actions {
        justify-content: flex-start !important;
    }
}

/* API CONNECTION DELETE END */

/* API CONNECTION DELETE ONLY START */

/*
   Saved API Connections now only show Delete action.
*/

.pro-dashboard .pro-main .api-connection-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.pro-dashboard .pro-main .api-connection-row-actions > span {
    color: #bfdbfe !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.pro-dashboard .pro-main .api-connection-delete-button {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(248, 113, 113, 0.36) !important;
    color: #fecaca !important;
    background:
        radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), transparent 58%),
        rgba(127, 29, 29, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.pro-dashboard .pro-main .api-connection-delete-button:hover {
    border-color: rgba(248, 113, 113, 0.56) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
    .pro-dashboard .pro-main .api-connection-row-actions {
        justify-content: flex-start !important;
    }
}

/* API CONNECTION DELETE ONLY END */

/* ADMIN DEFAULT OPEN PANELS START */

/*
   Admin Inbox and Users are opened by default via JS.
   This CSS is intentionally light so it does not disturb existing admin styling.
*/

.admin-default-open-note {
    color: #9fb4d1 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

/* ADMIN DEFAULT OPEN PANELS END */

/* ADMIN USERS CLEAN SCROLL START */

/*
   Cleaner admin layout:
   - No forced card height matching.
   - Inbox and Users remain natural height.
   - Users table/list scrolls only when user list grows.
*/

.admin-inbox-match-height,
.admin-users-match-height {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/*
   Users panel: keep the card compact and let the table area scroll.
   This targets common table wrappers without relying on exact class names.
*/
section:has(h2):has(button) .admin-users-scroll-area {
    max-height: 360px !important;
}

.admin-users-scroll-area,
.users-table-wrap,
.admin-users-table-wrap {
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(147, 197, 253, 0.55) rgba(15, 23, 42, 0.60) !important;
}

/*
   If the Users table does not have a known wrapper class,
   this keeps any table inside a users-like card from stretching too far.
*/
section:has(h2) table {
    max-width: 100% !important;
}

/*
   Scrollbar styling.
*/
.admin-users-scroll-area::-webkit-scrollbar,
.users-table-wrap::-webkit-scrollbar,
.admin-users-table-wrap::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.admin-users-scroll-area::-webkit-scrollbar-track,
.users-table-wrap::-webkit-scrollbar-track,
.admin-users-table-wrap::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.62) !important;
    border-radius: 999px !important;
}

.admin-users-scroll-area::-webkit-scrollbar-thumb,
.users-table-wrap::-webkit-scrollbar-thumb,
.admin-users-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(147, 197, 253, 0.50) !important;
    border-radius: 999px !important;
}

.admin-users-scroll-area::-webkit-scrollbar-thumb:hover,
.users-table-wrap::-webkit-scrollbar-thumb:hover,
.admin-users-table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(147, 197, 253, 0.76) !important;
}

/*
   Undo inline heights left by the removed JS if browser cached them.
*/
.admin-height-source,
.admin-height-target {
    height: auto !important;
    min-height: 0 !important;
}

/* ADMIN USERS CLEAN SCROLL END */

/* ADMIN LOWER PANELS WIDTH CLEANUP START */

/*
   Prevent lower admin panels from stretching across the full screen.
   Applies to:
   - Admin API Connections
   - API Connection Performance
   - Change History
*/

.admin-api-connections-panel,
.admin-performance-summary-panel,
.admin-change-history-panel {
    width: min(1320px, calc(100vw - 72px)) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* Keep these panels from inheriting dashboard full-width grid behaviour */
.admin-api-connections-panel,
.admin-performance-summary-panel,
.admin-change-history-panel {
    grid-column: auto !important;
    flex: 0 1 auto !important;
    align-self: auto !important;
}

/* Make inner tables/lists scroll inside the card rather than expanding the card */
.admin-api-connections-panel .admin-api-connections-list,
.admin-performance-summary-panel .admin-performance-table-wrap,
.admin-change-history-panel .admin-change-history-list {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Performance table can still scroll horizontally inside the card */
.admin-performance-summary-panel .admin-performance-table-wrap {
    overflow-x: auto !important;
}

/* Better spacing between lower admin cards */
.admin-api-connections-panel,
.admin-performance-summary-panel {
    margin-top: 28px !important;
    margin-bottom: 24px !important;
}

.admin-change-history-panel {
    margin-top: 28px !important;
    margin-bottom: 32px !important;
}

/* Slightly narrower on normal desktop so it visually matches admin card columns better */
@media (max-width: 1500px) {
    .admin-api-connections-panel,
    .admin-performance-summary-panel,
    .admin-change-history-panel {
        width: min(1180px, calc(100vw - 64px)) !important;
        max-width: 1180px !important;
    }
}

@media (max-width: 900px) {
    .admin-api-connections-panel,
    .admin-performance-summary-panel,
    .admin-change-history-panel {
        width: min(100vw - 28px, 1180px) !important;
    }
}

/* ADMIN LOWER PANELS WIDTH CLEANUP END */

/* ADMIN REMOVE PLATFORM RISK SETTINGS START */

/*
   Hide removed Platform Risk Settings card from admin page.
*/

.admin-platform-risk-settings-hidden {
    display: none !important;
}

/* ADMIN REMOVE PLATFORM RISK SETTINGS END */

/* ADMIN REMOVE API CONNECTIONS CARD START */

/*
   Hide Admin API Connections card for now.
   API Connections system and database remain intact.
*/

.admin-api-connections-card-hidden {
    display: none !important;
}

/* ADMIN REMOVE API CONNECTIONS CARD END */

/* ADMIN PAGE POLISH START */

/*
   Admin page visual polish.
   CSS-only.
   No database, API, encryption, trading, or user-management logic changed.
*/

/* Overall admin spacing */
body.pro-dashboard .pro-main {
    gap: 22px !important;
}

/* General admin cards */
body.pro-dashboard .pro-main section,
body.pro-dashboard .pro-main article,
body.pro-dashboard .pro-main .card,
body.pro-dashboard .pro-main .pro-card,
body.pro-dashboard .pro-main .settings-card,
body.pro-dashboard .pro-main .dashboard-card,
body.pro-dashboard .pro-main .pro-result-panel {
    box-sizing: border-box !important;
}

/*
   Keep the main admin work cards comfortable.
   This avoids huge stretched cards while still giving enough width.
*/
body.pro-dashboard .pro-main > s*ction,
body.pro-dashboard .pro-mai* > article,
body.pro-dashboard .pro-main > .card,
body.pro-dashboard .pro-main > .pro-card,
body.pro-dashboard .pro-main > .settings-card,
body.pro-dashboard .pro-main > .dashboard-card,
body.pro-dashboard .pro-main > .pro-result-panel {
    border-radius: 26px !important;
}

/* Improve card headings across admin */
body.pro-dashboard .pro-main h1,
body.pro-dashboard .pro-main h2,
body.pro-dashboard .pro-main h3 {
    letter-spacing: -0.035em !important;
}

/* Improve form spacing and control consistency */
body.pro-dashboard .pro-main label {
    line-height: 1.35 !important;
}

body.pro-dashboard .pro-main input,
body.pro-dashboard .pro-main select,
body.pro-dashboard .pro-main textarea {
    box-sizing: border-box !important;
}

/* Make buttons feel consistent without changing behaviour */
body.pro-dashboard .pro-main button,
body.pro-dashboard .pro-main input[type="submit"] {
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease !important;
}

body.pro-dashboard .pro-main button:hover,
body.pro-dashboard .pro-main input[type="submit"]:hover {
    transform: translateY(-1px) !important;
}

/* Admin lower panels: centred and readable */
.admin-performance-summary-panel,
.admin-change-history-panel {
    width: min(1180px, calc(100vw - 64px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
   Admin API Connections card is currently hidden,
   but if re-enabled later, keep it within readable width.
*/
.admin-api-connections-panel {
    width: min(1180px, calc(100vw - 64px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Performance table cleanup */
.admin-performance-summary-panel {
    padding: 22px !important;
}

.admin-performance-summary-head {
    margin-bottom: 16px !important;
}

.admin-performance-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 18px !important;
}

.admin-performance-table {
    min-width: 940px !important;
}

.admin-performance-table th,
.admin-performance-table td {
    white-space: nowrap !important;
}

.admin-performance-table td:first-child,
.admin-performance-table th:first-child {
    white-space: normal !important;
    min-width: 220px !important;
}

/* Make empty/admin notes compact */
.admin-performance-empty,
.admin-performance-note {
    border-radius: 16px !important;
}

/* Change History polish */
.admin-change-history-panel {
    border-radius: 24px !important;
}

.admin-change-history-summary {
    padding: 20px 22px !important;
}

.admin-change-history-title {
    font-size: clamp(22px, 2.4vw, 30px) !important;
}

.admin-change-history-subtitle {
    max-width: 720px !important;
}

.admin-change-version-rule {
    padding: 13px 22px !important;
}

.admin-change-history-list {
    padding: 16px 22px 22px !important;
}

.admin-change-history-item {
    grid-template-columns: 135px 1fr !important;
    padding: 13px !important;
}

/*
   If the Change History panel uses <details>, keep it compact by default.
   This CSS improves the collapsed/opened appearance only.
*/
.admin-change-history-panel:not([open]) {
    box-shadow:
        0 16px 36px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.02) !important;
}

/* Hidden cards should stay hidden */
.admin-platform-risk-settings-hidden,
.admin-api-connections-card-hidden,
.legacy-api-panel-hidden {
    display: none !important;
}

/* Users list/table: compact scrolling without stretching card */
.admin-users-scroll-area,
.users-table-wrap,
.admin-users-table-wrap {
    max-height: 360px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* Keep admin cards from inheriting unwanted full-width behaviour */
.admin-performance-summary-panel,
.admin-change-history-panel,
.admin-api-connections-panel {
    grid-column: auto !important;
    flex: 0 1 auto !important;
    align-self: auto !important;
}

/* Better vertical rhythm between lower panels */
.admin-performance-summary-panel {
    margin-top: 24px !important;
    margin-bottom: 22px !important;
}

.admin-change-history-panel {
    margin-top: 24px !important;
    margin-bottom: 34px !important;
}

/* Responsive layout */
@media (max-width: 900px) {
    .admin-performance-summary-panel,
    .admin-change-history-panel,
    .admin-api-connections-panel {
        width: min(100vw - 28px, 1180px) !important;
    }

    .admin-performance-summary-panel {
        padding: 18px !important;
    }

    .admin-change-history-summary {
        padding: 18px !important;
    }

    .admin-change-history-item {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN PAGE POLISH END */

/* ADMIN FOOTER BOTTOM POLISH START */

.admin-site-footer-bottom {
    display: block !important;
    width: 100% !important;
    margin: 36px auto 22px !important;
    padding: 0 18px !important;
    text-align: center !important;
    color: #fde68a !important;
    font-weight: 1000 !important;
    letter-spacing: 0.02em !important;
    text-shadow:
        0 0 12px rgba(250, 204, 21, 0.42),
        0 0 22px rgba(250, 204, 21, 0.18) !important;
}

.admin-performance-summary-panel,
.admin-change-history-panel {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.admin-performance-summary-panel {
    margin-top: 18px !important;
    margin-bottom: 20px !important;
    padding: 21px !important;
}

.admin-change-history-panel {
    margin-top: 20px !important;
    margin-bottom: 26px !important;
}

.admin-performance-summary-head {
    margin-bottom: 14px !important;
}

.admin-performance-summary-head h2 {
    font-size: clamp(26px, 2.5vw, 34px) !important;
}

.admin-performance-summary-head p {
    max-width: 780px !important;
}

.admin-performance-table {
    min-width: 880px !important;
}

.admin-performance-table th,
.admin-performance-table td {
    padding: 12px 14px !important;
}

.admin-change-history-summary {
    padding: 18px 21px !important;
}

.admin-change-history-title {
    font-size: clamp(24px, 2.4vw, 31px) !important;
}

.admin-change-history-subtitle {
    max-width: 680px !important;
}

.admin-platform-risk-settings-erformance-summary-panel,
    .admin-change-history-panel {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-site-footer-bottom {
        margin-top: 28px !important;
    }
}

/* ADMIN FOOTER BOTTOM POLISH END */

/* API PERFORMANCE POLISH START */

/*
   API Connection Performance polish.
   UI only. No reporting calculations or database changes.
*/

.admin-performance-summary-panel {
    padding: 20px !important;
}

.admin-performance-summary-head h2 {
    margin-bottom: 7px !important;
}

.admin-performance-summary-head p {
    color: #a7bddb !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.admin-performance-summary-count {
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.16) !important;
    border-color: rgba(250, 204, 21, 0.24) !important;
}

.admin-performance-table th {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.admin-performance-table td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.admin-performance-pending-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(113, 63, 18, 0.18) !important;
    border: 1px solid rgba(250, 204, 21, 0.24) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-performance-note {
    margin-top: 14px !important;
}

/* API PERFORMANCE POLISH END */

/* ADMIN MOVE AUDIT LOGS START */

/*
   Recent Audit Logs moved below API Connection Performance.
   Layout only.
*/

.admin-audit-logs-moved {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    box-sizing: border-box !important;
}

/* ADMIN MOVE AUDIT LOGS END */

/* ADMIN AUDIT POSITION REPAIR START */

/*
   Repair Recent Audit Logs so it sits as its own card
   below API Connection Performance.
*/

.admin-audit-logs-clean-card {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 52%),
        rgba(15, 23, 42, 0.78) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

.admin-audit-logs-clean-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.admin-audit-logs-clean-head h1,
.admin-audit-logs-clean-head h2,
.admin-audit-logs-clean-head h3 {
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    letter-spacing: -0.04em !important;
}

.admin-audit-logs-show-button {
    min-height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.36) !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

@media (max-width: 900px) {
    .admin-audit-logs-clean-card {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-audit-logs-clean-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* ADMIN AUDIT POSITION REPAIR END */

/* ADMIN AUDIT HARD FIX START */

/*
   Force Recent Audit Logs into its own clean card below API Connection Performance.
*/

.admin-audit-hard-card {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(250, 204, 21, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.09), transparent 54%),
        rgba(15, 23, 42, 0.80) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

.admin-audit-hard-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.admin-audit-hard-title h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    letter-spacing: -0.04em !important;
}

.admin-audit-hard-title p {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}

.admin-audit-hard-button {
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.36) !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

@media (max-width: 900px) {
    .admin-audit-hard-card {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-audit-hard-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* ADMIN AUDIT HARD FIX END */

/* ADMIN AUDIT POLISH START */

/*
   Recent Audit Logs polish.
   Adds compact card styling and Hide Audit Logs action.
*/

.admin-audit-polished-card {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(250, 204, 21, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.09), transparent 54%),
        rgba(15, 23, 42, 0.80) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

.admin-audit-polish-head,
.admin-audit-hard-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.admin-audit-polish-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.18) !important;
    border: 1px solid rgba(250, 204, 21, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-audit-polish-title h2,
.admin-audit-hard-title h2,
.admin-audit-hard-head h2,
.admin-audit-hard-head h3 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    letter-spacing: -0.04em !important;
}

.admin-audit-polish-title p,
.admin-audit-hard-title p {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}

.admin-audit-polish-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.admin-audit-show-button,
.admin-audit-hard-button,
.admin-audit-hide-card-button {
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease !important;
}

.admin-audit-show-button,
.admin-audit-hard-button {
    border: 1px solid rgba(250, 204, 21, 0.36) !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
}

.admin-audit-hide-card-button {
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    color: #cbd5e1 !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.78) !important;
}

.admin-audit-show-button:hover,
.admin-audit-hard-button:hover,
.admin-audit-hide-card-button:hover {
    transform: translateY(-1px) !important;
}

.admin-audit-polish-note {
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    color: #fef3c7 !important;
    background: rgba(113, 63, 18, 0.13) !important;
    border: 1px solid rgba(250, 204, 21, 0.16) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
}

.admin-audit-card-hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .admin-audit-polished-card {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-audit-polish-head,
    .admin-audit-hard-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .admin-audit-polish-actions {
        justify-content: flex-start !important;
    }
}

/* ADMIN AUDIT POLISH END */

/* ADMIN REAL AUDIT LOGS START */

/*
   Move and polish the real Recent Audit Logs card.
   Removes duplicate/fake audit card behaviour.
*/

.admin-real-audit-card {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(250, 204, 21, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 54%),
        rgba(15, 23, 42, 0.82) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

.admin-real-audit-card h1,
.admin-real-audit-card h2,
.admin-real-audit-card h3 {
    margin-top: 0 !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.5vw, 34px) !important;
    letter-spacing: -0.04em !important;
}

.admin-real-audit-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin: -44px 0 18px !important;
    pointer-events: auto !important;
}

.admin-real-audit-hide-button {
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    color: #cbd5e1 !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.82) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
}

.admin-real-audit-hide-button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(203, 213, 225, 0.48) !important;
}

.admin-real-audit-hidden {
    display: none !important;
}

/*
   Hide leftover duplicate audit shells if any remain.
*/
.admin-audit-hard-card:not(.admin-real-audit-card),
.admin-audit-polished-card:not(.admin-real-audit-card),
.admin-audit-logs-clean-card:not(.admin-real-audit-card),
.admin-audit-logs-panel:not(.admin-real-audit-card) {
    display: none !important;
}

@media (max-width: 900px) {
    .admin-real-audit-card {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-real-audit-actions {
        justify-content: flex-start !important;
        margin: 12px 0 16px !important;
    }
}

/* ADMIN REAL AUDIT LOGS END */

/* ADMIN AUDIT FINAL POLISH START */

/*
   Final Recent Audit Logs polish.
   Removes Hide Audit Logs and keeps Show Logs only.
*/

.admin-real-audit-final-card {
    width: min(1080px, calc(100vw - 72px)) !important;
    max-width: 1080px !important;
    margin: 20px auto 20px !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(250, 204, 21, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 54%),
        rgba(15, 23, 42, 0.82) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
}

.admin-real-audit-final-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 18px !important;
}

.admin-real-audit-final-title h1,
.admin-real-audit-final-title h2,
.admin-real-audit-final-title h3 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(26px, 2.5vw, 34px) !important;
    letter-spacing: -0.04em !important;
}

.admin-real-audit-final-help {
    margin: 0 !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}

.admin-real-audit-final-actions {
    display: inline-flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

.admin-real-audit-show-button {
    min-height: 38px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.38) !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.14), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.admin-real-audit-show-button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(250, 204, 21, 0.58) !important;
}

/* Force old hide buttons out if cached fragments remain */
.admin-real-audit-hide-button,
.admin-audit-hide-card-button {
    display: none !important;
}

/* Hide leftover duplicate audit shells */
.admin-audit-hard-card:not(.admin-real-audit-final-card),
.admin-audit-polished-card:not(.admin-real-audit-final-card),
.admin-audit-logs-clean-card:not(.admin-real-audit-final-card),
.admin-audit-logs-panel:not(.admin-real-audit-final-card) {
    display: none !important;
}

@media (max-width: 900px) {
    .admin-real-audit-final-card {
        width: min(100vw - 28px, 1080px) !important;
    }

    .admin-real-audit-final-head {
        flex-direction: column !important;
    }

    .admin-real-audit-final-actions {
        justify-content: flex-start !important;
    }
}

/* ADMIN AUDIT FINAL POLISH END */

/* ADMIN SECTION SIDEBAR SITE STYLE START */

/*
   Site-style admin sidebar.
   Matches the main platform sidebar look with profile card and pill navigation.
*/

.admin-section-sidebar-site-style {
    position: fixed !important;
    top: 32px !important;
    left: 24px !important;
    bottom: 24px !important;
    z-index: 999 !important;
    width: 290px !important;
    padding: 24px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(96, 165, 250, 0.14) !important;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 44%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)) !important;
    box-shadow:
        0 26px 70px rgba(0,0,0,0.34),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    backdrop-filter: blur(16px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(147, 197, 253, 0.45) rgba(15, 23, 42, 0.55) !important;
}

.admin-section-profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 52%),
        rgba(30, 41, 59, 0.76) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-section-profile-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    color: #111827 !important;
    background: #2563EB !important;
    font-size: 19px !important;
    font-weight: 1000 !important;
}

.admin-section-profile-text {
    display: grid !important;
    gap: 4px !important;
}

.admin-section-profile-text strong {
    color: #f8fafc !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 1000 !important;
}

.admin-section-profile-text span {
    color: #9fb4d1 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.admin-section-sidebar-pills {
    display: grid !important;
    gap: 14px !important;
}

.admin-section-pill {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border-radius: 19px !important;
    border: 1px solid transparent !important;
    color: #bfd5f6 !important;
    background: transparent !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    text-align: left !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    letter-spacing: -0.015em !important;
    transition:
        transform 140ms ease,
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease !important;
}

.admin-section-pill-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    font-size: 18px !important;
}

.admin-section-pill-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.admin-section-pill:hover {
    color: #f8fafc !important;
    transform: translateX(3px) !important;
    background:
        radial-gradient(circle at left, rgba(59, 130, 246, 0.16), transparent 58%),
        rgba(15, 23, 42, 0.78) !important;
    border-color: rgba(147, 197, 253, 0.18) !important;
}

.admin-section-pill.is-active {
    color: #f8fafc !important;
    border-color: rgba(250, 204, 21, 0.44) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.10), transparent 58%),
        rgba(15, 23, 42, 0.88) !important;
    box-shadow:
        0 14px 30px rgba(0,0,0,0.18),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-section-pill[data-admin-section-target="admin-inbox"].is-active,
.admin-section-pill[data-admin-section-target="admin-inbox"]:hover {
    border-color: rgba(34, 211, 238, 0.44) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.22), transparent 60%),
        rgba(8, 47, 73, 0.64) !important;
    box-shadow:
        0 0 28px rgba(34, 211, 238, 0.16),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-section-anchor-target {
    scroll-margin-top: 34px !important;
}

/*
   Push admin content right on wide screens so the sidebar feels like part of the layout.
*/
@media (min-width: 1320px) {
    body.pro-dashboard .pro-main {
        margin-left: 315px !important;
    }
}

/*
   Tablet/smaller layout: collapse sidebar into a Sections button.
*/
.admin-section-sidebar-toggle {
    display: none !important;
    position: fixed !important;
    left: 16px !important;
    bottom: 18px !important;
    z-index: 1000 !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(147, 197, 253, 0.28) !important;
    color: #bfdbfe !important;
    background: rgba(15, 23, 42, 0.90) !important;
    font-size: 13px !important;
    font-weight: 1000 !important;
    cursor: pointer !important;
    box-shadow: 0 16px 38px rgba(0,0,0,0.30) !important;
}

@media (max-width: 1319px) {
    .admin-section-sidebar-site-style {
        display: none !important;
        top: auto !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 68px !important;
        width: auto !important;
        max-height: 72vh !important;
        border-radius: 24px !important;
    }

    .admin-section-sidebar-site-style.is-open {
        display: block !important;
    }

    .admin-section-sidebar-toggle {
        display: inline-flex !important;
        align-items: center !important;
    }

    .admin-section-sidebar-pills {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-section-pill {
        min-height: 50px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 620px) {
    .admin-section-sidebar-pills {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN SECTION SIDEBAR SITE STYLE END */

/* ADMIN SIDEBAR OVERLAP FIX START */

/*
   Fix admin section sidebar overlap.
   Keeps the site-style sidebar while reserving content space on wide screens.
*/

@media (min-width: 1320px) {
    body.pro-dashboard .pro-main {
        margin-left: 345px !important;
        width: calc(100% - 365px) !important;
        max-width: none !important;
    }

    .admin-section-sidebar-site-style {
        width: 270px !important;
        left: 24px !important;
        top: 30px !important;
        bottom: 24px !important;
    }

    /*
       Keep centred lower admin panels centred inside the remaining content area,
       not behind the sidebar.
    */
    .admin-performance-summary-panel,
    .admin-real-audit-final-card,
    .admin-real-audit-card,
    .admin-change-history-panel {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
   Slightly reduce sidebar width on medium-wide screens to avoid covering content.
*/
@media (min-width: 1320px) and (max-width: 1550px) {
    body.pro-dashboard .pro-main {
        margin-left: 320px !important;
        width: calc(100% - 340px) !important;
    }

    .admin-section-sidebar-site-style {
        width: 245px !important;
        padding: 20px !important;
    }

    .admin-section-profile-card {
        padding: 15px !important;
        gap: 12px !important;
    }

    .admin-section-profile-avatar {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .admin-section-profile-text strong {
        font-size: 16px !important;
    }

    .admin-section-pill {
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 0 14px !important;
    }
}

/*
   On smaller screens, restore normal content flow and use the floating Sections button.
*/
@media (max-width: 1319px) {
    body.pro-dashboard .pro-main {
        margin-left: 0 !important;
        width: auto !important;
        max-width: none !important;
    }
}

/*
   Prevent top-right brand/footer-style badge from visually clashing with sidebar.
   This only affects the admin layout where the section sidebar exists.
*/
.admin-section-sidebar-site-style ~ .admin-site-footer-bottom {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ADMIN SIDEBAR OVERLAP FIX END */

/* ADMIN SIDEBAR HARD OVERLAP FIX START */

/*
   Hard fix for admin sidebar overlap.
   The sidebar keeps the site-style design, while the admin content gets a reserved left rail.
*/

@media (min-width: 1320px) {
    body.admin-sidebar-layout-active {
        padding-left: 300px !important;
        box-sizing: border-box !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        width: 245px !important;
        left: 22px !important;
        top: 26px !important;
        bottom: 24px !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        max-width: calc(100vw - 330px) !important;
        box-sizing: border-box !important;
    }

    /*
       Prevent centred lower cards from centring against the full viewport.
       They should centre inside the remaining content area.
    */
    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: min(100%, 1040px) !important;
        max-width: 1040px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
       Keep the profile/sidebar closer to the screenshot but a little slimmer
       so content has enough space.
    */
    body.admin-sidebar-layout-active .admin-section-profile-card {
        padding: 14px !important;
        gap: 12px !important;
        border-radius: 18px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-avatar {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        border-radius: 15px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text strong {
        font-size: 15px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text span {
        font-size: 11px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 48px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill-icon {
        width: 22px !important;
        min-width: 22px !important;
        font-size: 15px !important;
    }
}

/*
   Very wide screens can use a slightly wider sidebar.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 330px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        width: 275px !important;
        padding: 22px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        max-width: calc(100vw - 365px) !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 54px !important;
        font-size: 17px !important;
    }
}

/*
   On smaller screens, remove reserved rail and use the floating Sections button.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        max-width: none !important;
    }
}

/* ADMIN SIDEBAR HARD OVERLAP FIX END */

/* ADMIN CARD ALIGNMENT START */

/*
   Align admin page cards with the site-style sidebar.
   Layout only.
*/

/*
   Wide screen layout:
   Reserve a left rail for the sidebar, then centre the admin content
   inside the remaining space instead of letting cards spill sideways.
*/
@media (min-width: 1320px) {
    body.admin-sidebar-layout-active {
        padding-left: 292px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        width: 240px !important;
        left: 20px !important;
        top: 24px !important;
        bottom: 24px !important;
    }

    /*
       Main content rail.
       This is the key alignment fix.
    */
    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1120px, calc(100vw - 330px)) !important;
        max-width: 1120px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        overflow-x: visible !important;
    }

    /*
       If admin cards are direct children of the main area,
       keep them from becoming wider than the aligned rail.
    */
    body.admin-sidebar-layout-active .pro-main > section,
    body.admin-sidebar-layout-active .pro-main > article,
    body.admin-sidebar-layout-active .pro-main > form,
    body.admin-sidebar-layout-active .pro-main > .card,
    body.admin-sidebar-layout-active .pro-main > .pro-card,
    body.admin-sidebar-layout-active .pro-main > .pro-result-panel,
    body.admin-sidebar-layout-active .pro-main > .settings-card,
    body.admin-sidebar-layout-active .pro-main > .dashboard-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
       Admin lower panels align to the same content width.
    */
    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: 100% !important;
        max-width: 1120px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/*
   Very wide screens can breathe slightly more.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 320px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        width: 270px !important;
        left: 24px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1240px, calc(100vw - 370px)) !important;
        max-width: 1240px !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1240px !important;
    }
}

/*
   Admin top card row alignment.
   If the page uses a grid/flex parent, stop cards from overflowing.
*/
body.admin-sidebar-layout-active .pro-main {
    align-items: stretch !important;
}

body.admin-sidebar-layout-active .pro-main * {
    min-width: 0 !important;
}

/*
   Prevent horizontally clipped secondary cards.
*/
body.admin-sidebar-layout-active section,
body.admin-sidebar-layout-active article,
body.admin-sidebar-layout-active form,
body.admin-sidebar-layout-active .card,
body.admin-sidebar-layout-active .pro-card,
body.admin-sidebar-layout-active .pro-result-panel,
body.admin-sidebar-layout-active .settings-card,
body.admin-sidebar-layout-active .dashboard-card {
    box-sizing: border-box !important;
}

/*
   Keep tables scrolling inside cards instead of widening the whole page.
*/
body.admin-sidebar-layout-active table {
    max-width: 100% !important;
}

body.admin-sidebar-layout-active .admin-performance-table-wrap,
body.admin-sidebar-layout-active .admin-real-audit-final-card,
body.admin-sidebar-layout-active .admin-real-audit-card {
    overflow-x: auto !important;
}

/*
   On smaller screens, restore normal flow and use the Sections button.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ADMIN CARD ALIGNMENT END */

/* ADMIN SIDEBAR LOWER POSITION START */

/*
   Lower the admin section sidebar so it aligns better with the admin content
   and does not sit too close to the top header/brand area.
*/

@media (min-width: 1320px) {
    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: 92px !important;
        bottom: 30px !important;
    }
}

/*
   On medium-wide screens, keep the lowered sidebar compact.
*/
@media (min-width: 1320px) and (max-width: 1649px) {
    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: 86px !important;
        bottom: 30px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-card {
        margin-bottom: 22px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-pills {
        gap: 10px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 46px !important;
    }
}

/*
   On very tall/wide screens, give the sidebar a little more breathing room.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: 96px !important;
        bottom: 34px !important;
    }
}

/*
   Mobile/tablet behaviour remains unchanged.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: auto !important;
    }
}

/* ADMIN SIDEBAR LOWER POSITION END */

/* ADMIN TOP CLEANUP START */

/*
   Admin top cleanup:
   - removes white strip at very top
   - hides leftover top brand/header band after moving tradevaultx.co.uk to bottom
*/

html.admin-top-cleaned,
body.admin-top-cleaned {
    margin-top: 0 !important;
    background: #020617 !important;
}

body.admin-top-cleaned {
    margin: 0 !important;
    padding-top: 0 !important;
}

.admin-top-brand-band-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/*
   Pull admin content up slightly now the old top band is gone.
*/
body.admin-top-cleaned.admin-sidebar-layout-active .pro-main,
body.admin-top-cleaned.admin-sidebar-layout-active main,
body.admin-top-cleaned.admin-sidebar-layout-active .admin-main,
body.admin-top-cleaned.admin-sidebar-layout-active .dashboard-main,
body.admin-top-cleaned.admin-sidebar-layout-active .page-main,
body.admin-top-cleaned.admin-sidebar-layout-active .content,
body.admin-top-cleaned.admin-sidebar-layout-active .page-content {
    padding-top: 24px !important;
}

/*
   Keep footer brand at bottom after top band cleanup.
*/
.admin-site-footer-bottom {
    display: block !important;
    width: 100% !important;
    margin: 36px auto 22px !important;
    padding: 0 18px !important;
    text-align: center !important;
    color: #fde68a !important;
    font-weight: 1000 !important;
    letter-spacing: 0.02em !important;
}

/* ADMIN TOP CLEANUP END */

/* ADMIN BRAND BOTTOM FIX START */

/*
   Fix old top TradeVaultX header band on admin page.
   Keeps the brand text at the bottom and removes the unused top header strip.
*/

html.admin-brand-bottom-fixed,
body.admin-brand-bottom-fixed {
    margin: 0 !important;
    padding-top: 0 !important;
    background: #020617 !important;
}

.admin-old-top-brand-band-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/*
   Pull admin page content up now the old top band is removed.
*/
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .pro-main,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active main,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .admin-main,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .dashboard-main,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .page-main,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .content,
body.admin-brand-bottom-fixed.admin-sidebar-layout-active .page-content {
    padding-top: 18px !important;
}

/*
   Brand/footer position at bottom.
*/
.admin-site-footer-bottom {
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - 40px) !important;
    margin: 38px auto 24px !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(250, 204, 21, 0.34) !important;
    color: #fef3c7 !important;
    background:
        radial-gradient(circle at left, rgba(250, 204, 21, 0.18), transparent 60%),
        rgba(15, 23, 42, 0.86) !important;
    font-weight: 1000 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
    box-shadow:
        0 0 28px rgba(250, 204, 21, 0.18),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

/* ADMIN BRAND BOTTOM FIX END */

/* ADMIN FINAL CLEANUP START */

/*
   Final admin page cleanup.
   UI only.
   Keeps sidebar, top brand, cards, audit logs, and performance panels aligned.
*/

/* Overall page background and no stray top edge */
html,
body {
    background: #020617 !important;
}

body.pro-dashboard {
    overflow-x: hidden !important;
}

/*
   Top brand/header band cleanup.
   Keep the TradeVaultX pill intentional and remove excess vertical bulk.
*/
body.admin-sidebar-layout-active > header,
body.admin-sidebar-layout-active .site-header,
body.admin-sidebar-layout-active .top-header,
body.admin-sidebar-layout-active .app-header,
body.admin-sidebar-layout-active .navbar,
body.admin-sidebar-layout-active .pro-header {
    min-height: 72px !important;
    height: 72px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    background:
        radial-gradient(circle at top, rgba(30, 64, 175, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.92) !important;
}

/*
   Main admin content rail.
   Keeps cards aligned away from sidebar and avoids excessive blank space.
*/
@media (min-width: 1320px) {
    body.admin-sidebar-layout-active {
        padding-left: 300px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: 118px !important;
        bottom: 30px !important;
        left: 18px !important;
        width: 238px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1040px, calc(100vw - 340px)) !important;
        max-width: 1040px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 34px !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 330px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        width: 270px !important;
        left: 24px !important;
        top: 118px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1220px, calc(100vw - 380px)) !important;
        max-width: 1220px !important;
    }
}

/* Admin title spacing */
body.admin-sidebar-layout-active .pro-main h1:first-child,
body.admin-sidebar-layout-active main h1:first-child {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.05 !important;
}

body.admin-sidebar-layout-active .pro-main h1:first-child + p,
body.admin-sidebar-layout-active main h1:first-child + p {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

/*
   Top admin cards: make the first visible row sit in a clean grid if possible.
   This avoids the right card looking clipped/off-grid.
*/
body.admin-sidebar-layout-active .pro-main {
    gap: 24px !important;
    align-items: stretch !important;
}

body.admin-sidebar-layout-active .pro-main > section,
body.admin-sidebar-layout-active .pro-main > article,
body.admin-sidebar-layout-active .pro-main > form,
body.admin-sidebar-layout-active .pro-main > .card,
body.admin-sidebar-layout-active .pro-main > .pro-card,
body.admin-sidebar-layout-active .pro-main > .pro-result-panel,
body.admin-sidebar-layout-active .pro-main > .settings-card,
body.admin-sidebar-layout-active .pro-main > .dashboard-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Card padding and radius consistency */
body.admin-sidebar-layout-active .pro-main section,
body.admin-sidebar-layout-active .pro-main article,
body.admin-sidebar-layout-active .pro-main form,
body.admin-sidebar-layout-active .pro-main .card,
body.admin-sidebar-layout-active .pro-main .pro-card,
body.admin-sidebar-layout-active .pro-main .pro-result-panel,
body.admin-sidebar-layout-active .pro-main .settings-card,
body.admin-sidebar-layout-active .pro-main .dashboard-card {
    border-radius: 24px !important;
}

/*
   Lower admin panels align with the main content rail.
*/
body.admin-sidebar-layout-active .admin-performance-summary-panel,
body.admin-sidebar-layout-active .admin-real-audit-final-card,
body.admin-sidebar-layout-active .admin-real-audit-card,
body.admin-sidebar-layout-active .admin-change-history-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* API performance and audit card rhythm */
.admin-performance-summary-panel,
.admin-real-audit-final-card,
.admin-real-audit-card,
.admin-change-history-panel {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
}

/* Sidebar final visual tuning */
.admin-section-profile-card {
    margin-bottom: 24px !important;
}

.admin-section-sidebar-pills {
    gap: 11px !important;
}

.admin-section-pill {
    min-height: 48px !important;
}

/*
   Keep top brand pill from being too high/large inside header.
*/
body.admin-sidebar-layout-active header .brand,
body.admin-sidebar-layout-active header .logo,
body.admin-sidebar-layout-active .site-header .brand,
body.admin-sidebar-layout-active .site-header .logo {
    transform: none !important;
}

/* Mobile/tablet: restore normal flow */
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        padding-top: 22px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ADMIN FINAL CLEANUP END */

/* ADMIN SIDEBAR CONTENT SPACING REFINEMENT START */

/*
   Admin sidebar/content spacing refinement.
   UI only.
   Reduces the empty gap between the site-style sidebar and admin content.
*/

@media (min-width: 1320px) {
    /*
       Slightly reduce reserved sidebar rail so content moves left.
    */
    body.admin-sidebar-layout-active {
        padding-left: 260px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 18px !important;
        width: 218px !important;
        top: 112px !important;
        bottom: 30px !important;
        padding: 18px !important;
    }

    /*
       Wider content rail inside the remaining space.
    */
    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1160px, calc(100vw - 290px)) !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /*
       Lower panels use the same rail.
    */
    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: 100% !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /*
       Compact sidebar internals slightly to support the narrower rail.
    */
    body.admin-sidebar-layout-active .admin-section-profile-card {
        padding: 13px !important;
        gap: 11px !important;
        margin-bottom: 22px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-avatar {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text strong {
        font-size: 14px !important;
        line-height: 1.12 !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text span {
        font-size: 10px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-pills {
        gap: 9px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 45px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        border-radius: 15px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill-icon {
        width: 20px !important;
        min-width: 20px !important;
        font-size: 14px !important;
    }
}

/*
   Very wide screens can keep a fuller sidebar but still reduce the excessive gutter.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 300px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 24px !important;
        width: 250px !important;
        padding: 20px !important;
        top: 112px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1280px, calc(100vw - 340px)) !important;
        max-width: 1280px !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1280px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-avatar {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text strong {
        font-size: 15px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 48px !important;
        font-size: 15px !important;
    }
}

/*
   Keep normal mobile/tablet collapsed behaviour.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ADMIN SIDEBAR CONTENT SPACING REFINEMENT END */

/* ADMIN TOP NAV RIGHT ALIGN START */

/*
   Admin top navigation alignment.
   Makes Admin page top navigation match Dashboard layout:
   brand/logo area remains left/centre, nav links move to the right.
*/

body.admin-sidebar-layout-active header,
body.admin-sidebar-layout-active .site-header,
body.admin-sidebar-layout-active .top-header,
body.admin-sidebar-layout-active .app-header,
body.admin-sidebar-layout-active .navbar,
body.admin-sidebar-layout-active .pro-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/*
   Brand / logo block.
*/
body.admin-sidebar-layout-active header > :first-child,
body.admin-sidebar-layout-active .site-header > :first-child,
body.admin-sidebar-layout-active .top-header > :first-child,
body.admin-sidebar-layout-active .app-header > :first-child,
body.admin-sidebar-layout-active .navbar > :first-child,
body.admin-sidebar-layout-active .pro-header > :first-child {
    flex: 0 0 auto !important;
}

/*
   Common nav containers should occupy the remaining space and push links right.
*/
body.admin-sidebar-layout-active header nav,
body.admin-sidebar-layout-active .site-header nav,
body.admin-sidebar-layout-active .top-header nav,
body.admin-sidebar-layout-active .app-header nav,
body.admin-sidebar-layout-active .navbar nav,
body.admin-sidebar-layout-active .pro-header nav,
body.admin-sidebar-layout-active .site-nav,
body.admin-sidebar-layout-active .top-nav,
body.admin-sidebar-layout-active .nav-links,
body.admin-sidebar-layout-active .header-nav {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 22px !important;
    flex: 1 1 auto !important;
}

/*
   If nav links are direct children rather than inside a nav element,
   push the first link group to the right.
*/
body.admin-sidebar-layout-active header a:first-of-type,
body.admin-sidebar-layout-active .site-header a:first-of-type,
body.admin-sidebar-layout-active .top-header a:first-of-type,
body.admin-sidebar-layout-active .app-header a:first-of-type,
body.admin-sidebar-layout-active .navbar a:first-of-type,
body.admin-sidebar-layout-active .pro-header a:first-of-type {
    margin-left: auto !important;
}

/*
   Keep nav link/button styling compact like Dashboard.
*/
body.admin-sidebar-layout-active header a,
body.admin-sidebar-layout-active header button,
body.admin-sidebar-layout-active .site-header a,
body.admin-sidebar-layout-active .site-header button,
body.admin-sidebar-layout-active .top-header a,
body.admin-sidebar-layout-active .top-header button,
body.admin-sidebar-layout-active .app-header a,
body.admin-sidebar-layout-active .app-header button,
body.admin-sidebar-layout-active .navbar a,
body.admin-sidebar-layout-active .navbar button,
body.admin-sidebar-layout-active .pro-header a,
body.admin-sidebar-layout-active .pro-header button {
    white-space: nowrap !important;
}

/*
   Keep Logout pill on far right if it is a button/link.
*/
body.admin-sidebar-layout-active header a[href*="logout"],
body.admin-sidebar-layout-active header button[name*="logout"],
body.admin-sidebar-layout-active .site-header a[href*="logout"],
body.admin-sidebar-layout-active .site-header button[name*="logout"],
body.admin-sidebar-layout-active .top-header a[href*="logout"],
body.admin-sidebar-layout-active .top-header button[name*="logout"],
body.admin-sidebar-layout-active .app-header a[href*="logout"],
body.admin-sidebar-layout-active .app-header button[name*="logout"],
body.admin-sidebar-layout-active .navbar a[href*="logout"],
body.admin-sidebar-layout-active .navbar button[name*="logout"],
body.admin-sidebar-layout-active .pro-header a[href*="logout"],
body.admin-sidebar-layout-active .pro-header button[name*="logout"] {
    margin-left: 4px !important;
}

/*
   Mobile/tablet: allow wrapping instead of overflow.
*/
@media (max-width: 900px) {
    body.admin-sidebar-layout-active header,
    body.admin-sidebar-layout-active .site-header,
    body.admin-sidebar-layout-active .top-header,
    body.admin-sidebar-layout-active .app-header,
    body.admin-sidebar-layout-active .navbar,
    body.admin-sidebar-layout-active .pro-header {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    body.admin-sidebar-layout-active header nav,
    body.admin-sidebar-layout-active .site-header nav,
    body.admin-sidebar-layout-active .top-header nav,
    body.admin-sidebar-layout-active .app-header nav,
    body.admin-sidebar-layout-active .navbar nav,
    body.admin-sidebar-layout-active .pro-header nav,
    body.admin-sidebar-layout-active .site-nav,
    body.admin-sidebar-layout-active .top-nav,
    body.admin-sidebar-layout-active .nav-links,
    body.admin-sidebar-layout-active .header-nav {
        justify-content: center !important;
        margin-left: 0 !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    body.admin-sidebar-layout-active header a:first-of-type,
    body.admin-sidebar-layout-active .site-header a:first-of-type,
    body.admin-sidebar-layout-active .top-header a:first-of-type,
    body.admin-sidebar-layout-active .app-header a:first-of-type,
    body.admin-sidebar-layout-active .navbar a:first-of-type,
    body.admin-sidebar-layout-active .pro-header a:first-of-type {
        margin-left: 0 !important;
    }
}

/* ADMIN TOP NAV RIGHT ALIGN END */

/* ADMIN DASHBOARD HEADER ALIGN START */

/*
   Align Admin top header with Dashboard layout.
   - TradeVaultX centred in header.
   - Top nav links on the right.
   - Admin content rail follows Dashboard-style rhythm.
   CSS only.
*/

/* Header container */
body.admin-sidebar-layout-active header,
body.admin-sidebar-layout-active .site-header,
body.admin-sidebar-layout-active .top-header,
body.admin-sidebar-layout-active .app-header,
body.admin-sidebar-layout-active .navbar,
body.admin-sidebar-layout-active .pro-header {
    position: relative !important;
    min-height: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-left: 28px !important;
    padding-right: 34px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    background:
        radial-gradient(circle at top, rgba(30, 64, 175, 0.10), transparent 58%),
        rgba(2, 6, 23, 0.94) !important;
    box-sizing: border-box !important;
}

/*
   Centre the brand badge/pill like Dashboard.
   This targets the first branded link/block in the header.
*/
body.admin-sidebar-layout-active header > :first-child,
body.admin-sidebar-layout-active .site-header > :first-child,
body.admin-sidebar-layout-active .top-header > :first-child,
body.admin-sidebar-layout-active .app-header > :first-child,
body.admin-sidebar-layout-active .navbar > :first-child,
body.admin-sidebar-layout-active .pro-header > :first-child {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/*
   Keep top navigation on the right side.
*/
body.admin-sidebar-layout-active header nav,
body.admin-sidebar-layout-active .site-header nav,
body.admin-sidebar-layout-active .top-header nav,
body.admin-sidebar-layout-active .app-header nav,
body.admin-sidebar-layout-active .navbar nav,
body.admin-sidebar-layout-active .pro-header nav,
body.admin-sidebar-layout-active .site-nav,
body.admin-sidebar-layout-active .top-nav,
body.admin-sidebar-layout-active .nav-links,
body.admin-sidebar-layout-active .header-nav {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    flex: 0 1 auto !important;
    z-index: 3 !important;
}

/*
   If nav links are direct children rather than wrapped in nav,
   push them right while brand stays centred.
*/
body.admin-sidebar-layout-active header a:first-of-type:not(:first-child),
body.admin-sidebar-layout-active .site-header a:first-of-type:not(:first-child),
body.admin-sidebar-layout-active .top-header a:first-of-type:not(:first-child),
body.admin-sidebar-layout-active .app-header a:first-of-type:not(:first-child),
body.admin-sidebar-layout-active .navbar a:first-of-type:not(:first-child),
body.admin-sidebar-layout-active .pro-header a:first-of-type:not(:first-child) {
    margin-left: auto !important;
}

/* Nav item consistency */
body.admin-sidebar-layout-active header a,
body.admin-sidebar-layout-active header button,
body.admin-sidebar-layout-active .site-header a,
body.admin-sidebar-layout-active .site-header button,
body.admin-sidebar-layout-active .top-header a,
body.admin-sidebar-layout-active .top-header button,
body.admin-sidebar-layout-active .app-header a,
body.admin-sidebar-layout-active .app-header button,
body.admin-sidebar-layout-active .navbar a,
body.admin-sidebar-layout-active .navbar button,
body.admin-sidebar-layout-active .pro-header a,
body.admin-sidebar-layout-active .pro-header button {
    white-space: nowrap !important;
}

/*
   Align Admin content rhythm closer to Dashboard.
   Keeps the sidebar rail but centres the content like Dashboard cards.
*/
@media (min-width: 1320px) {
    body.admin-sidebar-layout-active {
        padding-left: 260px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        top: 112px !important;
        left: 18px !important;
        width: 218px !important;
        bottom: 30px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1160px, calc(100vw - 300px)) !important;
        max-width: 1160px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 40px !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 300px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 24px !important;
        width: 250px !important;
        top: 112px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1280px, calc(100vw - 350px)) !important;
        max-width: 1280px !important;
    }
}

/*
   Lower panels align to same rail.
*/
body.admin-sidebar-layout-active .admin-performance-summary-panel,
body.admin-sidebar-layout-active .admin-real-audit-final-card,
body.admin-sidebar-layout-active .admin-real-audit-card,
body.admin-sidebar-layout-active .admin-change-history-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mobile/tablet: avoid absolute header clash */
@media (max-width: 900px) {
    body.admin-sidebar-layout-active header,
    body.admin-sidebar-layout-active .site-header,
    body.admin-sidebar-layout-active .top-header,
    body.admin-sidebar-layout-active .app-header,
    body.admin-sidebar-layout-active .navbar,
    body.admin-sidebar-layout-active .pro-header {
        height: auto !important;
        min-height: 72px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    body.admin-sidebar-layout-active header > :first-child,
    body.admin-sidebar-layout-active .site-header > :first-child,
    body.admin-sidebar-layout-active .top-header > :first-child,
    body.admin-sidebar-layout-active .app-header > :first-child,
    body.admin-sidebar-layout-active .navbar > :first-child,
    body.admin-sidebar-layout-active .pro-header > :first-child {
        position: static !important;
        transform: none !important;
    }

    body.admin-sidebar-layout-active header nav,
    body.admin-sidebar-layout-active .site-header nav,
    body.admin-sidebar-layout-active .top-header nav,
    body.admin-sidebar-layout-active .app-header nav,
    body.admin-sidebar-layout-active .navbar nav,
    body.admin-sidebar-layout-active .pro-header nav,
    body.admin-sidebar-layout-active .site-nav,
    body.admin-sidebar-layout-active .top-nav,
    body.admin-sidebar-layout-active .nav-links,
    body.admin-sidebar-layout-active .header-nav {
        justify-content: center !important;
        margin-left: 0 !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
}

@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 24px !important;
    }
}

/* ADMIN DASHBOARD HEADER ALIGN END */

/* ADMIN CONTENT CLOSER TO SIDEBAR START */

/*
   Move Admin content closer to the site-style sidebar.
   This makes Admin follow the Dashboard layout more closely:
   sidebar on the left, content rail starting shortly after it.
*/

@media (min-width: 1320px) {
    /*
       Reserve only the space needed for the sidebar rail.
    */
    body.admin-sidebar-layout-active {
        padding-left: 260px !important;
        overflow-x: hidden !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 18px !important;
        width: 218px !important;
        top: 112px !important;
        bottom: 30px !important;
    }

    /*
       Key change:
       Left-align the admin content rail beside the sidebar instead of
       centring it too far across the screen.
    */
    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1180px, calc(100vw - 300px)) !important;
        max-width: 1180px !important;
        margin-left: 24px !important;
        margin-right: auto !important;
        padding-top: 40px !important;
        box-sizing: border-box !important;
    }

    /*
       Lower panels should align with the same content rail.
    */
    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/*
   Very wide screens get a slightly wider sidebar and content rail,
   while still keeping the content close to the sidebar.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 300px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 24px !important;
        width: 250px !important;
        top: 112px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1320px, calc(100vw - 350px)) !important;
        max-width: 1320px !important;
        margin-left: 24px !important;
        margin-right: auto !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1320px !important;
    }
}

/*
   Keep cards from spilling right after moving the rail left.
*/
body.admin-sidebar-layout-active .pro-main *,
body.admin-sidebar-layout-active main * {
    min-width: 0 !important;
}

body.admin-sidebar-layout-active .pro-main > section,
body.admin-sidebar-layout-active .pro-main > article,
body.admin-sidebar-layout-active .pro-main > form,
body.admin-sidebar-layout-active .pro-main > .card,
body.admin-sidebar-layout-active .pro-main > .pro-card,
body.admin-sidebar-layout-active .pro-main > .pro-result-panel,
body.admin-sidebar-layout-active .pro-main > .settings-card,
body.admin-sidebar-layout-active .pro-main > .dashboard-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/*
   Mobile/tablet unchanged.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 24px !important;
    }
}

/* ADMIN CONTENT CLOSER TO SIDEBAR END */

/* ADMIN DASHBOARD SPACING MATCH START */

/*
   Match Admin sidebar/content spacing closer to Dashboard.
   Reduces blank space between sidebar and admin content.
*/

@media (min-width: 1320px) {
    body.admin-sidebar-layout-active {
        padding-left: 226px !important;
        overflow-x: hidden !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 10px !important;
        width: 196px !important;
        top: 112px !important;
        bottom: 30px !important;
        padding: 16px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1280px, calc(100vw - 248px)) !important;
        max-width: 1280px !important;
        margin-left: 14px !important;
        margin-right: 0 !important;
        padding-top: 40px !important;
        box-sizing: border-box !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-card {
        padding: 12px !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-avatar {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text strong {
        font-size: 13px !important;
        line-height: 1.12 !important;
    }

    body.admin-sidebar-layout-active .admin-section-profile-text span {
        font-size: 10px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-pills {
        gap: 8px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill {
        min-height: 44px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
        border-radius: 14px !important;
    }

    body.admin-sidebar-layout-active .admin-section-pill-icon {
        width: 19px !important;
        min-width: 19px !important;
        font-size: 13px !important;
    }
}

/*
   Wider screens can breathe slightly while staying dashboard-like.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 260px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 18px !important;
        width: 218px !important;
        padding: 18px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1380px, calc(100vw - 292px)) !important;
        max-width: 1380px !important;
        margin-left: 16px !important;
        margin-right: 0 !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1380px !important;
    }
}

/*
   Keep cards from spilling horizontally.
*/
body.admin-sidebar-layout-active .pro-main *,
body.admin-sidebar-layout-active main * {
    min-width: 0 !important;
}

body.admin-sidebar-layout-active .pro-main > section,
body.admin-sidebar-layout-active .pro-main > article,
body.admin-sidebar-layout-active .pro-main > form,
body.admin-sidebar-layout-active .pro-main > .card,
body.admin-sidebar-layout-active .pro-main > .pro-card,
body.admin-sidebar-layout-active .pro-main > .pro-result-panel,
body.admin-sidebar-layout-active .pro-main > .settings-card,
body.admin-sidebar-layout-active .pro-main > .dashboard-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/*
   Mobile/tablet unchanged.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 24px !important;
    }
}

/* ADMIN DASHBOARD SPACING MATCH END */

/* ADMIN SUMMARY CARDS START */

/*
   Admin Summary Cards v1.3.0.
   Database-backed snapshot cards.
*/

.admin-summary-cards-panel {
    width: 100% !important;
    margin: 22px 0 26px !important;
    padding: 22px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(96, 165, 250, 0.16) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.11), transparent 55%),
        rgba(15, 23, 42, 0.78) !important;
    color: #e5eefc !important;
    box-shadow:
        0 20px 52px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

.admin-summary-cards-head {
    margin-bottom: 18px !important;
}

.admin-summary-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 9px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.14) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-summary-cards-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.8vw, 36px) !important;
    letter-spacing: -0.045em !important;
}

.admin-summary-cards-head p {
    margin: 0 !important;
    max-width: 780px !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

.admin-summary-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.admin-summary-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    padding: 15px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: rgba(2, 6, 23, 0.38) !important;
    box-shadow:
        0 14px 32px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.018) !important;
    box-sizing: border-box !important;
}

.admin-summary-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    font-size: 17px !important;
}

.admin-summary-card-body {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

.admin-summary-card-body span {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.admin-summary-card-body strong {
    color: #f8fafc !important;
    font-size: clamp(22px, 2.2vw, 32px) !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
}

.admin-summary-card-body small {
    color: #8ea4c3 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.admin-summary-card.is-cyan {
    border-color: rgba(34, 211, 238, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.38) !important;
}

.admin-summary-card.is-green {
    border-color: rgba(34, 197, 94, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.38) !important;
}

.admin-summary-card.is-amber {
    border-color: rgba(250, 204, 21, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.38) !important;
}

.admin-summary-card.is-purple {
    border-color: rgba(168, 85, 247, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.38) !important;
}

.admin-summary-card.is-slate {
    border-color: rgba(148, 163, 184, 0.18) !important;
}

@media (max-width: 1250px) {
    .admin-summary-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .admin-summary-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .admin-summary-card {
        min-height: 96px !important;
    }
}

@media (max-width: 520px) {
    .admin-summary-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN SUMMARY CARDS END */

/* ADMIN SUMMARY CARDS REPAIR START */

/*
   Repair Admin Summary Cards layout.
   Forces cards into styled grid even if earlier admin CSS is more general.
*/

body.admin-sidebar-layout-active .admin-summary-cards-panel,
.admin-summary-cards-panel.admin-summary-cards-repaired {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 28px !important;
    padding: 22px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(96, 165, 250, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 55%),
        rgba(15, 23, 42, 0.82) !important;
    color: #e5eefc !important;
    box-shadow:
        0 20px 52px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

body.admin-sidebar-layout-active .admin-summary-cards-head,
.admin-summary-cards-panel .admin-summary-cards-head {
    display: block !important;
    margin: 0 0 18px !important;
}

body.admin-sidebar-layout-active .admin-summary-eyebrow,
.admin-summary-cards-panel .admin-summary-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 0 0 9px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.16) !important;
    border: 1px solid rgba(147, 197, 253, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body.admin-sidebar-layout-active .admin-summary-cards-head h2,
.admin-summary-cards-panel .admin-summary-cards-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.8vw, 36px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
}

body.admin-sidebar-layout-active .admin-summary-cards-head p,
.admin-summary-cards-panel .admin-summary-cards-head p {
    margin: 0 !important;
    max-width: 800px !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

body.admin-sidebar-layout-active .admin-summary-cards-grid,
.admin-summary-cards-panel .admin-summary-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

body.admin-sidebar-layout-active .admin-summary-card,
.admin-summary-cards-panel .admin-summary-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    padding: 15px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(148, 163, 184, 0.14) !important;
    background: rgba(2, 6, 23, 0.42) !important;
    box-shadow:
        0 14px 32px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(255,255,255,0.018) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

body.admin-sidebar-layout-active .admin-summary-card-icon,
.admin-summary-cards-panel .admin-summary-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 15px !important;
    background: rgba(15, 23, 42, 0.84) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    font-size: 17px !important;
}

body.admin-sidebar-layout-active .admin-summary-card-body,
.admin-summary-cards-panel .admin-summary-card-body {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
}

body.admin-sidebar-layout-active .admin-summary-card-body span,
.admin-summary-cards-panel .admin-summary-card-body span {
    display: block !important;
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.admin-sidebar-layout-active .admin-summary-card-body strong,
.admin-summary-cards-panel .admin-summary-card-body strong {
    display: block !important;
    color: #f8fafc !important;
    font-size: clamp(22px, 2.2vw, 32px) !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
}

body.admin-sidebar-layout-active .admin-summary-card-body small,
.admin-summary-cards-panel .admin-summary-card-body small {
    display: block !important;
    color: #8ea4c3 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.admin-summary-card.is-blue {
    border-color: rgba(96, 165, 250, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.42) !important;
}

.admin-summary-card.is-cyan {
    border-color: rgba(34, 211, 238, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.13), transparent 58%),
        rgba(2, 6, 23, 0.42) !important;
}

.admin-summary-card.is-green {
    border-color: rgba(34, 197, 94, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.13), transparent 58%),
        rgba(2, 6, 23, 0.42) !important;
}

.admin-summary-card.is-amber {
    border-color: rgba(250, 204, 21, 0.24) !important;
    background:
        radial-gradient(circle at top left, rgba(250, 204, 21, 0.13), transparent 58%),
        rgba(2, 6, 23, 0.42) !important;
}

.admin-summary-card.is-purple {
    border-color: rgba(168, 85, 247, 0.24) !important;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.13), transparent 58%),
        rgba(2, 6, 23, 0.42) !important;
}

.admin-summary-card.is-slate {
    border-color: rgba(148, 163, 184, 0.20) !important;
}

@media (max-width: 1400px) {
    body.admin-sidebar-layout-active .admin-summary-cards-grid,
    .admin-summary-cards-panel .admin-summary-cards-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    body.admin-sidebar-layout-active .admin-summary-cards-grid,
    .admin-summary-cards-panel .admin-summary-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.admin-sidebar-layout-active .admin-summary-card,
    .admin-summary-cards-panel .admin-summary-card {
        min-height: 96px !important;
    }
}

@media (max-width: 520px) {
    body.admin-sidebar-layout-active .admin-summary-cards-grid,
    .admin-summary-cards-panel .admin-summary-cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ADMIN SUMMARY CARDS REPAIR END */

/* ADMIN SUMMARY CARD LINKS START */

/*
   Admin Summary Cards are clickable shortcuts to relevant admin sections.
   UI/navigation only.
*/

.admin-summary-card.is-clickable-summary-card {
    cursor: pointer !important;
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease !important;
}

.admin-summary-card.is-clickable-summary-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(147, 197, 253, 0.36) !important;
    box-shadow:
        0 18px 42px rgba(0,0,0,0.22),
        0 0 24px rgba(59, 130, 246, 0.10),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.admin-summary-card.is-clickable-summary-card:focus {
    outline: 2px solid rgba(147, 197, 253, 0.55) !important;
    outline-offset: 3px !important;
}

.admin-summary-card.is-clickable-summary-card:active {
    transform: translateY(0) !important;
}

/* ADMIN SUMMARY CARD LINKS END */

/* ADMIN USERS SEARCH POLISH START */

/*
   Users section polish + search.
   UI only. Existing user management logic unchanged.
*/

.admin-users-polished-card {
    position: relative !important;
    overflow: hidden !important;
}

.admin-users-search-panel {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 14px 0 16px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(147, 197, 253, 0.16) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 58%),
        rgba(2, 6, 23, 0.34) !important;
    box-sizing: border-box !important;
}

.admin-users-search-text {
    display: grid !important;
    gap: 4px !important;
}

.admin-users-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.14) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 10px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-users-search-text strong {
    color: #f8fafc !important;
    font-size: 18px !important;
    font-weight: 1000 !important;
    letter-spacing: -0.025em !important;
}

.admin-users-search-text small {
    color: #9fb4d1 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
}

.admin-users-search-controls {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

#adminUsersSearchInput {
    width: min(280px, 100%) !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(147, 197, 253, 0.22) !important;
    background: rgba(15, 23, 42, 0.86) !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    outline: none !important;
}

#adminUsersSearchInput::placeholder {
    color: #64748b !important;
}

#adminUsersSearchInput:focus {
    border-color: rgba(147, 197, 253, 0.52) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14) !important;
}

#adminUsersSearchCount {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(147, 197, 253, 0.16) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-users-polished-table-wrap {
    max-height: 380px !important;
    overflow: auto !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: rgba(2, 6, 23, 0.22) !important;
}

.admin-users-polished-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.admin-users-polished-table th,
.admin-users-polished-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    vertical-align: middle !important;
}

.admin-users-polished-table th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, 0.54) !important;
}

.admin-users-polished-table td {
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.admin-user-row-hidden {
    display: none !important;
}

.admin-users-has-filter .admin-users-search-panel {
    border-color: rgba(34, 211, 238, 0.22) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.10), transparent 58%),
        rgba(2, 6, 23, 0.34) !important;
}

@media (max-width: 760px) {
    .admin-users-search-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .admin-users-search-controls {
        justify-content: flex-start !important;
    }

    #adminUsersSearchInput {
        width: 100% !important;
    }
}

/* ADMIN USERS SEARCH POLISH END */

/* ADMIN USERS LAYOUT REPAIR START */

/*
   Repair Users section search layout.
   Fixes squeezed search panel, misplaced Hide Users button, incorrect count,
   and excessive horizontal scrolling.
*/

.admin-users-layout-repaired {
    max-width: 100% !important;
    overflow: hidden !important;
}

.admin-users-layout-repaired h1,
.admin-users-layout-repaired h2,
.admin-users-layout-repaired h3 {
    margin-bottom: 14px !important;
}

.admin-users-search-layout-repaired {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, auto) !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 14px 0 18px !important;
    padding: 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.36) !important;
    box-sizing: border-box !important;
}

.admin-users-search-layout-repaired .admin-users-search-text {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

.admin-users-search-layout-repaired .admin-users-search-text strong {
    color: #f8fafc !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    font-weight: 1000 !important;
    letter-spacing: -0.035em !important;
}

.admin-users-search-layout-repaired .admin-users-search-text small {
    max-width: 520px !important;
    color: #9fb4d1 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.45 !important;
}

.admin-users-search-layout-repaired .admin-users-search-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.admin-users-search-layout-repaired #adminUsersSearchInput {
    width: 260px !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(147, 197, 253, 0.24) !important;
    background: rgba(15, 23, 42, 0.88) !important;
    color: #f8fafc !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    outline: none !important;
}

.admin-users-search-layout-repaired #adminUsersSearchCount {
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.13) !important;
    border: 1px solid rgba(147, 197, 253, 0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-users-hide-button-polished {
    min-height: 38px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(168, 85, 247, 0.36) !important;
    color: #ddd6fe !important;
    background:
        radial-gradient(circle at top left, rgba(168, 85, 247, 0.16), transparent 58%),
        rgba(30, 27, 75, 0.68) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.admin-users-layout-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 420px !important;
    overflow: auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.13) !important;
    background: rgba(2, 6, 23, 0.24) !important;
    box-sizing: border-box !important;
}

.admin-users-layout-table {
    width: 100% !important;
    min-width: 760px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.admin-users-layout-table th,
.admin-users-layout-table td {
    padding: 12px 12px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    vertical-align: middle !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.admin-users-layout-table th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, 0.58) !important;
}

.admin-users-layout-table td {
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

/*
   Column width hints.
*/
.admin-users-layout-table th:nth-child(1),
.admin-users-layout-table td:nth-child(1) {
    width: 19% !important;
}

.admin-users-layout-table th:nth-child(2),
.admin-users-layout-table td:nth-child(2) {
    width: 30% !important;
}

.admin-users-layout-table th:nth-child(3),
.admin-users-layout-table td:nth-child(3) {
    width: 15% !important;
}

.admin-users-layout-table th:nth-child(4),
.admin-users-layout-table td:nth-child(4) {
    width: 15% !important;
}

.admin-users-layout-table th:nth-child(5),
.admin-users-layout-table td:nth-child(5) {
    width: 21% !important;
}

.admin-user-row-hidden {
    display: none !important;
}

.admin-users-has-filter .admin-users-search-layout-repaired {
    border-color: rgba(34, 211, 238, 0.24) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 58%),
        rgba(2, 6, 23, 0.36) !important;
}

@media (max-width: 900px) {
    .admin-users-search-layout-repaired {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .admin-users-search-layout-repaired .admin-users-search-controls {
        justify-content: flex-start !important;
    }

    .admin-users-search-layout-repaired #adminUsersSearchInput {
        width: 100% !important;
    }
}

/* ADMIN USERS LAYOUT REPAIR END */

/* ADMIN USERS TABLE HARD FIX START */

/*
   Hard repair for Admin Users table overflow.
   Keeps the Users table contained inside the card and prevents horizontal spill.
*/

#admin-users,
.admin-users-polished-card,
.admin-users-layout-repaired {
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 56%),
        rgba(15, 23, 42, 0.84) !important;
    box-sizing: border-box !important;
}

/*
   Search row should stay inside the card.
*/
#admin-users .admin-users-search-panel,
#admin-users .admin-users-search-layout-repaired {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/*
   The table wrapper contains the entire table.
   Vertical scrolling is allowed.
   Horizontal page spill is not allowed.
*/
#admin-users .admin-users-polished-table-wrap,
#admin-users .admin-users-layout-table-wrap,
#admin-users table.parent,
#admin-users table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#admin-users .admin-users-polished-table-wrap,
#admin-users .admin-users-layout-table-wrap {
    width: 100% !important;
    max-height: 430px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.13) !important;
    background: rgba(2, 6, 23, 0.56) !important;
}

/*
   Force table to fit the card width.
   Fixed table layout prevents long emails/dates from expanding the card.
*/
#admin-users table,
#admin-users .admin-users-polished-table,
#admin-users .admin-users-layout-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    background: rgba(2, 6, 23, 0.44) !important;
}

/*
   Cell containment.
*/
#admin-users th,
#admin-users td {
    max-width: 1px !important;
    padding: 12px 11px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

#admin-users th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: rgba(15, 23, 42, 0.78) !important;
}

#admin-users td {
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

/*
   Better column widths for common Users table:
   name, email, role, status, created/date/actions.
*/
#admin-users th:nth-child(1),
#admin-users td:nth-child(1) {
    width: 21% !important;
}

#admin-users th:nth-child(2),
#admin-users td:nth-child(2) {
    width: 31% !important;
}

#admin-users th:nth-child(3),
#admin-users td:nth-child(3) {
    width: 14% !important;
}

#admin-users th:nth-child(4),
#admin-users td:nth-child(4) {
    width: 14% !important;
}

#admin-users th:nth-child(5),
#admin-users td:nth-child(5) {
    width: 20% !important;
}

/*
   Pills inside user rows should not force table expansion.
*/
#admin-users .badge,
#admin-users .role,
#admin-users .status,
#admin-users span,
#admin-users strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/*
   Keep admin/active badges readable.
*/
#admin-users td span,
#admin-users td strong {
    vertical-align: middle !important;
}

/*
   Hidden rows for search.
*/
#admin-users .admin-user-row-hidden {
    display: none !important;
}

/*
   On smaller widths, allow horizontal scroll inside the card only.
*/
@media (max-width: 900px) {
    #admin-users .admin-users-polished-table-wrap,
    #admin-users .admin-users-layout-table-wrap {
        overflow-x: auto !important;
    }

    #admin-users table,
    #admin-users .admin-users-polished-table,
    #admin-users .admin-users-layout-table {
        min-width: 720px !important;
    }

    #admin-users th,
    #admin-users td {
        max-width: none !important;
    }
}

/* ADMIN USERS TABLE HARD FIX END */

/* ADMIN BALANCED PAGE SPACING START */

/*
   Balance Admin page left/right spacing.
   Moves sidebar and main content right together so the page has more even space
   on both sides, while keeping the Dashboard-style sidebar/content relationship.
*/

@media (min-width: 1320px) {
    /*
       Add a small left margin before the sidebar.
    */
    body.admin-sidebar-layout-active {
        padding-left: 292px !important;
        overflow-x: hidden !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 36px !important;
        width: 218px !important;
        top: 112px !important;
        bottom: 30px !important;
    }

    /*
       Main content follows the sidebar rightward.
       This reduces the large blank space on the right by balancing the full layout.
    */
    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1180px, calc(100vw - 340px)) !important;
        max-width: 1180px !important;
        margin-left: 26px !important;
        margin-right: auto !important;
        padding-top: 40px !important;
        box-sizing: border-box !important;
    }

    /*
       Lower admin panels remain aligned with the same rail.
    */
    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}

/*
   Wider screens: keep the full layout balanced rather than pushed too far left.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active {
        padding-left: 332px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 48px !important;
        width: 250px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1280px, calc(100vw - 390px)) !important;
        max-width: 1280px !important;
        margin-left: 28px !important;
        margin-right: auto !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1280px !important;
    }
}

/*
   Very wide screens: cap the layout so it does not sit too far left.
*/
@media (min-width: 1900px) {
    body.admin-sidebar-layout-active {
        padding-left: 380px !important;
    }

    body.admin-sidebar-layout-active .admin-section-sidebar-site-style {
        left: 72px !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: min(1320px, calc(100vw - 470px)) !important;
        max-width: 1320px !important;
        margin-left: 30px !important;
    }

    body.admin-sidebar-layout-active .admin-performance-summary-panel,
    body.admin-sidebar-layout-active .admin-real-audit-final-card,
    body.admin-sidebar-layout-active .admin-real-audit-card,
    body.admin-sidebar-layout-active .admin-change-history-panel {
        max-width: 1320px !important;
    }
}

/*
   Keep mobile/tablet behaviour unchanged.
*/
@media (max-width: 1319px) {
    body.admin-sidebar-layout-active {
        padding-left: 0 !important;
    }

    body.admin-sidebar-layout-active .pro-main,
    body.admin-sidebar-layout-active main,
    body.admin-sidebar-layout-active .admin-main,
    body.admin-sidebar-layout-active .dashboard-main,
    body.admin-sidebar-layout-active .page-main,
    body.admin-sidebar-layout-active .content,
    body.admin-sidebar-layout-active .page-content {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 24px !important;
    }
}

/* ADMIN BALANCED PAGE SPACING END */

/* ADMIN REPORTING RECORDS START */

/*
   Admin Reporting Records panel v1.4.0.
   Database shell only. No live trading or exchange fetching.
*/

.admin-reporting-records-panel {
    width: 100% !important;
    margin: 22px 0 !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(34, 197, 94, 0.18) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.09), transparent 54%),
        rgba(15, 23, 42, 0.82) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
}

.admin-reporting-records-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
}

.admin-reporting-records-eyebrow {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-reporting-records-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.6vw, 34px) !important;
    letter-spacing: -0.045em !important;
}

.admin-reporting-records-head p {
    margin: 0 !important;
    max-width: 790px !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

.admin-reporting-records-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.13) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-reporting-records-empty {
    padding: 16px !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    background: rgba(2, 6, 23, 0.36) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

.admin-reporting-records-empty code {
    color: #bfdbfe !important;
    font-weight: 1000 !important;
}

.admin-reporting-records-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: rgba(2, 6, 23, 0.30) !important;
}

.admin-reporting-records-table {
    width: 100% !important;
    min-width: 920px !important;
    border-collapse: collapse !important;
}

.admin-reporting-records-table th,
.admin-reporting-records-table td {
    padding: 13px 14px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.admin-reporting-records-table th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: rgba(15, 23, 42, 0.56) !important;
}

.admin-reporting-result-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
}

@media (max-width: 760px) {
    .admin-reporting-records-head {
        flex-direction: column !important;
    }
}

/* ADMIN REPORTING RECORDS END */

/* ADMIN REPORTING RECORDS REPAIR START */

/*
   Reporting Records repair.
   Ensures Reporting Records displays as a proper admin card and sits above Change History.
*/

body.admin-sidebar-layout-active .admin-reporting-records-panel,
.admin-reporting-records-panel.admin-reporting-records-panel-repaired {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px 0 !important;
    padding: 22px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(34, 197, 94, 0.20) !important;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.10), transparent 54%),
        rgba(15, 23, 42, 0.84) !important;
    color: #e5eefc !important;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.admin-reporting-records-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin: 0 0 16px !important;
}

.admin-reporting-records-eyebrow {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 0 0 8px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border: 1px solid rgba(34, 197, 94, 0.24) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-reporting-records-head h2 {
    margin: 0 0 7px !important;
    color: #f8fafc !important;
    font-size: clamp(25px, 2.6vw, 34px) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.05 !important;
}

.admin-reporting-records-head p {
    margin: 0 !important;
    max-width: 790px !important;
    color: #9fb4d1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

.admin-reporting-records-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border: 1px solid rgba(34, 197, 94, 0.24) !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    white-space: nowrap !important;
}

.admin-reporting-records-empty {
    display: block !important;
    padding: 16px !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    background: rgba(2, 6, 23, 0.38) !important;
    border: 1px solid rgba(148, 163, 184, 0.13) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 850 !important;
}

.admin-reporting-records-empty code {
    color: #bfdbfe !important;
    font-weight: 1000 !important;
}

.admin-reporting-records-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    background: rgba(2, 6, 23, 0.30) !important;
}

.admin-reporting-records-table {
    width: 100% !important;
    min-width: 920px !important;
    border-collapse: collapse !important;
}

.admin-reporting-records-table th,
.admin-reporting-records-table td {
    padding: 13px 14px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    text-align: left !important;
    vertical-align: middle !important;
}

.admin-reporting-records-table th {
    color: #9fb4d1 !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background: rgba(15, 23, 42, 0.56) !important;
}

.admin-reporting-result-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    color: #fde68a !important;
    background: rgba(113, 63, 18, 0.15) !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    font-size: 11px !important;
    font-weight: 1000 !important;
}

@media (max-width: 760px) {
    .admin-reporting-records-head {
        flex-direction: column !important;
    }
}

/* ADMIN REPORTING RECORDS REPAIR END */

/* ADMIN REPORTING RECORDS ORDER START */

/*
   Reporting Records order repair.
   Reporting Records should sit below Recent Audit Logs and above Change History.
*/

.admin-reporting-records-panel {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
}

/* ADMIN REPORTING RECORDS ORDER END */

/* ADMIN REPORTING WIDTH ALIGN START */

/*
   Align Reporting Records width with the other lower admin cards.
*/

body.admin-sidebar-layout-active .admin-reporting-records-panel,
.admin-reporting-records-panel.admin-reporting-records-panel-repaired,
.admin-reporting-records-panel {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/*
   Very wide screens follow the wider admin content rail.
*/
@media (min-width: 1650px) {
    body.admin-sidebar-layout-active .admin-reporting-records-panel,
    .admin-reporting-records-panel.admin-reporting-records-panel-repaired,
    .admin-reporting-records-panel {
        width: min(100%, 1280px) !important;
        max-width: 1280px !important;
    }
}

/*
   Prevent inner empty/table areas from forcing the card wider.
*/
.admin-reporting-records-panel .admin-reporting-records-empty,
.admin-reporting-records-panel .admin-reporting-records-table-wrap {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ADMIN REPORTING WIDTH ALIGN END */

.brand-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    background:linear-gradient(135deg,#3B82F6,#8B5CF6);
    color:#FFFFFF;
    font-size:18px;
    font-weight:700;
    box-shadow:0 0 14px rgba(59,130,246,.25);
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.brand-copy strong{
    color:#FFFFFF !important;
    font-size:20px;
    text-shadow:none !important;
}

.brand-subtitle{
    color:#94A3B8;
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-top:3px;
}

.yellow-glow-brand{
    box-shadow:0 0 18px rgba(59,130,246,.18) !important;
}

.brand-mark{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:12px;
background:linear-gradient(135deg,#2563EB 0%,#4F46E5 50%,#7C3AED 100%);
color:#FFFFFF;
font-size:18px;
font-weight:700;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 20px rgba(79,70,229,.25);
}

.brand-copy{
display:flex;
flex-direction:column;
line-height:1.05;
}

.brand-copy strong{
color:#FFFFFF!important;
font-size:20px;
font-weight:700;
letter-spacing:-0.02em;
text-shadow:none!important;
}

.brand-subtitle{
margin-top:3px;
font-size:10px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:#94A3B8;
}

.yellow-glow-brand{
box-shadow:0 0 25px rgba(79,70,229,.15)!important;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1;
}

.brand-copy strong{
    color:#FFFFFF !important;
    font-size:24px !important;
    font-weight:800 !important;
    letter-spacing:-0.03em;
    text-shadow:none !important;
}

.brand-subtitle{
    margin-top:4px;
    color:#94A3B8;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.25em;
    text-transform:uppercase;
    line-height:1;
}

.brand-mark{
    display:none !important;
}

.yellow-glow-brand{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

.tvx-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    color:#3B82F6;
    font-size:20px;
    font-weight:800;
    line-height:1;
    text-shadow:0 0 12px rgba(59,130,246,.25);
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-copy strong{
    color:#F8FAFC !important;
    font-size:26px;
    font-weight:800;
    letter-spacing:-0.03em;
    text-shadow:none !important;
}

.brand-subtitle{
    margin-top:4px;
    color:#94A3B8;
    font-size:9px;
    font-weight:700;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.yellow-brand-mark{
    background:none !important;
    box-shadow:none !important;
}

.yellow-glow-brand{
    background:none !important;
    box-shadow:none !important;
    border:none !important;
}

.brand-copy{
display:flex;
flex-direction:column;
align-items:center;
line-height:1;
}

.brand-copy strong{
font-size:20px;
font-weight:800;
letter-spacing:-0.03em;
color:#F8FAFC;
}

.brand-tagline{
margin-top:3px;
font-size:9px;
letter-spacing:.18em;
text-transform:uppercase;
color:#64748B;
font-weight:700;
}

/* ==========================================================
   ADMIN SUMMARY BADGE POLISH V1.5.2
   Polishes the Admin Summary text badges after replacing
   emoji icons with safe letter badges.
========================================================== */

.admin-summary-cards-panel.admin-summary-cards-repaired {
    position: relative;
    overflow: hidden;
}

.admin-summary-cards-panel .admin-summary-cards-grid {
    align-items: stretch;
}

.admin-summary-cards-panel .admin-summary-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 118px;
    padding: 24px 22px !important;
    border-radius: 24px !important;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.admin-summary-cards-panel .admin-summary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), transparent 32%, transparent 100%);
}

.admin-summary-cards-panel .admin-summary-card:hover {
    transform: translateY(-2px);
    border-color: rgba(147, 197, 253, 0.30) !important;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.30),
        0 0 28px rgba(59, 130, 246, 0.08),
        inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}

.admin-summary-cards-panel .admin-summary-card-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    border-radius: 18px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow:
        0 0 18px rgba(59, 130, 246, 0.28),
        0 12px 26px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

.admin-summary-cards-panel .admin-summary-card-body {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.admin-summary-cards-panel .admin-summary-card-body span {
    display: block;
    margin-bottom: 8px;
    color: #9fc5ff;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-summary-cards-panel .admin-summary-card-body strong {
    display: block;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 42px);
    font-weight: 1000;
    line-height: 0.95;
    letter-spacing: -0.055em;
    text-shadow:
        0 0 12px rgba(255,255,255,0.14),
        0 0 24px rgba(59,130,246,0.12);
}

.admin-summary-cards-panel .admin-summary-card-body small {
    display: block;
    margin-top: 9px;
    color: #9fbfff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

/* Tone-specific badge colours */
.admin-summary-cards-panel .admin-summary-card.is-blue .admin-summary-card-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow:
        0 0 18px rgba(59,130,246,0.32),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

.admin-summary-cards-panel .admin-summary-card.is-cyan .admin-summary-card-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(135deg, #0891b2, #22d3ee);
    box-shadow:
        0 0 18px rgba(34,211,238,0.32),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

.admin-summary-cards-panel .admin-summary-card.is-green .admin-summary-card-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow:
        0 0 18px rgba(34,197,94,0.30),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

.admin-summary-cards-panel .admin-summary-card.is-amber .admin-summary-card-icon {
    color: #111827;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.38), transparent 34%),
        linear-gradient(135deg, #facc15, #f97316);
    box-shadow:
        0 0 18px rgba(250,204,21,0.30),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.12);
}

.admin-summary-cards-panel .admin-summary-card.is-purple .admin-summary-card-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.34), transparent 34%),
        linear-gradient(135deg, #7c3aed, #a855f7);
    box-shadow:
        0 0 18px rgba(168,85,247,0.30),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

.admin-summary-cards-panel .admin-summary-card.is-slate .admin-summary-card-icon {
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,0.28), transparent 34%),
        linear-gradient(135deg, #334155, #64748b);
    box-shadow:
        0 0 18px rgba(148,163,184,0.22),
        0 12px 26px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Slightly wider badge for E2E */
.admin-summary-cards-panel .admin-summary-card-icon {
    white-space: nowrap;
}

.admin-summary-cards-panel .admin-summary-card-icon:has(+ .admin-summary-card-body span) {
    text-align: center;
}

@media (max-width: 980px) {
    .admin-summary-cards-panel .admin-summary-card {
        grid-template-columns: 52px minmax(0, 1fr);
        min-height: 108px;
    }

    .admin-summary-cards-panel .admin-summary-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 14px;
    }
}

/* ==========================================================
   ADMIN SUMMARY BADGE POLISH V1.5.2 END
========================================================== */

/* ==========================================================
   ADMIN SUMMARY SVG ICONS V1.5.3
   Replaces temporary text badges with proper inline SVG icons.
========================================================== */

.admin-summary-cards-panel .admin-summary-card-icon {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 0 !important;
}

.admin-summary-cards-panel .admin-summary-svg-icon {
    width: 27px;
    height: 27px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-summary-cards-panel .admin-summary-card.is-amber .admin-summary-svg-icon {
    stroke: #111827;
}

.admin-summary-cards-panel .admin-summary-card-icon svg path,
.admin-summary-cards-panel .admin-summary-card-icon svg circle {
    vector-effect: non-scaling-stroke;
}

.admin-summary-cards-panel .admin-summary-card:hover .admin-summary-svg-icon {
    transform: scale(1.04);
    transition: transform 0.18s ease;
}

@media (max-width: 980px) {
    .admin-summary-cards-panel .admin-summary-svg-icon {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================
   ADMIN SUMMARY SVG ICONS V1.5.3 END
========================================================== */

/* ==========================================================
   GLOBAL TRADEVAULTX LOGO V1.5.4
   Uses the approved TradeVaultX logo across shared brand areas.
========================================================== */

.site-logo-link,
.brand.site-logo-link,
.topbar .brand.site-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 58px !important;
    padding: 6px 0 !important;
    text-decoration: none !important;
}

.site-logo-img {
    display: block !important;
    width: auto !important;
    height: 54px !important;
    max-width: min(320px, 42vw) !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 0 10px rgba(34, 211, 238, 0.24))
        drop-shadow(0 0 18px rgba(59, 130, 246, 0.18));
}

.topbar .brand:not(.site-logo-link) {
    position: relative;
}

.topbar .brand:not(.site-logo-link)::before {
    content: "";
    display: inline-block;
    width: min(320px, 42vw);
    height: 54px;
    background: url("../img/tradevaultx-logo-mark.png") left center / contain no-repeat;
    filter:
        drop-shadow(0 0 10px rgba(34, 211, 238, 0.24))
        drop-shadow(0 0 18px rgba(59, 130, 246, 0.18));
}

.topbar .brand:not(.site-logo-link) .brand-mark,
.topbar .brand:not(.site-logo-link) strong {
    display: none !important;
}

.footer strong,
.admin-site-footer-bottom {
    color: #ffffff !important;
    letter-spacing: 0.04em !important;
    text-transform: lowercase !important;
    text-shadow:
        0 0 8px rgba(34, 211, 238, 0.45),
        0 0 18px rgba(59, 130, 246, 0.28) !important;
}

@media (max-width: 720px) {
    .site-logo-img,
    .topbar .brand:not(.site-logo-link)::before {
        height: 44px !important;
        max-width: min(260px, 70vw) !important;
    }
}

/* ==========================================================
   GLOBAL TRADEVAULTX LOGO V1.5.4 END
========================================================== */

/* TRADEVAULTX_GLOBAL_LOGO_FIX_START */
.site-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 1 !important;
    min-width: 0 !important;
}
.site-logo {
    display: block !important;
    width: auto !important;
    height: 136px !important;
    max-height: 148px !important;
    max-width: 680px !important;
    object-fit: contain !important;
}
.site-header,
.app-header,
header {
    min-height: 164px;
}
.site-header .site-logo,
.app-header .site-logo,
header .site-logo {
    height: 136px !important;
    max-height: 148px !important;
}
@media (max-width: 720px) {
    .site-logo {
        height: 96px !important;
        max-width: 460px !important;
    }
    .site-header,
    .app-header,
    header {
        min-height: 116px;
    }
}
/* TRADEVAULTX_GLOBAL_LOGO_FIX_END */
/* TRADEVAULTX_FOOTER_BRAND_POLISH_START */
.tvx-footer-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 28px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid rgba(39, 228, 255, 0.26);
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.16), transparent 34%),
        radial-gradient(circle at 80% 100%, rgba(139, 92, 246, 0.15), transparent 36%),
        rgba(3, 8, 24, 0.56);
    box-shadow:
        0 0 28px rgba(34, 211, 238, 0.12),
        inset 0 0 18px rgba(255, 255, 255, 0.035);
}
.tvx-footer-brand-main {
    color: #ffffff;
    font-weight: 900;
    font-size: clamp(1rem, 1.15vw, 1.22rem);
    letter-spacing: 0.045em;
    text-shadow:
        0 0 10px rgba(34, 211, 238, 0.75),
        0 0 22px rgba(139, 92, 246, 0.34);
}
.tvx-footer-brand-sub {
    color: rgba(202, 213, 235, 0.82);
    font-size: clamp(0.72rem, 0.78vw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
@media (max-width: 720px) {
    .tvx-footer-brand {
        width: calc(100% - 32px);
        padding: 16px 18px;
        border-radius: 24px;
    }
    .tvx-footer-brand-sub {
        letter-spacing: 0.08em;
    }
}
/* TRADEVAULTX_FOOTER_BRAND_POLISH_END */
/* TRADEVAULTX_BITRUE_EXCHANGE_START */
.tvx-bitrue-exchange-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 9px 16px;
    margin-top: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 204, 51, 0.78);
    background:
        radial-gradient(circle at 14% 50%, rgba(255, 204, 51, 0.32), transparent 32%),
        linear-gradient(90deg, rgba(255, 204, 51, 0.18), rgba(240, 75, 85, 0.08) 54%, rgba(255, 204, 51, 0.03));
    box-shadow:
        0 0 22px rgba(255, 204, 51, 0.14),
        inset 0 0 16px rgba(255, 255, 255, 0.045);
}
.tvx-bitrue-exchange-pill img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 8px rgba(255, 204, 51, 0.42));
}
.tvx-bitrue-exchange-pill span {
    margin-left: auto;
    color: #ffcc33;
    font-weight: 900;
    letter-spacing: 0.035em;
    text-transform: none;
    text-shadow: 0 0 10px rgba(255, 204, 51, 0.22);
}
@media (max-width: 720px) {
    .tvx-bitrue-exchange-pill {
        min-height: 42px;
        padding: 8px 14px;
    }
}
/* TRADEVAULTX_BITRUE_EXCHANGE_END */
/* TRADEVAULTX_SUPPORTED_EXCHANGES_REBUILD_START */
.tvx-supported-exchanges-card-fixed .tvx-native-exchange-hidden {
    display: none !important;
}
.tvx-supported-exchange-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}
.tvx-exchange-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1;
    box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.045);
}
.tvx-exchange-pill img,
.tvx-exchange-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    object-fit: contain;
}
.tvx-exchange-pill span:last-child {
    margin-left: auto;
}
.tvx-exchange-binance,
.tvx-exchange-bitrue,
.tvx-exchange-bybit {
    border: 1px solid rgba(255, 204, 51, 0.78);
    background:
        radial-gradient(circle at 14% 50%, rgba(255, 204, 51, 0.28), transparent 32%),
        linear-gradient(90deg, rgba(255, 204, 51, 0.16), rgba(255, 204, 51, 0.035));
    color: #ffcc33;
}
.tvx-exchange-bitrue {
    background:
        radial-gradient(circle at 14% 50%, rgba(255, 204, 51, 0.34), transparent 32%),
        linear-gradient(90deg, rgba(255, 204, 51, 0.18), rgba(240, 75, 85, 0.10));
}
.tvx-exchange-bybit {
    color: #ffffff;
    background:
        radial-gradient(circle at 14% 50%, rgba(255, 204, 51, 0.10), transparent 32%),
        rgba(5, 7, 18, 0.58);
}
.tvx-exchange-oanda {
    border: 1px solid rgba(0, 198, 130, 0.76);
    background:
        radial-gradient(circle at 14% 50%, rgba(0, 220, 170, 0.30), transparent 32%),
        linear-gradient(90deg, rgba(0, 130, 95, 0.30), rgba(0, 120, 78, 0.12));
    color: #b9f8d2;
}
.tvx-bybit-wordmark {
    color: #ffffff;
    font-weight: 950;
    letter-spacing: 0.10em;
}
.tvx-binance-icon {
    position: relative;
    border-radius: 10px;
    background: #ffcc33;
    transform: rotate(45deg) scale(.82);
    box-shadow: 0 0 13px rgba(255, 204, 51, .42);
}
.tvx-binance-icon::before,
.tvx-binance-icon::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 3px;
    background: #10131d;
}
.tvx-binance-icon::after {
    inset: auto;
    width: 7px;
    height: 7px;
    left: 5px;
    top: 5px;
    box-shadow: 13px 0 0 #10131d, 0 13px 0 #10131d, 13px 13px 0 #10131d;
}
.tvx-oanda-icon {
    border-radius: 999px;
    background:
        radial-gradient(circle at 55% 50%, #e7fff9 0 20%, transparent 21%),
        conic-gradient(from 0deg, #00c8b8, #008e78, #00dfbd, #00c8b8);
    box-shadow: 0 0 14px rgba(0, 220, 190, .38);
}
@media (max-width: 720px) {
    .tvx-supported-exchange-list { gap: 10px; }
    .tvx-exchange-pill { min-height: 44px; padding: 8px 14px; }
}
/* TRADEVAULTX_SUPPORTED_EXCHANGES_REBUILD_END */
/* TRADEVAULTX_GLOBAL_HEADER_NAV_BUTTON_SIZE_START */
:root {
    --tvx-header-action-min-height: 48px;
    --tvx-header-action-pad-y: 13px;
    --tvx-header-action-pad-x: 22px;
    --tvx-header-action-font-size: 1rem;
    --tvx-header-action-radius: 999px;
}

/* Shared header navigation/action sizing - applies across every page using app.css */
header nav a,
header .nav a,
header .navbar a,
header .nav-links a,
header .nav-actions a,
header .header-nav a,
.site-header nav a,
.site-header .nav a,
.site-header .navbar a,
.site-header .nav-links a,
.site-header .nav-actions a,
.site-header .header-nav a,
.tVX-header nav a,
.tvx-header nav a,
.top-nav a,
.main-nav a,
.nav-actions a,
.nav-links a,
a.nav-link,
a.header-link,
a.btn,
button.btn,
.btn,
.login-btn,
.btn-login {
    min-height: var(--tvx-header-action-min-height);
    padding: var(--tvx-header-action-pad-y) var(--tvx-header-action-pad-x);
    font-size: var(--tvx-header-action-font-size);
    line-height: 1;
    border-radius: var(--tvx-header-action-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* Make primary/header login-style actions feel substantial rather than tiny. */
header a[href*="login"],
.site-header a[href*="login"],
.nav-actions a[href*="login"],
.nav-links a[href*="login"],
.login-btn,
.btn-login,
a.btn-primary,
button.btn-primary,
.btn-primary {
    min-width: 92px;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 800;
}

/* Keep secondary nav items balanced beside the larger action button. */
header a[href*="index"],
header a[href="/"],
header a[href="./"],
.site-header a[href*="index"],
.site-header a[href="/"],
.site-header a[href="./"] {
    min-width: 76px;
    font-weight: 750;
}

@media (max-width: 720px) {
    :root {
        --tvx-header-action-min-height: 44px;
        --tvx-header-action-pad-y: 11px;
        --tvx-header-action-pad-x: 18px;
        --tvx-header-action-font-size: 0.94rem;
    }

    header nav a,
    header .nav a,
    header .navbar a,
    header .nav-links a,
    header .nav-actions a,
    .site-header nav a,
    .site-header .nav a,
    .site-header .navbar a,
    .site-header .nav-links a,
    .site-header .nav-actions a,
    .top-nav a,
    .main-nav a,
    .nav-actions a,
    .nav-links a,
    a.nav-link,
    a.header-link,
    a.btn,
    button.btn,
    .btn,
    .login-btn,
    .btn-login {
        min-height: var(--tvx-header-action-min-height);
        padding: var(--tvx-header-action-pad-y) var(--tvx-header-action-pad-x);
        font-size: var(--tvx-header-action-font-size);
    }
}
/* TRADEVAULTX_GLOBAL_HEADER_NAV_BUTTON_SIZE_END */




/* TRADEVAULTX_LOGIN_TIGHT_WHITESPACE_START */
/* Login page only: tight, polished layout with minimal blank space. */
@supports selector(body:has(input[name="password"])) {
    body:has(input[name="email"]):has(input[name="password"]) {
        min-height: 100vh;
        overflow-y: auto;
    }

    body:has(input[name="email"]):has(input[name="password"]) main,
    body:has(input[name="email"]):has(input[name="password"]) .main,
    body:has(input[name="email"]):has(input[name="password"]) .page,
    body:has(input[name="email"]):has(input[name="password"]) .page-shell,
    body:has(input[name="email"]):has(input[name="password"]) .auth-page,
    body:has(input[name="email"]):has(input[name="password"]) .login-page {
        min-height: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 28px 24px 30px;
    }

    body:has(input[name="email"]):has(input[name="password"]) footer,
    body:has(input[name="email"]):has(input[name="password"]) .site-footer {
        display: flex !important;
        position: static !important;
        min-height: 64px;
        align-items: center;
        justify-content: center;
        padding: 12px 24px 16px;
        border-top: 1px solid rgba(255,255,255,0.08);
        background: rgba(5, 8, 20, 0.92);
    }

    body:has(input[name="email"]):has(input[name="password"]) .card:has(input[name="email"]):has(input[name="password"]),
    body:has(input[name="email"]):has(input[name="password"]) .glass-card:has(input[name="email"]):has(input[name="password"]),
    body:has(input[name="email"]):has(input[name="password"]) .auth-card,
    body:has(input[name="email"]):has(input[name="password"]) .login-card,
    body:has(input[name="email"]):has(input[name="password"]) form:has(input[name="email"]):has(input[name="password"]) {
        width: min(640px, calc(100vw - 72px));
        max-width: 640px;
        padding: clamp(32px, 3.1vw, 44px);
        border-radius: 30px;
    }

    body:has(input[name="email"]):has(input[name="password"]) form:has(input[name="email"]):has(input[name="password"]) {
        width: 100%;
    }

    body:has(input[name="email"]):has(input[name="password"]) h1 {
        font-size: clamp(2.35rem, 2.8vw, 3.15rem);
        line-height: 1.04;
        margin-bottom: 20px;
    }

    body:has(input[name="email"]):has(input[name="password"]) p {
        display: none;
    }

    body:has(input[name="email"]):has(input[name="password"]) label {
        display: block;
        font-size: clamp(0.98rem, 1vw, 1.06rem);
        line-height: 1.25;
        margin: 0 0 8px;
        font-weight: 850;
    }

    body:has(input[name="email"]):has(input[name="password"]) input[type="text"],
    body:has(input[name="email"]):has(input[name="password"]) input[type="email"],
    body:has(input[name="email"]):has(input[name="password"]) input[type="password"] {
        width: 100%;
        min-height: 56px;
        padding: 0 20px;
        border-radius: 18px;
        font-size: 1rem;
        margin-bottom: 20px;
    }

    body:has(input[name="email"]):has(input[name="password"]) button,
    body:has(input[name="email"]):has(input[name="password"]) .btn,
    body:has(input[name="email"]):has(input[name="password"]) input[type="submit"] {
        width: 100%;
        min-height: 60px;
        border-radius: 22px;
        font-size: 1.06rem;
        font-weight: 900;
        margin-top: 2px;
    }
}

@media (max-width: 820px) {
    @supports selector(body:has(input[name="password"])) {
        body:has(input[name="email"]):has(input[name="password"]) main,
        body:has(input[name="email"]):has(input[name="password"]) .main,
        body:has(input[name="email"]):has(input[name="password"]) .page,
        body:has(input[name="email"]):has(input[name="password"]) .page-shell,
        body:has(input[name="email"]):has(input[name="password"]) .auth-page,
        body:has(input[name="email"]):has(input[name="password"]) .login-page {
            padding: 20px 14px 24px;
        }

        body:has(input[name="email"]):has(input[name="password"]) .card:has(input[name="email"]):has(input[name="password"]),
        body:has(input[name="email"]):has(input[name="password"]) .glass-card:has(input[name="email"]):has(input[name="password"]),
        body:has(input[name="email"]):has(input[name="password"]) .auth-card,
        body:has(input[name="email"]):has(input[name="password"]) .login-card,
        body:has(input[name="email"]):has(input[name="password"]) form:has(input[name="email"]):has(input[name="password"]) {
            width: min(100%, calc(100vw - 28px));
            padding: 26px;
            border-radius: 26px;
        }
    }
}
/* TRADEVAULTX_LOGIN_TIGHT_WHITESPACE_END */




/* TRADEVAULTX_FINAL_PREMIUM_SIDEBAR_POLISH_START */
/* Final sidebar polish: all nav pills use the compact New Messages visual language. */
:root {
    --tvx-side-pill-height: 54px;
    --tvx-side-pill-radius: 15px;
    --tvx-side-pill-gap: 12px;
    --tvx-side-pill-pad-x: 16px;
    --tvx-side-pill-margin: 11px;
    --tvx-side-pill-bg: linear-gradient(135deg, rgba(12, 88, 133, 0.98), rgba(7, 45, 91, 0.99));
    --tvx-side-pill-bg-hover: linear-gradient(135deg, rgba(16, 111, 160, 1), rgba(10, 58, 112, 1));
    --tvx-side-pill-border: rgba(71, 206, 255, 0.76);
    --tvx-side-pill-border-hover: rgba(121, 230, 255, 0.96);
    --tvx-side-pill-text: #f6fcff;
    --tvx-side-pill-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 10px 21px rgba(0, 157, 221, 0.23), 0 0 18px rgba(0, 180, 255, 0.13);
    --tvx-side-pill-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.18), 0 13px 26px rgba(0, 157, 221, 0.30), 0 0 24px rgba(0, 180, 255, 0.19);
    --tvx-side-pill-active-border: rgba(236, 183, 49, 0.92);
}

/* Keep the sidebar column compact and tidy. */
aside nav,
.sidebar nav,
.sidebar-nav,
.side-nav,
.app-sidebar nav,
.admin-sidebar nav,
.dashboard-sidebar nav,
.section-sidebar nav,
.tvx-sidebar nav,
.account-sidebar nav,
.dashboard-menu,
.admin-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Apply the New Messages-style pill format to every sidebar nav item. */
aside a[href],
.sidebar a[href],
.sidebar-nav a[href],
.side-nav a[href],
.app-sidebar a[href],
.admin-sidebar a[href],
.dashboard-sidebar a[href],
.section-sidebar a[href],
.tvx-sidebar a[href],
.account-sidebar a[href],
.dashboard-menu a[href],
.admin-menu a[href],
aside button,
.sidebar button,
.sidebar-nav button,
.side-nav button,
.app-sidebar button,
.admin-sidebar button,
.dashboard-sidebar button,
.section-sidebar button,
.tvx-sidebar button,
.account-sidebar button {
    width: 100% !important;
    min-height: var(--tvx-side-pill-height) !important;
    height: var(--tvx-side-pill-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--tvx-side-pill-gap) !important;
    padding: 0 var(--tvx-side-pill-pad-x) !important;
    margin: 0 0 var(--tvx-side-pill-margin) !important;
    border: 1px solid var(--tvx-side-pill-border) !important;
    border-radius: var(--tvx-side-pill-radius) !important;
    background: var(--tvx-side-pill-bg) !important;
    box-shadow: var(--tvx-side-pill-shadow) !important;
    color: var(--tvx-side-pill-text) !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25) !important;
    transform: none !important;
    overflow: hidden !important;
    isolation: isolate;
    position: relative;
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease !important;
}

/* Subtle internal sheen to make all pills feel premium without changing markup. */
aside a[href]::before,
.sidebar a[href]::before,
.sidebar-nav a[href]::before,
.side-nav a[href]::before,
.app-sidebar a[href]::before,
.admin-sidebar a[href]::before,
.dashboard-sidebar a[href]::before,
.section-sidebar a[href]::before,
.tvx-sidebar a[href]::before,
.account-sidebar a[href]::before,
.dashboard-menu a[href]::before,
.admin-menu a[href]::before,
aside button::before,
.sidebar button::before,
.sidebar-nav button::before,
.side-nav button::before,
.app-sidebar button::before,
.admin-sidebar button::before,
.dashboard-sidebar button::before,
.section-sidebar button::before,
.tvx-sidebar button::before,
.account-sidebar button::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--tvx-side-pill-radius) - 1px);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 42%);
    pointer-events: none;
    z-index: -1;
}

aside a[href]:hover,
.sidebar a[href]:hover,
.sidebar-nav a[href]:hover,
.side-nav a[href]:hover,
.app-sidebar a[href]:hover,
.admin-sidebar a[href]:hover,
.dashboard-sidebar a[href]:hover,
.section-sidebar a[href]:hover,
.tvx-sidebar a[href]:hover,
.account-sidebar a[href]:hover,
aside button:hover,
.sidebar button:hover,
.sidebar-nav button:hover,
.side-nav button:hover,
.app-sidebar button:hover,
.admin-sidebar button:hover,
.dashboard-sidebar button:hover,
.section-sidebar button:hover,
.tvx-sidebar button:hover,
.account-sidebar button:hover {
    background: var(--tvx-side-pill-bg-hover) !important;
    border-color: var(--tvx-side-pill-border-hover) !important;
    box-shadow: var(--tvx-side-pill-shadow-hover) !important;
    transform: translateY(-1px) !important;
}

/* Active/current keeps the same compact shape; only the gold rim identifies selection. */
aside a.active,
aside a.is-active,
aside a.current,
aside a[aria-current="page"],
.sidebar a.active,
.sidebar a.is-active,
.sidebar a.current,
.sidebar a[aria-current="page"],
.sidebar-nav a.active,
.sidebar-nav a.is-active,
.sidebar-nav a.current,
.sidebar-nav a[aria-current="page"],
.side-nav a.active,
.side-nav a.is-active,
.side-nav a.current,
.side-nav a[aria-current="page"],
.app-sidebar a.active,
.app-sidebar a.is-active,
.app-sidebar a.current,
.app-sidebar a[aria-current="page"],
.admin-sidebar a.active,
.admin-sidebar a.is-active,
.admin-sidebar a.current,
.admin-sidebar a[aria-current="page"],
.dashboard-sidebar a.active,
.dashboard-sidebar a.is-active,
.dashboard-sidebar a.current,
.dashboard-sidebar a[aria-current="page"],
.section-sidebar a.active,
.section-sidebar a.is-active,
.section-sidebar a.current,
.section-sidebar a[aria-current="page"],
.tvx-sidebar a.active,
.tvx-sidebar a.is-active,
.tvx-sidebar a.current,
.tvx-sidebar a[aria-current="page"] {
    border-color: var(--tvx-side-pill-active-border) !important;
    background: var(--tvx-side-pill-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 1px rgba(236,183,49,0.16), 0 10px 22px rgba(0, 157, 221, 0.18), 0 0 18px rgba(236,183,49,0.10) !important;
}

/* Keep New Messages icon and any leading icon centered in the compact pill. */
aside a[href*="message"] > :first-child,
aside a[href*="e2ee"] > :first-child,
.sidebar a[href*="message"] > :first-child,
.sidebar a[href*="e2ee"] > :first-child,
.sidebar-nav a[href*="message"] > :first-child,
.sidebar-nav a[href*="e2ee"] > :first-child,
.side-nav a[href*="message"] > :first-child,
.side-nav a[href*="e2ee"] > :first-child,
.app-sidebar a[href*="message"] > :first-child,
.app-sidebar a[href*="e2ee"] > :first-child,
.admin-sidebar a[href*="message"] > :first-child,
.admin-sidebar a[href*="e2ee"] > :first-child,
.dashboard-sidebar a[href*="message"] > :first-child,
.dashboard-sidebar a[href*="e2ee"] > :first-child {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* New Messages badge: right aligned, bright, compact. */
aside a[href*="message"] .badge,
aside a[href*="message"] .count,
aside a[href*="message"] [class*="badge"],
aside a[href*="e2ee"] .badge,
aside a[href*="e2ee"] .count,
aside a[href*="e2ee"] [class*="badge"],
.sidebar a[href*="message"] .badge,
.sidebar a[href*="message"] .count,
.sidebar a[href*="message"] [class*="badge"],
.sidebar a[href*="e2ee"] .badge,
.sidebar a[href*="e2ee"] .count,
.sidebar a[href*="e2ee"] [class*="badge"],
.sidebar-nav a[href*="message"] .badge,
.sidebar-nav a[href*="message"] .count,
.sidebar-nav a[href*="message"] [class*="badge"],
.sidebar-nav a[href*="e2ee"] .badge,
.sidebar-nav a[href*="e2ee"] .count,
.sidebar-nav a[href*="e2ee"] [class*="badge"],
.side-nav a[href*="message"] .badge,
.side-nav a[href*="message"] .count,
.side-nav a[href*="message"] [class*="badge"],
.side-nav a[href*="e2ee"] .badge,
.side-nav a[href*="e2ee"] .count,
.side-nav a[href*="e2ee"] [class*="badge"] {
    margin-left: auto !important;
    min-width: 34px !important;
    height: 30px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #68ddff, #2c89ff) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 18px rgba(33,144,255,0.36) !important;
}

@media (max-width: 820px) {
    aside a[href],
    .sidebar a[href],
    .sidebar-nav a[href],
    .side-nav a[href],
    .app-sidebar a[href],
    .admin-sidebar a[href],
    .dashboard-sidebar a[href],
    .section-sidebar a[href],
    .tvx-sidebar a[href],
    .account-sidebar a[href],
    aside button,
    .sidebar button,
    .sidebar-nav button,
    .side-nav button,
    .app-sidebar button,
    .admin-sidebar button,
    .dashboard-sidebar button,
    .section-sidebar button,
    .tvx-sidebar button,
    .account-sidebar button {
        min-height: 52px !important;
        height: 52px !important;
        padding: 0 14px !important;
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }
}
/* TRADEVAULTX_FINAL_PREMIUM_SIDEBAR_POLISH_END */
/* TRADEVAULTX_REMOVE_SIDEBAR_DEAD_SPACE_START */
/* Tighten the sidebar shell/card so it ends shortly after the final visible nav pill. */
:root {
    --tvx-sidebar-tight-bottom: 14px;
}

/* Make common sidebar wrappers content-height instead of viewport-height. */
aside,
.sidebar,
.app-sidebar,
.admin-sidebar,
.dashboard-sidebar,
.section-sidebar,
.tvx-sidebar,
.account-sidebar,
.side-nav-shell,
.dashboard-side,
.admin-side,
.dashboard-menu,
.admin-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: flex-start !important;
}

/* Sidebar card/panel containers: remove large forced bottom area. */
aside.card,
aside.panel,
aside.glass-card,
.sidebar.card,
.sidebar.panel,
.sidebar.glass-card,
.app-sidebar.card,
.app-sidebar.panel,
.app-sidebar.glass-card,
.admin-sidebar.card,
.admin-sidebar.panel,
.admin-sidebar.glass-card,
.dashboard-sidebar.card,
.dashboard-sidebar.panel,
.dashboard-sidebar.glass-card,
.section-sidebar.card,
.section-sidebar.panel,
.section-sidebar.glass-card,
.tvx-sidebar.card,
.tvx-sidebar.panel,
.tvx-sidebar.glass-card,
.account-sidebar.card,
.account-sidebar.panel,
.account-sidebar.glass-card,
[class*="sidebar"][class*="card"],
[class*="sidebar"][class*="panel"],
[class*="side"][class*="card"],
[class*="side"][class*="panel"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: var(--tvx-sidebar-tight-bottom) !important;
    margin-bottom: 0 !important;
    align-self: flex-start !important;
}

/* Nav stack should not reserve extra space after Change Password. */
aside nav,
.sidebar nav,
.sidebar-nav,
.side-nav,
.app-sidebar nav,
.admin-sidebar nav,
.dashboard-sidebar nav,
.section-sidebar nav,
.tvx-sidebar nav,
.account-sidebar nav,
.dashboard-menu,
.admin-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
}

/* Ensure the final visible nav item does not create a large trailing area. */
aside nav > :last-child,
.sidebar nav > :last-child,
.sidebar-nav > :last-child,
.side-nav > :last-child,
.app-sidebar nav > :last-child,
.admin-sidebar nav > :last-child,
.dashboard-sidebar nav > :last-child,
.section-sidebar nav > :last-child,
.tvx-sidebar nav > :last-child,
.account-sidebar nav > :last-child,
.dashboard-menu > :last-child,
.admin-menu > :last-child {
    margin-bottom: 0 !important;
}

/* If the page layout stretches columns, keep the sidebar at content height. */
.dashboard-layout,
.admin-layout,
.app-layout,
.page-layout,
.shell-layout,
.main-layout,
.dashboard-shell,
.admin-shell,
.app-shell {
    align-items: flex-start !important;
}

@media (max-width: 820px) {
    aside,
    .sidebar,
    .app-sidebar,
    .admin-sidebar,
    .dashboard-sidebar,
    .section-sidebar,
    .tvx-sidebar,
    .account-sidebar,
    [class*="sidebar"][class*="card"],
    [class*="sidebar"][class*="panel"] {
        padding-bottom: 12px !important;
    }
}
/* TRADEVAULTX_REMOVE_SIDEBAR_DEAD_SPACE_END */



/* =====================================================
   TradeVaultX Admin Layout Fix
   Added: 07/08/2026 20:21:27
   ===================================================== */

.admin-testnet-trade-testing-panel,
.admin-live-futures-prices-panel{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    margin-top:20px !important;
}

.dashboard-grid{
    width:100% !important;
    max-width:none !important;
}

.card,
.result-card{
    max-width:none !important;
}

.admin-testnet-trade-testing-panel{
    clear:both !important;
}

.admin-live-futures-prices-panel{
    clear:both !important;
}

@media (min-width: 1400px){

    .admin-testnet-trade-testing-panel{
        width:100% !important;
    }

    .admin-live-futures-prices-panel{
        width:100% !important;
    }
}



/* -----------------------------------------------------
   Sidebar pill icons (admin .admin-pill + dashboard
   .side-menu a). Each pill leads with an emoji glyph for
   character; the plain coloured dot it replaces is hidden
   in admin.css / dashboard-harmonize.css. The coloured
   tint/border/glow on the pill still carries the grouping.
   ----------------------------------------------------- */
.pill-ico {
    flex: 0 0 auto;
    width: 22px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.pill-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}