/* VeyroNodes client area. Tokens are copied from the game panel (panel.veyronodes.com) so both feel like one product. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --vn-bg: #09090a;
    --vn-bg-deep: #060607;
    --vn-surface: #101012;
    --vn-surface-2: #18181b;
    --vn-border: #232326;
    --vn-text: #cbcbd0;
    --vn-head: #f4f4f5;
    --vn-light: #e4e4e7;
    --vn-muted: #8e8e96;
    --vn-faint: #5e5e66;
    --vn-accent: #ff0054;
    --vn-accent-hover: #e0004a;
    --vn-accent-soft: rgba(255, 0, 84, .12);
    --vn-green: #22c55e;
    --vn-amber: #f59e0b;
    --vn-red: #ef4444;
    --vn-blue: #3b82f6;
    --vn-radius: 20px;
    --vn-radius-card: 24px;
    --vn-radius-sm: 12px;
    --vn-sidebar: 264px;
    --vn-topbar: 60px;
    --vn-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
html { background: var(--vn-bg); color-scheme: dark; }
body.vn, body.vn.primary-bg-color {
    background: var(--vn-bg);
    color: var(--vn-text);
    font-family: var(--vn-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body.vn h1, body.vn h2, body.vn h3, body.vn h4, body.vn h5, body.vn h6,
body.vn .h1, body.vn .h2, body.vn .h3, body.vn .h4, body.vn .h5, body.vn .h6 {
    color: var(--vn-head);
    font-family: var(--vn-font);
    font-weight: 600;
}
body.vn a { color: var(--vn-head); }
body.vn a:hover { color: var(--vn-accent); text-decoration: none; }
body.vn .text-muted, body.vn small.text-muted { color: var(--vn-muted) !important; }
body.vn .text-dark, body.vn .text-body { color: var(--vn-text) !important; }
body.vn .text-primary { color: var(--vn-accent) !important; }
body.vn .text-success { color: var(--vn-green) !important; }
body.vn .text-danger { color: var(--vn-red) !important; }
body.vn .text-warning { color: var(--vn-amber) !important; }
body.vn .text-info { color: var(--vn-blue) !important; }
body.vn .bg-white, body.vn .bg-light { background-color: var(--vn-surface) !important; }
body.vn .border, body.vn .border-top, body.vn .border-bottom, body.vn .border-left, body.vn .border-right { border-color: var(--vn-border) !important; }
body.vn hr { border-color: var(--vn-border); }
body.vn ::selection { background: var(--vn-accent); color: #fff; }
body.vn code, body.vn pre { color: var(--vn-light); background: var(--vn-bg-deep); border-radius: 6px; }
body.vn pre { border: 1px solid var(--vn-border); padding: 12px; }
body.vn blockquote { border-left: 2px solid var(--vn-border); padding-left: 12px; color: var(--vn-muted); }

/* ---------- Shell: one frame (top bar + sidebar) around a rounded content panel, like the game panel ---------- */
html, body.vn, body.vn.primary-bg-color { background: var(--vn-surface); }
.vn-mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--vn-accent); color: #fff; font-size: 13px; line-height: 1;
}
.vn-mark-lg { width: 48px; height: 48px; font-size: 20px; }
.vn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--vn-head) !important; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }

.vn-top {
    position: fixed; inset: 0 0 auto 0; z-index: 1030;
    display: flex; align-items: center; gap: 12px;
    height: var(--vn-topbar); padding: 0 20px 0 24px;
    background: var(--vn-surface);
}
.vn-top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vn-top-link { color: var(--vn-muted) !important; font-weight: 500; font-size: 13px; padding: 0 10px; }
.vn-top-link:hover { color: var(--vn-head) !important; }
.vn-top-actions .btn { margin-left: 6px; }

