:root {
    --bg-main: #050814;
    --bg-elevated: #0b1020;
    --bg-elevated-soft: #0f1729;
    --accent: #10e6d1;
    --accent-soft: rgba(16, 230, 209, 0.12);
    --accent-hover: #0fd0be;
    --text-main: #e5e7f5;
    --text-muted: #94a3b8;
    --border-subtle: #1e293b;
    --danger: #f97373;
    --success: #4ade80;
    --warning: #facc15;
}

/* Global */
html, body {
    height: 100%;
}

body {
    background: radial-gradient(circle at 0% 0%, #081322 0, #020617 40%, #020617 100%);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
    /* Tách cuộn: sidebar và nội dung cuộn độc lập */
    overflow: hidden;
}

/* Links & text */
a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-hover);
    text-decoration: none;
}

.text-muted { color: var(--text-muted) !important; }

/* Layout */
.app-shell {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    width: 250px;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%);
    border-right: 1px solid var(--border-subtle);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    /* Luôn có vùng cuộn riêng cho menu (hiện thanh cuộn khi cần/OS cho phép) */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: .75rem;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Không giới hạn touch-action để tránh chặn pinch-zoom (2 ngón) trên mobile */
    touch-action: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(148,163,184,.45) transparent;
}

/* Scrollbar (Chrome/Edge/Safari) cho menu sidebar */
.sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.55);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 0, #22f3e5, #0ea5e9);
    color: #020617;
    font-weight: 700;
    font-size: 18px;
}

.sidebar-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
}

.sidebar-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar .nav {
    margin-top: 1.5rem;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.25rem;
    font-size: .9rem;
    color: var(--text-muted);
    border-radius: .75rem;
    margin-bottom: .15rem;
    transition: all .15s ease;
}

.sidebar .nav-link .nav-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.8);
    font-size: 13px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    color: var(--text-main);
    background: rgba(15,23,42,.9);
}

.sidebar .nav-link.active .nav-icon,
.sidebar .nav-link:hover .nav-icon {
    background: var(--accent-soft);
}

.sidebar-section-title {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    padding: .75rem 1.25rem .3rem;
}

.sidebar-footer {
    position: relative;
    width: auto;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,1) 38%);
}

/* Main content: cuộn riêng, topbar dính trên */
.main-content {
    
    position: relative;
height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Không giới hạn touch-action để pinch-zoom hoạt động bình thường */
    touch-action: auto;
}



/* Pull-to-refresh indicator (mobile) */
.ptr-indicator {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1030; /* above topbar */
    transform: translateY(-48px);
    transition: transform .18s ease;
    pointer-events: none;
}
.ptr-indicator .ptr-inner {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(15,23,42,.88);
    border: 1px solid rgba(148,163,184,.18);
    color: rgba(226,232,240,.92);
    font-size: .8rem;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
}
.ptr-indicator.ptr-ready .ptr-inner {
    border-color: rgba(34,197,94,.35);
}
.ptr-indicator.ptr-loading .ptr-inner i {
    animation: ptrSpin 0.8s linear infinite;
}
.ptr-indicator.ptr-releasing {
    transition: transform .18s ease;
}

@keyframes ptrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Backdrop dùng cho sidebar trên mobile */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1029;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(10px);
}

main {
    flex: 1 1 auto;
}

/* Topbar & content */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.75rem 0.75rem;
}

.topbar-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.topbar-subtitle {
    font-size: .85rem;
    color: var(--text-muted);
}

.badge-pill-soft {
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(15,23,42,.85);
    font-size: .75rem;
    color: var(--text-muted);
}

/* Cards */
.card {
    background: linear-gradient(145deg, #0b1020 0%, #020617 100%);
    border-radius: 1rem;
    border: 1px solid rgba(15,23,42,.9);
    color: var(--text-main);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid rgba(15,23,42,.7);
    font-size: .9rem;
    color: var(--text-muted);
}

.card-stat {
    position: relative;
    overflow: hidden;
}

.card-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(32, 217, 182, .4), transparent 55%);
    opacity: .35;
}

.card-stat-value {
    font-size: 1.35rem;
    font-weight: 600;
}

/* Buttons */
.btn-primary,
.btn-success {
    background: linear-gradient(90deg, #10e6d1, #0ea5e9);
    border: none;
    color: #020617;
    font-weight: 600;
    border-radius: .75rem;
    padding: .55rem 1.2rem;
    box-shadow: 0 0 0 1px rgba(16,230,209,.3);
}

.btn-primary:hover,
.btn-success:hover {
    background: linear-gradient(90deg, #0fd0be, #0284c7);
    color: #020617;
}

.btn-outline-light {
    border-radius: .75rem;
}

/* Forms */
.form-control {
    background: rgba(15,23,42,.9);
    border-radius: .75rem;
    border: 1px solid rgba(30,64,175,.6);
    color: var(--text-main);
    font-size: .9rem;
}

.form-control:focus {
    background: rgba(15,23,42,.95);
    color: var(--text-main);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(16,230,209,.4);
}

/* Tables */
.table {
    color: var(--text-main);
}

/* Bootstrap modals (dark theme to match UI) */
.modal-backdrop {
    background-color: #020617;
}

.modal-backdrop.show {
    opacity: .75;
}

.modal-content {
    background: linear-gradient(180deg, rgba(11,16,32,.98) 0%, rgba(15,23,42,.98) 100%);
    color: var(--text-main);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 1.25rem;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
}

.modal-header,
.modal-footer {
    border-color: rgba(148,163,184,.12);
}

.modal-title {
    color: var(--text-main);
    font-weight: 700;
    letter-spacing: .02em;
}

.modal-header .close,
.modal-header .btn-close {
    color: var(--text-muted);
    opacity: 1;
    text-shadow: none;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    color: var(--text-main);
    opacity: 1;
}

.modal .form-text,
.modal small,
.modal .text-muted {
    color: var(--text-muted) !important;
}

#otpMessagesModal .modal-dialog {
    max-width: 520px;
    padding: 0 12px;
}

#otpMessagesModal .otp-messages-modal-content {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #0b1020 0%, #020617 100%);
    border: 1px solid rgba(16, 230, 209, .22);
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .72);
}

#otpMessagesModal .otp-messages-modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(16, 230, 209, .16), transparent 56%);
    pointer-events: none;
}

#otpMessagesModal .modal-header,
#otpMessagesModal .modal-body {
    position: relative;
}

#otpMessagesModal .modal-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    padding: 1rem 1.25rem .8rem;
}

#otpMessagesModal .modal-title {
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: 0;
}

#otpMessagesModal .otp-messages-subtitle {
    margin-top: .18rem;
    color: var(--text-muted);
    font-size: .82rem;
}

#otpMessagesModal .close {
    color: var(--text-muted);
    opacity: 1;
    text-shadow: none;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#otpMessagesModal .close:hover {
    color: var(--text-main);
    background: rgba(148, 163, 184, .12);
}

#otpMessagesModal .modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

#otpMessagesModal .otp-messages-body {
    min-height: 44px;
    padding: .85rem 1rem;
    border-radius: .75rem;
    border: 1px solid rgba(16, 230, 209, .25);
    background: rgba(2, 6, 23, .62);
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.table thead th {
    border-bottom-color: rgba(30,64,175,.5);
    font-size: .8rem;
    color: var(--text-muted);
}

.table tbody td {
    border-top-color: rgba(30,64,175,.25);
    font-size: .85rem;
}

/* Home page specific */
.quick-actions {
    max-height: 408px;
    overflow-y: auto;
    padding-right: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.45) transparent;
}

.quick-actions::-webkit-scrollbar {
    width: 8px;
}

.quick-actions::-webkit-scrollbar-track {
    background: transparent;
}

.quick-actions::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}

.quick-actions::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.55);
}

.quick-actions .list-group-item {
    background: transparent;
    border: 1px solid rgba(30,64,175,.7);
    border-radius: .75rem;
    margin-bottom: .5rem;
    padding: .7rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-main);
}

.quick-actions .list-group-item:hover {
    background: rgba(15,23,42,.9);
}

.server-switcher-card {
    border: 1px solid rgba(16, 230, 209, .18);
    background: linear-gradient(135deg, rgba(2, 6, 23, .94), rgba(15, 23, 42, .88));
    box-shadow: 0 20px 50px rgba(2, 6, 23, .25);
}

.server-switcher-row {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,.45) transparent;
}

.server-switcher-row::-webkit-scrollbar {
    height: 8px;
}

.server-switcher-row::-webkit-scrollbar-track {
    background: transparent;
}

.server-switcher-row::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.35);
    border-radius: 999px;
}

.server-switcher-row::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.55);
}

.server-switcher-btn {
    flex: 0 0 auto;
    min-width: 190px;
    max-width: 260px;
    padding: .85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(15,23,42,.72);
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.server-switcher-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(16,230,209,.45);
    background: rgba(15,23,42,.95);
    color: var(--text-main);
    text-decoration: none;
}

.server-switcher-btn.active {
    background: linear-gradient(135deg, var(--accent, #10e6d1), #0ea5e9);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 36px rgba(14,165,233,.28);
}

.server-switcher-btn.active:hover {
    color: #fff;
}

.server-switcher-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}

.server-switcher-host {
    font-size: .76rem;
    color: rgba(226,232,240,.72);
    word-break: break-all;
}

.server-switcher-btn.active .server-switcher-host {
    color: rgba(255,255,255,.86);
}

.server-switcher-chip {
    align-self: flex-start;
    margin-top: .2rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.recent-list {
    max-height: 420px;
    overflow-y: auto;
}

.recent-item {
    display: flex;
    justify-content: space-between;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(15,23,42,.7);
    font-size: .85rem;
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-service {
    color: var(--text-muted);
    font-size: .8rem;
}

.recent-price {
    font-weight: 600;
}

/* Alerts */
.alert-info {
    background: rgba(37,99,235,.15);
    border-color: rgba(59,130,246,.4);
    color: var(--text-main);
}

/* API docs block */
.api-doc-body {
    background: #020617;
    color: #e5e7eb;
    font-family: Consolas, monospace;
    font-size: 13px;
    border-radius: .75rem;
    padding: 1rem;
}

/* Keep bright monospace text for code */
.api-doc-body pre {
    background: transparent;
    color: #ffffff !important;
    font-weight: 600;
}

.api-doc-body .r { color: #ff4d4f; }
.api-doc-body .g { color: #8aff8a; }
.api-doc-body .y { color: #ffd666; }

.api-key {
    background: #020617;
    padding: 3px 6px;
    border-radius: 4px;
}

.api-actions {
    border: 1px solid rgba(148,163,184,.18);
    background: rgba(2,6,23,.35);
}

.api-actions-header {
    background: transparent;
    border-bottom: 1px solid rgba(148,163,184,.14);
}

.api-actions-title {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
}

.api-actions-subtitle {
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--text-muted);
}

.api-actions-accordion .accordion-item {
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(148,163,184,.12);
}

.api-actions-accordion .accordion-item:first-child {
    border-top: 0;
}

.api-actions-accordion .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    padding: 1rem 1.1rem;
    gap: 1rem;
    box-shadow: none;
    text-align: left;
}

.api-actions-accordion .accordion-button::after {
    content: "›";
    font-size: 22px;
    line-height: 1;
    opacity: .8;
    transform: rotate(0deg);
    transition: transform .15s ease;
}

.api-actions-accordion .accordion-button:hover {
    background: rgba(15,23,42,.55);
}

.api-actions-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

.api-actions-accordion .accordion-button:not(.collapsed) {
    background: rgba(15,23,42,.75);
    color: var(--text-main);
}

.api-actions-accordion .accordion-body {
    padding: .9rem 1.1rem 1.2rem;
}

.api-action-line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.api-action-name {
    font-weight: 700;
    font-size: .98rem;
}

.api-action-desc {
    margin-top: .18rem;
    font-size: .82rem;
    color: var(--text-muted);
}
/* Misc spacing */
main {
    padding: 0 1.75rem 2rem;
}

@media (max-width: 991.98px) {
    /*
      Mobile: cho phép body cuộn như bình thường để:
      - pinch zoom + kéo pan hoạt động tốt (Android/iOS)
      - pull-to-refresh native của trình duyệt hoạt động lại
      Sidebar vẫn là drawer (fixed) nên không ảnh hưởng.
    */
    body {
        overflow: auto;
        overscroll-behavior: auto;
    }

    .app-shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .main-content {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        overscroll-behavior: auto;
    }

    /* Mobile/Tablet: sidebar dạng drawer */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1030;
        width: 260px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: 0 20px 60px rgba(0,0,0,.55);
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    /* Hiện lớp phủ khi mở sidebar */
    body.sidebar-open .sidebar-backdrop {
        display: block;
    }

    /* Giảm padding cho vừa màn hình nhỏ */
    .topbar {
        padding: .9rem 1rem .6rem;
    }
    .topbar-title {
        font-size: 1.05rem;
    }
    main {
        padding: 0 1rem 1.25rem;
    }
}


.card-header.bg-primary,
.card-header.text-white {
    background: transparent !important;
    color: var(--text-muted) !important;
}



/* Soft alert styles used on Liên hệ & Chính sách pages */
.alert-warning-soft {
    background: rgba(234, 179, 8, 0.07);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: .9rem;
    padding: .85rem 1rem;
}

.alert-success-soft {
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: .9rem;
    padding: .85rem 1rem;
}

.alert-warning-soft .alert-icon,
.alert-success-soft .alert-icon {
    font-size: 1.25rem;
}

.contact-steps {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.contact-steps li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
}

.contact-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: .1rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 600;
    background: var(--accent-soft);
    color: var(--accent);
}

.contact-steps .step-title {
    font-weight: 600;
    margin-bottom: .15rem;
}

.contact-steps .step-desc {
    font-size: .85rem;
    color: var(--text-muted);
}

.policy-body h5 {
    font-weight: 600;
}

.policy-body ul {
    padding-left: 1.2rem;
}

.policy-body ul li {
    margin-bottom: .35rem;
}

.bg-white,
.bg-light {
    background-color: #020617 !important;
}

/* == FIX INPUT TRẮNG TRÊN NỀN TỐI == */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background-color: #020617; /* nền tối */
    color: #e5e7f5; /* chữ sáng */
    border: 1px solid #1e293b; /* viền mảnh */
}

    /* placeholder cũng cho nhạt bớt */
    input::placeholder,
    textarea::placeholder {
        color: #64748b;
    }

    /* trạng thái readonly / disabled */
    input[readonly],
    input:disabled,
    textarea[readonly],
    textarea:disabled {
        background-color: #020617;
        color: #9ca3af;
    }





/* Dark theme overrides for Bootstrap components to remove white backgrounds */
.input-group-text {
    background-color: #020617;
    color: #e5e7f5;
    border-color: #1e293b;
}

.btn-outline-secondary,
.btn-outline-light {
    background-color: #020617;
    color: #e5e7f5;
    border-color: #1e293b;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: #0f172a;
    color: #e5e7f5;
    border-color: var(--accent);
}


/* Force dark background for readonly form controls (e.g. password column) */
input.form-control[readonly] {
    background-color: #020617 !important;
    color: #e5e7f5 !important;
}


/* Dashboard charts */
.card-chart {
    background: var(--bg-elevated);
    border-radius: 1rem;
    border: 1px solid var(--border-subtle);
}

.card-chart .card-header {
    border-bottom: 1px solid rgba(148,163,184,0.18);
    font-weight: 600;
    font-size: .9rem;
}

.card-chart .card-body {
    padding: 1.25rem 1.5rem;
}

.doughnut-wrapper {
    position: relative;
    max-width: 260px;
    margin: 0 auto;
}

.doughnut-wrapper canvas {
    width: 100% !important;
    height: auto !important;
}

.doughnut-center-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--text-main);
}

.legend-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    margin-right: .4rem;
}

.legend-dot-primary {
    background: #3b82f6;
}

.legend-dot-success {
    background: #22c55e;
}

.legend-dot-danger {
    background: #f97373;
}

/* =========================================================
   Announcement modal (Thông báo sau đăng nhập)
   ========================================================= */

/* Chỉ áp dụng backdrop đậm hơn khi mở announcement modal */
body.announcement-modal-open .modal-backdrop {
    background-color: #020617;
}

body.announcement-modal-open .modal-backdrop.show {
    opacity: .82;
}

#announcementModal .modal-dialog {
    max-width: 920px;
    padding: 0 12px;
}

#announcementModal .modal-content {
    position: relative;
    background: linear-gradient(145deg, #0b1020 0%, #020617 100%);
    border-radius: 1rem;
    border: 1px solid rgba(15,23,42,.9);
    color: var(--text-main);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .75);
    overflow: hidden;
}

/* lớp glow nhẹ giống card-stat */
#announcementModal .modal-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(16, 230, 209, .18), transparent 55%);
    opacity: .75;
    pointer-events: none;
}

#announcementModal .modal-header,
#announcementModal .modal-body,
#announcementModal .modal-footer {
    position: relative; /* để nằm trên ::before */
}

#announcementModal .modal-header {
    border-bottom: 1px solid rgba(15,23,42,.75);
    padding: 1rem 1.25rem;
    background: transparent;
}

#announcementModal .announcement-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(16,230,209,.28);
    font-size: 18px;
    flex: 0 0 auto;
}

#announcementModal .announcement-title {
    font-weight: 800;
    letter-spacing: .02em;
    font-size: 1.05rem;
    line-height: 1.15;
}

#announcementModal .announcement-subtitle {
    margin-top: .1rem;
    font-size: .82rem;
    color: var(--text-muted);
}

#announcementModal .announcement-close {
    color: var(--text-muted);
    text-shadow: none;
    opacity: 1;
    padding: .35rem .5rem;
    border-radius: .75rem;
    transition: background .15s ease, color .15s ease;
    outline: none;
}

#announcementModal .announcement-close:hover {
    color: var(--text-main);
    background: rgba(15,23,42,.85);
}

#announcementModal .modal-body {
    padding: 1rem 1.25rem;
}

#announcementModal .announcement-body {
    max-height: 62vh;
    overflow: auto;
    padding-right: .25rem;
    word-break: break-word;
    font-size: 1rem;
    line-height: 1.65;
}

/* Nội dung HTML trong body */
#announcementModalBody,
#announcementModalBody p,
#announcementModalBody li {
    color: var(--text-main);
}

#announcementModalBody h1,
#announcementModalBody h2,
#announcementModalBody h3,
#announcementModalBody h4,
#announcementModalBody h5,
#announcementModalBody h6 {
    color: var(--text-main);
    font-weight: 700;
}

#announcementModalBody a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#announcementModalBody hr {
    border-color: rgba(30,41,59,.7);
}

#announcementModalBody code,
#announcementModalBody pre {
    background: rgba(15,23,42,.85);
    border: 1px solid rgba(30,41,59,.8);
    border-radius: .75rem;
    color: var(--text-main);
}

#announcementModalBody pre {
    padding: .75rem;
    overflow: auto;
}

#announcementModal .modal-footer {
    border-top: 1px solid rgba(15,23,42,.75);
    padding: .9rem 1.25rem;
    justify-content: space-between;
    background: rgba(2,6,23,.25);
}

/* Nút "Không hiển thị lại" theo tone danger mềm nhưng vẫn hợp UI */
#announcementDismissBtn {
    background: rgba(249,115,115,.12);
    border: 1px solid rgba(249,115,115,.55);
    color: #fecaca;
    border-radius: .75rem;
    padding: .55rem 1rem;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    box-shadow: 0 0 0 1px rgba(249,115,115,.10);
}

#announcementDismissBtn:hover {
    background: rgba(249,115,115,.18);
    border-color: rgba(249,115,115,.75);
    color: #fff;
    transform: translateY(-1px);
}

/* Scrollbar (WebKit) */
#announcementModal .announcement-body::-webkit-scrollbar {
    width: 10px;
}

#announcementModal .announcement-body::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.28);
    border-radius: 999px;
}

#announcementModal .announcement-body::-webkit-scrollbar-thumb:hover {
    background: rgba(148,163,184,.40);
}

@media (max-width: 575.98px) {
    #announcementModal .modal-header {
        padding: .9rem 1rem;
    }
    #announcementModal .modal-body {
        padding: .9rem 1rem;
    }
    #announcementModal .modal-footer {
        padding: .8rem 1rem;
        gap: .5rem;
        flex-direction: column;
        align-items: stretch;
    }
    #announcementModal .announcement-title {
        font-size: 1rem;
    }
    #announcementModal .announcement-subtitle {
        display: none;
    }
    #announcementDismissBtn {
        width: 100%;
    }
}

/* Clickable username links (Admin tables, etc.) */
.username-link {
    color: inherit;
    text-decoration: none;
}

.username-link:hover {
    text-decoration: underline;
}




/* =========================================================
   Scoped overlay for AJAX operations (Admin)
   ========================================================= */
.ajax-scope-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.ajax-scope-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.ajax-scope-overlay .spinner-border {
    width: 2.2rem;
    height: 2.2rem;
    color: var(--accent);
}
.ajax-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.ajax-toast {
    pointer-events: all;
    padding: .7rem 1rem;
    border-radius: .75rem;
    background: linear-gradient(145deg, #0b1020, #020617);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    box-shadow: 0 8px 32px rgba(0,0,0,.55);
    min-width: 260px;
    max-width: 420px;
    animation: toastIn .25s ease;
}
.ajax-toast.ajax-toast-success { border-color: rgba(74,222,128,.5); }
.ajax-toast.ajax-toast-error { border-color: rgba(249,115,115,.5); }
.ajax-toast .ajax-toast-close {
    float: right;
    cursor: pointer;
    opacity: .6;
    margin-left: .5rem;
}
.ajax-toast .ajax-toast-close:hover { opacity: 1; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-1rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Mobile UX polish
   ========================================================= */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.topbar-actions {
    gap: .5rem;
}

.topbar-heading {
    min-width: 0;
}

.topbar-heading .topbar-title,
.topbar-heading .topbar-subtitle {
    overflow-wrap: anywhere;
}

#sidebarToggle,
.mobile-sidebar-toggle {
    display: none !important;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    margin-bottom: 0;
}

#serviceIdBadge,
#serviceCountBadge,
#serviceOtpBadge {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    body {
        overflow-x: hidden;
    }

    body.sidebar-open {
        overflow: hidden;
        touch-action: auto;
    }

    body.sidebar-open .sidebar,
    body.sidebar-open .sidebar-scroll {
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }


    #sidebarToggle.mobile-sidebar-toggle,
    .mobile-sidebar-toggle {
        position: static;
        z-index: auto;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin-right: .75rem;
        border-radius: 14px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        align-self: flex-start;
        border: 1px solid rgba(255, 200, 87, .55);
        color: #f8fbff;
        background:
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
            rgba(5, 12, 24, .78);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 12px 28px rgba(0,0,0,.28),
            0 0 18px rgba(56,213,255,.12);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        cursor: pointer;
    }

    #sidebarToggle.mobile-sidebar-toggle i,
    .mobile-sidebar-toggle i {
        font-size: 1.35rem;
        line-height: 1;
    }

    body.sidebar-open #sidebarToggle.mobile-sidebar-toggle,
    body.sidebar-open .mobile-sidebar-toggle {
        border-color: rgba(56,213,255,.72);
        background:
            linear-gradient(180deg, rgba(56,213,255,.22), rgba(255,200,87,.10)),
            rgba(5, 12, 24, .88);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 14px 30px rgba(0,0,0,.32),
            0 0 24px rgba(56,213,255,.22);
    }

    .app-shell {
        display: block !important;
    }

    .sidebar {
        width: min(320px, 88vw);
        max-width: min(320px, 88vw);
    }

    .sidebar-header {
        padding-right: 1rem;
        padding-top: 1rem;
    }

    .sidebar-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .topbar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: .75rem;
        padding: .85rem 1rem .7rem;
    }

    .topbar-heading {
        flex: 1 1 100%;
        display: flex;
        align-items: flex-start;
        min-width: 0;
    }
    .topbar-heading > div:last-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .topbar-title {
        font-size: 1.32rem;
        line-height: 1.15;
    }

    .topbar-subtitle {
        margin-top: .2rem;
        font-size: .78rem;
        line-height: 1.4;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
        align-items: center !important;
        gap: .5rem;
    }

    .topbar-actions .badge-pill-soft {
        margin-left: 0 !important;
        white-space: nowrap;
        font-size: .72rem;
    }

    main {
        padding: 0 .85rem 1rem;
    }

    .card {
        border-radius: 1rem;
    }

    .card-header {
        padding: .9rem 1rem;
    }

    .card-header.d-flex,
    .card-header.bg-primary.d-flex,
    .card-header.text-white.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: .75rem;
    }

    .card-header .form-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: .55rem;
        width: 100%;
        margin: 0;
    }

    .card-header .form-inline > * {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .card-header .form-inline > span,
    .card-header .form-inline > label {
        display: block;
        width: 100%;
    }

    .card-header .form-inline .form-control,
    .card-header .form-inline .custom-select,
    .card-header .form-inline select,
    .card-header .form-inline .btn {
        width: 100%;
        min-height: 44px;
    }

    .card-body {
        padding: 1rem;
    }

    .card-body.p-0 {
        padding: 0 !important;
    }

    .form-control,
    .custom-select,
    select.form-control,
    .btn,
    .input-group-text {
        min-height: 44px;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .input-group > .form-control {
        min-width: 0;
    }

    .d-flex.align-items-center > .form-control,
    .d-flex.align-items-center > select.form-control {
        flex: 1 1 auto;
        min-width: 0;
    }

    #serviceIdBadge,
    #serviceCountBadge,
    #serviceOtpBadge {
        margin-top: .45rem;
        margin-left: 0 !important;
        margin-right: .35rem;
    }

    .table-responsive {
        overflow-x: auto;
        border-radius: 0 0 1rem 1rem;
    }

    .table-responsive table {
        min-width: 760px;
    }

    .table th,
    .table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    .pagination {
        flex-wrap: wrap;
        row-gap: .35rem;
    }
}