.vn-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; padding: 0;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--vn-muted) !important; font-size: 14px; cursor: pointer;
}
.vn-icon-btn:hover, .vn-icon-btn:focus { color: var(--vn-head) !important; background: var(--vn-surface-2); outline: none; }
.vn-admin-btn { color: var(--vn-amber) !important; }
.vn-dot {
    position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--vn-accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.vn-menu-btn { display: none !important; }

.vn-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.vn-side {
    position: fixed; top: var(--vn-topbar); bottom: 0; left: 0; z-index: 1020;
    width: var(--vn-sidebar);
    display: flex; flex-direction: column;
    background: var(--vn-surface);
}
.vn-side-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; padding: 8px 14px 16px; }
.vn-nav-label { margin: 18px 10px 8px; color: var(--vn-faint); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.vn-nav-label:first-child { margin-top: 10px; }
.vn-side .vn-nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: 12px;
    color: var(--vn-muted); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none;
    transition: background .15s, color .15s;
}
.vn-side .vn-nav-item::-webkit-details-marker { display: none; }
.vn-side .vn-nav-item i.fa-fw { width: 18px; text-align: center; font-size: 14px; color: var(--vn-faint); transition: color .15s; }
.vn-side .vn-nav-item span { flex: 1; }
.vn-side .vn-nav-item:hover { color: var(--vn-head); }
.vn-side .vn-nav-item:hover i.fa-fw { color: var(--vn-text); }
.vn-side .vn-nav-item.active { background: var(--vn-surface-2); color: var(--vn-head); }
.vn-side .vn-nav-item.active i.fa-fw { color: var(--vn-accent); }
.vn-nav-caret { font-size: 10px; color: var(--vn-faint); }
.vn-nav-group[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.vn-side .vn-nav-sub {
    display: block; margin: 0 0 2px 42px; padding: 6px 12px;
    border-radius: 10px; color: var(--vn-muted); font-size: 13px;
}
.vn-side .vn-nav-sub:hover { color: var(--vn-head); }
.vn-side .vn-nav-sub.active { color: var(--vn-head); background: var(--vn-surface-2); }
.vn-side-user { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--vn-surface-2); }
.vn-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--vn-accent); color: #fff !important; font-weight: 600; font-size: 12px;
}
.vn-user-meta { flex: 1; min-width: 0; }
.vn-user-name { color: var(--vn-head); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-user-mail { color: var(--vn-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vn-main { padding-top: var(--vn-topbar); min-height: 100vh; display: flex; }
.vn-in .vn-main { padding-left: var(--vn-sidebar); }
.vn-panel {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    background: var(--vn-bg);
    border-top: 1px solid var(--vn-surface-2);
    min-height: calc(100vh - var(--vn-topbar));
}
.vn-in .vn-panel { border-left: 1px solid var(--vn-surface-2); border-top-left-radius: var(--vn-radius); }

.vn-pagehead {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 32px 0;
}
.vn-pagehead-title { flex: 1; min-width: 0; }
.vn-pagehead-title h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.vn-pagehead-title p { margin: 4px 0 0; color: var(--vn-muted); font-size: 13px; }
.vn-pagehead-actions { display: flex; align-items: center; gap: 10px; }
.vn-credit {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
    background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: 12px;
    color: var(--vn-head) !important; font-weight: 600; white-space: nowrap;
}
.vn-credit i { color: var(--vn-faint); }
.vn-credit:hover { border-color: var(--vn-faint); }
.vn-pagehead-actions .btn { height: 40px; display: inline-flex; align-items: center; }

#main-body.vn-content { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 32px 40px; }
.vn-content > .row { margin-left: -12px; margin-right: -12px; }
.vn-content > .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }

.vn-footer { padding: 20px 32px 28px; color: var(--vn-faint); font-size: 12px; text-align: center; }
.vn-footer span { margin: 0 4px; }
.vn-footer a, .vn-link-btn { color: var(--vn-faint) !important; background: none; border: 0; padding: 0; font-size: 12px; cursor: pointer; }
.vn-footer a:hover, .vn-link-btn:hover { color: var(--vn-text) !important; }

/* Signed-out and auth pages: centred card like the panel's login screen */
.vn-auth #main-body.vn-content { display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
.vn-auth #main-body.vn-content .card, .vn-auth .mw-540 { max-width: 540px; margin-left: auto !important; margin-right: auto !important; }
.vn-page-login .login-form .float-left { float: none !important; margin-bottom: 12px; }
.vn-page-login #login { width: 100%; padding: 13px; }
.vn-page-clientregister #main-body.vn-content { max-width: 960px; }
.vn-page-clientregister .vn-content .card { max-width: none; }
.vn-hero { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.vn-hero h2 { margin: 20px 0 8px; font-size: 24px; }
.vn-hero p { color: var(--vn-muted); }
.vn-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0; }
.vn-hero-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vn-hero-links a {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: 16px;
    color: var(--vn-text); font-weight: 500;
}
.vn-hero-links a:hover { border-color: var(--vn-faint); color: var(--vn-head); }
.vn-hero-links i { color: var(--vn-faint); width: 18px; text-align: center; }

/* ---------- Dashboard ---------- */
.vn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.vn-stat {
    display: block; padding: 20px;
    background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius);
    color: var(--vn-text) !important; transition: border-color .15s;
}
.vn-stat:hover { border-color: #2e2e33; }
.vn-stat-head { display: flex; align-items: center; justify-content: space-between; color: var(--vn-muted); font-size: 13px; font-weight: 500; }
.vn-stat-head i { color: var(--vn-faint); font-size: 14px; }
.vn-stat-body { margin-top: 14px; }
.vn-stat-value { color: var(--vn-head); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.vn-stat-sub { margin-top: 4px; color: var(--vn-faint); font-size: 12px; }

.vn-card { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius); overflow: hidden; }
.vn-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--vn-border); }
.vn-card-head h2 { margin: 0; font-size: 15px; }
.vn-table thead th { background: transparent; color: var(--vn-faint) !important; font-size: 12px; }
.vn-table td, .vn-table th { padding: 14px 24px !important; vertical-align: middle !important; }
.vn-strong { color: var(--vn-head) !important; font-weight: 600; }
.vn-muted { color: var(--vn-muted); }
.vn-empty { padding: 28px 24px !important; color: var(--vn-muted); text-align: center; }
.vn-empty a { color: var(--vn-accent) !important; }
.vn-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 24px; border-bottom: 1px solid var(--vn-border); color: var(--vn-text) !important;
}
.vn-list-row:last-child { border-bottom: 0; }
.vn-list-row:hover { background: var(--vn-surface-2); }

/* Dashboard promo cards (Discord, referrals) */
.vn-promo { display: flex; align-items: center; gap: 16px; padding: 18px 24px; }
.vn-promo-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--vn-surface-2); color: var(--vn-accent); font-size: 18px; }
.vn-promo-icon-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }
.vn-promo-discord { color: #5865f2; font-size: 20px; }
.vn-promo-text { flex: 1; min-width: 0; }

/* Game icon next to a service */
.vn-server-cell { display: flex; align-items: center; gap: 12px; }
.vn-game { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--vn-surface-2); border: 1px solid var(--vn-border); color: var(--vn-text); font-size: 15px; }

/* Sidebar badge and top bar account menu */
.vn-nav-badge { padding: 1px 8px; border-radius: 999px; background: var(--vn-accent); color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vn-account-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-left: 4px; padding: 0 6px 0 2px; border: 0; border-radius: 999px; background: transparent; color: var(--vn-muted); cursor: pointer; }
.vn-account-btn:hover, .vn-account-btn:focus { background: var(--vn-surface-2); color: var(--vn-head); outline: none; }
.vn-account-btn .fa-chevron-down { font-size: 10px; }
.vn-avatar-sm { width: 30px; height: 30px; font-size: 11px; }
body.vn .vn-account-menu { min-width: 240px; padding: 6px; margin-top: 10px; }
body.vn .vn-account-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
body.vn .vn-account-menu .dropdown-item i { color: var(--vn-faint); }
.vn-account-who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--vn-border); }

/* Affiliate area */
.vn-aff-hero { padding: 24px; }
.vn-aff-hero h2 { margin: 0 0 4px; font-size: 20px; }
.vn-aff-hero-text { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.vn-copy { display: flex; gap: 10px; }
.vn-copy .btn { white-space: nowrap; }
.vn-copy .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.vn-aff-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vn-aff-signup { max-width: 720px; margin: 4vh auto 0; text-align: center; padding: 40px 32px; }
.vn-aff-signup h2 { margin: 18px 0 8px; font-size: 24px; }
.vn-aff-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; text-align: left; }
.vn-aff-steps div { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--vn-bg); border: 1px solid var(--vn-border); border-radius: 14px; font-size: 13px; }
.vn-aff-steps b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vn-accent); color: #fff; font-size: 12px; }
.vn-terms { list-style: none; margin: 0; padding: 16px 24px; }
.vn-terms li { display: flex; gap: 12px; padding: 8px 0; font-size: 13px; }
.vn-terms i { flex: none; width: 16px; margin-top: 3px; color: var(--vn-faint); text-align: center; }

/* Game server panel on the service page (modules/servers/veyronodes/clientarea.tpl) */
.vn-srv { margin: 0 0 24px; padding: 0; background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius); text-align: left; overflow: hidden; }
.vn-srv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--vn-border); }
.vn-srv-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vn-srv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-srv-msg { margin: 16px 24px 0; }
.vn-srv-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 24px 8px; }
.vn-meter-top { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--vn-muted); font-size: 13px; }
.vn-meter-top b { color: var(--vn-head); font-weight: 600; }
.vn-bar { height: 8px; border-radius: 999px; background: var(--vn-surface-2); overflow: hidden; }
.vn-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--vn-light); transition: width .4s ease; }
.vn-meter-hot .vn-bar i { background: var(--vn-accent); }
.vn-srv-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 24px 20px; border-bottom: 1px solid var(--vn-border); }
.vn-srv-facts div { display: flex; flex-direction: column; font-size: 12px; color: var(--vn-faint); }
.vn-srv-facts b { color: var(--vn-head); font-size: 14px; font-weight: 600; }
.vn-srv-connect { padding: 16px 24px 20px; }
.vn-connect-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 0; }
.vn-connect-row > span { width: 130px; color: var(--vn-muted); font-size: 13px; }
.vn-connect-row code { flex: 1; min-width: 0; padding: 7px 12px; background: var(--vn-bg); border: 1px solid var(--vn-border); border-radius: 10px; color: var(--vn-head); font-size: 13px; overflow-wrap: anywhere; }
body.vn .product-details-tab-container, body.vn .product-details .module-client-area { text-align: left; }