@media (max-width: 575.98px) {
    .sidebar {
        width: min(300px, 88vw);
        max-width: min(300px, 88vw);
    }

    .sidebar .nav-link {
        padding: .7rem 1rem;
        font-size: .98rem;
    }

    .sidebar-section-title {
        padding: .9rem 1rem .35rem;
    }

    .topbar {
        padding: .8rem .85rem .65rem;
    }

    .topbar-title {
        font-size: 1.14rem;
    }

    .topbar-actions {
        flex-wrap: nowrap;
    }

    .topbar-actions .dropdown .btn,
    .topbar-actions .badge-pill-soft {
        min-height: 40px;
    }

    #sidebarToggle.mobile-sidebar-toggle,
    .mobile-sidebar-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex-basis: 42px;
        margin-right: .65rem;
    }

    .badge-pill-soft {
        padding: .25rem .55rem;
    }

    main {
        padding: 0 .7rem .85rem;
    }

    .card-header,
    .card-body {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .card-body.p-0 {
        padding: 0 !important;
    }

    .btn,
    .form-control,
    .custom-select,
    select.form-control {
        font-size: .95rem;
    }
}



.service-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.service-panel-toggle {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    padding: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.service-panel-toggle:hover,
.service-panel-toggle:focus {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.34);
    color: #fff;
    outline: none;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

.service-panel-toggle-icon {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform .18s ease, margin .18s ease;
}

.service-panel-toggle.is-collapsed .service-panel-toggle-icon {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.service-panel-card.is-collapsed {
    margin-bottom: 1.5rem;
}

/* =========================================================
   Premium gold/blue dashboard refresh - Bootstrap 4.6.2 safe
   Applied for OTPCODESMS user dashboard and shared shell.
   ========================================================= */
:root {
    --premium-bg: #030711;
    --premium-panel: rgba(9, 16, 31, .94);
    --premium-panel-2: rgba(13, 22, 42, .88);
    --premium-border: rgba(246, 184, 72, .32);
    --premium-border-blue: rgba(47, 132, 255, .45);
    --premium-gold: #f6b848;
    --premium-gold-2: #ffd36a;
    --premium-blue: #2f84ff;
    --premium-blue-2: #00b7ff;
    --premium-red: #ff5b6e;
    --premium-green: #49d17d;
    --premium-text: #f4f7ff;
    --premium-muted: #9fb0ca;
}

body {
    background:
        radial-gradient(circle at 82% 12%, rgba(246,184,72,.12), transparent 28%),
        radial-gradient(circle at 8% 0%, rgba(47,132,255,.16), transparent 30%),
        linear-gradient(135deg, #020510 0%, #07101d 46%, #030711 100%) !important;
    color: var(--premium-text) !important;
}

.main-content {
    background:
        linear-gradient(90deg, rgba(246,184,72,.035), transparent 22%, rgba(47,132,255,.035) 72%, transparent),
        rgba(3, 7, 17, .92);
}

.sidebar {
    width: 276px;
    background:
        linear-gradient(180deg, rgba(6,12,23,.98), rgba(3,7,17,.98)),
        radial-gradient(circle at 0 0, rgba(246,184,72,.18), transparent 30%) !important;
    border-right: 1px solid rgba(246,184,72,.22) !important;
    box-shadow: 16px 0 55px rgba(0,0,0,.28);
}

.sidebar-header {
    padding: .15rem .25rem 1.05rem;
}

.sidebar-logo {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(246,184,72,.18), rgba(246,184,72,.04)) !important;
    border: 2px solid var(--premium-gold) !important;
    color: var(--premium-gold-2) !important;
    box-shadow: 0 0 24px rgba(246,184,72,.22), inset 0 0 18px rgba(246,184,72,.08);
}
.sidebar-logo i::before { content: "\f425"; }
.sidebar-title {
    color: var(--premium-gold-2);
    font-weight: 800;
    letter-spacing: .035em;
    font-size: 1rem;
}
.sidebar-subtitle { color: #b9a16e !important; }
.sidebar-section-title {
    color: var(--premium-gold-2) !important;
    font-weight: 800;
    letter-spacing: .11em;
}
.sidebar .nav-link {
    color: #c1c9da !important;
    border: 1px solid transparent;
    border-radius: .5rem !important;
    margin: .12rem .35rem .18rem;
    padding: .62rem .95rem !important;
}
.sidebar .nav-link .nav-icon {
    background: rgba(246,184,72,.08) !important;
    color: var(--premium-gold-2);
    border: 1px solid rgba(246,184,72,.18);
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(47,132,255,.72), rgba(10,24,48,.35)) !important;
    border-color: rgba(47,132,255,.78);
    box-shadow: 0 0 0 1px rgba(47,132,255,.18), 0 0 24px rgba(47,132,255,.55), inset 3px 0 0 var(--premium-gold);
}
.sidebar-footer {
    background: linear-gradient(180deg, transparent, rgba(4,8,16,.98) 35%) !important;
    border-top: 1px solid rgba(246,184,72,.18) !important;
}
.sidebar-footer .btn-outline-light {
    border-color: rgba(246,184,72,.55) !important;
    color: var(--premium-gold-2) !important;
    background: rgba(246,184,72,.03);
}

.topbar {
    min-height: 82px;
    padding: 1.15rem 1.9rem .85rem !important;
    background: rgba(3, 7, 17, .78) !important;
    border-bottom: 1px solid rgba(246,184,72,.13);
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}
.topbar-title { color: #fff; font-weight: 800 !important; font-size: 1.32rem !important; }
.topbar-subtitle { color: var(--premium-muted) !important; }
.badge-pill-soft {
    color: #e8fff3 !important;
    background: linear-gradient(180deg, rgba(19,39,35,.95), rgba(7,15,21,.95)) !important;
    border: 1px solid rgba(73,209,125,.36);
    padding: .46rem .8rem !important;
}
.topbar .btn-outline-light,
.topbar-actions .dropdown .btn {
    border-color: rgba(246,184,72,.38) !important;
    color: #fff !important;
    background: rgba(13,22,42,.74) !important;
}

main { padding: 0 1.85rem 1.75rem; }
.card {
    background: linear-gradient(145deg, rgba(12,21,39,.94), rgba(5,10,20,.96)) !important;
    border: 1px solid rgba(246,184,72,.16) !important;
    border-radius: .65rem !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.card-header {
    color: var(--premium-gold-2) !important;
    border-bottom: 1px solid rgba(246,184,72,.16) !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.premium-dashboard { max-width: 1760px; margin: 0 auto; }
.premium-notice {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .78rem 1rem;
    border-radius: .55rem;
    border: 1px solid rgba(246,184,72,.35);
    background: linear-gradient(90deg, rgba(14,31,59,.98), rgba(8,15,28,.92));
    color: #edf4ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.notice-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--premium-gold-2);
    background: rgba(246,184,72,.12);
}
.notice-text { flex: 1; font-size: .91rem; }
.notice-close {
    border: 0;
    color: #fff;
    background: transparent;
    opacity: .82;
}

.premium-hero {
    position: relative;
    overflow: hidden;
    min-height: 172px;
    background:
        linear-gradient(100deg, rgba(7,13,26,.98), rgba(9,22,42,.95) 46%, rgba(20,13,9,.96)) !important;
    border-color: rgba(246,184,72,.35) !important;
}
.premium-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 86% 88%, rgba(246,184,72,.52), transparent 6%, transparent 24%),
        radial-gradient(circle at 72% 58%, rgba(246,184,72,.18), transparent 18%),
        linear-gradient(120deg, transparent 0 52%, rgba(246,184,72,.09) 53%, transparent 72%);
    pointer-events: none;
}
.premium-hero::after {
    content: "";
    position: absolute;
    right: -2%;
    bottom: -42%;
    width: 46%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(246,184,72,.38);
    box-shadow: inset 0 0 70px rgba(246,184,72,.14), 0 0 70px rgba(246,184,72,.08);
    background:
        repeating-radial-gradient(circle, rgba(246,184,72,.18) 0 1px, transparent 1px 24px),
        repeating-conic-gradient(from 12deg, rgba(246,184,72,.28) 0 1deg, transparent 1deg 14deg);
    opacity: .82;
    pointer-events: none;
}
.premium-hero-content,
.premium-server-panel { position: relative; z-index: 2; padding: 1.35rem 1.55rem; }
.premium-hero-content h1 {
    color: #fff;
    font-size: 1.36rem;
    font-weight: 800;
    margin-bottom: .42rem;
}
.premium-hero-content p { color: var(--premium-muted); margin-bottom: .85rem; max-width: 680px; }
.premium-eyebrow {
    color: var(--premium-gold-2);
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
    font-weight: 800;
}
.premium-feature-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.premium-feature-row span {
    color: #dbe7ff;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(246,184,72,.16);
    border-radius: .65rem;
    padding: .52rem .8rem;
    font-size: .85rem;
}
.premium-feature-row i { color: var(--premium-gold-2); margin-right: .35rem; }
.premium-current-host { color: var(--premium-muted); }
.premium-current-host span {
    color: #fff;
    font-weight: 800;
    background: rgba(255,255,255,.08);
    border-radius: .35rem;
    padding: .12rem .38rem;
}
.premium-online-dot {
    color: var(--premium-green);
    font-size: .82rem;
    font-weight: 700;
}
.premium-server-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.premium-server-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 70px;
    color: #f8fbff;
    padding: .82rem 1rem;
    border-radius: .6rem;
    border: 1px solid rgba(246,184,72,.24);
    background: rgba(7,15,30,.75);
    transition: .18s ease;
}
.premium-server-card:hover { color: #fff; transform: translateY(-2px); border-color: rgba(47,132,255,.75); box-shadow: 0 12px 34px rgba(47,132,255,.18); }
.premium-server-card.active { border-color: rgba(47,132,255,.98); box-shadow: inset 0 0 0 1px rgba(47,132,255,.38), 0 0 26px rgba(47,132,255,.22); }
.server-icon {
    width: 48px;
    height: 48px;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(246,184,72,.2), rgba(47,132,255,.16));
    color: var(--premium-gold-2);
    font-size: 1.4rem;
}
.premium-server-card.active .server-icon { color: var(--premium-blue); }
.server-info { display:flex; flex-direction: column; line-height: 1.25; }
.server-info strong { font-size: .98rem; }
.server-info small { color: var(--premium-muted); }
.server-check { position:absolute; right: .72rem; top: .72rem; color: var(--premium-green); }

.premium-stat {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 1.2rem 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.premium-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 86% 20%, rgba(246,184,72,.16), transparent 28%);
    opacity: .9;
}
.stat-copy, .stat-art { position: relative; z-index: 1; }
.stat-copy { display:flex; flex-direction: column; gap: .17rem; }
.stat-copy span { color: #c9d4e8; font-size: .86rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-copy strong { color: #fff; font-size: 1.46rem; line-height: 1.2; }
.stat-copy small { color: var(--premium-muted); }
.stat-art {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 16px;
    font-size: 1.72rem;
    background: rgba(255,255,255,.05);
}
.stat-wallet { border-color: rgba(246,184,72,.34) !important; }
.stat-wallet .stat-copy strong, .stat-wallet .stat-art { color: var(--premium-gold-2); }
.stat-deposit { border-color: rgba(47,132,255,.32) !important; }
.stat-deposit .stat-copy strong, .stat-deposit .stat-art { color: var(--premium-blue); }
.stat-orders { border-color: rgba(246,184,72,.28) !important; }
.stat-orders .stat-art { color: var(--premium-gold); }
.stat-fail { border-color: rgba(255,91,110,.35) !important; }
.stat-fail .stat-copy strong, .stat-fail .stat-art { color: var(--premium-red); }

.premium-card { overflow: hidden; }
.premium-card-header {
    min-height: 52px;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid rgba(246,184,72,.14);
    color: var(--premium-gold-2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.premium-card-body { padding: 1rem 1.25rem; }
.premium-actions { max-height: 428px; overflow-y: auto; }
.premium-action-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .68rem .8rem;
    margin-bottom: .48rem;
    color: #f4f7ff;
    border-radius: .48rem;
    border: 1px solid rgba(246,184,72,.20);
    background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    transition: .16s ease;
}
.premium-action-item:hover {
    color: #fff;
    border-color: rgba(246,184,72,.55);
    background: rgba(246,184,72,.08);
    transform: translateX(3px);
}
.action-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .38rem;
    color: #07101d;
    background: var(--premium-gold-2);
}
.premium-action-item > span:nth-child(2) { flex:1; font-weight: 600; }
.premium-action-item > .bi-chevron-right { color: var(--premium-gold-2); }

.premium-outline-btn {
    color: var(--premium-gold-2) !important;
    border: 1px solid rgba(246,184,72,.36) !important;
    background: rgba(246,184,72,.04) !important;
    border-radius: .45rem !important;
}
.premium-outline-btn:hover { background: rgba(246,184,72,.12) !important; }

.premium-recent-list { padding-top: .3rem; }
.premium-recent-item {
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    padding: .74rem .1rem !important;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.recent-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.recent-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--premium-blue);
    box-shadow: 0 0 14px rgba(47,132,255,.9);
}
.recent-title { color: #f7fbff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-service { color: var(--premium-muted) !important; font-size: .78rem; }
.recent-price { color: var(--premium-gold-2) !important; font-weight: 800; }

.chart-panel { position: relative; }
.premium-doughnut-wrapper {
    width: 220px;
    height: 220px;
    max-width: 100%;
    margin: .3rem auto 0;
}
.doughnut-center-label {
    color: #fff !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
}
.premium-legend > div {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .5rem;
    color: var(--premium-muted);
}
.premium-legend > div span:nth-child(2) { flex: 1; }
.premium-legend strong { color: #fff; }
.premium-legend small { color: var(--premium-muted); display:block; margin-top:.6rem; }
.legend-dot-primary { background: var(--premium-blue) !important; }
.legend-dot-success { background: var(--premium-green) !important; }
.legend-dot-danger { background: var(--premium-red) !important; }

.table, .table td, .table th { color: var(--premium-text); }
.form-control, .custom-select {
    color: var(--premium-text) !important;
    background-color: rgba(7,15,30,.9) !important;
    border-color: rgba(246,184,72,.18) !important;
}
.form-control:focus, .custom-select:focus {
    border-color: rgba(47,132,255,.78) !important;
    box-shadow: 0 0 0 .2rem rgba(47,132,255,.16) !important;
}

@media (max-width: 1199.98px) {
    .premium-server-grid { grid-template-columns: 1fr; }
    .premium-hero::after { opacity: .35; width: 70%; }
}
@media (max-width: 991.98px) {
    main { padding: 0 1rem 1.25rem; }
    .premium-hero-content, .premium-server-panel { padding: 1.1rem; }
    .premium-hero-content h1 { font-size: 1.18rem; }
}
@media (max-width: 767.98px) {
    .topbar { min-height: auto; padding: .9rem 1rem !important; }
    .premium-notice { align-items: flex-start; }
    .notice-close { display: none; }
    .premium-feature-row span { width: 100%; }
    .premium-stat { min-height: 100px; }
    .stat-copy strong { font-size: 1.24rem; }
    .premium-recent-item { flex-direction: column; }
    .recent-right { text-align: left !important; padding-left: 1.45rem; }
}

/* =========================================================
   Premium Gold 1:1 refinement v2 - closer to selected mockup
   Bootstrap 4.6.2 safe overrides
   ========================================================= */
:root {
    --premium-bg: #030710;
    --premium-bg-2: #06101f;
    --premium-panel: rgba(6, 13, 25, .94);
    --premium-panel-2: rgba(9, 18, 34, .88);
    --premium-line: rgba(211, 155, 52, .35);
    --premium-line-soft: rgba(211, 155, 52, .18);
    --premium-gold: #d99b34;
    --premium-gold-2: #ffd16a;
    --premium-blue: #2c7dff;
    --premium-blue-2: #5eb0ff;
    --premium-danger: #ff5368;
    --premium-green: #42d976;
    --premium-white: #f7fbff;
    --premium-muted: #9fb0c7;
}
body {
    background:
        radial-gradient(circle at 86% 18%, rgba(211,155,52,.12), transparent 30%),
        radial-gradient(circle at 14% 6%, rgba(44,125,255,.10), transparent 34%),
        linear-gradient(115deg, #030710 0%, #06111f 48%, #02050d 100%) !important;
    font-size: 15px;
}
.app-shell { background: transparent; }
.sidebar {
    width: 286px !important;
    background:
        linear-gradient(180deg, rgba(7,13,24,.99), rgba(3,7,15,.99)) !important;
    border-right: 1px solid rgba(211,155,52,.30) !important;
    box-shadow: 22px 0 64px rgba(0,0,0,.32), inset -1px 0 rgba(255,255,255,.03) !important;
}
.sidebar-header { padding: .42rem .35rem 1.1rem !important; }
.sidebar-logo {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    border: 2px solid var(--premium-gold-2) !important;
    background: linear-gradient(145deg, rgba(211,155,52,.16), rgba(8,16,30,.9)) !important;
    box-shadow: 0 0 0 1px rgba(211,155,52,.12), 0 0 24px rgba(211,155,52,.35), inset 0 0 22px rgba(211,155,52,.10) !important;
    color: var(--premium-gold-2) !important;
}
.sidebar-logo i::before { content: "\f425" !important; }
.sidebar-title { color: var(--premium-gold-2) !important; font-size: 1.03rem !important; font-weight: 900 !important; }
.sidebar-subtitle { color: #c9a95a !important; font-size: .74rem !important; text-transform: uppercase; }
.sidebar .nav { margin-top: .35rem !important; }
.sidebar-section-title {
    color: var(--premium-gold-2) !important;
    font-size: .76rem !important;
    font-weight: 900 !important;
    padding: .92rem 1.15rem .38rem !important;
}
.sidebar .nav-link {
    min-height: 38px;
    margin: .16rem .55rem !important;
    padding: .55rem .82rem !important;
    border-radius: .46rem !important;
    color: #d2d9e8 !important;
    border: 1px solid transparent !important;
    transition: .18s ease;
}
.sidebar .nav-link .nav-icon {
    width: 23px !important;
    height: 23px !important;
    color: var(--premium-gold-2) !important;
    background: rgba(211,155,52,.10) !important;
    border: 1px solid rgba(211,155,52,.22) !important;
    font-size: .78rem !important;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(16,78,170,.88), rgba(7,20,42,.58)) !important;
    border-color: rgba(44,125,255,.95) !important;
    box-shadow: 0 0 0 1px rgba(44,125,255,.26), 0 0 26px rgba(44,125,255,.70), inset 3px 0 0 var(--premium-gold-2) !important;
}
.sidebar-footer {
    padding: 1rem 1.1rem 1.18rem !important;
    background: linear-gradient(180deg, transparent, rgba(4,8,15,.98) 35%) !important;
    border-top: 1px solid rgba(211,155,52,.23) !important;
}
.sidebar-footer .btn-outline-light {
    border-color: rgba(211,155,52,.78) !important;
    color: var(--premium-gold-2) !important;
    border-radius: .42rem !important;
}
.main-content {
    background:
        radial-gradient(circle at 80% 12%, rgba(211,155,52,.06), transparent 30%),
        linear-gradient(180deg, rgba(5,10,18,.86), rgba(3,7,15,.96)) !important;
}
.topbar {
    min-height: 72px !important;
    padding: 1.05rem 1.65rem .85rem !important;
    background: rgba(3,7,15,.82) !important;
    border-bottom: 1px solid rgba(211,155,52,.18) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.26) !important;
}
.topbar-title { font-size: 1.28rem !important; font-weight: 900 !important; color: #fff !important; }
.topbar-subtitle { color: #9fb0c7 !important; font-size: .84rem !important; }
.topbar .btn-outline-light, .topbar-actions .dropdown .btn {
    border-color: rgba(211,155,52,.48) !important;
    border-radius: .42rem !important;
    background: rgba(8,16,30,.82) !important;
}
.badge-pill-soft {
    border-radius: .42rem !important;
    border-color: rgba(66,217,118,.38) !important;
    background: rgba(8,24,22,.78) !important;
    color: #e9fff3 !important;
}
main { padding: .92rem 1.45rem 1.45rem !important; }
.premium-dashboard {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}
.premium-notice {
    min-height: 43px;
    border-radius: .48rem !important;
    border-color: rgba(211,155,52,.48) !important;
    background: linear-gradient(90deg, rgba(14,31,59,.94), rgba(7,14,27,.94)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 8px 28px rgba(0,0,0,.18) !important;
}
.notice-icon { color: var(--premium-gold-2) !important; background: rgba(211,155,52,.16) !important; }
.notice-text { font-size: .88rem !important; }
.card, .premium-card, .premium-stat, .premium-hero {
    border-radius: .58rem !important;
    background:
        linear-gradient(145deg, rgba(11,21,38,.94), rgba(5,10,20,.98)) !important;
    border: 1px solid rgba(211,155,52,.22) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.premium-hero {
    min-height: 170px !important;
    margin-bottom: 1rem !important;
    background:
        linear-gradient(99deg, rgba(6,12,24,.98) 0%, rgba(8,19,36,.95) 43%, rgba(10,13,20,.96) 100%) !important;
}
.premium-hero::before {
    background:
        linear-gradient(110deg, transparent 0 48%, rgba(211,155,52,.08) 50%, transparent 70%),
        radial-gradient(circle at 82% 72%, rgba(211,155,52,.42), transparent 7%, transparent 24%),
        radial-gradient(circle at 70% 56%, rgba(211,155,52,.18), transparent 22%) !important;
}
.premium-hero::after {
    right: 12.5% !important;
    bottom: -82% !important;
    width: 42% !important;
    border-color: rgba(211,155,52,.36) !important;
    opacity: .9 !important;
}
.premium-hero-content, .premium-server-panel { padding: 1.28rem 1.35rem !important; }
.premium-hero-content h1 { font-size: 1.42rem !important; line-height: 1.1 !important; }
.premium-hero-content p { max-width: 620px !important; font-size: .92rem !important; }
.premium-eyebrow { color: var(--premium-gold-2) !important; font-size: .76rem !important; }
.premium-feature-row span {
    padding: .45rem .72rem !important;
    border-radius: .45rem !important;
    border-color: rgba(211,155,52,.22) !important;
    background: rgba(6,13,25,.72) !important;
}
.premium-server-panel {
    min-height: 100%;
    border-left: 1px solid rgba(211,155,52,.20);
    background: linear-gradient(90deg, rgba(2,5,10,0), rgba(3,7,15,.20));
}
.premium-current-host span { background: rgba(255,255,255,.09) !important; color: #fff !important; }
.premium-server-card {
    min-height: 68px !important;
    border-radius: .48rem !important;
    border-color: rgba(211,155,52,.30) !important;
    background: rgba(8,16,30,.78) !important;
}
.premium-server-card.active {
    border-color: rgba(44,125,255,.95) !important;
    box-shadow: inset 0 0 0 1px rgba(44,125,255,.30), 0 0 20px rgba(44,125,255,.24) !important;
}
.server-icon {
    width: 44px !important;
    height: 44px !important;
    color: var(--premium-gold-2) !important;
    background: linear-gradient(135deg, rgba(211,155,52,.22), rgba(44,125,255,.12)) !important;
}
.premium-stats-row { margin-bottom: 1rem !important; }
.premium-stats-row > [class*="col-"] { margin-bottom: .9rem !important; }
.premium-stat {
    min-height: 104px !important;
    padding: 1.05rem 1.25rem !important;
}
.premium-stat::before {
    background:
        radial-gradient(circle at 88% 38%, rgba(211,155,52,.14), transparent 23%),
        linear-gradient(95deg, rgba(255,255,255,.015), transparent) !important;
}
.stat-copy span { font-size: .82rem !important; text-transform: uppercase; color: #c8d2e4 !important; letter-spacing: .02em; }
.stat-copy strong { font-size: 1.6rem !important; letter-spacing: .01em; }
.stat-copy small { font-size: .88rem !important; color: #a8b5ca !important; }
.stat-art { font-size: 2.45rem !important; opacity: .92 !important; }
.stat-wallet .stat-copy strong, .stat-wallet .stat-art { color: var(--premium-gold-2) !important; }
.stat-deposit .stat-copy strong, .stat-deposit .stat-art { color: var(--premium-blue-2) !important; }
.stat-orders .stat-art { color: var(--premium-gold-2) !important; }
.stat-fail .stat-copy strong, .stat-fail .stat-art { color: var(--premium-danger) !important; }
.premium-main-row { margin-bottom: 0 !important; }
.premium-card-header {
    padding: .9rem 1.1rem !important;
    border-bottom: 1px solid rgba(211,155,52,.18) !important;
    color: var(--premium-gold-2) !important;
    font-size: .93rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}
.premium-card-body { padding: 1rem 1.1rem !important; }
.premium-actions {
    max-height: 330px !important;
    overflow-y: auto !important;
    padding-right: .6rem !important;
}
.premium-action-item {
    min-height: 46px !important;
    border-radius: .42rem !important;
    padding: .52rem .72rem !important;
    margin-bottom: .58rem !important;
    border-color: rgba(211,155,52,.28) !important;
    background: linear-gradient(180deg, rgba(15,27,48,.86), rgba(7,15,29,.84)) !important;
    color: #f7fbff !important;
}
.premium-action-item:hover {
    border-color: rgba(211,155,52,.70) !important;
    box-shadow: 0 0 22px rgba(211,155,52,.12) !important;
}
.action-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: .42rem !important;
    color: #06101f !important;
    background: var(--premium-gold-2) !important;
    box-shadow: 0 0 16px rgba(211,155,52,.22) !important;
}
.premium-outline-btn {
    border-color: rgba(211,155,52,.55) !important;
    color: var(--premium-gold-2) !important;
    border-radius: .42rem !important;
    background: rgba(211,155,52,.04) !important;
}
.premium-recent-list {
    max-height: 330px !important;
    overflow-y: auto !important;
    padding-right: .6rem !important;
}
.premium-recent-item {
    min-height: 43px !important;
    border-bottom-color: rgba(255,255,255,.065) !important;
    padding: .48rem .1rem !important;
}
.recent-dot {
    width: .52rem !important;
    height: .52rem !important;
    background: var(--premium-blue) !important;
    box-shadow: 0 0 13px rgba(44,125,255,.78) !important;
}
.recent-title { color: #f7fbff !important; font-weight: 700 !important; }
.recent-service { color: #91a0b8 !important; }
.recent-price { color: var(--premium-gold-2) !important; font-weight: 900 !important; }
.premium-chart-row > [class*="col-"] { margin-bottom: .9rem !important; }
.card-chart .premium-card-body, .chart-panel { min-height: 260px !important; }
.premium-doughnut-wrapper { max-width: 230px !important; }
.premium-legend > div { font-size: .93rem !important; }
.premium-legend small { color: #9fb0c7 !important; }
.premium-actions::-webkit-scrollbar, .premium-recent-list::-webkit-scrollbar, .sidebar-scroll::-webkit-scrollbar { width: 8px; }
.premium-actions::-webkit-scrollbar-thumb, .premium-recent-list::-webkit-scrollbar-thumb, .sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(233, 238, 248, .70) !important;
    border-radius: 99px !important;
}
@media (min-width: 1600px) {
    main { padding: 1.05rem 1.75rem 1.65rem !important; }
    .premium-actions, .premium-recent-list { max-height: 350px !important; }
    .card-chart .premium-card-body, .chart-panel { min-height: 285px !important; }
}
@media (max-width: 991.98px) {
    .sidebar { width: 280px !important; }
    .premium-server-panel { border-left: 0; }
    main { padding: .85rem !important; }
    .premium-hero::after { right: -5% !important; width: 70% !important; }
}


/* ===== refinement patch: make home top area closer to reference gold/blue mockup ===== */
.premium-hero {
    min-height: 196px !important;
    background:
        linear-gradient(100deg, rgba(5,11,22,.98) 0%, rgba(8,18,33,.96) 46%, rgba(7,12,22,.97) 100%) !important;
}
.premium-hero .row {
    min-height: 196px;
}
.premium-hero::before {
    background:
        linear-gradient(110deg, transparent 0 50%, rgba(211,155,52,.05) 52%, transparent 74%),
        radial-gradient(circle at 77% 58%, rgba(211,155,52,.26), transparent 16%),
        radial-gradient(circle at 81% 64%, rgba(211,155,52,.20), transparent 24%) !important;
}
.premium-hero::after {
    right: 10% !important;
    bottom: -92% !important;
    width: 44% !important;
    opacity: .95 !important;
    border-width: 1px !important;
    background:
        repeating-radial-gradient(circle, rgba(246,184,72,.22) 0 1px, transparent 1px 22px),
        repeating-conic-gradient(from 0deg, rgba(246,184,72,.18) 0 1deg, transparent 1deg 12deg) !important;
}
.premium-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 196px;
    padding-right: .5rem !important;
}
.premium-hero-content h1 {
    font-size: 1.82rem !important;
    line-height: 1.12 !important;
    margin-bottom: .42rem !important;
}
.premium-hero-content p {
    max-width: 620px !important;
    color: #b1bfd3 !important;
    margin-bottom: 1rem !important;
}
.premium-feature-row {
    gap: .72rem !important;
}
.premium-feature-row span {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    border-radius: .5rem !important;
    padding: .52rem .82rem !important;
    color: #e8eef8 !important;
    background: linear-gradient(180deg, rgba(10,18,30,.78), rgba(7,13,23,.72)) !important;
}
.premium-server-panel {
    min-height: 196px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.6rem !important;
    background: linear-gradient(90deg, rgba(0,0,0,0), rgba(5,10,18,.18));
}
.premium-current-host {
    font-size: 1rem !important;
}
.premium-online-dot {
    font-size: .9rem !important;
}
.premium-server-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .85rem !important;
}
.premium-server-card {
    min-height: 74px !important;
    padding: .9rem 1rem !important;
    border-radius: .52rem !important;
    background: linear-gradient(180deg, rgba(7,15,28,.92), rgba(4,9,18,.92)) !important;
}
.premium-server-card.active {
    border-color: rgba(246,184,72,.86) !important;
    box-shadow: inset 0 0 0 1px rgba(246,184,72,.28), 0 0 22px rgba(246,184,72,.12) !important;
}
.premium-server-card:not(.active) {
    border-color: rgba(47,132,255,.75) !important;
    box-shadow: inset 0 0 0 1px rgba(47,132,255,.12) !important;
}
.premium-server-card:not(.active) .server-icon {
    color: var(--premium-blue) !important;
}
.premium-server-card.active .server-icon {
    color: var(--premium-gold-2) !important;
}
.server-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: .55rem !important;
    font-size: 1.2rem !important;
}
.server-info strong {
    font-size: 1rem !important;
}
.server-info small {
    font-size: .84rem !important;
}
.server-check {
    top: .55rem !important;
    right: .65rem !important;
}

.premium-stats-row {
    margin-top: -.15rem !important;
}
.premium-stat {
    min-height: 124px !important;
    padding: 1.2rem 1.35rem !important;
    background: linear-gradient(145deg, rgba(10,19,34,.98), rgba(5,10,20,.98)) !important;
}
.premium-stat::before {
    background:
        radial-gradient(circle at 88% 28%, rgba(255,255,255,.05), transparent 18%),
        linear-gradient(95deg, rgba(255,255,255,.015), transparent 55%) !important;
}
.premium-stat::after {
    content: "";
    position: absolute;
    right: 88px;
    bottom: 12px;
    width: 120px;
    height: 52px;
    opacity: .18;
    pointer-events: none;
}
.stat-copy span {
    font-size: .8rem !important;
    color: #c4cfe0 !important;
}
.stat-copy strong {
    font-size: 2rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}
.stat-copy small {
    font-size: .92rem !important;
    color: #a1aec3 !important;
}
.stat-art {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.06);
    font-size: 1.95rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.18);
}
.stat-wallet::after {
    background:
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 12px bottom 0 / 10px 18px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 32px bottom 0 / 10px 30px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 52px bottom 0 / 10px 24px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 72px bottom 0 / 10px 42px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 92px bottom 0 / 10px 34px no-repeat;
}
.stat-deposit::after {
    background:
        radial-gradient(circle at 14px 24px, rgba(47,132,255,.95) 0 10px, transparent 11px),
        radial-gradient(circle at 46px 18px, rgba(47,132,255,.95) 0 8px, transparent 9px),
        radial-gradient(circle at 72px 26px, rgba(47,132,255,.95) 0 11px, transparent 12px),
        radial-gradient(circle at 98px 16px, rgba(47,132,255,.95) 0 7px, transparent 8px);
}
.stat-orders::after {
    background:
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 14px bottom 0 / 12px 14px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 38px bottom 0 / 12px 26px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 62px bottom 0 / 12px 36px no-repeat,
        linear-gradient(to top, rgba(246,184,72,.95) 0 100%) left 86px bottom 0 / 12px 48px no-repeat;
}
.stat-fail::after {
    width: 74px;
    height: 74px;
    right: 82px;
    bottom: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,91,110,.42);
    box-shadow: inset 0 0 0 12px rgba(255,91,110,.06);
}

@media (max-width: 1199.98px) {
    .premium-hero-content h1 { font-size: 1.5rem !important; }
}
@media (max-width: 991.98px) {
    .premium-hero,
    .premium-hero .row,
    .premium-hero-content,
    .premium-server-panel {
        min-height: auto !important;
    }
    .premium-server-panel {
        padding-left: 1.15rem !important;
        padding-top: .2rem !important;
    }
    .premium-hero::after {
        right: -4% !important;
        bottom: -58% !important;
        width: 72% !important;
    }
}


/* ===== v4 exact server hero + unlimited server support ===== */
.premium-hero-exact {
    min-height: 156px !important;
    overflow: hidden !important;
}
.premium-hero-exact .premium-hero-layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: 156px;
    padding: 0 1.15rem;
}
.premium-hero-exact .premium-hero-left,
.premium-hero-exact .premium-hero-right {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 156px;
    padding: .95rem 0;
}
.premium-hero-exact .premium-hero-left {
    flex: 1 1 56%;
    max-width: 58%;
    padding-right: .65rem;
}
.premium-hero-exact .premium-hero-right {
    flex: 1 1 44%;
    max-width: 44%;
    align-items: stretch;
}
.premium-hero-exact .premium-eyebrow {
    font-size: .74rem !important;
    letter-spacing: .07em !important;
    margin-bottom: .12rem !important;
}
.premium-hero-exact h1 {
    font-size: 1.18rem !important;
    line-height: 1.14 !important;
    margin-bottom: .28rem !important;
}
.premium-hero-exact p {
    margin-bottom: .6rem !important;
    max-width: 680px !important;
    color: #adb9cb !important;
    font-size: .81rem !important;
}
.premium-hero-exact .premium-feature-row {
    gap: .48rem !important;
}
.premium-hero-exact .premium-feature-row span {
    min-height: 32px;
    padding: .35rem .7rem !important;
    font-size: .78rem !important;
    border-radius: .42rem !important;
}
.premium-hero-exact .premium-hero-right-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}
.premium-hero-exact .premium-current-host {
    font-size: .92rem !important;
}
.premium-hero-exact .premium-online-dot {
    font-size: .82rem !important;
    white-space: nowrap;
    padding-top: .1rem;
}
.premium-server-scroller {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(129,166,226,.55) transparent;
}
.premium-server-scroller::-webkit-scrollbar {
    height: 8px;
}
.premium-server-scroller::-webkit-scrollbar-track {
    background: transparent;
}
.premium-server-scroller::-webkit-scrollbar-thumb {
    background: rgba(129,166,226,.45);
    border-radius: 999px;
}
.premium-server-track {
    display: inline-flex;
    align-items: stretch;
    gap: .78rem;
    min-width: 100%;
    padding-right: .1rem;
}
.premium-hero-exact .premium-server-card {
    flex: 0 0 210px;
    min-width: 210px;
    min-height: 52px !important;
    padding: .7rem .95rem !important;
    gap: .72rem !important;
    border-radius: .45rem !important;
}
.premium-hero-exact .server-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 1rem !important;
    border-radius: .42rem !important;
}
.premium-hero-exact .server-info strong {
    font-size: .88rem !important;
    line-height: 1.08 !important;
}
.premium-hero-exact .server-info small {
    font-size: .74rem !important;
    line-height: 1.05 !important;
}
.premium-hero-exact .premium-server-card.active {
    border-color: rgba(246,184,72,.82) !important;
    box-shadow: inset 0 0 0 1px rgba(246,184,72,.22), 0 0 20px rgba(246,184,72,.10) !important;
}
.premium-hero-exact .premium-server-card:not(.active) {
    border-color: rgba(44,125,255,.72) !important;
    box-shadow: inset 0 0 0 1px rgba(44,125,255,.10) !important;
}
.premium-hero-exact .premium-server-card.active .server-icon {
    color: var(--premium-gold-2) !important;
}
.premium-hero-exact .premium-server-card:not(.active) .server-icon {
    color: var(--premium-blue-2) !important;
}
.premium-hero-exact .premium-server-card:hover {
    transform: none !important;
}

@media (max-width: 1199.98px) {
    .premium-hero-exact .premium-hero-layout {
        flex-direction: column;
        gap: .35rem;
        padding-top: .1rem;
        padding-bottom: .35rem;
    }
    .premium-hero-exact .premium-hero-left,
    .premium-hero-exact .premium-hero-right {
        max-width: 100%;
        min-height: auto;
        padding: .8rem 0;
    }
}
@media (max-width: 767.98px) {
    .premium-hero-exact {
        min-height: auto !important;
    }
    .premium-hero-exact h1 {
        font-size: 1.05rem !important;
    }
    .premium-hero-exact .premium-server-card {
        flex-basis: 190px;
        min-width: 190px;
    }
}


/* ===== v5 CLEAN EXACT stat cards: closer to selected reference ===== */
.premium-stats-row {
    margin-top: .05rem !important;
    margin-bottom: .95rem !important;
}

.premium-stats-row > [class*="col-"] {
    margin-bottom: .85rem !important;
}

.premium-stat {
    position: relative !important;
    overflow: hidden !important;
    min-height: 122px !important;
    height: 122px !important;
    padding: 1.15rem 1.2rem !important;
    border-radius: .58rem !important;
    background:
        linear-gradient(145deg, rgba(7,16,31,.98), rgba(3,8,18,.99)) !important;
    box-shadow:
        0 14px 34px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* reset previous noisy pseudo layers */
.premium-stat::before,
.premium-stat::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* soft right glow only */
.premium-stat::before {
    inset: 0 !important;
    opacity: 1 !important;
    background:
        radial-gradient(circle at 86% 45%, rgba(255,255,255,.045), transparent 18%),
        linear-gradient(90deg, rgba(255,255,255,.015), transparent 50%) !important;
}

/* bottom/right illustration area */
.premium-stat::after {
    right: 12px !important;
    bottom: 7px !important;
    width: 158px !important;
    height: 68px !important;
    opacity: .26 !important;
    z-index: 1 !important;
}

.stat-copy {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .18rem !important;
    max-width: calc(100% - 86px) !important;
}

.stat-copy span {
    color: #d8e0ed !important;
    font-size: .78rem !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
    font-weight: 700 !important;
}

.stat-copy strong {
    font-size: 1.86rem !important;
    line-height: 1.04 !important;
    font-weight: 900 !important;
    letter-spacing: .005em !important;
    text-shadow: none !important;
}

.stat-copy small {
    color: #d9e2ef !important;
    font-size: .9rem !important;
    line-height: 1.15 !important;
}

.stat-art {
    position: absolute !important;
    z-index: 4 !important;
    top: 50% !important;
    right: 1.15rem !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.72rem !important;
    border: 1px solid currentColor !important;
    background: rgba(255,255,255,.018) !important;
    opacity: 1 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 26px rgba(0,0,0,.12) !important;
}

.stat-art::before {
    content: "" !important;
    position: absolute !important;
    inset: -9px !important;
    border-radius: inherit !important;
    background: currentColor !important;
    opacity: .12 !important;
    filter: blur(10px) !important;
    z-index: -1 !important;
}

.stat-art i {
    position: relative !important;
    z-index: 2 !important;
}

/* CARD 1: balance, gold */
.stat-wallet {
    border-color: rgba(226,166,57,.45) !important;
}
.stat-wallet::before {
    background:
        radial-gradient(circle at 86% 50%, rgba(226,166,57,.13), transparent 19%),
        linear-gradient(90deg, rgba(255,255,255,.012), transparent 55%) !important;
}
.stat-wallet::after {
    background:
        linear-gradient(to top, rgba(226,166,57,.75) 0 100%) left 28px bottom 0 / 10px 18px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.72) 0 100%) left 50px bottom 0 / 10px 34px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.68) 0 100%) left 72px bottom 0 / 10px 27px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.78) 0 100%) left 94px bottom 0 / 10px 46px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.52) 0 100%) left 116px bottom 0 / 10px 38px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.64) 0 100%) left 138px bottom 0 / 10px 56px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.20) 0 100%) left 16px bottom 0 / 138px 2px no-repeat;
}
.stat-wallet .stat-copy strong,
.stat-wallet .stat-art {
    color: #ffc24e !important;
}