@media (max-width: 767.98px) {
    .vn-promo { flex-wrap: wrap; padding: 16px; }
    .vn-promo .btn { width: 100%; }
    .vn-srv-usage { grid-template-columns: 1fr; }
    .vn-srv-head, .vn-srv-usage, .vn-srv-facts, .vn-srv-connect { padding-left: 16px; padding-right: 16px; }
    .vn-connect-row > span { width: 100%; }
    .vn-copy { flex-direction: column; }
    .vn-aff-steps { grid-template-columns: 1fr; }
    .vn-aff-signup { padding: 28px 18px; }
}

/* Status pills (dashboard and WHMCS's .label.status) */
.vn-pill, body.vn .label, body.vn .badge {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border: 1px solid currentColor; border-radius: 999px;
    background: transparent; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.vn-pill-plan, body.vn .badge, body.vn .label-default { color: var(--vn-text); border-color: var(--vn-border); background: var(--vn-surface-2); }
.vn-pill-active, .vn-pill-paid, .vn-pill-open, .vn-pill-answered, .vn-pill-completed, .vn-pill-accepted,
body.vn .status-active, body.vn .status-paid, body.vn .status-open, body.vn .status-completed, body.vn .status-answered,
body.vn .status-accepted, body.vn .status-delivered, body.vn .label-success { color: var(--vn-green); background: rgba(34, 197, 94, .08); }
.vn-pill-pending, .vn-pill-unpaid, .vn-pill-suspended, .vn-pill-customer-reply, .vn-pill-in-progress, .vn-pill-on-hold, .vn-pill-payment-pending,
body.vn .status-pending, body.vn .status-unpaid, body.vn .status-suspended, body.vn .status-customer-reply, body.vn .status-inprogress,
body.vn .status-onhold, body.vn .status-payment-pending, body.vn .status-grace, body.vn .status-refunded, body.vn .label-warning { color: var(--vn-amber); background: rgba(245, 158, 11, .08); }
.vn-pill-overdue, .vn-pill-fraud, .vn-pill-collections,
body.vn .status-fraud, body.vn .status-collections, body.vn .status-lost, body.vn .status-dead, body.vn .label-danger { color: var(--vn-red); background: rgba(239, 68, 68, .08); }
.vn-pill-terminated, .vn-pill-cancelled, .vn-pill-closed, .vn-pill-draft,
body.vn .status-terminated, body.vn .status-cancelled, body.vn .status-closed, body.vn .status-expired, body.vn .status-draft { color: var(--vn-muted); background: rgba(142, 142, 150, .08); }
body.vn .label-info { color: var(--vn-blue); background: rgba(59, 130, 246, .08); }
/* Ticket statuses with an admin-set colour keep it as the outline */
body.vn .label.status[style] { color: #fff; border-color: transparent; }
body.vn .badge-info, body.vn .badge-primary { color: var(--vn-head); background: var(--vn-surface-2); border-color: var(--vn-border); }
body.vn .badge-success { color: var(--vn-green); }
body.vn .badge-danger { color: var(--vn-red); }
body.vn .badge-warning { color: var(--vn-amber); }

/* ---------- Bootstrap components ---------- */
body.vn .card, body.vn .panel {
    background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-card);
    color: var(--vn-text); box-shadow: none;
}
body.vn .card > .card-header, body.vn .card-header, body.vn .panel-heading {
    background: var(--vn-bg-deep); border-bottom: 1px solid var(--vn-border); color: var(--vn-head);
    padding: 16px 20px;
}
body.vn .card > .card-header:first-child { border-radius: calc(var(--vn-radius-card) - 1px) calc(var(--vn-radius-card) - 1px) 0 0; }
body.vn .card-footer, body.vn .panel-footer { background: var(--vn-bg-deep); border-top: 1px solid var(--vn-border); }
body.vn .card-footer:empty { display: none; }
body.vn .card-title { color: var(--vn-head); font-size: 15px; font-weight: 600; }
body.vn .card-body { padding: 20px; }
body.vn .card[class*="card-accent-"] { border-top: 1px solid var(--vn-border); }

body.vn .list-group-item {
    background: transparent; border-color: var(--vn-border); color: var(--vn-text);
}
body.vn .list-group-item-action:hover, body.vn .list-group-item-action:focus { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .list-group-item.active { background: var(--vn-surface-2); border-color: var(--vn-border); color: var(--vn-head); }
body.vn .list-group-item.disabled { color: var(--vn-faint); background: transparent; }

/* WHMCS contextual sidebar (page actions, filters) */
body.vn .sidebar .card { margin-bottom: 20px !important; }
body.vn .sidebar .list-group-item { border-color: var(--vn-border); padding: 10px 20px; font-size: 13px; }
body.vn .sidebar .list-group-item .badge { background: var(--vn-surface-2); color: var(--vn-text); }
body.vn .sidebar .list-group-item.active, body.vn .sidebar .list-group-item.active:hover { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .sidebar .card-minimise { color: var(--vn-faint); }
body.vn .sidebar .card-title { font-size: 14px; }

/* Tables and DataTables */
body.vn .table { color: var(--vn-text); background: transparent; }
body.vn .table th, body.vn .table td { border-color: var(--vn-border); }
body.vn .table thead th {
    border-bottom: 1px solid var(--vn-border); border-top: 0;
    color: var(--vn-muted); font-size: 12px; font-weight: 500; text-transform: none;
}
body.vn .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .015); }
body.vn .table-hover tbody tr:hover, body.vn .table-list > tbody > tr:hover { background: var(--vn-surface-2) !important; color: var(--vn-head); }
body.vn .table-container, body.vn .table-responsive > .table-bordered { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-card); overflow: hidden; }
body.vn .table-container { padding: 0; }
body.vn .table-list { background: transparent !important; }
body.vn .table-list > thead > tr > th { background: var(--vn-bg-deep) !important; border-bottom: 1px solid var(--vn-border) !important; padding: 14px 16px; }
body.vn .table-list > tbody > tr > td { background: transparent !important; border-top: 1px solid var(--vn-border) !important; padding: 14px 16px; }
body.vn .table-list > thead > tr > th.sorting_asc, body.vn .table-list > thead > tr > th.sorting_desc { color: var(--vn-head); }
body.vn .dataTables_wrapper .dataTables_info, body.vn .dataTables_wrapper .dataTables_length,
body.vn .dataTables_wrapper .dataTables_filter, body.vn .dataTables_wrapper .dataTables_paginate { color: var(--vn-muted); padding: 12px 16px; }
body.vn .dataTables_wrapper .dataTables_filter input, body.vn .dataTables_wrapper .dataTables_length select {
    background: var(--vn-bg); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-sm); color: var(--vn-head);
}
body.vn .table-bordered, body.vn .table-bordered th, body.vn .table-bordered td { border-color: var(--vn-border); }
body.vn .table-active, body.vn .table-active > td, body.vn .table-active > th { background: var(--vn-surface-2); }