/* CARD 2: deposit, blue */
.stat-deposit {
    border-color: rgba(47,132,255,.55) !important;
}
.stat-deposit::before {
    background:
        radial-gradient(circle at 86% 50%, rgba(47,132,255,.12), transparent 20%),
        linear-gradient(90deg, rgba(255,255,255,.012), transparent 55%) !important;
}
.stat-deposit::after {
    width: 172px !important;
    height: 74px !important;
    opacity: .28 !important;
    background:
        radial-gradient(circle at 34px 42px, rgba(47,132,255,.95) 0 7px, transparent 8px),
        radial-gradient(circle at 72px 28px, rgba(47,132,255,.92) 0 6px, transparent 7px),
        radial-gradient(circle at 110px 50px, rgba(47,132,255,.95) 0 9px, transparent 10px),
        radial-gradient(circle at 148px 24px, rgba(47,132,255,.82) 0 5px, transparent 6px),
        linear-gradient(153deg, transparent 0 31%, rgba(47,132,255,.30) 31% 32%, transparent 32% 100%),
        linear-gradient(30deg, transparent 0 46%, rgba(47,132,255,.25) 46% 47%, transparent 47% 100%),
        linear-gradient(118deg, transparent 0 48%, rgba(47,132,255,.16) 48% 49%, transparent 49% 100%);
}
.stat-deposit .stat-copy strong,
.stat-deposit .stat-art {
    color: #4da3ff !important;
}

/* CARD 3: transactions, gold */
.stat-orders {
    border-color: rgba(226,166,57,.42) !important;
}
.stat-orders::before {
    background:
        radial-gradient(circle at 86% 50%, rgba(226,166,57,.12), transparent 19%),
        linear-gradient(90deg, rgba(255,255,255,.012), transparent 55%) !important;
}
.stat-orders::after {
    background:
        linear-gradient(135deg, transparent 0 43%, rgba(226,166,57,.22) 43% 44%, transparent 44% 100%),
        linear-gradient(to top, rgba(226,166,57,.74) 0 100%) left 52px bottom 0 / 10px 17px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.70) 0 100%) left 74px bottom 0 / 10px 28px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.76) 0 100%) left 96px bottom 0 / 10px 42px no-repeat,
        linear-gradient(to top, rgba(226,166,57,.72) 0 100%) left 118px bottom 0 / 10px 55px no-repeat,
        radial-gradient(circle at 50px 46px, rgba(226,166,57,.42) 0 2px, transparent 3px),
        radial-gradient(circle at 90px 28px, rgba(226,166,57,.44) 0 2px, transparent 3px),
        radial-gradient(circle at 128px 11px, rgba(226,166,57,.46) 0 2px, transparent 3px);
}
.stat-orders .stat-copy strong {
    color: #ffffff !important;
}
.stat-orders .stat-art {
    color: #eab044 !important;
}

/* CARD 4: failed, red */
.stat-fail {
    border-color: rgba(255,77,94,.52) !important;
    background:
        linear-gradient(145deg, rgba(18,11,25,.99), rgba(7,8,18,.99)) !important;
}
.stat-fail::before {
    background:
        radial-gradient(circle at 86% 50%, rgba(255,77,94,.14), transparent 20%),
        linear-gradient(90deg, rgba(255,255,255,.012), transparent 55%) !important;
}
.stat-fail::after {
    width: 186px !important;
    height: 86px !important;
    opacity: .27 !important;
    background:
        radial-gradient(circle at 28px 58px, rgba(255,77,94,.85) 0 2px, transparent 3px),
        radial-gradient(circle at 75px 32px, rgba(255,77,94,.85) 0 2px, transparent 3px),
        radial-gradient(circle at 128px 60px, rgba(255,77,94,.85) 0 2px, transparent 3px),
        radial-gradient(circle at 166px 24px, rgba(255,77,94,.85) 0 2px, transparent 3px),
        linear-gradient(148deg, transparent 0 32%, rgba(255,77,94,.28) 32% 33%, transparent 33% 100%),
        linear-gradient(28deg, transparent 0 48%, rgba(255,77,94,.20) 48% 49%, transparent 49% 100%),
        linear-gradient(74deg, transparent 0 55%, rgba(255,77,94,.18) 55% 56%, transparent 56% 100%);
}
.stat-fail .stat-copy strong,
.stat-fail .stat-art {
    color: #ff5668 !important;
}
.stat-fail .stat-art {
    font-size: 1.88rem !important;
}

@media (max-width: 1199.98px) {
    .premium-stat {
        min-height: 112px !important;
        height: auto !important;
    }
    .stat-copy strong {
        font-size: 1.62rem !important;
    }
    .premium-stat::after {
        right: -10px !important;
        opacity: .20 !important;
    }
}

@media (max-width: 767.98px) {
    .premium-stat {
        min-height: 106px !important;
        padding: 1rem !important;
    }
    .stat-art {
        width: 52px !important;
        height: 52px !important;
        right: 1rem !important;
    }
}