/* Forms */
body.vn label, body.vn .form-control-label, body.vn .control-label { color: var(--vn-text); font-size: 13px; font-weight: 500; }
body.vn .form-control, body.vn .custom-select, body.vn select.form-control, body.vn textarea.form-control,
body.vn input[type="text"]:not(.btn), body.vn input[type="email"], body.vn input[type="password"], body.vn input[type="tel"], body.vn input[type="number"], body.vn input[type="url"], body.vn input[type="search"] {
    background-color: var(--vn-bg); border: 1px solid var(--vn-border); color: var(--vn-head);
    border-radius: var(--vn-radius-sm); box-shadow: none;
}
body.vn .form-control:not(textarea):not([multiple]), body.vn .custom-select { min-height: 44px; }
body.vn .form-control:focus, body.vn .custom-select:focus, body.vn input:focus {
    background-color: var(--vn-bg); border-color: var(--vn-faint); color: var(--vn-head);
    box-shadow: 0 0 0 3px rgba(255, 0, 84, .18); outline: none;
}
body.vn .form-control::placeholder { color: var(--vn-faint); }
/* twenty-one scopes the register form with #registration, so match that specificity */
body.vn #registration .field, body.vn #registration .form-control { background-color: var(--vn-bg); border: 1px solid var(--vn-border); color: var(--vn-head); border-radius: var(--vn-radius-sm); min-height: 44px; }
body.vn #registration .form-control:focus, body.vn #registration .field:focus { border-color: var(--vn-faint); box-shadow: 0 0 0 3px rgba(255, 0, 84, .18); }
body.vn #registration .field[readonly], body.vn #registration .form-control[readonly], body.vn #registration .field[disabled] { background-color: var(--vn-surface-2); color: var(--vn-muted); }
body.vn #registration .prepend-icon .field-icon, body.vn #registration .prepend-icon .field-icon i { color: var(--vn-faint); }
body.vn #registration .field-help-text { color: var(--vn-muted); }
body.vn .form-control:disabled, body.vn .form-control[readonly] { background-color: var(--vn-surface-2); color: var(--vn-muted); opacity: 1; }
body.vn .custom-select, body.vn select.form-control {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%238e8e96' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; padding-right: 36px;
}
body.vn select.form-control[multiple] { background-image: none; padding-right: 12px; }
body.vn select option { background: var(--vn-surface); color: var(--vn-head); }
body.vn .input-group-text {
    background: var(--vn-surface-2); border: 1px solid var(--vn-border); color: var(--vn-muted); border-radius: var(--vn-radius-sm);
}
body.vn .input-group-merge .input-group-text { background: var(--vn-bg); }
body.vn .input-group-merge .form-control { border-left: 0; }
body.vn .input-group > .form-control:not(:last-child), body.vn .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.vn .input-group > .form-control:not(:first-child), body.vn .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.vn .input-group .btn-reveal-pw, body.vn .input-group .btn-reveal-pw:hover { background: var(--vn-bg); border-color: var(--vn-border); color: var(--vn-muted); }
body.vn .form-text, body.vn .help-block { color: var(--vn-muted); }
body.vn .field-error-msg, body.vn .invalid-feedback { color: var(--vn-red); }
body.vn .is-invalid, body.vn .has-error .form-control { border-color: var(--vn-red) !important; }
body.vn input[type="checkbox"], body.vn input[type="radio"] { accent-color: var(--vn-accent); }
body.vn .custom-control-label::before { background: var(--vn-bg); border-color: var(--vn-border); }
body.vn .custom-control-input:checked ~ .custom-control-label::before { background: var(--vn-accent); border-color: var(--vn-accent); }
body.vn fieldset, body.vn legend { border-color: var(--vn-border); color: var(--vn-head); }
body.vn .intl-tel-input .country-list, body.vn .iti__country-list { background: var(--vn-surface); border-color: var(--vn-border); color: var(--vn-text); }
body.vn .intl-tel-input .country-list .country.highlight, body.vn .iti__country.iti__highlight { background: var(--vn-surface-2); }
body.vn .bootstrap-switch { border-color: var(--vn-border); background: var(--vn-bg); border-radius: var(--vn-radius-sm); }
body.vn .bootstrap-switch .bootstrap-switch-label { background: var(--vn-surface-2); color: var(--vn-text); }
body.vn .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, body.vn .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--vn-accent); color: #fff; }
body.vn .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: var(--vn-surface); color: var(--vn-muted); }

/* Buttons: the panel's light primary button, outlined for the rest. Pink stays for small accents. */
body.vn .btn { border-radius: 12px; font-weight: 600; font-size: 14px; padding: 9px 18px; box-shadow: none !important; }
body.vn .btn-sm, body.vn .btn-group-sm > .btn { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
body.vn .btn-xs { padding: 3px 10px; font-size: 12px; border-radius: 8px; }
body.vn .btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 14px; }
body.vn .btn-primary, body.vn .btn-success, body.vn .btn-checkout {
    background: var(--vn-light); border: 1px solid var(--vn-light); color: var(--vn-bg);
}
body.vn .btn-primary:hover, body.vn .btn-primary:focus, body.vn .btn-primary:active, body.vn .btn-primary.active,
body.vn .btn-success:hover, body.vn .btn-success:focus, body.vn .btn-success:active {
    background: #fff !important; border-color: #fff !important; color: var(--vn-bg) !important;
}
body.vn .btn-default, body.vn .btn-secondary, body.vn .btn-light, body.vn .btn-info, body.vn .btn-outline-primary, body.vn .btn-outline-secondary, body.vn .btn-outline-default {
    background: transparent; border: 1px solid var(--vn-border); color: var(--vn-text);
}
body.vn .btn-default:hover, body.vn .btn-default:focus, body.vn .btn-default.active, body.vn .btn-secondary:hover, body.vn .btn-light:hover,
body.vn .btn-info:hover, body.vn .btn-outline-primary:hover, body.vn .btn-outline-secondary:hover, body.vn .btn-outline-default:hover {
    background: var(--vn-surface-2) !important; border-color: var(--vn-faint) !important; color: var(--vn-head) !important;
}
body.vn .btn-danger { background: transparent; border: 1px solid rgba(239, 68, 68, .5); color: var(--vn-red); }
body.vn .btn-danger:hover { background: var(--vn-red) !important; border-color: var(--vn-red) !important; color: #fff !important; }
body.vn .btn-warning { background: transparent; border: 1px solid rgba(245, 158, 11, .5); color: var(--vn-amber); }
body.vn .btn-warning:hover { background: var(--vn-amber); color: #09090a; }
body.vn .btn-link { color: var(--vn-muted); }
body.vn .btn-link:hover { color: var(--vn-head); }
body.vn .btn:disabled, body.vn .btn.disabled { opacity: .45; }
body.vn .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.vn .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Alerts */
body.vn .alert { border-radius: var(--vn-radius); border: 1px solid var(--vn-border); background: var(--vn-surface); color: var(--vn-text); }
body.vn .alert a { color: var(--vn-head); text-decoration: underline; }
body.vn .alert-success { border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .07); }
body.vn .alert-info { border-color: rgba(59, 130, 246, .35); background: rgba(59, 130, 246, .07); }
body.vn .alert-warning { border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .07); }
body.vn .alert-danger, body.vn .alert-error { border-color: rgba(239, 68, 68, .4); background: rgba(239, 68, 68, .07); }
body.vn .alert .close { color: var(--vn-text); text-shadow: none; }