/* ===== phase 2: premium admin pages for rent/mail/services/stats/tools ===== */
.premium-page-note {
    padding: .8rem 1rem;
    border-radius: .8rem;
    border: 1px solid rgba(73, 116, 188, .28);
    background: linear-gradient(180deg, rgba(8, 17, 33, .9), rgba(5, 12, 24, .96));
    color: #90a8c9;
    font-size: .9rem;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

.rent-overview-shell {
    background: linear-gradient(180deg, rgba(7,18,43,.96) 0%, rgba(3,10,23,.985) 100%) !important;
    border: 1px solid rgba(226,166,57,.20) !important;
    border-radius: 1.05rem !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.rent-overview-title { color: #f8fbff !important; }
.rent-overview-subtitle { color: #8aa1c3 !important; }
.rent-overview-card {
    border-radius: .95rem !important;
    background: linear-gradient(180deg, rgba(10, 20, 39, .86), rgba(5, 12, 24, .94)) !important;
    border: 1px solid rgba(56, 97, 165, .30) !important;
}
.rent-overview-label { color: #7fb7ff !important; }
.rent-overview-meta { color: #95a8c4 !important; }

.premium-module-card,
.service-panel-card,
.services-table-card,
.stats-filter-card,
.stats-table-card,
.card.premium-table-card {
    background: linear-gradient(180deg, rgba(7, 16, 31, .98), rgba(3, 8, 18, .995)) !important;
    border: 1px solid rgba(226,166,57,.15) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.premium-module-card > .card-header,
.service-panel-card > .card-header,
.services-table-card > .card-header,
.stats-filter-card > .card-header,
.stats-table-card > .card-header,
.service-panel-header {
    background: linear-gradient(180deg, rgba(7,18,43,.96), rgba(5,15,34,.96)) !important;
    border-bottom: 1px solid rgba(226,166,57,.13) !important;
    color: #e8efff !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
    padding: .95rem 1rem !important;
}
.premium-module-card > .card-body,
.service-panel-card > .card-body,
.services-table-card > .card-body,
.stats-filter-card > .card-body,
.stats-table-card > .card-body {
    background: transparent !important;
}

.service-panel-toggle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(79,119,183,.28);
    background: rgba(255,255,255,.03);
    color: #a8bad6;
}
.service-panel-toggle:hover { background: rgba(255,255,255,.06); }
.service-panel-toggle-icon,
.service-panel-toggle-icon::before,
.service-panel-toggle-icon::after {
    background: currentColor !important;
}

.form-control,
.custom-select,
.input-group-text,
textarea.form-control {
    min-height: 42px;
    background: rgba(7, 16, 31, .82) !important;
    border: 1px solid rgba(73, 116, 188, .28) !important;
    color: #e8efff !important;
    border-radius: .7rem !important;
    box-shadow: none !important;
}
textarea.form-control { min-height: auto; }
.form-control::placeholder,
.custom-select,
.input-group-text { color: #8ba0c0 !important; }
.form-control:focus,
.custom-select:focus,
textarea.form-control:focus {
    border-color: rgba(46, 163, 255, .68) !important;
    box-shadow: 0 0 0 .16rem rgba(46,163,255,.12) !important;
    background: rgba(9, 19, 35, .94) !important;
}
.input-group-text {
    background: rgba(255,255,255,.04) !important;
}

.btn {
    border-radius: .72rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
.btn-primary {
    border-color: rgba(64, 140, 255, .55) !important;
    background: linear-gradient(180deg, #1d6fff 0%, #1554d1 100%) !important;
}
.btn-success {
    color: #04131c !important;
    border-color: rgba(36, 219, 235, .52) !important;
    background: linear-gradient(180deg, #2be7ee 0%, #20c5d6 100%) !important;
}
.btn-outline-primary {
    color: #72b7ff !important;
    border-color: rgba(64, 140, 255, .55) !important;
    background: rgba(8,16,31,.36) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background: rgba(24, 98, 223, .72) !important;
    border-color: rgba(64,140,255,.86) !important;
}
.btn-outline-secondary {
    color: #c6d3e8 !important;
    border-color: rgba(120,138,173,.28) !important;
    background: rgba(255,255,255,.02) !important;
}
.btn-warning {
    color: #16100a !important;
    background: linear-gradient(180deg, #f2c15a 0%, #dba03c 100%) !important;
    border-color: rgba(231,174,71,.72) !important;
}
.btn.filter-service {
    border-radius: .52rem !important;
    min-height: 34px;
    padding: .35rem .62rem !important;
    font-size: .78rem !important;
}

.badge {
    border-radius: 999px !important;
    padding: .32rem .56rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
}
.badge-secondary { background: rgba(120,138,173,.18) !important; color: #d7e4f5 !important; }
.badge-info { background: rgba(34, 175, 240, .18) !important; color: #84d8ff !important; }
.badge-warning { background: rgba(235, 180, 77, .18) !important; color: #ffd372 !important; }
.badge-success { background: rgba(17, 188, 129, .18) !important; color: #6df4c4 !important; }
.badge-primary { background: rgba(61, 120, 255, .18) !important; color: #84b4ff !important; }
.badge-danger { background: rgba(255, 86, 104, .18) !important; color: #ff9baa !important; }
.badge-dark { background: rgba(255,255,255,.06) !important; color: #d4ddef !important; }

.table,
.premium-data-table {
    color: #dbe6f7 !important;
}
.table thead th,
.table .thead-light th,
.thead-light th {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(76, 97, 138, .28) !important;
    color: #98abc9 !important;
    font-size: .74rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
}
.table td,
.table th {
    border-top: 1px solid rgba(76, 97, 138, .24) !important;
    vertical-align: middle !important;
}
.table tbody tr { background: transparent !important; }
.table.table-hover tbody tr:hover,
.table tbody tr:hover {
    background: rgba(17, 30, 55, .55) !important;
}
.table .text-muted,
.small.text-muted,
.text-muted { color: #8ba0c0 !important; }
.table-responsive {
    border-radius: 0 0 1rem 1rem;
}

.custom-control-label::before { background: rgba(7,16,31,.8); border-color: rgba(73,116,188,.35); }

.nav-tabs.premium-admin-tabs {
    border-bottom: none !important;
    gap: .55rem;
}
.nav-tabs.premium-admin-tabs .nav-item { margin-bottom: 0 !important; }
.nav-tabs.premium-admin-tabs .nav-link {
    border: 1px solid rgba(73,116,188,.26) !important;
    color: #9cb3d3 !important;
    background: linear-gradient(180deg, rgba(7,16,31,.82), rgba(3,8,18,.95)) !important;
    border-radius: .72rem !important;
    padding: .62rem .9rem !important;
    font-weight: 700;
}
.nav-tabs.premium-admin-tabs .nav-link.active,
.nav-tabs.premium-admin-tabs .nav-link:hover {
    color: #fff !important;
    border-color: rgba(226,166,57,.35) !important;
    box-shadow: inset 0 0 0 1px rgba(226,166,57,.09);
    background: linear-gradient(180deg, rgba(13,30,59,.96), rgba(5,15,34,.98)) !important;
}

.pagination .page-link,
.premium-pagination .page-link {
    background: rgba(7,16,31,.9) !important;
    border-color: rgba(73,116,188,.28) !important;
    color: #b3c5df !important;
}
.pagination .page-item.active .page-link,
.premium-pagination .page-item.active .page-link {
    background: linear-gradient(180deg, #1d6fff 0%, #1554d1 100%) !important;
    border-color: rgba(64,140,255,.68) !important;
    color: #fff !important;
}
.pagination .page-item.disabled .page-link,
.premium-pagination .page-item.disabled .page-link {
    background: rgba(255,255,255,.02) !important;
    color: #617696 !important;
}

.alert {
    border-radius: .85rem !important;
    border: 1px solid rgba(73,116,188,.24) !important;
    background: linear-gradient(180deg, rgba(8,18,35,.94), rgba(4,10,19,.98)) !important;
    color: #d9e4f4 !important;
}
.modal-content {
    background: linear-gradient(180deg, rgba(9, 16, 31, .98), rgba(4, 9, 18, .99)) !important;
    border: 1px solid rgba(73,116,188,.28) !important;
    border-radius: 1rem !important;
}
.modal-header,.modal-footer { border-color: rgba(76,97,138,.24) !important; }
.modal-title { color: #edf4ff !important; }
.close { color: #fff !important; text-shadow: none !important; }

/* services and stats specific */
.services-table-card .form-inline,
.stats-table-card .form-inline { gap: .65rem; }
.services-table-card .form-inline .mr-2,
.stats-table-card .form-inline .mr-2 { margin-right: .3rem !important; }
.stats-filter-card table tbody th {
    background: rgba(255,255,255,.02) !important;
    color: #9db2d1 !important;
    font-weight: 700 !important;
    width: 170px;
}
.stats-filter-card table tbody td {
    background: transparent !important;
}

/* premium deposit small refinement */
.premium-deposit-shell .deposit-card {
    border-color: rgba(226,166,57,.16) !important;
    background: linear-gradient(180deg, rgba(7,16,31,.98), rgba(3,8,18,.995)) !important;
}
.premium-deposit-shell .deposit-tab {
    border-color: rgba(73,116,188,.28) !important;
    color: #9cb3d3 !important;
    background: rgba(255,255,255,.03) !important;
}
.premium-deposit-shell .deposit-tab.active {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(13,30,59,.96), rgba(5,15,34,.98)) !important;
    border-color: rgba(226,166,57,.30) !important;
}
.premium-deposit-shell .deposit-btn-primary {
    background: linear-gradient(180deg, #2be7ee 0%, #20c5d6 100%) !important;
    color: #04131c !important;
}

/* tools */
.progress { background: rgba(255,255,255,.04) !important; border-radius: 999px !important; }
.progress-bar { background: linear-gradient(90deg,#1d6fff,#20c5d6) !important; }

@media (max-width: 991.98px) {
    .services-table-card .form-inline,
    .stats-table-card .form-inline {
        align-items: stretch !important;
    }
    .services-table-card .form-inline .form-control,
    .services-table-card .form-inline .custom-select,
    .stats-table-card .form-inline .form-control,
    .stats-table-card .form-inline .custom-select {
        width: 100%;
    }
}


/* ===== phase 3: account/ref/info/admin full-site premium sync ===== */
.premium-page-heading {
    color: #f7fbff !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
}
main h1, main h2, main h3, main h4, main h5, main h6 { color: #f7fbff; }
main label, main .font-weight-bold { color: #dbe6f7 !important; }

.account-premium-card, .referral-premium-card, .info-premium-card, .premium-module-card {
    background: linear-gradient(180deg, rgba(7, 16, 31, .98), rgba(3, 8, 18, .995)) !important;
    border: 1px solid rgba(226,166,57,.15) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.premium-module-card .card-header, .account-premium-card .card-header, .referral-premium-card .card-header, .info-premium-card .card-header {
    background: linear-gradient(180deg, rgba(7,18,43,.96), rgba(5,15,34,.96)) !important;
    border-bottom: 1px solid rgba(226,166,57,.13) !important;
    color: #e8efff !important;
    font-weight: 800 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .82rem;
}
.premium-module-card .card-body { color: #dbe6f7 !important; }

.list-group-item {
    background: rgba(7, 16, 31, .72) !important;
    border-color: rgba(73,116,188,.22) !important;
    color: #dbe6f7 !important;
}
.list-group-item:hover { background: rgba(17, 30, 55, .72) !important; }
.list-group-item.active {
    background: linear-gradient(180deg, rgba(29,111,255,.82), rgba(21,84,209,.86)) !important;
    border-color: rgba(64,140,255,.78) !important;
    color: #fff !important;
}

.policy-content, .info-content, .contact-content, .premium-content {
    color: #d4dff0 !important;
    line-height: 1.75;
}
.policy-content p, .info-content p, .contact-content p, .premium-content p { color: #c5d3e8 !important; }
.policy-content strong, .info-content strong, .contact-content strong, .premium-content strong { color: #f3c15c !important; }
.policy-content a, .info-content a, .contact-content a, .premium-content a { color: #64b4ff !important; }

.admin-dashboard, .admin-page, .admin-shell { color: #dbe6f7 !important; }
.admin-dashboard .card, .admin-page .card, .admin-shell .card, body .card.admin-card {
    background: linear-gradient(180deg, rgba(7, 16, 31, .98), rgba(3, 8, 18, .995)) !important;
    border-color: rgba(226,166,57,.15) !important;
}
.card-header .btn, .service-panel-header .btn {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.table-bordered, .table-bordered td, .table-bordered th { border-color: rgba(73,116,188,.24) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.018) !important; }
.table-striped tbody tr:nth-of-type(even) { background: transparent !important; }

.form-row .col-form-label, .col-form-label {
    color: #aabbd4 !important;
    font-weight: 700;
}
.input-group-append .btn, .input-group-prepend .btn { min-height: 42px; }
.form-text, .help-block, .help-text { color: #8499ba !important; }
hr { border-top-color: rgba(73,116,188,.20) !important; }
pre, code, .api-doc-body, .admin-code-block {
    background: rgba(2, 7, 16, .88) !important;
    border: 1px solid rgba(73,116,188,.22);
    color: #dbe6f7 !important;
    border-radius: .85rem;
}

.nav-pills .nav-link {
    color: #9cb3d3 !important;
    border: 1px solid rgba(73,116,188,.20);
    background: rgba(7,16,31,.72);
    border-radius: .72rem;
    margin-right: .4rem;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(29,111,255,.82), rgba(21,84,209,.86)) !important;
    border-color: rgba(64,140,255,.70) !important;
}
.status, .label, .tag, .chip { border-radius: 999px; }

.ref-card, .referral-card, .stat-card, .summary-card {
    background: linear-gradient(180deg, rgba(7, 16, 31, .92), rgba(3, 8, 18, .98)) !important;
    border: 1px solid rgba(73,116,188,.24) !important;
    border-radius: 1rem !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.20);
}
.ref-card strong, .referral-card strong, .stat-card strong, .summary-card strong { color: #ffc24e; }

.btn-sm { border-radius: .55rem !important; font-weight: 700 !important; }
.btn-danger {
    border-color: rgba(255,77,94,.55) !important;
    background: linear-gradient(180deg, #ff5668 0%, #cc3044 100%) !important;
}
.btn-secondary {
    border-color: rgba(120,138,173,.28) !important;
    background: rgba(255,255,255,.06) !important;
    color: #dbe6f7 !important;
}
.btn-info {
    color: #04131c !important;
    border-color: rgba(36, 219, 235, .52) !important;
    background: linear-gradient(180deg, #2be7ee 0%, #20c5d6 100%) !important;
}
.btn-light {
    color: #dbe6f7 !important;
    border-color: rgba(73,116,188,.24) !important;
    background: rgba(255,255,255,.05) !important;
}

.metric-card, .admin-metric-card, .kpi-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(7,16,31,.98), rgba(3,8,18,.99)) !important;
    border: 1px solid rgba(226,166,57,.18) !important;
    border-radius: 1rem !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.metric-card::after, .admin-metric-card::after, .kpi-card::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(226,166,57,.14), transparent 60%);
    pointer-events: none;
}

.dropdown-menu {
    background: linear-gradient(180deg, rgba(7,16,31,.98), rgba(3,8,18,.995)) !important;
    border: 1px solid rgba(73,116,188,.24) !important;
    border-radius: .85rem !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.32) !important;
}
.dropdown-item { color: #dbe6f7 !important; }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(29,111,255,.18) !important;
    color: #fff !important;
}

@media (max-width: 767.98px) {
    .premium-module-card .card-header, .service-panel-header {
        font-size: .76rem;
        padding: .82rem .9rem !important;
    }
    .table-responsive { border-radius: .8rem; }
}

/* ===== Admin Home Server Links premium refresh ===== */
.home-server-admin-page {
    position: relative;
}
.home-server-hero {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.35rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(226,166,57,.18);
    background:
        radial-gradient(circle at 18% 0%, rgba(32,197,214,.16), transparent 34%),
        radial-gradient(circle at 88% 22%, rgba(226,166,57,.16), transparent 32%),
        linear-gradient(135deg, rgba(7,18,43,.98), rgba(3,8,18,.995));
    box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.home-server-hero__glow {
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255,194,78,.18), transparent 68%);
    pointer-events: none;
}
.home-server-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .68rem;
    border-radius: 999px;
    border: 1px solid rgba(255,194,78,.22);
    background: rgba(255,194,78,.07);
    color: #ffc24e;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.home-server-title {
    margin-top: .85rem;
    color: #f8fbff !important;
    font-size: 1.45rem;
    font-weight: 900;
}
.home-server-subtitle {
    color: #95a8c4;
    max-width: 760px;
    line-height: 1.65;
}
.home-server-hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}
.home-server-stats .home-server-stat-card {
    position: relative;
    min-height: 122px;
    padding: 1rem 1rem 1rem 4.65rem;
    border-radius: 1rem;
    border: 1px solid rgba(73,116,188,.24);
    background: linear-gradient(145deg, rgba(7,16,31,.96), rgba(3,8,18,.99));
    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.home-server-stat-card .stat-icon {
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border: 1px solid rgba(255,255,255,.08);
}
.home-server-stat-card .stat-icon-total { color: #84b4ff; background: rgba(61,120,255,.13); }
.home-server-stat-card .stat-icon-active { color: #6df4c4; background: rgba(17,188,129,.13); }
.home-server-stat-card .stat-icon-hidden { color: #ffd372; background: rgba(235,180,77,.13); }
.home-server-stat-card small {
    display: block;
    color: #8ba0c0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .72rem;
}
.home-server-stat-card strong {
    display: block;
    margin-top: .2rem;
    color: #f8fbff;
    font-size: 1.9rem;
    line-height: 1.1;
    font-weight: 900;
}
.home-server-stat-card em {
    display: block;
    margin-top: .25rem;
    color: #8ea2c0;
    font-style: normal;
    font-size: .82rem;
}
.home-server-alert {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.home-server-form-card .card-body {
    padding: 1.15rem !important;
}
.home-server-form label {
    font-size: .82rem;
    font-weight: 800;
    color: #dbe6f7 !important;
}
.home-server-form .input-group-text {
    min-width: 42px;
    justify-content: center;
}
.home-server-switch-wrap {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: .54rem .72rem;
    border-radius: .72rem;
    border: 1px solid rgba(73,116,188,.24);
    background: rgba(7,16,31,.58);
}
.home-server-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .85rem;
    margin-top: .2rem;
    border-top: 1px solid rgba(73,116,188,.18);
    color: #8ba0c0;
    font-size: .86rem;
}
.home-server-list {
    padding: .35rem;
}
.home-server-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .95rem;
    margin: .45rem;
    border: 1px solid rgba(73,116,188,.20);
    border-radius: .9rem;
    background: linear-gradient(180deg, rgba(8,18,35,.76), rgba(4,10,19,.92));
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.home-server-row:hover {
    transform: translateY(-1px);
    border-color: rgba(226,166,57,.24);
    background: linear-gradient(180deg, rgba(12,25,48,.86), rgba(5,12,24,.96));
}
.home-server-row-main {
    display: flex;
    align-items: center;
    gap: .95rem;
    min-width: 0;
}
.home-server-rank {
    flex: 0 0 auto;
    min-width: 54px;
    padding: .35rem .5rem;
    text-align: center;
    border-radius: 999px;
    color: #ffc24e;
    background: rgba(255,194,78,.08);
    border: 1px solid rgba(255,194,78,.18);
    font-weight: 900;
    font-size: .78rem;
}
.home-server-node {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-width: 0;
}
.home-server-node-icon {
    width: 42px;
    height: 42px;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #84d8ff;
    background: rgba(34,175,240,.12);
    border: 1px solid rgba(34,175,240,.20);
    flex: 0 0 auto;
}
.home-server-node-title {
    color: #f7fbff;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.home-server-node-url {
    margin-top: .2rem;
    color: #8ba0c0;
    font-size: .84rem;
    word-break: break-all;
}
.home-server-node-url a {
    color: #77bfff !important;
}
.home-server-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.home-server-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: #8ba0c0;
}
.home-server-empty i {
    display: block;
    font-size: 2.4rem;
    color: #ffc24e;
    margin-bottom: .7rem;
}
.home-server-empty strong {
    display: block;
    color: #f7fbff;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}
.home-server-empty span {
    display: block;
    margin-bottom: 1rem;
}
@media (max-width: 991.98px) {
    .home-server-hero-actions { justify-content: flex-start; }
    .home-server-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .home-server-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 575.98px) {
    .home-server-hero { padding: 1rem; }
    .home-server-title { font-size: 1.25rem; }
    .home-server-form-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .home-server-row-main {
        align-items: flex-start;
        flex-direction: column;
    }
    .home-server-row-actions .btn,
    .home-server-row-actions form {
        width: 100%;
    }
    .home-server-row-actions form .btn { width: 100%; }
}

/* ===== Premium rental pages UI refresh: SIM V1/V2/V3/V4 + Gmail V1/V2 ===== */
.rent-overview-shell {
    position: relative !important;
    overflow: hidden !important;
    align-items: stretch !important;
    min-height: 168px !important;
    padding: 1.18rem 1.25rem !important;
    margin: 0 0 1rem !important;
    border-radius: .62rem !important;
    background:
        linear-gradient(110deg, rgba(5,11,22,.98) 0%, rgba(8,19,36,.96) 48%, rgba(7,12,22,.98) 100%) !important;
    border: 1px solid rgba(211,155,52,.34) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.rent-overview-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, transparent 0 48%, rgba(211,155,52,.07) 50%, transparent 72%),
        radial-gradient(circle at 83% 65%, rgba(211,155,52,.34), transparent 16%),
        radial-gradient(circle at 72% 40%, rgba(44,125,255,.16), transparent 26%);
    pointer-events: none;
}
.rent-overview-shell::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: -96%;
    width: min(420px, 40vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(211,155,52,.35);
    background:
        repeating-radial-gradient(circle, rgba(246,184,72,.18) 0 1px, transparent 1px 22px),
        repeating-conic-gradient(from 0deg, rgba(246,184,72,.17) 0 1deg, transparent 1deg 12deg);
    opacity: .9;
    pointer-events: none;
}
.rent-overview-head,
.rent-overview-cards { position: relative; z-index: 2; }
.rent-overview-head {
    min-width: 260px !important;
    padding: .35rem .7rem .35rem .1rem !important;
}
.rent-overview-head::before {
    content: "LIVE RENTAL";
    display: inline-flex;
    width: max-content;
    margin-bottom: .48rem;
    padding: .28rem .54rem;
    border-radius: .42rem;
    color: var(--premium-gold-2);
    background: rgba(211,155,52,.10);
    border: 1px solid rgba(211,155,52,.24);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
}
.rent-overview-title {
    color: #fff !important;
    font-size: 1.62rem !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}
.rent-overview-subtitle {
    max-width: 590px;
    color: #aebbd0 !important;
    font-size: .92rem !important;
}
.rent-overview-cards {
    align-self: center;
    grid-template-columns: repeat(3, minmax(142px, 1fr)) !important;
    gap: .82rem !important;
    min-width: min(100%, 520px) !important;
}
.rent-overview-card {
    position: relative;
    overflow: hidden;
    min-height: 104px !important;
    padding: 1rem 1.05rem !important;
    border-radius: .55rem !important;
    background: linear-gradient(180deg, rgba(9,18,33,.86), rgba(5,10,19,.90)) !important;
    border: 1px solid rgba(211,155,52,.26) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.18) !important;
}
.rent-overview-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,155,52,.18), transparent 68%);
}
.rent-overview-label {
    color: var(--premium-gold-2) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
}
.rent-overview-value {
    color: #fff !important;
    font-size: 2.05rem !important;
    font-weight: 950 !important;
}
.rent-overview-meta {
    color: #9fb0c7 !important;
    font-size: .84rem !important;
}
.service-panel-card,
.premium-module-card,
.premium-table-card {
    overflow: hidden !important;
    border-radius: .62rem !important;
    border-color: rgba(211,155,52,.25) !important;
    background: linear-gradient(145deg, rgba(9,18,34,.96), rgba(4,9,18,.98)) !important;
}
.service-panel-header,
.card-header.bg-primary,
.card-header.bg-dark {
    min-height: 52px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .8rem;
    padding: .86rem 1.05rem !important;
    color: var(--premium-gold-2) !important;
    background: linear-gradient(90deg, rgba(12,28,55,.92), rgba(7,14,27,.94)) !important;
    border-bottom: 1px solid rgba(211,155,52,.20) !important;
    text-transform: uppercase;
    font-weight: 950 !important;
    letter-spacing: .04em;
}
.service-panel-header > span:first-child::before,
.premium-table-card .card-header span:first-child::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .55rem;
    border-radius: 50%;
    background: var(--premium-gold-2);
    box-shadow: 0 0 16px rgba(211,155,52,.75);
    vertical-align: 1px;
}
.service-panel-card .card-body,
.premium-module-card .card-body {
    background:
        radial-gradient(circle at 88% 18%, rgba(44,125,255,.055), transparent 28%),
        linear-gradient(180deg, rgba(8,17,32,.82), rgba(5,10,20,.92));
}
.filter-service {
    border-radius: .42rem !important;
    padding: .42rem .72rem !important;
    font-weight: 800 !important;
    border-color: rgba(211,155,52,.36) !important;
    color: #dfe8f6 !important;
    background: rgba(8,16,30,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.filter-service.btn-primary,
.filter-service.active,
.filter-service:hover {
    color: #06101f !important;
    background: linear-gradient(135deg, var(--premium-gold-2), #d99b34) !important;
    border-color: rgba(255,209,106,.9) !important;
    box-shadow: 0 0 20px rgba(211,155,52,.22) !important;
}
.form-control,
.custom-select,
.input-group-text {
    min-height: 42px;
    border-radius: .42rem !important;
    border-color: rgba(211,155,52,.24) !important;
    background: rgba(5,12,24,.88) !important;
    color: #f7fbff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.form-control:focus,
.custom-select:focus {
    border-color: rgba(44,125,255,.9) !important;
    box-shadow: 0 0 0 .17rem rgba(44,125,255,.18) !important;
    background: rgba(7,15,29,.96) !important;
    color: #fff !important;
}
.form-control::placeholder { color: #7787a0 !important; }
select.form-control option,
.custom-select option {
    background: #07111f !important;
    color: #f7fbff !important;
}
.btn-success,
.btn-primary {
    border: 0 !important;
    border-radius: .44rem !important;
    color: #06101f !important;
    font-weight: 950 !important;
    background: linear-gradient(135deg, var(--premium-gold-2), #d99b34) !important;
    box-shadow: 0 12px 28px rgba(211,155,52,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.btn-success:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(211,155,52,.24), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-light {
    border-radius: .38rem !important;
    font-weight: 800 !important;
    background: rgba(8,16,30,.72) !important;
}
.btn-outline-primary { border-color: rgba(44,125,255,.62) !important; color: #8fc2ff !important; }
.btn-outline-success { border-color: rgba(66,217,118,.55) !important; color: #8df0af !important; }
.btn-outline-danger { border-color: rgba(255,83,104,.56) !important; color: #ff9aa7 !important; }
.btn-outline-secondary { border-color: rgba(159,176,199,.32) !important; color: #c8d2e4 !important; }
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover {
    color: #fff !important;
    background: rgba(44,125,255,.22) !important;
    box-shadow: 0 0 18px rgba(44,125,255,.14) !important;
}
.badge {
    border-radius: .36rem !important;
    padding: .38rem .54rem !important;
    font-weight: 850 !important;
    letter-spacing: .01em;
}
.badge-warning { color: #1a1202 !important; background: #ffd16a !important; }
.badge-info { color: #06101f !important; background: #7dd3fc !important; }
.badge-success { color: #061a0d !important; background: #72e79e !important; }
.badge-primary { color: #fff !important; background: #2c7dff !important; }
.badge-secondary { color: #e8eef8 !important; background: rgba(100,116,139,.45) !important; border: 1px solid rgba(148,163,184,.20); }
.badge-light { color: #f7fbff !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.12); }
.table-responsive {
    border-radius: 0 0 .62rem .62rem;
}
.premium-data-table,
#mailRentalTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.premium-data-table thead th,
#mailRentalTable thead th,
.table .thead-light th {
    position: sticky;
    top: 0;
    z-index: 3;
    color: #bcd0ec !important;
    background: linear-gradient(180deg, rgba(9,19,36,.98), rgba(6,13,25,.98)) !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(211,155,52,.23) !important;
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .045em;
    white-space: nowrap;
}
.premium-data-table tbody td,
#mailRentalTable tbody td {
    color: #e8eef8 !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    vertical-align: middle !important;
}
.premium-data-table tbody tr,
#mailRentalTable tbody tr {
    background: rgba(6,13,25,.52) !important;
    transition: .16s ease;
}
.premium-data-table tbody tr:hover,
#mailRentalTable tbody tr:hover {
    background: rgba(14,31,59,.80) !important;
    box-shadow: inset 3px 0 0 var(--premium-gold-2);
}
.pagination .page-link {
    color: #dfe8f6 !important;
    border-color: rgba(211,155,52,.24) !important;
    background: rgba(8,16,30,.86) !important;
}
.pagination .page-item.active .page-link {
    color: #06101f !important;
    border-color: rgba(255,209,106,.92) !important;
    background: linear-gradient(135deg, var(--premium-gold-2), #d99b34) !important;
}
.alert {
    border-radius: .5rem !important;
    border-color: rgba(211,155,52,.28) !important;
    background: rgba(8,16,30,.92) !important;
    color: #f7fbff !important;
}
.modal-content {
    border-radius: .62rem !important;
    background: linear-gradient(145deg, rgba(9,18,34,.98), rgba(4,9,18,.98)) !important;
    border-color: rgba(211,155,52,.25) !important;
}
@media (max-width: 991.98px) {
    .rent-overview-shell { flex-direction: column !important; min-height: auto !important; }
    .rent-overview-cards { grid-template-columns: repeat(3, minmax(0,1fr)) !important; min-width: 0 !important; }
}
@media (max-width: 767.98px) {
    .rent-overview-cards { grid-template-columns: 1fr !important; }
    .d-flex.align-items-center:has(#serviceSelect),
    .d-flex.align-items-center:has(#mailServiceSelect) { align-items: stretch !important; flex-direction: column !important; gap: .5rem; }
    #serviceIdBadge, #servicePriceBadge, #serviceCountBadge, #serviceOtpBadge,
    #mailServiceIdBadge, #mailCountBadge, #mailPriceBadge { margin-left: 0 !important; width: max-content; }
    .service-panel-header { align-items: flex-start !important; flex-direction: column; }
    .premium-table-card .card-header > .d-flex { align-items: flex-start !important; flex-direction: column; gap: .65rem; }
}

/* ===== Rental pages clarity redesign 2026: clean, readable, modern =====
   Scope: /Rent/Index, /Rental, /RentV3/Index, /RentV4/Index, /MailRental, /RentMail2/Index */
.rent-overview-shell {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 560px) !important;
    align-items: stretch !important;
    gap: 1rem !important;
    min-height: auto !important;
    padding: 1.15rem !important;
    margin: 0 0 1.05rem !important;
    border-radius: 24px !important;
    color: #f8fbff !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(56,189,248,.20), transparent 28%),
        radial-gradient(circle at 18% 0%, rgba(59,130,246,.16), transparent 28%),
        linear-gradient(135deg, #0d1930 0%, #0a1324 48%, #08111f 100%) !important;
    border: 1px solid rgba(125, 211, 252, .20) !important;
    box-shadow: 0 18px 45px rgba(2, 8, 23, .34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.rent-overview-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.62), transparent 82%) !important;
    pointer-events: none !important;
}
.rent-overview-shell::after {
    content: "" !important;
    position: absolute !important;
    right: -74px !important;
    top: -96px !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(125,211,252,.18) !important;
    background: radial-gradient(circle, rgba(34,211,238,.20), transparent 65%) !important;
    opacity: .72 !important;
    pointer-events: none !important;
}
.rent-overview-head,
.rent-overview-cards { position: relative !important; z-index: 1 !important; }
.rent-overview-head {
    min-width: 0 !important;
    padding: .35rem .2rem !important;
    justify-content: center !important;
}
.rent-overview-head::before {
    content: "DỄ NHÌN • TỐI ƯU THAO TÁC" !important;
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-bottom: .7rem !important;
    padding: .36rem .62rem !important;
    border-radius: 999px !important;
    color: #67e8f9 !important;
    background: rgba(8,145,178,.13) !important;
    border: 1px solid rgba(103,232,249,.24) !important;
    font-size: .72rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}
.rent-overview-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.45rem, 2vw, 2rem) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -.035em !important;
    text-shadow: 0 8px 28px rgba(34,211,238,.14) !important;
}
.rent-overview-subtitle {
    max-width: 680px !important;
    margin-top: .58rem !important;
    color: #b8c7dc !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
}
.rent-overview-cards {
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .78rem !important;
    min-width: 0 !important;
}
.rent-overview-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 118px !important;
    padding: 1rem !important;
    border-radius: 18px !important;
    background: rgba(15, 27, 48, .82) !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(2,8,23,.18) !important;
}
.rent-overview-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #22d3ee, #60a5fa, #34d399) !important;
}
.rent-overview-card::after { display: none !important; }
.rent-overview-label {
    display: block !important;
    margin-bottom: .52rem !important;
    color: #9ddcff !important;
    font-size: .74rem !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}
.rent-overview-value {
    display: block !important;
    color: #ffffff !important;
    font-size: 2.08rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
}
.rent-overview-meta {
    display: block !important;
    margin-top: .64rem !important;
    color: #c1cede !important;
    font-size: .9rem !important;
    line-height: 1.35 !important;
}

.rent-overview-shell ~ .service-panel-card,
.rent-overview-shell ~ .premium-module-card,
.rent-overview-shell ~ .premium-table-card {
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    background: linear-gradient(180deg, rgba(13, 24, 43, .98), rgba(9, 18, 33, .98)) !important;
    box-shadow: 0 16px 36px rgba(2,8,23,.28), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.rent-overview-shell ~ .service-panel-card > .card-header,
.rent-overview-shell ~ .premium-module-card > .card-header,
.rent-overview-shell ~ .premium-table-card > .card-header,
.rent-overview-shell ~ .card .service-panel-header,
.rent-overview-shell ~ .card-header.bg-primary,
.rent-overview-shell ~ .card-header.bg-dark {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .85rem !important;
    padding: 1rem 1.15rem !important;
    color: #f8fbff !important;
    background: linear-gradient(90deg, rgba(18, 34, 60, .98), rgba(13, 27, 48, .98)) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .16) !important;
    text-transform: none !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}
.rent-overview-shell ~ .service-panel-card .card-header span:first-child::before,
.rent-overview-shell ~ .premium-table-card .card-header span:first-child::before {
    content: "" !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    margin-right: .55rem !important;
    border-radius: 50% !important;
    background: #22d3ee !important;
    box-shadow: 0 0 16px rgba(34,211,238,.62) !important;
    vertical-align: 0 !important;
}
.rent-overview-shell ~ .service-panel-card .card-body,
.rent-overview-shell ~ .premium-module-card .card-body,
.rent-overview-shell ~ .premium-table-card .card-body {
    color: #e7eef8 !important;
    background: rgba(8, 17, 32, .62) !important;
}
.rent-overview-shell ~ .service-panel-card label,
.rent-overview-shell ~ .premium-module-card label {
    color: #dbeafe !important;
    font-weight: 850 !important;
}
.rent-overview-shell ~ .service-panel-card .form-row,
.rent-overview-shell ~ .premium-module-card .form-row {
    row-gap: .5rem !important;
}
.rent-overview-shell ~ .service-panel-card .form-control,
.rent-overview-shell ~ .service-panel-card .custom-select,
.rent-overview-shell ~ .service-panel-card .input-group-text,
.rent-overview-shell ~ .premium-module-card .form-control,
.rent-overview-shell ~ .premium-module-card .custom-select,
.rent-overview-shell ~ .premium-module-card .input-group-text,
.rent-overview-shell ~ .premium-table-card .custom-select {
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, .26) !important;
    background: rgba(5, 12, 24, .92) !important;
    color: #f8fbff !important;
    font-size: .95rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.rent-overview-shell ~ .service-panel-card .form-control:focus,
.rent-overview-shell ~ .service-panel-card .custom-select:focus,
.rent-overview-shell ~ .premium-module-card .form-control:focus,
.rent-overview-shell ~ .premium-module-card .custom-select:focus {
    border-color: rgba(34, 211, 238, .86) !important;
    box-shadow: 0 0 0 .18rem rgba(34,211,238,.16) !important;
    background: rgba(8, 18, 34, .98) !important;
}
.rent-overview-shell ~ .service-panel-card .form-control::placeholder,
.rent-overview-shell ~ .premium-module-card .form-control::placeholder { color: #8fa4bf !important; }
.rent-overview-shell ~ .service-panel-card select.form-control option,
.rent-overview-shell ~ .premium-module-card select.form-control option,
.rent-overview-shell ~ .service-panel-card .custom-select option,
.rent-overview-shell ~ .premium-module-card .custom-select option {
    color: #f8fbff !important;
    background: #0b1324 !important;
}
.rent-overview-shell ~ .service-panel-card .input-group,
.rent-overview-shell ~ .premium-module-card .input-group {
    border-radius: 14px !important;
}
.rent-overview-shell ~ .service-panel-card .filter-service,
.rent-overview-shell ~ .premium-module-card .filter-service {
    min-height: 36px !important;
    padding: .45rem .75rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(125, 211, 252, .30) !important;
    color: #dbeafe !important;
    background: rgba(15, 27, 48, .86) !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}
.rent-overview-shell ~ .service-panel-card .filter-service.btn-primary,
.rent-overview-shell ~ .service-panel-card .filter-service.active,
.rent-overview-shell ~ .service-panel-card .filter-service:hover,
.rent-overview-shell ~ .premium-module-card .filter-service.btn-primary,
.rent-overview-shell ~ .premium-module-card .filter-service.active,
.rent-overview-shell ~ .premium-module-card .filter-service:hover {
    color: #06121f !important;
    background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
    border-color: rgba(103,232,249,.86) !important;
    box-shadow: 0 10px 24px rgba(34,211,238,.16) !important;
}
.rent-overview-shell ~ .service-panel-card .btn-success,
.rent-overview-shell ~ .premium-module-card .btn-success,
.rent-overview-shell ~ .premium-table-card .btn-success,
.rent-overview-shell ~ .service-panel-card .btn-primary,
.rent-overview-shell ~ .premium-table-card .btn-primary {
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 14px !important;
    color: #06121f !important;
    font-weight: 950 !important;
    background: linear-gradient(135deg, #34d399, #22d3ee) !important;
    box-shadow: 0 12px 26px rgba(16,185,129,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.rent-overview-shell ~ .service-panel-card .btn-success:hover,
.rent-overview-shell ~ .premium-module-card .btn-success:hover,
.rent-overview-shell ~ .premium-table-card .btn-success:hover,
.rent-overview-shell ~ .service-panel-card .btn-primary:hover,
.rent-overview-shell ~ .premium-table-card .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 32px rgba(34,211,238,.20), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.rent-overview-shell ~ .premium-table-card .btn,
.rent-overview-shell ~ .service-panel-card .btn,
.rent-overview-shell ~ .premium-module-card .btn {
    border-radius: 12px !important;
    font-weight: 850 !important;
}
.rent-overview-shell ~ .premium-table-card .btn-outline-primary,
.rent-overview-shell ~ .service-panel-card .btn-outline-primary,
.rent-overview-shell ~ .premium-module-card .btn-outline-primary {
    color: #9ddcff !important;
    border-color: rgba(56,189,248,.40) !important;
    background: rgba(8, 17, 32, .78) !important;
}
.rent-overview-shell ~ .premium-table-card .btn-outline-success,
.rent-overview-shell ~ .service-panel-card .btn-outline-success {
    color: #86efac !important;
    border-color: rgba(52,211,153,.40) !important;
    background: rgba(8, 17, 32, .78) !important;
}
.rent-overview-shell ~ .premium-table-card .btn-outline-danger,
.rent-overview-shell ~ .service-panel-card .btn-outline-danger {
    color: #fda4af !important;
    border-color: rgba(251,113,133,.40) !important;
    background: rgba(8, 17, 32, .78) !important;
}
.rent-overview-shell ~ .premium-table-card .btn-outline-secondary,
.rent-overview-shell ~ .service-panel-card .btn-outline-secondary,
.rent-overview-shell ~ .premium-module-card .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: rgba(148,163,184,.28) !important;
    background: rgba(8, 17, 32, .78) !important;
}
.rent-overview-shell ~ .service-panel-card .badge,
.rent-overview-shell ~ .premium-module-card .badge,
.rent-overview-shell ~ .premium-table-card .badge {
    border-radius: 999px !important;
    padding: .43rem .62rem !important;
    font-weight: 900 !important;
    letter-spacing: .005em !important;
}
.rent-overview-shell ~ .service-panel-card .badge-warning,
.rent-overview-shell ~ .premium-table-card .badge-warning { color: #422006 !important; background: #fde68a !important; }
.rent-overview-shell ~ .service-panel-card .badge-info,
.rent-overview-shell ~ .premium-table-card .badge-info { color: #042f3b !important; background: #67e8f9 !important; }
.rent-overview-shell ~ .service-panel-card .badge-success,
.rent-overview-shell ~ .premium-table-card .badge-success { color: #052e16 !important; background: #86efac !important; }
.rent-overview-shell ~ .service-panel-card .badge-primary,
.rent-overview-shell ~ .premium-table-card .badge-primary { color: #ffffff !important; background: #3b82f6 !important; }
.rent-overview-shell ~ .service-panel-card .badge-secondary,
.rent-overview-shell ~ .premium-table-card .badge-secondary { color: #e2e8f0 !important; background: rgba(71,85,105,.82) !important; border: 1px solid rgba(148,163,184,.24) !important; }
.rent-overview-shell ~ .service-panel-card .badge-light,
.rent-overview-shell ~ .premium-table-card .badge-light { color: #e7eef8 !important; background: rgba(15,23,42,.96) !important; border: 1px solid rgba(148,163,184,.28) !important; }
.rent-overview-shell ~ .premium-table-card .table-responsive,
.rent-overview-shell ~ .service-panel-card .table-responsive {
    border-radius: 0 0 22px 22px !important;
    max-height: none !important;
}
.rent-overview-shell ~ .premium-table-card table,
.rent-overview-shell ~ .service-panel-card table,
.rent-overview-shell ~ .premium-module-card table,
.rent-overview-shell ~ .card #mailRentalTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.rent-overview-shell ~ .premium-table-card thead th,
.rent-overview-shell ~ .service-panel-card thead th,
.rent-overview-shell ~ .premium-module-card thead th,
.rent-overview-shell ~ .card #mailRentalTable thead th,
.rent-overview-shell ~ .card .thead-light th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    padding: .88rem .9rem !important;
    color: #dbeafe !important;
    background: #101d33 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .22) !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
}
.rent-overview-shell ~ .premium-table-card tbody td,
.rent-overview-shell ~ .service-panel-card tbody td,
.rent-overview-shell ~ .premium-module-card tbody td,
.rent-overview-shell ~ .card #mailRentalTable tbody td {
    padding: .82rem .9rem !important;
    color: #edf5ff !important;
    border-top: 1px solid rgba(148, 163, 184, .12) !important;
    vertical-align: middle !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
}
.rent-overview-shell ~ .premium-table-card tbody tr,
.rent-overview-shell ~ .service-panel-card tbody tr,
.rent-overview-shell ~ .premium-module-card tbody tr,
.rent-overview-shell ~ .card #mailRentalTable tbody tr {
    background: rgba(9, 18, 33, .76) !important;
    transition: background .16s ease, box-shadow .16s ease !important;
}
.rent-overview-shell ~ .premium-table-card tbody tr:nth-child(even),
.rent-overview-shell ~ .service-panel-card tbody tr:nth-child(even),
.rent-overview-shell ~ .premium-module-card tbody tr:nth-child(even),
.rent-overview-shell ~ .card #mailRentalTable tbody tr:nth-child(even) {
    background: rgba(12, 23, 42, .82) !important;
}
.rent-overview-shell ~ .premium-table-card tbody tr:hover,
.rent-overview-shell ~ .service-panel-card tbody tr:hover,
.rent-overview-shell ~ .premium-module-card tbody tr:hover,
.rent-overview-shell ~ .card #mailRentalTable tbody tr:hover {
    background: rgba(20, 42, 72, .96) !important;
    box-shadow: inset 4px 0 0 #22d3ee !important;
}
.rent-overview-shell ~ .premium-table-card .small,
.rent-overview-shell ~ .service-panel-card .small,
.rent-overview-shell ~ .premium-module-card .small,
.rent-overview-shell ~ .card #mailRentalTable .small,
.rent-overview-shell ~ .premium-table-card .text-muted,
.rent-overview-shell ~ .card #mailRentalTable .text-muted {
    color: #a9b9ce !important;
}
.rent-overview-shell ~ .alert {
    border-radius: 18px !important;
    border: 1px solid rgba(125,211,252,.24) !important;
    background: rgba(8, 24, 40, .92) !important;
    color: #e7f6ff !important;
}
.rent-overview-shell ~ nav .pagination .page-link,
.rent-overview-shell ~ .pagination .page-link {
    min-width: 40px !important;
    text-align: center !important;
    color: #dbeafe !important;
    border-color: rgba(148, 163, 184, .20) !important;
    background: rgba(13, 24, 43, .94) !important;
}
.rent-overview-shell ~ nav .pagination .page-item.active .page-link,
.rent-overview-shell ~ .pagination .page-item.active .page-link {
    color: #06121f !important;
    border-color: rgba(103,232,249,.72) !important;
    background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
}
.rent-overview-shell ~ .modal .modal-content,
.modal-content:has(#balanceModalMessage) {
    border-radius: 22px !important;
    background: linear-gradient(180deg, #101d33, #0b1324) !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
}
.rent-overview-shell ~ .modal .modal-header,
.rent-overview-shell ~ .modal .modal-footer { border-color: rgba(148, 163, 184, .16) !important; }
.service-panel-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: rgba(15, 27, 48, .86) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
}
.service-panel-toggle-icon::before,
.service-panel-toggle-icon::after { background: #dbeafe !important; }
@media (max-width: 1199.98px) {
    .rent-overview-shell { grid-template-columns: 1fr !important; }
    .rent-overview-cards { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 767.98px) {
    .rent-overview-shell { padding: .9rem !important; border-radius: 20px !important; }
    .rent-overview-cards { grid-template-columns: 1fr !important; }
    .rent-overview-card { min-height: auto !important; }
    .rent-overview-shell ~ .service-panel-card > .card-header,
    .rent-overview-shell ~ .premium-module-card > .card-header,
    .rent-overview-shell ~ .premium-table-card > .card-header,
    .rent-overview-shell ~ .card .service-panel-header { align-items: flex-start !important; flex-direction: column !important; }
    .rent-overview-shell ~ .premium-table-card .card-header > .d-flex { align-items: flex-start !important; flex-direction: column !important; gap: .65rem !important; }
    .rent-overview-shell ~ .service-panel-card .d-flex.align-items-center { align-items: stretch !important; flex-direction: column !important; gap: .5rem !important; }
    #serviceIdBadge, #servicePriceBadge, #serviceCountBadge, #serviceOtpBadge,
    #mailServiceIdBadge, #mailCountBadge, #mailPriceBadge { margin-left: 0 !important; width: max-content !important; max-width: 100% !important; }
}


/* GLASS ALIGN HELPERS */

.premium-module-card > .card-header .d-flex > .form-inline,
.premium-table-card > .card-header .d-flex > .form-inline,
.card > .service-panel-header .d-flex > .form-inline,
.service-panel-header .d-flex > form.form-inline {
    margin-left: auto !important;
    justify-content: flex-end !important;
}
.premium-module-card > .card-header .d-flex > .form-inline .custom-select,
.premium-table-card > .card-header .d-flex > .form-inline .custom-select,
.card > .service-panel-header .d-flex > .form-inline .custom-select,
.service-panel-header .d-flex > form.form-inline .custom-select {
    min-width: 96px;
}
.page-display-right,
.page-display-right .form-inline {
    margin-left: auto !important;
    justify-content: flex-end !important;
}
@media (max-width: 767.98px) {
    .premium-module-card > .card-header .d-flex > .form-inline,
    .premium-table-card > .card-header .d-flex > .form-inline,
    .card > .service-panel-header .d-flex > .form-inline,
    .service-panel-header .d-flex > form.form-inline,
    .page-display-right,
    .page-display-right .form-inline {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
}


/* UTILITY GLASS TOOL PAGES */
.utility-glass-shell {
    --ug-border: rgba(255,200,87,.22);
    --ug-border-blue: rgba(56,189,248,.30);
    --ug-text: #f8fbff;
    --ug-muted: #9bb2d2;
    --ug-green: #36e58f;
    --ug-red: #ff5570;
    --ug-cyan: #38d5ff;
    color: var(--ug-text);
    position: relative;
}
.utility-glass-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 4%, rgba(47,140,255,.14), transparent 28%),
        radial-gradient(circle at 86% 9%, rgba(255,200,87,.12), transparent 24%),
        radial-gradient(circle at 50% 86%, rgba(56,213,255,.08), transparent 28%);
}
.utility-glass-shell .utility-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(47,140,255,.18), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(255,200,87,.18), transparent 30%),
        linear-gradient(135deg, rgba(3,10,24,.98), rgba(7,20,46,.94) 55%, rgba(8,10,18,.98));
    border: 1px solid var(--ug-border);
    box-shadow: 0 20px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
.utility-glass-shell .utility-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.035) 25px 26px, transparent 27px 64px),
        linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.025) 25px 26px, transparent 27px 64px);
}
.utility-glass-shell .utility-hero > * { position: relative; z-index: 1; }
.utility-glass-shell .utility-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffe7a3;
    font-weight: 900;
    margin-bottom: 8px;
}
.utility-glass-shell .utility-title {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 950;
    text-shadow: 0 0 24px rgba(47,140,255,.18);
}
.utility-glass-shell .utility-subtitle {
    margin: 8px 0 0;
    color: var(--ug-muted);
    line-height: 1.65;
}
.utility-glass-shell > h4,
.utility-glass-shell > h5 { display: none; }
.utility-glass-shell .premium-module-card,
.utility-glass-shell .card {
    border-radius: 20px !important;
    overflow: hidden;
    border: 1px solid var(--ug-border) !important;
    background: linear-gradient(180deg, rgba(7,18,38,.92), rgba(3,10,24,.96)) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.utility-glass-shell .card-header,
.utility-glass-shell .service-panel-header {
    border-bottom: 1px solid rgba(255,200,87,.18) !important;
    background: linear-gradient(90deg, rgba(12,28,55,.94), rgba(7,14,27,.96)) !important;
    color: #fff !important;
}
.utility-glass-shell .card-body,
.utility-glass-shell .card-footer { background: transparent !important; }
.utility-glass-shell .text-muted,
.utility-glass-shell small,
.utility-glass-shell label,
.utility-glass-shell .custom-control-label,
.utility-glass-shell .small { color: var(--ug-muted) !important; }
.utility-glass-shell strong,
.utility-glass-shell b,
.utility-glass-shell .font-weight-bold,
.utility-glass-shell .font-weight-semibold { color: #fff2c4; }
.utility-glass-shell .form-control,
.utility-glass-shell .custom-select,
.utility-glass-shell textarea,
.utility-glass-shell input[type="text"],
.utility-glass-shell input[type="number"],
.utility-glass-shell input[type="search"],
.utility-glass-shell .input-group-text {
    border-radius: 12px !important;
}
.utility-glass-shell .form-control,
.utility-glass-shell .custom-select,
.utility-glass-shell textarea,
.utility-glass-shell input[type="text"],
.utility-glass-shell input[type="number"],
.utility-glass-shell input[type="search"] {
    background: rgba(5,12,24,.86) !important;
    border: 1px solid rgba(255,200,87,.22) !important;
    color: #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-weight: 700;
}
.utility-glass-shell .form-control::placeholder,
.utility-glass-shell textarea::placeholder { color: #8fa8cc !important; }
.utility-glass-shell .form-control:focus,
.utility-glass-shell .custom-select:focus,
.utility-glass-shell textarea:focus,
.utility-glass-shell input:focus {
    border-color: rgba(56,189,248,.74) !important;
    box-shadow: 0 0 0 .17rem rgba(56,189,248,.13) !important;
    outline: none !important;
}
.utility-glass-shell .input-group-text {
    background: rgba(10,24,48,.82) !important;
    border: 1px solid rgba(56,189,248,.24) !important;
    color: #ffe7a3 !important;
}
.utility-glass-shell .btn,
.utility-glass-shell .page-link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px !important;
    border: 1px solid var(--ug-border-blue) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
    background-color: rgba(8,18,36,.42) !important;
    color: #eef7ff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: .15s ease-in-out;
}
.utility-glass-shell .btn:hover,
.utility-glass-shell .page-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255,200,87,.56) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,200,87,.10), 0 14px 30px rgba(0,0,0,.22), 0 0 22px rgba(56,189,248,.12) !important;
}
.utility-glass-shell .btn-danger,
.utility-glass-shell .btn-outline-danger {
    border-color: rgba(255,85,112,.36) !important;
    color: #ffd3d9 !important;
    background-color: rgba(53,11,18,.34) !important;
}
.utility-glass-shell .btn-success,
.utility-glass-shell .btn-outline-success {
    border-color: rgba(54,229,143,.36) !important;
    color: #d9ffeb !important;
    background-color: rgba(7,45,30,.34) !important;
}
.utility-glass-shell .btn-warning,
.utility-glass-shell .btn-outline-warning {
    border-color: rgba(255,186,57,.36) !important;
    color: #ffe6a8 !important;
    background-color: rgba(65,45,8,.34) !important;
}
.utility-glass-shell .table {
    color: #e8eef8 !important;
    margin-bottom: 0;
}
.utility-glass-shell .table thead th {
    color: #bcd0ec !important;
    background: linear-gradient(180deg, rgba(9,19,36,.98), rgba(6,13,25,.98)) !important;
    border-color: rgba(255,200,87,.14) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.utility-glass-shell .table tbody td,
.utility-glass-shell .table tbody th {
    color: #eef6ff !important;
    border-color: rgba(255,255,255,.06) !important;
    background: rgba(6,13,25,.42) !important;
    vertical-align: middle;
}
.utility-glass-shell .table tbody tr:hover td,
.utility-glass-shell .table tbody tr:hover th {
    background: rgba(14,31,59,.82) !important;
    box-shadow: inset 3px 0 0 rgba(255,200,87,.85);
}
.utility-glass-shell .border,
.utility-glass-shell .rounded {
    border-color: rgba(56,189,248,.20) !important;
    background: rgba(5,12,24,.46) !important;
}
.utility-glass-shell .alert {
    border-radius: 14px !important;
    border: 1px solid rgba(56,189,248,.24) !important;
    background: rgba(4,66,98,.20) !important;
    color: #c4edff !important;
}
.utility-glass-shell .alert-danger { border-color: rgba(255,85,112,.28) !important; background: rgba(79,17,29,.46) !important; color:#ffd9df !important; }
.utility-glass-shell .alert-warning { border-color: rgba(255,186,57,.28) !important; background: rgba(86,57,10,.35) !important; color:#ffe3a8 !important; }
.utility-glass-shell .alert-success { border-color: rgba(54,229,143,.24) !important; background: rgba(18,164,119,.18) !important; color:#dfffee !important; }
.utility-glass-shell .progress {
    border-radius: 999px;
    background: rgba(5,12,24,.86) !important;
    border: 1px solid rgba(56,189,248,.18);
}
.utility-glass-shell .progress-bar {
    background: linear-gradient(90deg, rgba(56,213,255,.80), rgba(54,229,143,.78)) !important;
    color: #02101a !important;
    font-weight: 900;
}
.utility-glass-shell .pagination { gap: 8px; flex-wrap: wrap; }
.utility-glass-shell .page-item.active .page-link {
    border-color: rgba(255,200,87,.68) !important;
    color: #fff4d1 !important;
    background: linear-gradient(180deg, rgba(255,216,117,.22), rgba(245,158,11,.12)) !important;
    background-color: rgba(113,72,9,.24) !important;
}
.utility-glass-shell .page-item.disabled .page-link { opacity: .45; }
@media (max-width: 991.98px) {
    .utility-glass-shell .utility-title { font-size: 26px; }
    .utility-glass-shell .card-header.justify-content-between,
    .utility-glass-shell .service-panel-header.justify-content-between { align-items: flex-start !important; flex-direction: column !important; gap: .65rem; }
}



/* ADMIN GLASS AUTO PAGES - gold/cyan dark premium */
.admin-glass-auto {
    --ag-bg: #020817;
    --ag-panel: rgba(7,18,38,.92);
    --ag-panel-2: rgba(9,24,52,.86);
    --ag-soft: rgba(5,12,24,.62);
    --ag-border: rgba(255,200,87,.22);
    --ag-border-blue: rgba(56,189,248,.30);
    --ag-gold: #ffc857;
    --ag-cyan: #38d5ff;
    --ag-green: #36e58f;
    --ag-red: #ff5570;
    --ag-purple: #a78bfa;
    --ag-text: #f8fbff;
    --ag-muted: #9bb2d2;
    color: var(--ag-text);
    position: relative;
}
.admin-glass-auto::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 4%, rgba(47,140,255,.14), transparent 28%),
        radial-gradient(circle at 86% 9%, rgba(255,200,87,.12), transparent 24%),
        radial-gradient(circle at 50% 86%, rgba(56,213,255,.08), transparent 28%);
}
.admin-glass-auto .admin-glass-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 8% 0%, rgba(47,140,255,.18), transparent 32%),
        radial-gradient(circle at 88% 12%, rgba(255,200,87,.18), transparent 30%),
        linear-gradient(135deg, rgba(3,10,24,.98), rgba(7,20,46,.94) 55%, rgba(8,10,18,.98));
    border: 1px solid var(--ag-border);
    box-shadow: 0 20px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-glass-auto .admin-glass-hero::after {
    content:"";
    position:absolute;
    inset:0;
    opacity:.34;
    pointer-events:none;
    background:
        linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,.035) 25px 26px, transparent 27px 64px),
        linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,.025) 25px 26px, transparent 27px 64px);
}
.admin-glass-auto .admin-glass-hero > * { position: relative; z-index: 1; }
.admin-glass-auto .admin-glass-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#ffe7a3;
    font-weight:900;
    margin-bottom:8px;
}
.admin-glass-auto .admin-glass-title {
    margin:0;
    color:#fff;
    font-size:30px;
    font-weight:950;
    text-shadow:0 0 24px rgba(47,140,255,.18);
}
.admin-glass-auto .admin-glass-subtitle {
    margin:8px 0 0;
    color: var(--ag-muted);
    line-height:1.65;
}
.admin-glass-auto > h5.mb-3,
.admin-glass-auto > h5.premium-page-heading,
.admin-glass-auto > .premium-page-note.mb-3 {
    display: none !important;
}
.admin-glass-auto .card,
.admin-glass-auto .premium-module-card,
.admin-glass-auto .shadow-sm,
.admin-glass-auto .panel,
.admin-glass-auto .list-group-item {
    border-radius: 20px !important;
    border: 1px solid var(--ag-border) !important;
    background: linear-gradient(180deg, rgba(7,18,38,.92), rgba(3,10,24,.96)) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
    color: var(--ag-text) !important;
}
.admin-glass-auto .card-header,
.admin-glass-auto .service-panel-header,
.admin-glass-auto .modal-header {
    border-bottom: 1px solid rgba(255,200,87,.18) !important;
    background: linear-gradient(90deg, rgba(12,28,55,.94), rgba(7,14,27,.96)) !important;
    color:#fff !important;
}
.admin-glass-auto .card-footer,
.admin-glass-auto .card-body,
.admin-glass-auto .modal-body,
.admin-glass-auto .modal-footer {
    background: transparent !important;
    color: var(--ag-text) !important;
}
.admin-glass-auto .card-header .d-flex > form.form-inline,
.admin-glass-auto .card-header .d-flex > .d-flex,
.admin-glass-auto .service-panel-header .d-flex > form.form-inline,
.admin-glass-auto .page-display-right {
    margin-left: auto !important;
    justify-content: flex-end !important;
}
.admin-glass-auto h1,
.admin-glass-auto h2,
.admin-glass-auto h3,
.admin-glass-auto h4,
.admin-glass-auto h5,
.admin-glass-auto h6,
.admin-glass-auto strong,
.admin-glass-auto label {
    color: #f8fbff !important;
}
.admin-glass-auto .text-muted,
.admin-glass-auto small,
.admin-glass-auto .small {
    color: var(--ag-muted) !important;
}
.admin-glass-auto .text-success { color: #7bf5b2 !important; }
.admin-glass-auto .text-warning { color: #ffe199 !important; }
.admin-glass-auto .text-danger { color: #ffb4bf !important; }
.admin-glass-auto .text-info { color: #a7ecff !important; }

.admin-glass-auto .form-control,
.admin-glass-auto .custom-select,
.admin-glass-auto textarea,
.admin-glass-auto select,
.admin-glass-auto .input-group-text {
    border-radius: 12px !important;
}
.admin-glass-auto .form-control,
.admin-glass-auto .custom-select,
.admin-glass-auto textarea,
.admin-glass-auto select {
    background: rgba(5,12,24,.86) !important;
    border: 1px solid rgba(255,200,87,.22) !important;
    color: #f8fbff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-weight: 700;
}
.admin-glass-auto .form-control::placeholder,
.admin-glass-auto textarea::placeholder {
    color: #8fa8cc !important;
}
.admin-glass-auto .form-control:focus,
.admin-glass-auto .custom-select:focus,
.admin-glass-auto textarea:focus,
.admin-glass-auto select:focus {
    border-color: rgba(56,189,248,.74) !important;
    box-shadow: 0 0 0 .17rem rgba(56,189,248,.13) !important;
    outline: none !important;
}
.admin-glass-auto .input-group-text {
    background: rgba(10,24,48,.82) !important;
    border: 1px solid rgba(56,189,248,.24) !important;
    color: #ffe7a3 !important;
}
.admin-glass-auto .form-check-input,
.admin-glass-auto .custom-control-input {
    accent-color: #38d5ff;
}
.admin-glass-auto .btn,
.admin-glass-auto .pagination .page-link {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px !important;
    border: 1px solid var(--ag-border-blue) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02)) !important;
    background-color: rgba(8,18,36,.42) !important;
    color: #eef7ff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: .15s ease-in-out;
}
.admin-glass-auto .btn:hover,
.admin-glass-auto .pagination .page-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255,200,87,.56) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,200,87,.10), 0 14px 30px rgba(0,0,0,.22), 0 0 22px rgba(56,189,248,.12) !important;
}
.admin-glass-auto .btn-primary,
.admin-glass-auto .btn-outline-primary {
    border-color: rgba(56,213,255,.46) !important;
    background-color: rgba(8,28,44,.36) !important;
    color:#dcfaff !important;
}
.admin-glass-auto .btn-success,
.admin-glass-auto .btn-outline-success {
    border-color: rgba(54,229,143,.42) !important;
    background-color: rgba(7,45,30,.36) !important;
    color:#d9ffeb !important;
}
.admin-glass-auto .btn-danger,
.admin-glass-auto .btn-outline-danger {
    border-color: rgba(255,85,112,.42) !important;
    background-color: rgba(53,11,18,.36) !important;
    color:#ffd7df !important;
}
.admin-glass-auto .btn-warning,
.admin-glass-auto .btn-outline-warning {
    border-color: rgba(255,200,87,.46) !important;
    background-color: rgba(73,48,8,.36) !important;
    color:#fff1bd !important;
}
.admin-glass-auto .btn-info,
.admin-glass-auto .btn-outline-info {
    border-color: rgba(167,139,250,.42) !important;
    background-color: rgba(34,25,74,.36) !important;
    color:#efe9ff !important;
}
.admin-glass-auto .btn-secondary,
.admin-glass-auto .btn-outline-secondary,
.admin-glass-auto .btn-light,
.admin-glass-auto .btn-outline-light,
.admin-glass-auto .btn-dark,
.admin-glass-auto .btn-outline-dark {
    border-color: rgba(148,163,184,.30) !important;
    background-color: rgba(15,23,42,.44) !important;
    color:#e5edf9 !important;
}
.admin-glass-auto .btn-block {
    display: flex !important;
    width: 100% !important;
}
.admin-glass-auto .table {
    color: #e8eef8 !important;
    margin-bottom: 0;
}
.admin-glass-auto .table thead th {
    color:#bcd0ec !important;
    background: linear-gradient(180deg, rgba(9,19,36,.98), rgba(6,13,25,.98)) !important;
    border-color: rgba(255,200,87,.14) !important;
    font-size: .76rem !important;
    font-weight: 950 !important;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.admin-glass-auto .table tbody td,
.admin-glass-auto .table tbody th {
    color:#eef6ff !important;
    border-color: rgba(255,255,255,.06) !important;
    background: rgba(6,13,25,.42) !important;
    vertical-align: middle;
}
.admin-glass-auto .table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}
.admin-glass-auto .table tbody tr:hover td,
.admin-glass-auto .table tbody tr:hover th {
    background: rgba(14,31,59,.82) !important;
    box-shadow: inset 3px 0 0 rgba(255,200,87,.85);
}
.admin-glass-auto .badge {
    border-radius: 999px !important;
    font-weight: 900 !important;
    padding: .45rem .7rem;
}
.admin-glass-auto .badge-success {
    background: rgba(54,229,143,.16) !important;
    color:#b7ffe0 !important;
    border: 1px solid rgba(54,229,143,.26);
}
.admin-glass-auto .badge-warning {
    background: rgba(255,186,57,.16) !important;
    color:#ffe09b !important;
    border: 1px solid rgba(255,186,57,.26);
}
.admin-glass-auto .badge-danger {
    background: rgba(255,85,112,.16) !important;
    color:#ffd3d9 !important;
    border: 1px solid rgba(255,85,112,.26);
}
.admin-glass-auto .badge-info {
    background: rgba(56,189,248,.16) !important;
    color:#bcecff !important;
    border: 1px solid rgba(56,189,248,.26);
}
.admin-glass-auto .badge-secondary {
    background: rgba(148,163,184,.16) !important;
    color:#dbeafe !important;
    border: 1px solid rgba(148,163,184,.22);
}
.admin-glass-auto .alert {
    border-radius: 14px !important;
    color: #eef7ff !important;
    background: rgba(8,18,36,.54) !important;
    border: 1px solid rgba(56,189,248,.20) !important;
}
.admin-glass-auto .alert-success { border-color: rgba(54,229,143,.24) !important; background: rgba(18,164,119,.16) !important; color:#dfffee !important; }
.admin-glass-auto .alert-danger { border-color: rgba(255,85,112,.28) !important; background: rgba(79,17,29,.46) !important; color:#ffd9df !important; }
.admin-glass-auto .alert-warning { border-color: rgba(255,200,87,.28) !important; background: rgba(73,48,8,.30) !important; color:#fff1bd !important; }
.admin-glass-auto .pagination { gap:8px; flex-wrap: wrap; }
.admin-glass-auto .pagination .page-item.active .page-link {
    border-color: rgba(255,200,87,.68) !important;
    color:#fff4d1 !important;
    background: linear-gradient(180deg, rgba(255,216,117,.22), rgba(245,158,11,.12)) !important;
    background-color: rgba(113,72,9,.24) !important;
}
.admin-glass-auto .pagination .page-item.disabled .page-link {
    opacity:.45;
}
@media (max-width: 991.98px) {
    .admin-glass-auto .admin-glass-title { font-size: 26px; }
    .admin-glass-auto .card-header .d-flex > form.form-inline,
    .admin-glass-auto .card-header .d-flex > .d-flex,
    .admin-glass-auto .service-panel-header .d-flex > form.form-inline,
    .admin-glass-auto .page-display-right {
        width:100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: .5rem;
    }
}


/* ADMIN GLASS EXTRA PAGES */

.admin-glass-auto .container-fluid,
.admin-glass-auto .home-server-admin-page,
.admin-glass-auto .demo-feed-page {
    color: var(--ag-text) !important;
}
.admin-glass-auto input[type="file"],
.admin-glass-auto .form-control-file {
    color: #dbeafe !important;
    background: rgba(5,12,24,.56) !important;
    border: 1px dashed rgba(56,189,248,.28) !important;
    border-radius: 12px !important;
    padding: .55rem .7rem !important;
}
.admin-glass-auto code,
.admin-glass-auto pre {
    color: #bff3ff !important;
    background: rgba(5,12,24,.72) !important;
    border: 1px solid rgba(56,189,248,.18) !important;
    border-radius: 10px !important;
}
.admin-glass-auto .list-group-item,
.admin-glass-auto .home-server-stat-card,
.admin-glass-auto .demo-feed-stat,
.admin-glass-auto .demo-feed-preview,
.admin-glass-auto .demo-feed-card {
    border: 1px solid var(--ag-border) !important;
    background: linear-gradient(180deg, rgba(7,18,38,.92), rgba(3,10,24,.96)) !important;
    color: var(--ag-text) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.admin-glass-auto .home-server-title,
.admin-glass-auto .demo-feed-title,
.admin-glass-auto .stat-value,
.admin-glass-auto .metric-value {
    color: #f8fbff !important;
}
.admin-glass-auto .home-server-subtitle,
.admin-glass-auto .demo-feed-subtitle,
.admin-glass-auto .stat-label,
.admin-glass-auto .metric-label {
    color: var(--ag-muted) !important;
}
.admin-glass-auto .btn-group .btn,
.admin-glass-auto .btn-toolbar .btn {
    margin-right: .25rem;
}
.admin-glass-auto .dropdown-menu {
    background: rgba(7,18,38,.98) !important;
    border: 1px solid rgba(255,200,87,.22) !important;
    box-shadow: 0 20px 42px rgba(0,0,0,.34) !important;
}
.admin-glass-auto .dropdown-item {
    color: #e8eef8 !important;
}
.admin-glass-auto .dropdown-item:hover {
    background: rgba(56,189,248,.12) !important;
    color: #ffffff !important;
}

/* V75 - Colored transparent glass buttons for Rent/Tools/Deposit/Stats/Backup/Admin pages */
:root {
    --glass-btn-cyan: rgba(56, 213, 255, .58);
    --glass-btn-cyan-bg: rgba(7, 44, 58, .36);
    --glass-btn-green: rgba(54, 229, 143, .52);
    --glass-btn-green-bg: rgba(7, 45, 30, .36);
    --glass-btn-red: rgba(255, 85, 112, .52);
    --glass-btn-red-bg: rgba(53, 11, 18, .38);
    --glass-btn-gold: rgba(255, 200, 87, .58);
    --glass-btn-gold-bg: rgba(73, 48, 8, .36);
    --glass-btn-violet: rgba(167, 139, 250, .52);
    --glass-btn-violet-bg: rgba(34, 25, 74, .38);
    --glass-btn-slate: rgba(148, 163, 184, .38);
    --glass-btn-slate-bg: rgba(15, 23, 42, .46);
}
.btn,
button.btn,
a.btn,
.rent-action-btn,
.mail-action-btn,
.rent-submit-btn,
.rent-search-clear-btn,
.deposit-btn-primary,
.copy-btn,
.back-btn,
.quick-amount,
.btnCopyCol,
.tools-dichvu-modern .btn,
.deposit-shell .btn,
.stats-modern-shell .btn,
.services-modern-shell .btn,
.backup-modern-shell .btn,
.admin-glass-auto .btn,
.ref-modern-shell .btn,
.contact-modern .btn,
.pagination .page-link {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.026)) !important;
    backdrop-filter: blur(12px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.18) !important;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease !important;
}
.btn::before,
.rent-action-btn::before,
.mail-action-btn::before,
.rent-submit-btn::before,
.rent-search-clear-btn::before,
.deposit-btn-primary::before,
.copy-btn::before,
.back-btn::before,
.quick-amount::before,
.btnCopyCol::before,
.pagination .page-link::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 70%) !important;
    transform: translateX(-130%) !important;
    transition: transform .36s ease !important;
    pointer-events: none !important;
}
.btn:hover::before,
.rent-action-btn:hover::before,
.mail-action-btn:hover::before,
.rent-submit-btn:hover::before,
.rent-search-clear-btn:hover::before,
.deposit-btn-primary:hover::before,
.copy-btn:hover::before,
.back-btn:hover::before,
.quick-amount:hover::before,
.btnCopyCol:hover::before,
.pagination .page-link:hover::before {
    transform: translateX(130%) !important;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
.rent-action-btn:hover,
.mail-action-btn:hover,
.rent-submit-btn:hover,
.rent-search-clear-btn:hover,
.deposit-btn-primary:hover,
.copy-btn:hover,
.back-btn:hover,
.quick-amount:hover,
.btnCopyCol:hover,
.pagination .page-link:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.24), 0 0 22px rgba(56,189,248,.12) !important;
}
.btn:focus,
.rent-action-btn:focus,
.mail-action-btn:focus,
.rent-submit-btn:focus,
.rent-search-clear-btn:focus,
.deposit-btn-primary:focus,
.copy-btn:focus,
.back-btn:focus,
.quick-amount:focus,
.btnCopyCol:focus,
.pagination .page-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 .18rem rgba(56,189,248,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.btn-primary,
.btn-outline-primary,
.rent-submit-btn,
.rent-action-btn,
.mail-action-btn,
.deposit-btn-primary,
.tools-dichvu-modern .btn-primary,
.admin-glass-auto .btn-primary,
.admin-glass-auto .btn-outline-primary,
.pagination .page-item:not(.active) .page-link {
    border-color: var(--glass-btn-cyan) !important;
    background-color: var(--glass-btn-cyan-bg) !important;
    color: #dcfaff !important;
}
.btn-primary:hover,
.btn-outline-primary:hover,
.rent-submit-btn:hover,
.rent-action-btn:hover,
.mail-action-btn:hover,
.deposit-btn-primary:hover,
.pagination .page-item:not(.active) .page-link:hover {
    border-color: rgba(255,200,87,.66) !important;
    background-color: rgba(8, 57, 74, .44) !important;
}
.btn-success,
.btn-outline-success,
.copy-btn-success,
.admin-glass-auto .btn-success,
.admin-glass-auto .btn-outline-success {
    border-color: var(--glass-btn-green) !important;
    background-color: var(--glass-btn-green-bg) !important;
    color: #d9ffeb !important;
}
.btn-success:hover,
.btn-outline-success:hover,
.copy-btn-success:hover {
    border-color: rgba(255,200,87,.62) !important;
    background-color: rgba(12, 72, 47, .44) !important;
}
.btn-danger,
.btn-outline-danger,
.cancel-link,
.admin-glass-auto .btn-danger,
.admin-glass-auto .btn-outline-danger {
    border-color: var(--glass-btn-red) !important;
    background-color: var(--glass-btn-red-bg) !important;
    color: #ffd7df !important;
}
.btn-danger:hover,
.btn-outline-danger:hover,
.cancel-link:hover {
    border-color: rgba(255,200,87,.62) !important;
    background-color: rgba(76, 14, 24, .44) !important;
}
.btn-warning,
.btn-outline-warning,
.quick-amount.active,
.pagination .page-item.active .page-link,
.admin-glass-auto .btn-warning,
.admin-glass-auto .btn-outline-warning {
    border-color: var(--glass-btn-gold) !important;
    background-color: var(--glass-btn-gold-bg) !important;
    color: #fff1bd !important;
}
.btn-warning:hover,
.btn-outline-warning:hover,
.quick-amount.active:hover,
.pagination .page-item.active .page-link:hover {
    border-color: rgba(56,213,255,.58) !important;
    background-color: rgba(101, 66, 11, .44) !important;
}
.btn-info,
.btn-outline-info,
.admin-glass-auto .btn-info,
.admin-glass-auto .btn-outline-info {
    border-color: var(--glass-btn-violet) !important;
    background-color: var(--glass-btn-violet-bg) !important;
    color: #efe9ff !important;
}
.btn-info:hover,
.btn-outline-info:hover {
    border-color: rgba(255,200,87,.62) !important;
    background-color: rgba(45, 35, 96, .46) !important;
}
.btn-secondary,
.btn-outline-secondary,
.btn-light,
.btn-outline-light,
.btn-dark,
.btn-outline-dark,
.rent-search-clear-btn,
.copy-btn,
.back-btn,
.btnCopyCol,
.admin-glass-auto .btn-secondary,
.admin-glass-auto .btn-outline-secondary,
.admin-glass-auto .btn-light,
.admin-glass-auto .btn-outline-light,
.admin-glass-auto .btn-dark,
.admin-glass-auto .btn-outline-dark {
    border-color: var(--glass-btn-slate) !important;
    background-color: var(--glass-btn-slate-bg) !important;
    color: #e5edf9 !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-outline-light:hover,
.btn-dark:hover,
.btn-outline-dark:hover,
.rent-search-clear-btn:hover,
.copy-btn:hover,
.back-btn:hover,
.btnCopyCol:hover {
    border-color: rgba(255,200,87,.58) !important;
    background-color: rgba(22, 34, 58, .52) !important;
}
.btn-sm,
.btn-group-sm > .btn {
    min-height: 34px !important;
    padding: .38rem .68rem !important;
    font-size: .83rem !important;
}
.btn-lg,
.btn-group-lg > .btn {
    min-height: 48px !important;
    padding: .72rem 1rem !important;
}
.btn-block,
button.btn-block,
a.btn-block {
    display: flex !important;
    width: 100% !important;
}
.btn:disabled,
.btn.disabled,
button:disabled,
.pagination .page-item.disabled .page-link {
    opacity: .54 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.input-group .btn,
.btn-group .btn,
.btn-toolbar .btn {
    flex: 0 0 auto !important;
}
.table .btn,
.admin-glass-auto table .btn,
.tools-dichvu-modern table .btn,
.rent-v1-modern table .btn,
.rent-v2-modern table .btn,
.rent-v3-modern table .btn,
.rent-v4-modern table .btn,
.mail-rental-modern table .btn,
.mail-rental2-modern table .btn {
    min-height: 32px !important;
    padding: .34rem .6rem !important;
    font-size: .8rem !important;
    white-space: nowrap !important;
}


/* DISPLAY ROWS LEFT OVERRIDE */

.display-rows-left,
.service-panel-header .d-flex > form.display-rows-left,
.premium-module-card > .card-header .d-flex > form.display-rows-left,
.premium-table-card > .card-header .d-flex > form.display-rows-left,
.card > .service-panel-header .d-flex > form.display-rows-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
    width: auto !important;
}
.display-rows-left .custom-select {
    min-width: 82px !important;
}
@media (max-width: 767.98px) {
    .display-rows-left,
    .service-panel-header .d-flex > form.display-rows-left,
    .premium-module-card > .card-header .d-flex > form.display-rows-left,
    .premium-table-card > .card-header .d-flex > form.display-rows-left,
    .card > .service-panel-header .d-flex > form.display-rows-left {
        width: 100% !important;
    }
}



/* DISPLAY ROWS RIGHT FINAL OVERRIDE */
.page-display-right,
.service-panel-header .d-flex > form.page-display-right,
.premium-module-card > .card-header .d-flex > form.page-display-right,
.premium-table-card > .card-header .d-flex > form.page-display-right,
.card > .service-panel-header .d-flex > form.page-display-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
    width: auto !important;
}
.page-display-right .custom-select {
    min-width: 82px !important;
}
@media (max-width: 767.98px) {
    .page-display-right,
    .service-panel-header .d-flex > form.page-display-right,
    .premium-module-card > .card-header .d-flex > form.page-display-right,
    .premium-table-card > .card-header .d-flex > form.page-display-right,
    .card > .service-panel-header .d-flex > form.page-display-right {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
}


/* DISPLAY ROWS RIGHT HARD FIX - Rent/Services/Stats */
.premium-table-card > .card-header,
.stats-table-card > .card-header,
.services-table-card > .card-header {
    position: relative !important;
}
.premium-table-card > .card-header > .d-flex,
.stats-table-card > .card-header > .d-flex,
.services-table-card > .card-header > .d-flex {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}
.display-rows-right-force,
form.display-rows-right-force,
.premium-table-card > .card-header > .d-flex > form.display-rows-right-force,
.stats-table-card > .card-header > .d-flex > form.display-rows-right-force,
.services-table-card > .card-header > .d-flex > form.display-rows-right-force {
    margin-left: auto !important;
    margin-right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: center !important;
    gap: .55rem !important;
}
.display-rows-right-force > span,
.display-rows-right-force > label {
    width: auto !important;
    display: inline-flex !important;
    margin: 0 .35rem 0 0 !important;
    white-space: nowrap !important;
}
.display-rows-right-force select,
.display-rows-right-force .custom-select,
.display-rows-right-force .display-rows-select {
    width: auto !important;
    min-width: 76px !important;
    max-width: 96px !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
}
.services-table-card .display-rows-right-force .services-search-input {
    width: 220px !important;
    flex: 0 1 220px !important;
}
.services-table-card .display-rows-right-force .display-rows-label,
.services-table-card .display-rows-right-force .display-rows-select {
    order: 50 !important;
}
@media (max-width: 767.98px) {
    .premium-table-card > .card-header > .d-flex,
    .stats-table-card > .card-header > .d-flex,
    .services-table-card > .card-header > .d-flex {
        flex-wrap: wrap !important;
    }
    .display-rows-right-force,
    form.display-rows-right-force,
    .premium-table-card > .card-header > .d-flex > form.display-rows-right-force,
    .stats-table-card > .card-header > .d-flex > form.display-rows-right-force,
    .services-table-card > .card-header > .d-flex > form.display-rows-right-force {
        margin-left: auto !important;
        justify-content: flex-end !important;
        width: auto !important;
    }
    .services-table-card .display-rows-right-force {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .services-table-card .display-rows-right-force .services-search-input {
        width: 100% !important;
        flex-basis: 100% !important;
    }
}

/* =========================================================
   Mobile Smooth Fix 2026-06-13
   Mục tiêu: chống vỡ giao diện/blank trắng trên Android, giảm lag khi render
   các trang Thuê SIM/Gmail, Services, Admin table. Giữ nguyên desktop.
   ========================================================= */
@media (max-width: 991.98px) {
    html,
    body {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #020617 !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        position: relative !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pinch-zoom !important;
    }

    .app-shell {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        background: #020617 !important;
    }

    .main-content {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        background: #020617 !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .topbar,
    main,
    .container,
    .container-fluid,
    .content-wrapper,
    .page-content,
    .admin-glass-shell,
    .admin-glass-auto,
    .premium-page-shell,
    .rent-v1-modern,
    .rent-overview-shell,
    .services-modern-shell,
    .stats-modern-shell,
    .deposit-modern-shell,
    .service-panel-card,
    .premium-module-card,
    .premium-table-card,
    .card,
    .modal-dialog,
    .row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    main {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
        padding-bottom: 1rem !important;
        background: #020617 !important;
    }

    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .row > [class^="col-"],
    .row > [class*=" col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Sidebar mobile: chỉ mở khi bấm nút, không đẩy layout ngang. */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(82vw, 292px) !important;
        max-width: min(82vw, 292px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        transform: translate3d(-105%, 0, 0) !important;
        z-index: 1051 !important;
        will-change: transform !important;
        contain: layout paint style !important;
        box-shadow: none !important;
    }

    .sidebar.sidebar-open,
    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-scroll {
        height: calc(100dvh - 132px) !important;
        max-height: calc(100dvh - 132px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1050 !important;
    }

    body.sidebar-open {
        overflow: hidden !important;
    }

    /* Bảng rộng: cho cuộn ngang thay vì kéo vỡ toàn trang. */
    .table-responsive,
    .mobile-table-wrap,
    .dataTables_wrapper,
    .table-wrap,
    .admin-table-wrap,
    .service-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    table,
    .table,
    .premium-data-table,
    .admin-table,
    .services-table,
    .stats-table {
        width: max-content !important;
        min-width: 680px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    .table th,
    .table td,
    .premium-data-table th,
    .premium-data-table td {
        white-space: nowrap !important;
    }

    /* Giảm hiệu ứng nặng trên mobile: blur/fixed radial/đổ bóng lớn gây trắng màn, lag khi scroll. */
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .rent-v1-modern::before,
    .rent-hero-v1::before,
    .rent-hero-v1::after,
    .admin-glass-hero::before,
    .admin-glass-hero::after,
    .services-hero::before,
    .services-hero::after,
    .premium-page-shell::before,
    .premium-page-shell::after,
    .bg-particles,
    .cyber-grid,
    .neon-orb,
    .floating-orb,
    .glow-orb {
        display: none !important;
        content: none !important;
    }

    .topbar,
    .sidebar,
    .sidebar-scroll,
    .card,
    .service-panel-card,
    .premium-module-card,
    .premium-table-card,
    .rent-hero-v1,
    .rent-stat-card,
    .rent-action-panel,
    .rent-step-card,
    .admin-glass-hero,
    .admin-glass-card,
    .services-hero,
    .services-table-card,
    .stat-card,
    .modal-content,
    .dropdown-menu,
    .btn,
    .form-control,
    .custom-select,
    .badge,
    .glass-badge {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .rent-hero-v1,
    .service-panel-card,
    .premium-module-card,
    .premium-table-card,
    .card {
        border-radius: 14px !important;
    }

    .rent-hero-inner,
    .rent-stat-grid,
    .rent-action-grid,
    .rent-process-grid,
    .service-filter-grid,
    .admin-metric-grid,
    .services-grid,
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .rent-hero-v1,
    .rent-hero-v1 .rent-hero-copy,
    .rent-hero-v1 .rent-hero-side,
    .rent-hero-inner,
    .rent-action-panel,
    .rent-step-card {
        min-height: 0 !important;
        height: auto !important;
    }

    .filter-service,
    .rent-hero-chip,
    .service-filter-chip,
    .quick-service-chip {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .btn,
    .btn-sm,
    .form-control,
    .custom-select,
    select.form-control,
    .input-group-text {
        min-height: 40px !important;
    }

    /* Floating chat/Zalo widgets không được làm rộng viewport. */
    .floating-chat,
    .chat-floating,
    .zalo-chat-widget,
    .zalo-widget,
    [class*="zalo"],
    [id*="zalo"],
    iframe[src*="zalo"] {
        max-width: 76px !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    main {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .topbar {
        padding-left: .6rem !important;
        padding-right: .6rem !important;
    }

    .card-body,
    .card-header,
    .service-panel-card .card-body,
    .premium-module-card .card-body {
        padding-left: .65rem !important;
        padding-right: .65rem !important;
    }

    table,
    .table,
    .premium-data-table,
    .admin-table,
    .services-table,
    .stats-table {
        min-width: 600px !important;
    }
}

/* =========================================================
   Mobile Sidebar Fix 2026-06-13
   Một số điện thoại độ phân giải cao báo viewport rộng gần tablet làm sidebar
   hiện như desktop và che/vướng nội dung. Ép mọi màn <=1200px hoặc touch device
   dùng drawer đóng/mở rõ ràng, có backdrop và nút X.
   ========================================================= */
@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) {
    .app-shell {
        display: block !important;
        overflow-x: hidden !important;
    }

    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        overflow-x: hidden !important;
    }

    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: min(78vw, 270px) !important;
        max-width: min(78vw, 270px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translate3d(-110%, 0, 0) !important;
        transition: transform .18s ease !important;
        z-index: 1061 !important;
        box-shadow: 18px 0 45px rgba(0,0,0,.42) !important;
        contain: layout paint style !important;
    }

    .sidebar.sidebar-open,
    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    .sidebar-scroll {
        height: calc(100dvh - 150px) !important;
        max-height: calc(100dvh - 150px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sidebar-backdrop {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 1060 !important;
        background: rgba(0, 0, 0, .58) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sidebar-open .sidebar-backdrop {
        display: block !important;
    }

    body.sidebar-open {
        overflow: hidden !important;
    }

    body.sidebar-open .main-content {
        pointer-events: none !important;
    }

    body.sidebar-open .sidebar,
    body.sidebar-open .sidebar-backdrop {
        pointer-events: auto !important;
    }

    #sidebarToggle.mobile-sidebar-toggle,
    .mobile-sidebar-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-sidebar-close {
        display: inline-flex !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 200, 87, .35) !important;
        background: rgba(15, 23, 42, .92) !important;
        color: #f8fbff !important;
        font-size: 24px !important;
        line-height: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
    }

    .sidebar-header {
        padding-right: 52px !important;
    }
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .mobile-sidebar-close {
        display: none !important;
    }
}

/* =========================================================
   Mobile Ultra Lite Performance 2026-06-13
   Dành cho điện thoại/tablet: giữ desktop đẹp như cũ, nhưng mobile giảm DOM repaint,
   tắt sticky/blur/shadow/hover nặng, nén hero/card/table để scroll mượt hơn.
   ========================================================= */
@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) {
    html.mobile-lite,
    html.mobile-lite body {
        background: #020617 !important;
        overflow-x: hidden !important;
        scroll-behavior: auto !important;
    }

    html.mobile-lite .topbar {
        position: static !important;
        top: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #020617 !important;
        border-bottom: 1px solid rgba(148,163,184,.12) !important;
        box-shadow: none !important;
    }

    html.mobile-lite .main-content,
    html.mobile-lite main,
    html.mobile-lite .container,
    html.mobile-lite .container-fluid {
        contain: layout style !important;
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
    }

    html.mobile-lite .card,
    html.mobile-lite .premium-module-card,
    html.mobile-lite .premium-table-card,
    html.mobile-lite .service-panel-card,
    html.mobile-lite .services-table-card,
    html.mobile-lite .stats-table-card,
    html.mobile-lite .admin-glass-card,
    html.mobile-lite .admin-glass-auto,
    html.mobile-lite .rent-v1-modern .card,
    html.mobile-lite .rent-v1-modern .premium-module-card,
    html.mobile-lite .rent-v1-modern .service-panel-card,
    html.mobile-lite .rent-v1-modern .premium-table-card {
        content-visibility: auto !important;
        contain-intrinsic-size: 1px 520px !important;
        contain: layout paint style !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
        border-radius: 12px !important;
    }

    html.mobile-lite .rent-hero-v1,
    html.mobile-lite .admin-glass-hero,
    html.mobile-lite .services-hero,
    html.mobile-lite .stats-hero,
    html.mobile-lite .deposit-hero,
    html.mobile-lite .premium-hero,
    html.mobile-lite .dashboard-hero {
        min-height: 0 !important;
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
        background: #071225 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow: hidden !important;
    }

    html.mobile-lite .rent-hero-v1::before,
    html.mobile-lite .rent-hero-v1::after,
    html.mobile-lite .admin-glass-hero::before,
    html.mobile-lite .admin-glass-hero::after,
    html.mobile-lite .services-hero::before,
    html.mobile-lite .services-hero::after,
    html.mobile-lite .stats-hero::before,
    html.mobile-lite .stats-hero::after,
    html.mobile-lite .deposit-hero::before,
    html.mobile-lite .deposit-hero::after,
    html.mobile-lite .premium-hero::before,
    html.mobile-lite .premium-hero::after,
    html.mobile-lite [class*="particle"],
    html.mobile-lite [class*="orb"],
    html.mobile-lite [class*="glow"],
    html.mobile-lite [class*="grid-bg"],
    html.mobile-lite [class*="cyber-grid"] {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    html.mobile-lite .rent-hero-title,
    html.mobile-lite .admin-glass-title,
    html.mobile-lite .services-hero-title,
    html.mobile-lite .stats-hero-title,
    html.mobile-lite h1,
    html.mobile-lite h2,
    html.mobile-lite h3 {
        font-size: clamp(18px, 5vw, 24px) !important;
        line-height: 1.18 !important;
        margin-bottom: 6px !important;
        text-shadow: none !important;
    }

    html.mobile-lite .rent-hero-subtitle,
    html.mobile-lite .topbar-subtitle,
    html.mobile-lite .admin-glass-eyebrow,
    html.mobile-lite .rent-hero-live,
    html.mobile-lite .rent-hero-actions,
    html.mobile-lite .rent-hero-steps,
    html.mobile-lite .rent-step-card,
    html.mobile-lite .hero-decoration,
    html.mobile-lite .hero-visual,
    html.mobile-lite .quick-guide,
    html.mobile-lite .quick-help,
    html.mobile-lite .page-intro-heavy {
        display: none !important;
    }

    html.mobile-lite .form-row,
    html.mobile-lite .row,
    html.mobile-lite .rent-hero-inner,
    html.mobile-lite .admin-rent-hero .rent-hero-inner,
    html.mobile-lite .rent-hero-action-row,
    html.mobile-lite .rent-stat-grid,
    html.mobile-lite .admin-metric-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html.mobile-lite .form-row > [class*="col-"],
    html.mobile-lite .row > [class*="col-"],
    html.mobile-lite .rent-hero-inner > *,
    html.mobile-lite .rent-hero-action-row > *,
    html.mobile-lite .admin-metric-grid > *,
    html.mobile-lite .rent-stat-grid > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html.mobile-lite .table-responsive,
    html.mobile-lite .dataTables_wrapper,
    html.mobile-lite .admin-table-wrap,
    html.mobile-lite .service-table-wrap {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        contain: layout paint style !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    html.mobile-lite table,
    html.mobile-lite .table,
    html.mobile-lite .premium-data-table,
    html.mobile-lite .admin-table,
    html.mobile-lite .services-table,
    html.mobile-lite .stats-table {
        min-width: 560px !important;
        width: max-content !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    html.mobile-lite .table th,
    html.mobile-lite .table td,
    html.mobile-lite .premium-data-table th,
    html.mobile-lite .premium-data-table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html.mobile-lite thead,
    html.mobile-lite thead th,
    html.mobile-lite .sticky-top,
    html.mobile-lite .table-sticky,
    html.mobile-lite .premium-data-table thead th {
        position: static !important;
        top: auto !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html.mobile-lite tbody tr,
    html.mobile-lite tbody tr:hover,
    html.mobile-lite .table-hover tbody tr:hover,
    html.mobile-lite .premium-data-table tbody tr:hover {
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
        background-image: none !important;
    }

    html.mobile-lite .btn,
    html.mobile-lite .btn-sm,
    html.mobile-lite .form-control,
    html.mobile-lite .custom-select,
    html.mobile-lite select.form-control,
    html.mobile-lite .input-group-text,
    html.mobile-lite .badge,
    html.mobile-lite .glass-badge,
    html.mobile-lite .rent-action-btn,
    html.mobile-lite .filter-service {
        min-height: 36px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }

    html.mobile-lite .card-header,
    html.mobile-lite .card-body,
    html.mobile-lite .premium-module-card .card-body,
    html.mobile-lite .service-panel-card .card-body {
        padding: 8px !important;
    }

    html.mobile-lite .modal,
    html.mobile-lite .modal-backdrop,
    html.mobile-lite .dropdown-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html.mobile-lite .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    html.mobile-lite .page-link {
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 6px 9px !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   Mobile Scroll Smooth Fix 2026-06-13
   Tối ưu riêng lúc kéo lên/kéo xuống trên điện thoại: dùng native scroll,
   bỏ custom pull/repaint nặng, không ảnh hưởng desktop.
   ========================================================= */
@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) {
    html.mobile-lite,
    html.mobile-lite body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        scroll-behavior: auto !important;
    }

    html.mobile-lite .app-shell,
    html.mobile-lite .main-wrapper,
    html.mobile-lite .page-wrapper,
    html.mobile-lite .main-content,
    html.mobile-lite main {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: auto !important;
        transform: none !important;
        perspective: none !important;
        filter: none !important;
    }

    /* content-visibility:auto giúp load nhẹ nhưng có thể giật khi card/table bắt đầu render lúc cuộn.
       Trên mobile-lite ưu tiên scroll mượt nên render thường. */
    html.mobile-lite .card,
    html.mobile-lite .premium-module-card,
    html.mobile-lite .premium-table-card,
    html.mobile-lite .service-panel-card,
    html.mobile-lite .services-table-card,
    html.mobile-lite .stats-table-card,
    html.mobile-lite .admin-glass-card,
    html.mobile-lite .admin-glass-auto,
    html.mobile-lite .rent-v1-modern .card,
    html.mobile-lite .rent-v1-modern .premium-module-card,
    html.mobile-lite .rent-v1-modern .service-panel-card,
    html.mobile-lite .rent-v1-modern .premium-table-card,
    html.mobile-lite .table-responsive,
    html.mobile-lite .dataTables_wrapper,
    html.mobile-lite .admin-table-wrap,
    html.mobile-lite .service-table-wrap {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
        contain: none !important;
        will-change: auto !important;
        transform: none !important;
        backface-visibility: visible !important;
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    html.mobile-lite *,
    html.mobile-lite *::before,
    html.mobile-lite *::after {
        animation: none !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }

    html.mobile-lite.mobile-scrolling *,
    html.mobile-lite.mobile-scrolling *::before,
    html.mobile-lite.mobile-scrolling *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
    }

    html.mobile-lite .topbar,
    html.mobile-lite .sticky-top,
    html.mobile-lite .fixed-top,
    html.mobile-lite .table-sticky,
    html.mobile-lite thead,
    html.mobile-lite thead th,
    html.mobile-lite .premium-data-table thead th {
        position: static !important;
        top: auto !important;
        transform: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html.mobile-lite .table-responsive,
    html.mobile-lite .admin-table-wrap,
    html.mobile-lite .service-table-wrap {
        display: block !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        touch-action: pan-x pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        background-clip: padding-box !important;
    }

    html.mobile-lite table,
    html.mobile-lite .table,
    html.mobile-lite .premium-data-table,
    html.mobile-lite .admin-table,
    html.mobile-lite .services-table,
    html.mobile-lite .stats-table {
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
    }

    html.mobile-lite tbody tr,
    html.mobile-lite tbody td,
    html.mobile-lite tbody th {
        transform: none !important;
        will-change: auto !important;
        background-clip: padding-box !important;
    }

    /* Các widget nổi/chat/Zalo trên mobile làm tăng repaint và đôi khi làm rộng viewport. Ẩn trên mobile. */
    html.mobile-lite [class*="zalo"],
    html.mobile-lite [id*="zalo"],
    html.mobile-lite [class*="chat-widget"],
    html.mobile-lite [id*="chat-widget"],
    html.mobile-lite [class*="floating-chat"],
    html.mobile-lite [id*="floating-chat"],
    html.mobile-lite .support-floating,
    html.mobile-lite .contact-floating,
    html.mobile-lite iframe[src*="zalo"],
    html.mobile-lite iframe[src*="facebook"],
    html.mobile-lite iframe[src*="messenger"] {
        display: none !important;
    }

    html.mobile-lite .sidebar,
    html.mobile-lite .sidebar-scroll {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}


/* Mobile rent pages: hide helper tip card so service select/rent button are not covered or pushed away */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
  .rent-assist-card { display: none !important; }
  .rent-pro-toolbar { grid-template-columns: 1fr !important; }
}
html.mobile-lite .rent-assist-card { display: none !important; }


/* Heavy rent/admin pages: reduce first-load repaint and keep layout stable on laptop/mobile widths */
html.heavy-page-lite {
  scroll-behavior: auto !important;
}
html.heavy-page-lite body,
html.heavy-page-lite .main-content,
html.heavy-page-lite .content-wrapper,
html.heavy-page-lite .app-main {
  overflow-x: hidden !important;
}
@media (max-width: 1399.98px), (hover: none) and (pointer: coarse) {
  html.heavy-page-lite *,
  html.heavy-page-lite *::before,
  html.heavy-page-lite *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  html.heavy-page-lite .rent-pro-toolbar,
  html.heavy-page-lite .rent-form-grid {
    grid-template-columns: 1fr !important;
  }
  html.heavy-page-lite .rent-assist-card {
    display: none !important;
  }
  html.heavy-page-lite .glass-card,
  html.heavy-page-lite .premium-module-card,
  html.heavy-page-lite .service-panel-card,
  html.heavy-page-lite .rent-overview-card,
  html.heavy-page-lite .table-responsive {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  html.heavy-page-lite .table-responsive {
    overflow-x: auto !important;
    max-width: 100% !important;
  }
}


/* Slow-network/mobile safety: menu must stay clickable while heavy pages finish rendering */
.mobile-sidebar-toggle {
  touch-action: manipulation !important;
  pointer-events: auto !important;
  z-index: 3002 !important;
}
.sidebar-backdrop {
  touch-action: manipulation !important;
}
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
  .topbar { position: sticky !important; top: 0 !important; z-index: 2500 !important; }
  .sidebar { will-change: transform; }
  body.sidebar-open { overflow: hidden !important; }
}


/* PC fast-load mode for heavy rent/admin pages: lower paint cost while keeping layout usable */
html.heavy-page-lite *,
html.heavy-page-lite *::before,
html.heavy-page-lite *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
}
html.heavy-page-lite .premium-module-card,
html.heavy-page-lite .service-panel-card,
html.heavy-page-lite .rent-overview-card,
html.heavy-page-lite .glass-card,
html.heavy-page-lite .sysdash-hero,
html.heavy-page-lite .sysdash-card,
html.heavy-page-lite .sysdash-panel,
html.heavy-page-lite .table-responsive {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.heavy-page-lite .table-responsive {
  overflow-x: auto !important;
  max-width: 100% !important;
}
html.heavy-page-lite .bg-orb,
html.heavy-page-lite .particle,
html.heavy-page-lite .particles,
html.heavy-page-lite .cyber-orb,
html.heavy-page-lite .rent-ambient,
html.heavy-page-lite .rent-bg-orb {
  display: none !important;
}


/* Mobile sidebar z-index hard fix 2026-06-14
   Đảm bảo drawer menu luôn nằm trên topbar/greeting/dashboard khi mở trên điện thoại. */
@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) {
    body.sidebar-open .sidebar,
    .sidebar.sidebar-open {
        z-index: 5200 !important;
        isolation: isolate !important;
    }

    body.sidebar-open .sidebar-backdrop {
        z-index: 5190 !important;
    }

    body.sidebar-open .topbar,
    body.sidebar-open .main-content,
    body.sidebar-open .content-header,
    body.sidebar-open .page-header,
    body.sidebar-open .dashboard-header,
    body.sidebar-open .hero,
    body.sidebar-open .hero-section {
        z-index: 1 !important;
    }

    body.sidebar-open #sidebarToggle.mobile-sidebar-toggle,
    body.sidebar-open .mobile-sidebar-toggle {
        z-index: 5210 !important;
    }
}

/* Home server hero: match the supplied globe reference panel */
.premium-dashboard .premium-hero.premium-hero-exact {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(206px, 16.16vw, 238px) !important;
    min-height: 206px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid rgba(151, 105, 47, .66) !important;
    background: #030914 url('/images/home-server-hero-reference.png') center center / 100% 100% no-repeat !important;
    box-shadow: inset 0 0 0 1px rgba(255, 188, 82, .06), 0 16px 34px rgba(0, 0, 0, .18) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg,
            rgba(3, 8, 17, .02) 0%,
            rgba(3, 8, 17, .04) 43%,
            rgba(3, 8, 17, .22) 50%,
            rgba(3, 8, 17, .78) 62%,
            rgba(3, 8, 17, .96) 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::after,
.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    display: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left {
    display: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
    position: absolute !important;
    z-index: 3 !important;
    left: 49% !important;
    right: 32px !important;
    top: 40px !important;
    bottom: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding-left: clamp(145px, 14vw, 218px) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-eyebrow {
    margin: 0 0 8px !important;
    color: #ffc64d !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 14px rgba(255, 182, 54, .28) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host {
    color: #d7deeb !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host span {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffe39a !important;
    font-weight: 900 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 30px 0 0 !important;
    color: #39e979 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 14px rgba(57, 233, 121, .28) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot i {
    font-size: 11px !important;
    filter: drop-shadow(0 0 7px rgba(57, 233, 121, .9)) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 194, 79, .36) transparent !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar {
    height: 5px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar-track {
    background: transparent !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(255, 194, 79, .42) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 18px !important;
    min-width: 100% !important;
    height: 84px !important;
    padding: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    flex: 0 0 calc((100% - 18px) / 2) !important;
    min-width: 310px !important;
    min-height: 84px !important;
    height: 84px !important;
    padding: 0 24px !important;
    gap: 18px !important;
    border-radius: 12px !important;
    color: #f5f8ff !important;
    background: linear-gradient(180deg, rgba(8, 16, 31, .92), rgba(5, 11, 22, .92)) !important;
    border: 2px solid rgba(35, 126, 255, .82) !important;
    box-shadow: inset 0 0 0 1px rgba(70, 155, 255, .14), 0 0 18px rgba(36, 126, 255, .16) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    transform: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active,
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child {
    border-color: rgba(202, 142, 54, .9) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 202, 90, .15), 0 0 20px rgba(255, 184, 56, .12) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-icon {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    color: #2d8cff !important;
    font-size: 25px !important;
    background: rgba(25, 75, 152, .45) !important;
    box-shadow: inset 0 0 0 1px rgba(66, 151, 255, .16), 0 0 18px rgba(47, 132, 255, .16) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active .server-icon,
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child .server-icon {
    color: #ffc44d !important;
    background: rgba(89, 65, 30, .58) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 195, 78, .20), 0 0 18px rgba(255, 184, 56, .16) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info {
    min-width: 0 !important;
    gap: 7px !important;
    line-height: 1.1 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info small {
    color: #b8c2d7 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:hover {
    color: #ffffff !important;
    transform: none !important;
}

@media (max-width: 1199.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        height: auto !important;
        min-height: 330px !important;
        background-size: auto 100% !important;
        background-position: 35% center !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact::before {
        background: linear-gradient(180deg, rgba(3, 8, 17, .34), rgba(3, 8, 17, .92) 46%, rgba(3, 8, 17, .98)) !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        left: 20px !important;
        right: 20px !important;
        top: 26px !important;
        bottom: 22px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        padding-left: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        min-height: 390px !important;
        border-radius: 10px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        left: 14px !important;
        right: 14px !important;
        top: 22px !important;
        bottom: 18px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        min-height: 70px !important;
        gap: 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-eyebrow {
        font-size: 13px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-current-host,
    .premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
        font-size: 13px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
        padding-top: 26px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        height: auto !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex-basis: 82% !important;
        min-width: 248px !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 16px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-icon {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
        font-size: 22px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
        font-size: 16px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info small {
        font-size: 12px !important;
    }
}

/* Home server hero v8: left copy + center globe + right server cards, matching latest reference */
.premium-dashboard .premium-hero.premium-hero-exact {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: clamp(176px, 9.27vw, 222px) !important;
    min-height: 176px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid rgba(137, 96, 48, .70) !important;
    background:
        radial-gradient(circle at 61% 38%, rgba(255, 177, 56, .10), transparent 24%),
        linear-gradient(100deg, #060c18 0%, #071427 41%, #040912 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 194, 86, .055), 0 12px 30px rgba(0, 0, 0, .18) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .18) 0%,
            rgba(5, 10, 21, .02) 36%,
            rgba(5, 10, 21, .02) 72%,
            rgba(5, 10, 21, .50) 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::after {
    display: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 38.5% !important;
    width: 39.5% !important;
    opacity: .98 !important;
    pointer-events: none !important;
    background: url('/images/home-server-globe-strip-reference.png') center center / 100% 100% no-repeat !important;
    filter: saturate(1.05) contrast(1.04) brightness(.98) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .96) 0%,
            rgba(5, 10, 21, .18) 13%,
            rgba(5, 10, 21, .02) 52%,
            rgba(5, 10, 21, .28) 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 41.5% 26.5% 32% !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    gap: 0 !important;
    padding: 0 34px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left {
    display: flex !important;
    position: relative !important;
    z-index: 3 !important;
    grid-column: 1 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    max-width: none !important;
    min-height: 100% !important;
    padding: 16px 18px 18px 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left .premium-eyebrow {
    margin: 0 0 7px !important;
    color: #f7bc48 !important;
    font-size: clamp(13px, .78vw, 16px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px rgba(247, 188, 72, .22) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left h1 {
    margin: 0 0 8px !important;
    color: #f8fbff !important;
    font-size: clamp(22px, 1.36vw, 30px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .42) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
    width: min(760px, 100%) !important;
    margin: 0 0 21px !important;
    color: #b8c1d0 !important;
    font-size: clamp(14px, .84vw, 18px) !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 170px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(146, 105, 55, .48) !important;
    background: rgba(6, 13, 25, .58) !important;
    color: #cfd6e3 !important;
    font-size: clamp(13px, .78vw, 16px) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: inset 0 0 0 1px rgba(255, 191, 79, .035) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row i {
    margin: 0 !important;
    color: #d69c38 !important;
    font-size: 18px !important;
    filter: drop-shadow(0 0 7px rgba(214, 156, 56, .22)) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
    display: flex !important;
    position: relative !important;
    z-index: 3 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: 3 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    max-width: none !important;
    min-height: 100% !important;
    padding: 27px 6px 18px 14px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    min-height: 56px !important;
    margin: 0 0 13px !important;
    padding-left: clamp(128px, 8.4vw, 198px) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top .premium-eyebrow {
    margin: 0 0 10px !important;
    color: #ffc34d !important;
    font-size: clamp(13px, .76vw, 16px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host {
    color: #d2d9e5 !important;
    font-size: clamp(14px, .83vw, 18px) !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host span {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f8cf78 !important;
    font-weight: 900 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 18px 0 0 !important;
    color: #34dd68 !important;
    font-size: clamp(13px, .76vw, 16px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot i {
    font-size: 10px !important;
    filter: drop-shadow(0 0 8px rgba(52, 221, 104, .85)) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    scrollbar-width: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar {
    display: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
    display: flex !important;
    align-items: stretch !important;
    gap: 17px !important;
    min-width: 100% !important;
    height: 70px !important;
    padding: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    flex: 0 0 calc((100% - 17px) / 2) !important;
    min-width: 260px !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 20px !important;
    gap: 16px !important;
    border-radius: 10px !important;
    color: #f7faff !important;
    background: linear-gradient(180deg, rgba(8, 16, 31, .88), rgba(5, 11, 22, .92)) !important;
    border: 2px solid rgba(38, 126, 255, .86) !important;
    box-shadow: inset 0 0 0 1px rgba(70, 155, 255, .13), 0 0 18px rgba(39, 126, 255, .14) !important;
    transform: none !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active,
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child {
    border-color: rgba(190, 136, 55, .94) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 197, 83, .16), 0 0 18px rgba(255, 184, 56, .11) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-icon {
    flex: 0 0 43px !important;
    width: 43px !important;
    height: 43px !important;
    border-radius: 9px !important;
    color: #2688ff !important;
    font-size: 23px !important;
    background: rgba(22, 72, 152, .48) !important;
    box-shadow: inset 0 0 0 1px rgba(67, 153, 255, .18), 0 0 15px rgba(47, 132, 255, .16) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active .server-icon,
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child .server-icon {
    color: #ffc14b !important;
    background: rgba(86, 63, 29, .62) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 196, 78, .20), 0 0 15px rgba(255, 184, 56, .14) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info {
    min-width: 0 !important;
    gap: 7px !important;
    line-height: 1.08 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
    color: #ffffff !important;
    font-size: clamp(14px, .86vw, 18px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info small {
    color: #b8c1d3 !important;
    font-size: clamp(12px, .68vw, 14px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:hover {
    color: #ffffff !important;
    transform: none !important;
}

@media (max-width: 1399.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: 40% 25% 35% !important;
        padding: 0 24px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
        gap: 10px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
        min-width: 135px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 13px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        min-width: 210px !important;
        padding: 0 14px !important;
    }
}

@media (max-width: 1199.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        height: auto !important;
        min-height: 330px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 18px !important;
        padding: 18px 20px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 28% !important;
        width: 72% !important;
        opacity: .62 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left,
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        min-height: auto !important;
        padding: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        padding-left: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        min-height: 430px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
        flex-wrap: wrap !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
        min-width: calc(50% - 6px) !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        height: auto !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex-basis: 82% !important;
        min-width: 245px !important;
        height: 68px !important;
        min-height: 68px !important;
    }
}

/* Home server hero v9 polish: sharper spacing, cleaner globe, stronger premium depth */
.premium-dashboard .premium-hero.premium-hero-exact {
    height: clamp(188px, 9.75vw, 228px) !important;
    min-height: 188px !important;
    border-radius: 13px !important;
    border-color: rgba(161, 116, 62, .78) !important;
    background:
        radial-gradient(circle at 58% 50%, rgba(248, 176, 57, .12), transparent 22%),
        radial-gradient(circle at 17% 7%, rgba(55, 118, 214, .13), transparent 34%),
        linear-gradient(100deg, #050b17 0%, #08172b 41%, #050a13 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 203, 100, .075),
        inset 0 22px 44px rgba(255, 255, 255, .018),
        0 12px 30px rgba(0, 0, 0, .22) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::before {
    background:
        linear-gradient(90deg,
            rgba(4, 9, 18, .08) 0%,
            rgba(4, 9, 18, .03) 38%,
            rgba(4, 9, 18, .12) 70%,
            rgba(4, 9, 18, .62) 100%),
        linear-gradient(180deg,
            rgba(255, 212, 122, .055) 0%,
            transparent 24%,
            rgba(0, 0, 0, .20) 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    left: 38.25% !important;
    top: -2px !important;
    bottom: -2px !important;
    width: 40.4% !important;
    opacity: 1 !important;
    background-image: url('/images/home-server-globe-polished.png') !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    filter: saturate(1.11) contrast(1.08) brightness(1.02) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe::before {
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .98) 0%,
            rgba(5, 10, 21, .36) 10%,
            rgba(5, 10, 21, .00) 43%,
            rgba(5, 10, 21, .08) 72%,
            rgba(5, 10, 21, .58) 100%),
        radial-gradient(circle at 57% 47%, rgba(255, 191, 76, .15), transparent 26%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
    grid-template-columns: minmax(560px, 41.2%) minmax(320px, 26.8%) minmax(610px, 32%) !important;
    padding: 0 42px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left {
    padding: 18px 20px 19px 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left .premium-eyebrow {
    margin-bottom: 8px !important;
    color: #f5bd51 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-shadow: 0 0 13px rgba(245, 189, 81, .27) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left h1 {
    margin-bottom: 9px !important;
    color: #fbfdff !important;
    font-size: clamp(25px, 1.45vw, 33px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .48) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
    margin-bottom: 24px !important;
    color: #bdc6d5 !important;
    font-size: clamp(15px, .88vw, 19px) !important;
    font-weight: 520 !important;
    line-height: 1.28 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
    gap: 17px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
    min-width: 172px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 11px !important;
    border-color: rgba(143, 105, 58, .58) !important;
    background:
        linear-gradient(180deg, rgba(15, 26, 43, .86), rgba(7, 13, 25, .72)) !important;
    color: #d8deea !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 205, 102, .04),
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 10px 20px rgba(0, 0, 0, .12) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span:hover {
    border-color: rgba(213, 160, 76, .72) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row i {
    color: #dca540 !important;
    font-size: 19px !important;
    filter: drop-shadow(0 0 8px rgba(220, 165, 64, .28)) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
    padding: 27px 0 20px 18px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
    min-height: 59px !important;
    margin-bottom: 12px !important;
    padding-left: clamp(152px, 8.7vw, 210px) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top .premium-eyebrow {
    color: #ffc65a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-shadow: 0 0 13px rgba(255, 198, 90, .26) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host {
    color: #d9e0eb !important;
    font-size: 17px !important;
    font-weight: 680 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host span {
    color: #fbd98b !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
    padding-top: 18px !important;
    color: #36e473 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
    gap: 18px !important;
    height: 73px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    flex-basis: calc((100% - 18px) / 2) !important;
    min-width: 292px !important;
    height: 73px !important;
    min-height: 73px !important;
    padding: 0 21px !important;
    border-radius: 11px !important;
    border-width: 2px !important;
    background:
        radial-gradient(circle at 18% 50%, rgba(47, 132, 255, .16), transparent 35%),
        linear-gradient(180deg, rgba(9, 18, 35, .92), rgba(5, 11, 22, .94)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(72, 154, 255, .17),
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 10px 24px rgba(0, 0, 0, .16),
        0 0 18px rgba(39, 126, 255, .13) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active,
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child {
    background:
        radial-gradient(circle at 18% 50%, rgba(245, 184, 72, .18), transparent 35%),
        linear-gradient(180deg, rgba(14, 18, 29, .93), rgba(7, 12, 21, .94)) !important;
    border-color: rgba(210, 150, 59, .96) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 204, 91, .19),
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 10px 24px rgba(0, 0, 0, .16),
        0 0 18px rgba(255, 184, 56, .12) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-icon {
    width: 45px !important;
    height: 45px !important;
    flex-basis: 45px !important;
    border-radius: 10px !important;
    font-size: 24px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
    font-size: 17px !important;
    line-height: 1 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info small {
    font-size: 13px !important;
    color: #bac4d6 !important;
}

@media (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: minmax(470px, 40.5%) minmax(260px, 25.5%) minmax(520px, 34%) !important;
        padding: 0 30px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
        min-width: 146px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        min-width: 232px !important;
    }
}

@media (max-width: 1399.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: minmax(410px, 39%) minmax(230px, 25%) minmax(460px, 36%) !important;
        padding: 0 24px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        padding-left: clamp(92px, 7vw, 132px) !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        min-width: 210px !important;
    }
}

@media (max-width: 1199.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        height: auto !important;
        min-height: 344px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        display: flex !important;
        padding: 20px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 25% !important;
        width: 82% !important;
        opacity: .58 !important;
    }
}

/* Home server hero v10 alignment: remove hard vertical cut and match reference proportions */
.premium-dashboard .premium-hero.premium-hero-exact {
    height: clamp(198px, 9.27vw, 222px) !important;
    min-height: 198px !important;
    background:
        radial-gradient(circle at 56% 48%, rgba(246, 184, 72, .115), transparent 23%),
        radial-gradient(circle at 20% 0%, rgba(33, 81, 151, .10), transparent 35%),
        linear-gradient(100deg, #050b17 0%, #071326 38%, #050913 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
    grid-template-columns: minmax(760px, 42.2%) minmax(385px, 22.8%) minmax(650px, 35%) !important;
    padding: 0 42px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left {
    padding-top: 17px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left .premium-eyebrow {
    font-size: 15px !important;
    margin-bottom: 8px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left h1 {
    font-size: 29px !important;
    line-height: 1.04 !important;
    margin-bottom: 9px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
    width: 890px !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    font-size: 17px !important;
    line-height: 1.22 !important;
    white-space: nowrap !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
    gap: 18px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
    min-width: 166px !important;
    height: 50px !important;
    min-height: 50px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    left: 38.1% !important;
    width: 40.6% !important;
    background-size: 100% 100% !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 4%, #000 15%, #000 82%, rgba(0,0,0,.55) 92%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 4%, #000 15%, #000 82%, rgba(0,0,0,.55) 92%, transparent 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe::before {
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .98) 0%,
            rgba(5, 10, 21, .30) 12%,
            rgba(5, 10, 21, .00) 45%,
            rgba(5, 10, 21, .04) 72%,
            rgba(5, 10, 21, .70) 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
    padding-top: 30px !important;
    padding-left: 12px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
    min-height: 73px !important;
    margin-bottom: 9px !important;
    padding-left: clamp(132px, 7.8vw, 190px) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top .premium-eyebrow {
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-current-host {
    font-size: 17px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
    padding-top: 19px !important;
    font-size: 15px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
    height: 70px !important;
    gap: 17px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    height: 70px !important;
    min-height: 70px !important;
    min-width: 285px !important;
    border-radius: 10px !important;
    padding: 0 20px !important;
}

@media (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: minmax(650px, 41.5%) minmax(300px, 22.5%) minmax(560px, 36%) !important;
        padding: 0 34px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
        width: 770px !important;
        font-size: 15px !important;
        white-space: normal !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        min-width: 235px !important;
    }
}

@media (max-width: 1399.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: minmax(500px, 40%) minmax(230px, 23%) minmax(460px, 37%) !important;
        padding: 0 24px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
        white-space: normal !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        padding-left: clamp(82px, 6.6vw, 120px) !important;
    }
}

/* Home server hero v11 globe: closer to the provided globe reference */
.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    left: 39.15% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 36.9% !important;
    opacity: 1 !important;
    background-image: url('/images/home-server-globe-reference-v11.png') !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    filter: saturate(1.08) contrast(1.05) brightness(1.01) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 4.5%, #000 13%, #000 88%, rgba(0,0,0,.52) 96%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 4.5%, #000 13%, #000 88%, rgba(0,0,0,.52) 96%, transparent 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe::before {
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .96) 0%,
            rgba(5, 10, 21, .20) 12%,
            rgba(5, 10, 21, .00) 42%,
            rgba(5, 10, 21, .03) 74%,
            rgba(5, 10, 21, .52) 100%),
        radial-gradient(circle at 61% 47%, rgba(255, 190, 73, .11), transparent 27%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact::before {
    background:
        linear-gradient(90deg,
            rgba(4, 9, 18, .07) 0%,
            rgba(4, 9, 18, .02) 40%,
            rgba(4, 9, 18, .08) 67%,
            rgba(4, 9, 18, .55) 100%),
        linear-gradient(180deg,
            rgba(255, 210, 115, .045) 0%,
            transparent 25%,
            rgba(0, 0, 0, .19) 100%) !important;
}

@media (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 38.5% !important;
        width: 39% !important;
    }
}

@media (max-width: 1199.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 22% !important;
        width: 84% !important;
        opacity: .62 !important;
    }
}

/* Home server hero v12 globe: restore the missing right hemisphere */
.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
    left: 37.65% !important;
    width: 41.15% !important;
    background-image: url('/images/home-server-globe-reference-v12.png') !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    filter: saturate(1.08) contrast(1.05) brightness(1.01) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 4%, #000 12%, #000 90%, rgba(0,0,0,.58) 96%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 4%, #000 12%, #000 90%, rgba(0,0,0,.58) 96%, transparent 100%) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe::before {
    background:
        linear-gradient(90deg,
            rgba(5, 10, 21, .96) 0%,
            rgba(5, 10, 21, .16) 11%,
            rgba(5, 10, 21, .00) 39%,
            rgba(5, 10, 21, .02) 78%,
            rgba(5, 10, 21, .46) 100%),
        radial-gradient(circle at 64% 48%, rgba(255, 190, 73, .10), transparent 28%) !important;
}

@media (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 37.2% !important;
        width: 42.4% !important;
    }
}

@media (max-width: 1199.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 20% !important;
        width: 88% !important;
    }
}

/* Home server hero v13 responsive fix: keep server selector visible on narrow/mobile screens */
@media (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        grid-template-columns: 39% 23% 38% !important;
        padding: 0 24px !important;
        min-width: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left,
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        min-width: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
        width: auto !important;
        white-space: normal !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        min-width: 0 !important;
    }
}

@media (max-width: 1279.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        height: auto !important;
        min-height: 342px !important;
        overflow: hidden !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        height: auto !important;
        min-height: 342px !important;
        padding: 18px 24px 22px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left {
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left h1 {
        max-width: 620px !important;
        font-size: clamp(22px, 2.8vw, 29px) !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-left p {
        max-width: min(760px, 100%) !important;
        margin-bottom: 18px !important;
        font-size: clamp(13px, 1.6vw, 16px) !important;
        white-space: normal !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row {
        width: 100% !important;
        max-width: 620px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
        min-width: 136px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 41% !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 54% !important;
        opacity: .66 !important;
        z-index: 0 !important;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 7%, #000 17%, #000 84%, rgba(0,0,0,.55) 94%, transparent 100%) !important;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 7%, #000 17%, #000 84%, rgba(0,0,0,.55) 94%, transparent 100%) !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        width: 100% !important;
        max-width: none !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        min-height: auto !important;
        margin: 0 0 12px !important;
        padding-left: 0 !important;
        align-items: center !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top .premium-eyebrow {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-current-host {
        font-size: 14px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-online-dot {
        padding-top: 0 !important;
        font-size: 13px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 3px !important;
        scrollbar-width: thin !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar {
        display: block !important;
        height: 5px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        display: flex !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 66px !important;
        gap: 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex: 0 0 245px !important;
        min-width: 245px !important;
        height: 66px !important;
        min-height: 66px !important;
        padding: 0 15px !important;
        gap: 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
        font-size: 21px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
        font-size: 14px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info small {
        font-size: 11px !important;
    }
}

@media (max-width: 575.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        min-height: 395px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        min-height: 395px !important;
        padding: 16px 14px 18px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-feature-row span {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex-basis: 220px !important;
        min-width: 220px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-globe {
        left: 22% !important;
        width: 96% !important;
        opacity: .42 !important;
    }
}

/* Home server hero v14: show all configured servers instead of hiding after two */
@media (min-width: 1280px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        height: auto !important;
        min-height: 236px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        min-height: 236px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
        padding-top: 24px !important;
        padding-bottom: 18px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        min-height: 62px !important;
        margin-bottom: 10px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller {
        overflow: visible !important;
        padding: 0 !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 58px !important;
        gap: 10px 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: none !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 14px !important;
        gap: 12px !important;
        border-width: 1.5px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-icon {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
        border-radius: 8px !important;
        font-size: 19px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
        font-size: 14px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .server-info small {
        font-size: 11px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1599.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact {
        min-height: 226px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
        min-height: 226px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        grid-auto-rows: 54px !important;
        gap: 9px 12px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 12px !important;
    }
}

/* Home server hero v15: compact one-line scrollable server chips */
.premium-dashboard .premium-hero.premium-hero-exact {
    min-height: 198px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-layout {
    min-height: 198px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right {
    padding-top: 30px !important;
    padding-bottom: 16px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
    min-height: 72px !important;
    margin-bottom: 6px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(103, 145, 201, .78) rgba(61, 86, 126, .42) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar {
    display: block !important;
    height: 7px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(61, 86, 126, .42) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-scroller::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(103, 145, 201, .78) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    flex: 0 0 172px !important;
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    gap: 10px !important;
    border-radius: 7px !important;
    border-width: 1.5px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 7px !important;
    font-size: 16px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info {
    min-width: 0 !important;
    gap: 3px !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .server-info small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
}

@media (max-width: 1279.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-hero-right-top {
        min-height: auto !important;
        margin-bottom: 10px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-track {
        height: 48px !important;
        max-height: 48px !important;
    }

    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex-basis: 172px !important;
        width: 172px !important;
        min-width: 172px !important;
        max-width: 172px !important;
        height: 48px !important;
        min-height: 48px !important;
    }
}

@media (max-width: 575.98px) {
    .premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
        flex-basis: 158px !important;
        width: 158px !important;
        min-width: 158px !important;
        max-width: 158px !important;
    }
}

/* Home server selector final state: only the current domain is gold. */
.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card {
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 50%, rgba(47, 132, 255, .16), transparent 35%),
        linear-gradient(180deg, rgba(9, 18, 35, .92), rgba(5, 11, 22, .94)) !important;
    border-color: rgba(38, 126, 255, .86) !important;
    box-shadow:
        inset 0 0 0 1px rgba(70, 155, 255, .14),
        0 0 18px rgba(39, 126, 255, .14) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child:not(.active) {
    background:
        radial-gradient(circle at 18% 50%, rgba(47, 132, 255, .16), transparent 35%),
        linear-gradient(180deg, rgba(9, 18, 35, .92), rgba(5, 11, 22, .94)) !important;
    border-color: rgba(38, 126, 255, .86) !important;
    box-shadow:
        inset 0 0 0 1px rgba(70, 155, 255, .14),
        0 0 18px rgba(39, 126, 255, .14) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active {
    background:
        radial-gradient(circle at 18% 50%, rgba(245, 184, 72, .18), transparent 35%),
        linear-gradient(180deg, rgba(14, 18, 29, .93), rgba(7, 12, 21, .94)) !important;
    border-color: rgba(210, 150, 59, .96) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 204, 91, .19),
        0 0 18px rgba(255, 184, 56, .12) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:not(.active) .server-icon {
    color: #2688ff !important;
    background: rgba(22, 72, 152, .48) !important;
    box-shadow: inset 0 0 0 1px rgba(67, 153, 255, .18), 0 0 15px rgba(47, 132, 255, .16) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:first-child:not(.active) .server-icon {
    color: #2688ff !important;
    background: rgba(22, 72, 152, .48) !important;
    box-shadow: inset 0 0 0 1px rgba(67, 153, 255, .18), 0 0 15px rgba(47, 132, 255, .16) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card.active .server-icon {
    color: #ffc14b !important;
    background: rgba(86, 63, 29, .62) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 196, 78, .20), 0 0 15px rgba(255, 184, 56, .14) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card::after {
    content: "";
    position: absolute;
    inset: -45% auto -45% -70%;
    width: 58%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 48%, transparent 100%);
    opacity: 0;
    transform: skewX(-18deg);
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:hover {
    color: #ffffff !important;
    border-color: rgba(255, 196, 78, .96) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 204, 91, .20),
        0 0 22px rgba(255, 184, 56, .22) !important;
}

.premium-dashboard .premium-hero.premium-hero-exact .premium-server-card:hover::after {
    animation: premium-server-shine .9s ease-out;
}

@keyframes premium-server-shine {
    0% { left: -70%; opacity: 0; }
    18% { opacity: .95; }
    100% { left: 118%; opacity: 0; }
}