/* Tabs, pills, pagination, breadcrumb, progress */
body.vn .nav-tabs { border-bottom: 1px solid var(--vn-border); }
body.vn .nav-tabs .nav-link { color: var(--vn-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; }
body.vn .nav-tabs .nav-link:hover { color: var(--vn-head); }
body.vn .nav-tabs .nav-link.active, body.vn .nav-tabs .nav-item.show .nav-link, body.vn .nav-tabs > li.active > a { color: var(--vn-head); background: transparent; border-bottom-color: var(--vn-accent); }
body.vn .tab-content { color: var(--vn-text); }
body.vn .nav-pills .nav-link { color: var(--vn-muted); border-radius: 10px; }
body.vn .nav-pills .nav-link.active { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .responsive-tabs-sm { background: var(--vn-surface); border-color: var(--vn-border); }
body.vn .responsive-tabs-sm .nav-item { border-color: var(--vn-border) !important; }
body.vn .responsive-tabs-sm .nav-item a.active { background: var(--vn-surface-2) !important; }
body.vn .responsive-tabs-sm-connector .channel { background: var(--vn-surface); border-color: var(--vn-border); }
body.vn .responsive-tabs-sm-connector .bottom-border { border-color: var(--vn-border); }
body.vn .pagination .page-link, body.vn .pagination > li > a, body.vn .pagination > li > span {
    background: transparent; border-color: var(--vn-border); color: var(--vn-text);
}
body.vn .pagination .page-item.active .page-link, body.vn .pagination > .active > a, body.vn .pagination > .active > span { background: var(--vn-light); border-color: var(--vn-light); color: var(--vn-bg); }
body.vn .pagination .page-item.disabled .page-link { background: transparent; color: var(--vn-faint); border-color: var(--vn-border); }
body.vn .breadcrumb { background: transparent; padding: 0; color: var(--vn-muted); }
body.vn .breadcrumb-item.active { color: var(--vn-muted); }
body.vn .progress { background: var(--vn-surface-2); border-radius: 999px; }
body.vn .progress-bar { background: var(--vn-accent); }

/* Dropdowns, modals, popovers, tooltips */
body.vn .dropdown-menu { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
body.vn .dropdown-item { color: var(--vn-text); }
body.vn .dropdown-item:hover, body.vn .dropdown-item:focus, body.vn .dropdown-item.active { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .dropdown-divider { border-color: var(--vn-border); }
body.vn .modal-content { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-card); color: var(--vn-text); }
body.vn .modal .modal-header, body.vn .modal-header { background: var(--vn-bg-deep); border-bottom: 1px solid var(--vn-border); border-radius: var(--vn-radius-card) var(--vn-radius-card) 0 0; }
body.vn .modal-footer { border-top: 1px solid var(--vn-border); }
body.vn .modal-title { color: var(--vn-head); }
body.vn .close { color: var(--vn-text); text-shadow: none; opacity: .7; }
body.vn .close:hover { color: var(--vn-head); }
body.vn .modal-backdrop.show { opacity: .7; }
body.vn .modal-localisation .modal-content { background: var(--vn-surface); }
body.vn .modal-localisation .h5 { color: var(--vn-head); }
body.vn .modal-localisation .item-selector .item { border-color: var(--vn-border); color: var(--vn-text); border-radius: 10px; }
body.vn .modal-localisation .item-selector .item:hover { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .modal-localisation .item-selector .item.active { background: var(--vn-light); border-color: var(--vn-light); color: var(--vn-bg); }
body.vn .popover { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-sm); }
body.vn .popover-header { background: var(--vn-bg-deep); border-color: var(--vn-border); color: var(--vn-head); }
body.vn .popover-body { color: var(--vn-text); }
body.vn .popover .arrow::before, body.vn .popover .arrow::after { border-bottom-color: var(--vn-border) !important; border-top-color: var(--vn-border) !important; }
body.vn .popover-user-notifications { border-color: var(--vn-border); }
body.vn .popover-user-notifications ul li { border-color: var(--vn-border); }
body.vn .popover-user-notifications ul li a { color: var(--vn-text); }
body.vn .popover-user-notifications ul li a:hover { background: var(--vn-surface-2); }
body.vn .tooltip-inner { background: var(--vn-light); color: var(--vn-bg); border-radius: 8px; }
body.vn #fullpage-overlay { background: rgba(6, 6, 7, .85); }

/* ---------- twenty-one page parts ---------- */
body.vn .header-lined h1, body.vn .header-lined h2 { color: var(--vn-head); }
body.vn .header-lined { border-color: var(--vn-border); }
body.vn .client-home-cards .card-header { background: var(--vn-bg-deep); }
body.vn .client-home-cards .list-group, body.vn .client-home-cards .list-group .list-group-item { border-color: var(--vn-border) !important; }
body.vn .tiles .tile { background: var(--vn-surface); border-color: var(--vn-border); color: var(--vn-text); }
body.vn .tiles .tile:hover { background: var(--vn-surface-2); }
body.vn .tiles .tile .stat { color: var(--vn-head); }
body.vn .action-icon-btns a { background: var(--vn-surface); border-color: var(--vn-border); color: var(--vn-text); border-radius: var(--vn-radius); }
body.vn .action-icon-btns a:hover { background: var(--vn-surface-2); color: var(--vn-head); }
body.vn .action-icon-btns a .ico-container i { color: var(--vn-accent); }
body.vn .product-details .product-icon, body.vn .product-status { border-radius: var(--vn-radius); }
body.vn .product-details .product-icon { background: var(--vn-bg-deep); border: 1px solid var(--vn-border); color: var(--vn-head); }
body.vn .product-details .product-icon h3, body.vn .product-details .product-icon h4 { color: var(--vn-head); }
body.vn .product-details .product-icon .fa-stack .fa-circle { color: var(--vn-accent) !important; }
body.vn .product-status-text { color: #fff; }
body.vn .twofa-setup .activation-msg, body.vn .twofa-module { border-color: var(--vn-border); }
body.vn .twofa-setup .backup-code { background: var(--vn-bg-deep); color: var(--vn-head); }
body.vn .ticket-reply { background: var(--vn-surface); border: 1px solid var(--vn-border); border-radius: var(--vn-radius-card); }
body.vn .ticket-reply .posted-by, body.vn .ticket-reply .user { background: var(--vn-bg-deep); border-color: var(--vn-border); color: var(--vn-muted); border-radius: var(--vn-radius-card) var(--vn-radius-card) 0 0; }
body.vn .ticket-reply.staff { border-color: rgba(255, 0, 84, .35); }
body.vn .ticket-reply .message { color: var(--vn-text); }
body.vn .ticket-reply .attachments { border-color: var(--vn-border); }
body.vn .md-editor, body.vn .md-editor > textarea.markdown-editor, body.vn .md-editor > .md-preview { background: var(--vn-bg); border-color: var(--vn-border); color: var(--vn-head); }
body.vn .md-editor > .btn-toolbar { background: var(--vn-bg-deep); border-color: var(--vn-border); }
body.vn .md-editor .btn-default { border-color: var(--vn-border); }
body.vn .markdown-editor-status { background: var(--vn-bg-deep); border-color: var(--vn-border); color: var(--vn-muted); }
body.vn .announcements .announcement article { border-color: var(--vn-border); }
body.vn .kb-article-item:hover { background: var(--vn-surface-2); }
body.vn .requestor-type-registereduser, body.vn .requestor-type-owner, body.vn .requestor-type-operator { border-radius: 999px; }
body.vn .div-service-status .label { color: inherit; }
body.vn .home-domain-search, body.vn .domain-search-hero { display: none; }

/* This host sells game servers, bots and TeamSpeak only: hide domain, SSL and other add-on store entries. */
body.vn [menuItemName="Domains"], body.vn [menuItemName="My Domains"], body.vn [menuItemName="Domain Registration"],
body.vn [menuItemName="Register a New Domain"], body.vn [menuItemName="Transfer Domains to Us"], body.vn [menuItemName="Transfer a Domain"],
body.vn [menuItemName="Renew Domains"], body.vn [menuItemName="Domain Renewals"], body.vn [menuItemName="Domain Search"],
body.vn [menuItemName="Domains Expiring Soon"], body.vn [menuItemName="Register a Domain"], body.vn [menuItemName="Website Security"],
body.vn [menuItemName="Mailbox"], body.vn [menuItemName="Sitelock"], body.vn [menuItemName="Site Builder"],
body.vn [menuItemName="Recommended Services"], body.vn .mc-promo-login, body.vn .mc-promo-manage,
body.vn #Secondary_Sidebar-Client_Shortcuts-Register_New_Domain, body.vn #Primary_Sidebar-Service_Details_Actions-Domain_Settings { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .vn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .vn-in .vn-main { padding-left: 0; }
    .vn-in .vn-panel { border-left: 0; border-top-left-radius: 0; }
    .vn-side { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 20px 0 40px rgba(0, 0, 0, .5); }
    .vn-nav-toggle:checked ~ .vn-side { transform: none; }
    .vn-nav-toggle:checked ~ .vn-scrim { display: block; }
    .vn-scrim { display: none; position: fixed; inset: var(--vn-topbar) 0 0 0; z-index: 1010; background: rgba(0, 0, 0, .6); }
    .vn-menu-btn { display: inline-flex !important; margin-left: -8px; }
    .vn-top { padding: 0 12px 0 16px; }
    .vn-pagehead { padding: 20px 16px 0; }
    #main-body.vn-content { padding: 20px 16px 32px; }
    .vn-footer { padding: 16px; }
}
@media (max-width: 575.98px) {
    .vn-stats { gap: 12px; }
    .vn-stat { padding: 16px; }
    .vn-stat-value { font-size: 22px; }
    .vn-pagehead-title h1 { font-size: 20px; }
    .vn-pagehead-actions { width: 100%; }
    .vn-pagehead-actions .btn { flex: 1; justify-content: center; }
    .vn-table td, .vn-table th, .vn-list-row, .vn-card-head { padding-left: 16px !important; padding-right: 16px !important; }
    .vn-hero-links { grid-template-columns: 1fr; }
    .vn-out .vn-brand .vn-word { display: none; }
    body.vn .card-body.px-sm-5 { padding: 24px !important; }
}