/* *****************************************************

    Xlorin Host — Client Area Theme
    Reskins the WHMCS "twenty-one" template to match
    the Xlorin Host frontend design system (dark/light,
    glass panels, brand gradient, rounded-full controls).

    Loads after theme.css — every rule below intentionally
    matches WHMCS's own selectors at the same specificity
    so it wins the cascade without !important spam.

***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&family=Hind+Siliguri:wght@400;500;600&display=swap');

html {
    font-size: 14px;
}

/* ---------------------------------------------------
   1. Design tokens (Deep accurate dark / Crisp clean light)
--------------------------------------------------- */
:root {
    --background: #070d19;
    --card: #0d1726;
    --card-hover: #121f33;
    --popover: #0d1726;
    --foreground: #f8fafc;
    --muted: #132238;
    --muted-foreground: #94a3b8;
    --primary: #38bdf8;
    --secondary: #2563eb;
    --accent: #60a5fa;
    --destructive: #ef4444;
    --border: rgba(255, 255, 255, 0.09);
    --hairline: rgba(255, 255, 255, 0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --brand-gradient: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    --glass-bg: rgba(13, 23, 38, 0.75);
}

html.light-mode {
    --background: #f8fafc;
    --card: #ffffff;
    --card-hover: #f1f5f9;
    --popover: #ffffff;
    --foreground: #0f172a;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --primary: #0284c7;
    --secondary: #2563eb;
    --accent: #0ea5e9;
    --destructive: #dc2626;
    --border: #e2e8f0;
    --hairline: #f1f5f9;
    --glass-bg: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------
   Universal Lucide Icons Styling
--------------------------------------------------- */
[data-lucide], svg.lucide {
    width: 1.15em;
    height: 1.15em;
    stroke-width: 1.85;
    vertical-align: -0.15em;
    display: inline-block;
    flex-shrink: 0;
}
.xlorin-nav-item [data-lucide], .xlorin-nav-item svg.lucide {
    width: 18px;
    height: 18px;
    color: var(--primary);
}
.xlorin-nav-item > a.active [data-lucide], .xlorin-nav-item > a.active svg.lucide {
    color: #fff;
}
.xlorin-topbar-btn [data-lucide], .xlorin-topbar-btn svg.lucide {
    width: 18px;
    height: 18px;
}
.xlorin-caret[data-lucide], .xlorin-sub-caret[data-lucide] {
    width: 14px;
    height: 14px;
    color: var(--muted-foreground);
    margin-left: auto;
    transition: transform 0.2s ease;
}
details[open] > summary .xlorin-caret[data-lucide], details[open] > summary .xlorin-sub-caret[data-lucide] {
    transform: rotate(180deg);
}

/* ---------------------------------------------------
   Notifications Dropdown Styling
--------------------------------------------------- */
.xlorin-notifications-dropdown {
    position: relative;
}
.xlorin-notifications-dropdown .dropdown-toggle::after {
    display: none;
}
.xlorin-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--background);
}
.xlorin-notif-menu {
    width: 320px;
    max-width: 90vw;
    padding: 0;
    border-radius: 12px;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden;
    margin-top: 8px;
}
.xlorin-notif-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--foreground);
    background: var(--muted);
}
.xlorin-notif-body {
    max-height: 350px;
    overflow-y: auto;
}
.xlorin-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xlorin-notif-item {
    border-bottom: 1px solid var(--hairline);
    transition: background-color 0.15s ease;
}
.xlorin-notif-item:last-child {
    border-bottom: none;
}
.xlorin-notif-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--foreground);
}
.xlorin-notif-link:hover {
    background-color: var(--muted);
    text-decoration: none;
    color: var(--foreground);
}
.xlorin-notif-icon {
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.xlorin-notif-item.severity-danger .xlorin-notif-icon {
    color: #ef4444;
}
.xlorin-notif-item.severity-warning .xlorin-notif-icon {
    color: #f59e0b;
}
.xlorin-notif-item.severity-info .xlorin-notif-icon {
    color: #3b82f6;
}
.xlorin-notif-item.severity-success .xlorin-notif-icon {
    color: #10b981;
}
.xlorin-notif-msg {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--foreground);
}
.xlorin-notif-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted-foreground);
}
.xlorin-notif-empty [data-lucide] {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

/* ---------------------------------------------------
   Universal Dark / Light Mode Core Component Rules
--------------------------------------------------- */
.card, .panel, .tile, .content-area, .main-content, #main-body,
.list-group-item, .modal-content, .popover,
.tab-content, .dropdown-menu, .card-body, .card-footer {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.card-header, .panel-heading, .modal-header, .popover-header {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.bg-white, .bg-light, .bg-default {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
}

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

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

/* Forms & Inputs */
.form-control, .custom-select, .input-group-text, select.form-control, textarea.form-control {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.form-control:focus, .custom-select:focus {
    background-color: var(--card) !important;
    border-color: var(--primary) !important;
    color: var(--foreground) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.form-control::placeholder {
    color: var(--muted-foreground) !important;
    opacity: 0.7;
}

/* Tables */
.table {
    color: var(--foreground) !important;
    border-color: var(--border) !important;
}
.table th, .table td {
    border-top-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}
.table thead th {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}
html.light-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02) !important;
}
.table-hover tbody tr:hover {
    background-color: var(--muted) !important;
}

/* Alerts & Notices */
.alert {
    border-radius: var(--radius) !important;
    font-size: 0.9rem;
}
.alert-warning, .xh-alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}
html.light-mode .alert-warning, html.light-mode .xh-alert-warning {
    background-color: #fefce8 !important;
    border-color: #fef08a !important;
    color: #92400e !important;
}

.alert-danger, .xh-alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}
html.light-mode .alert-danger, html.light-mode .xh-alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-info, .xh-alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #60a5fa !important;
}
html.light-mode .alert-info, html.light-mode .xh-alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.alert-success, .xh-alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}
html.light-mode .alert-success, html.light-mode .xh-alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

/* Nav Tabs */
.nav-tabs {
    border-bottom-color: var(--border) !important;
}
.nav-tabs .nav-link {
    color: var(--muted-foreground) !important;
    border: 1px solid transparent !important;
}
.nav-tabs .nav-link:hover {
    color: var(--foreground) !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--primary) !important;
    background-color: var(--card) !important;
    border-color: var(--border) var(--border) var(--card) !important;
    font-weight: 600;
}

/* Modals & Popovers */
.modal-backdrop.show {
    opacity: 0.7;
}
.popover-body {
    color: var(--foreground) !important;
}
.popover .arrow::before, .popover .arrow::after {
    border-bottom-color: var(--card) !important;
}

/* ---------------------------------------------------
   2. Base / typography
--------------------------------------------------- */
body {
    background-color: var(--background) !important;
    color: var(--foreground);
    font-family: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body:lang(bn), :lang(bn) {
    font-family: "Hind Siliguri", "Inter", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--foreground);
}

a {
    color: var(--primary);
}
a:hover {
    color: var(--accent);
}

::selection {
    background: var(--primary);
    color: #fff;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--background);
}
::-webkit-scrollbar-thumb {
    background: var(--muted);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* ---------------------------------------------------
   3. Header / topbar / navbar
--------------------------------------------------- */
header.header,
.primary-bg-color {
    background-color: var(--card) !important;
    border-bottom: 1px solid var(--hairline);
}

header.header .topbar {
    background-color: var(--popover);
    border-bottom: 1px solid var(--hairline);
    color: var(--muted-foreground);
}

header.header .btn,
header.header .toolbar .nav-link,
header.header .navbar a,
header.header .navbar-nav a {
    color: var(--foreground);
}

header.header .search .form-control {
    background-color: var(--muted);
    color: var(--foreground);
    border-color: var(--border);
}

.navbar {
    background-color: transparent;
}

/* ---------------------------------------------------
   4. Cards, panels, sidebar, list groups (glass effect)
--------------------------------------------------- */
.card,
.mc-promo-manage,
.mc-promo-login {
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 24px -18px rgba(2, 6, 20, 0.55);
    color: var(--foreground);
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--hairline);
}

.card-title,
.card-text {
    color: var(--foreground);
}

.sidebar {
    background-color: transparent;
}

.list-group-item {
    background-color: var(--card);
    border-color: var(--hairline);
    color: var(--foreground);
}
.list-group-item.active {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
}
a.list-group-item:hover,
a.list-group-item:focus {
    background-color: var(--muted);
    color: var(--foreground);
}

.well {
    background-color: var(--muted);
    border-color: var(--hairline);
}

/* ---------------------------------------------------
   5. Buttons
--------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary {
    background: var(--brand-gradient);
    background-color: var(--primary);
    border-color: transparent;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.25), 0 8px 20px -10px rgba(10, 132, 255, 0.45);
}

.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    background-color: transparent;
    color: var(--foreground);
    border-color: var(--border);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background-color: var(--muted);
    color: var(--foreground);
    border-color: var(--hairline);
}

/* ---------------------------------------------------
   6. Forms
--------------------------------------------------- */
.form-control,
select.form-control,
textarea.form-control,
.input-group-text {
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: var(--radius);
}
.form-control::placeholder {
    color: var(--muted-foreground);
    opacity: 1;
}
.form-control:focus {
    background-color: var(--muted);
    border-color: var(--primary);
    color: var(--foreground);
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.20);
}

/* ---------------------------------------------------
   7. Tables
--------------------------------------------------- */
.table {
    color: var(--foreground);
}
.table th,
.table td {
    border-color: var(--hairline);
}
.table thead th {
    color: var(--muted-foreground);
    border-bottom-color: var(--hairline);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}
.table-hover tbody tr:hover {
    background-color: var(--muted);
    color: var(--foreground);
}

/* ---------------------------------------------------
   8. Badges, alerts
--------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
}
.badge-primary { background-color: var(--primary); }
.badge-secondary { background-color: var(--secondary); }
.badge-danger { background-color: var(--destructive); }

.alert {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    color: var(--foreground);
}

/* ---------------------------------------------------
   9. Dropdowns, modals
--------------------------------------------------- */
.dropdown-menu {
    background-color: var(--popover);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 24px -18px rgba(2, 6, 20, 0.6);
}
.dropdown-item {
    color: var(--foreground);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--muted);
    color: var(--foreground);
}

.modal-content {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    color: var(--foreground);
}
.modal-header,
.modal-footer {
    border-color: var(--hairline);
}

/* ---------------------------------------------------
   10. Nav tabs, breadcrumb, pagination
--------------------------------------------------- */
.nav-tabs {
    border-bottom-color: var(--hairline);
}
.nav-tabs .nav-link {
    color: var(--muted-foreground);
    border: none;
    border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link.active {
    color: var(--primary);
    background: transparent;
    border-bottom-color: var(--primary);
}

.master-breadcrumb {
    background-color: var(--popover);
    border-bottom: 1px solid var(--hairline);
}
.breadcrumb {
    background-color: transparent;
    color: var(--muted-foreground);
}
.breadcrumb .breadcrumb-item.active {
    color: var(--muted-foreground);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted-foreground);
}

.pagination .page-link {
    background-color: var(--card);
    border-color: var(--hairline);
    color: var(--foreground);
}
.pagination .page-item.active .page-link {
    background: var(--brand-gradient);
    border-color: transparent;
}

/* ---------------------------------------------------
   10b. Homepage hero + quick-link tiles
--------------------------------------------------- */
.bg-white,
.bg-light {
    background-color: var(--card) !important;
}

.home-domain-search {
    border-bottom: 1px solid var(--hairline);
}
.home-domain-search h2 {
    color: var(--foreground);
}

.action-icon-btns a {
    background-color: var(--card);
    border: 1px solid var(--hairline);
    color: var(--muted-foreground);
    border-radius: var(--radius-xl);
}
.action-icon-btns a .ico-container i {
    color: var(--primary);
}
.action-icon-btns a:hover {
    color: var(--foreground);
    background-color: var(--muted);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.client-home-cards .card-header {
    background-color: transparent;
}

/* ---------------------------------------------------
   11. Footer
--------------------------------------------------- */
footer.footer,
#footer {
    background-color: var(--card);
    border-top: 1px solid var(--hairline);
    color: var(--muted-foreground);
}
footer.footer a,
#footer a {
    color: var(--muted-foreground);
}
footer.footer a:hover,
#footer a:hover {
    color: var(--primary);
}

/* ---------------------------------------------------
   12. App shell — persistent sidebar layout
--------------------------------------------------- */
.xlorin-shell-body {
    display: flex;
    min-height: 100vh;
}
.xlorin-app-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* --- Sidebar --- */
.xlorin-sidebar {
    width: 264px;
    flex: 0 0 264px;
    position: sticky;
    top: 0;
    height: 100vh;
    background-color: var(--card);
    border-right: 1px solid var(--hairline);
    z-index: 1000;
    transition: transform 0.25s ease;
}
.xlorin-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.xlorin-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 18px;
    border-bottom: 1px solid var(--hairline);
    flex: 0 0 auto;
}
.xlorin-sidebar-brand img.logo-img {
    max-height: 32px;
}
.xlorin-sidebar-brand span {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    color: var(--foreground);
    font-size: 1.1rem;
}
.xlorin-sidebar-close {
    display: none;
    background: transparent;
    border: none;
    color: var(--muted-foreground);
    font-size: 18px;
    cursor: pointer;
}

.xlorin-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 12px;
}
.xlorin-nav-heading {
    margin: 20px 12px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.xlorin-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.xlorin-nav-item {
    margin-bottom: 2px;
}
.xlorin-nav-item > a,
.xlorin-nav-item summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--muted-foreground);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    list-style: none;
}
.xlorin-nav-item summary::-webkit-details-marker {
    display: none;
}
.xlorin-nav-item > a:hover,
.xlorin-nav-item summary:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.xlorin-nav-item > a i:not(.xlorin-caret),
.xlorin-nav-item summary i:not(.xlorin-caret) {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: 0.95rem;
}
.xlorin-nav-item > a.active {
    background: var(--brand-gradient);
    color: #fff;
}
.xlorin-nav-item > a.active i {
    color: #fff;
}
.xlorin-nav-item .xlorin-caret {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--muted-foreground);
    transition: transform 0.2s ease;
}
.xlorin-nav-item details[open] > summary .xlorin-caret {
    transform: rotate(180deg);
}
.xlorin-nav-item .badge {
    margin-left: auto;
}

.xlorin-nav-sublist {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 30px;
}
.xlorin-nav-sublist li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--muted-foreground);
    font-size: 0.85rem;
    text-decoration: none;
}
.xlorin-nav-sublist li a:hover {
    background-color: var(--muted);
    color: var(--foreground);
}
.xlorin-nav-divider {
    height: 1px;
    background-color: var(--hairline);
    margin: 8px 12px;
}

.xlorin-sidebar-foot {
    flex: 0 0 auto;
    padding: 14px 12px 18px;
    border-top: 1px solid var(--hairline);
}
.xlorin-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 14px;
}
.xlorin-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.xlorin-sidebar-user-info {
    min-width: 0;
}
.xlorin-sidebar-user-name {
    color: var(--foreground);
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xlorin-sidebar-logout {
    color: var(--muted-foreground);
    font-size: 0.78rem;
}
.xlorin-sidebar-logout:hover {
    color: var(--destructive);
}

.xlorin-theme-toggle-sidebar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background-color: var(--muted);
    border: 1px solid var(--hairline);
    color: var(--foreground);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.xlorin-theme-toggle-sidebar .xlorin-icon-sun { display: none; }
html.light-mode .xlorin-theme-toggle-sidebar .xlorin-icon-moon { display: none; }
html.light-mode .xlorin-theme-toggle-sidebar .xlorin-icon-sun { display: inline-block; }
.xlorin-theme-label-light { display: none; }
html.light-mode .xlorin-theme-label-dark { display: none; }
html.light-mode .xlorin-theme-label-light { display: inline; }

/* --- Sidebar backdrop (mobile) --- */
.xlorin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 20, 0.55);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.xlorin-sidebar-backdrop.is-visible {
    display: block;
    opacity: 1;
}

/* --- Main column --- */
.xlorin-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.xlorin-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 900;
    flex-wrap: nowrap;
}
.xlorin-sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    color: var(--foreground);
    cursor: pointer;
}
.xlorin-topbar-item {
    display: flex;
    align-items: center;
}
.xlorin-topbar-search {
    flex: 1 1 auto;
    max-width: 340px;
}
.xlorin-topbar-search .form-control {
    height: 38px;
}

/* --- Responsive: off-canvas sidebar below 992px --- */
@media (max-width: 991.98px) {
    .xlorin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }
    .xlorin-sidebar.is-open {
        transform: translateX(0);
    }
    .xlorin-sidebar-close {
        display: block;
    }
    .xlorin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .xlorin-topbar {
        padding: 10px 14px;
    }
}

/* ---------------------------------------------------
   13. Standalone auth shell (login)
--------------------------------------------------- */
.xlorin-auth-body {
    min-height: 100vh;
}

.xlorin-auth-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    overflow: hidden;
    isolation: isolate;
    box-sizing: border-box;
}

.xlorin-auth-shell::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 18% 20%, rgba(53, 154, 255, 0.22), transparent 42%),
        radial-gradient(circle at 85% 78%, rgba(36, 78, 204, 0.24), transparent 45%);
    z-index: -2;
}

.xlorin-auth-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, transparent 46%, rgba(53, 154, 255, 0.08) 47%, rgba(53, 154, 255, 0.08) 49%, transparent 50%),
        linear-gradient(120deg, transparent 60%, rgba(74, 179, 255, 0.06) 61%, rgba(74, 179, 255, 0.06) 63%, transparent 64%),
        radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: auto, auto, 22px 22px;
    background-position: 0 0, 0 0, 0 0;
    z-index: -1;
}

.xlorin-auth-column {
    position: relative;
    width: 100%;
    max-width: 460px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.xlorin-auth-column-wide {
    max-width: 900px;
}

.xlorin-auth-brand {
    margin-bottom: 22px;
}
.xlorin-auth-logo-link {
    display: inline-block;
}
.xlorin-auth-logo {
    max-height: 40px;
}

.xlorin-auth-card {
    width: 100%;
}

.xlorin-auth-column > * {
    width: 100%;
}

#registration {
    width: 100%;
}

.xlorin-input-pill {
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.xlorin-input-pill:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.20);
}
.xlorin-input-pill .input-group-prepend .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--primary);
}
.xlorin-input-pill .form-control {
    background-color: transparent;
    border: none;
}
.xlorin-input-pill .form-control:focus {
    background-color: transparent;
    box-shadow: none;
}
.xlorin-input-pill .input-group-append .btn {
    background-color: transparent;
    border: none;
    color: var(--muted-foreground);
}

.xlorin-auth-remember input[type="checkbox"] {
    position: static;
    margin: 0 8px 0 0;
}

.xlorin-turnstile-wrap {
    display: flex;
    justify-content: center;
    margin: 6px 0 20px;
}

.xlorin-auth-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
}

#registration .field,
#registration .form-control {
    background-color: var(--muted);
    color: var(--foreground);
    border-color: var(--border);
}
#registration .field:focus,
#registration .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.20);
}
#registration .field-icon i {
    color: var(--primary);
}
#registration label {
    color: var(--muted-foreground);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
    background-color: var(--muted);
    opacity: 0.6;
}
#registration .prepend-icon .field,
#registration .prepend-icon .form-control {
    border-radius: 999px;
}
#registration .prepend-icon .field:not(#inputPhone),
#registration .prepend-icon .form-control:not(#inputPhone) {
    padding-left: 40px;
}
#registration .input-group.xlorin-input-pill .form-control {
    height: auto;
}
#registration .input-group > .form-control {
    width: 1%;
}

.xlorin-auth-section-title {
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 30px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
}
.xlorin-auth-section-title:first-child {
    margin-top: 0;
}

/* ---------------------------------------------------
   14. Client area dashboard — welcome + stat cards
--------------------------------------------------- */
.xlorin-dash-welcome h2 {
    font-size: 1.6rem;
}
.xlorin-wave {
    display: inline-block;
    animation: xlorin-wave 2.2s ease-in-out 1;
    transform-origin: 70% 70%;
}
@keyframes xlorin-wave {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
    50% { transform: rotate(-4deg); }
    60% { transform: rotate(10deg); }
}

.xlorin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 991.98px) {
    .xlorin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .xlorin-stat-grid { grid-template-columns: 1fr; }
}

.xlorin-stat-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 20px;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.xlorin-stat-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 24px -18px rgba(2, 6, 20, 0.55);
}

.xlorin-stat-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.xlorin-stat-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.xlorin-stat-icon-blue { background: rgba(53, 154, 255, 0.15); color: var(--primary); }
.xlorin-stat-icon-green { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.xlorin-stat-icon-red { background: rgba(217, 83, 79, 0.15); color: #d9534f; }
.xlorin-stat-icon-gold { background: rgba(240, 173, 78, 0.15); color: #f0ad4e; }
.xlorin-stat-icon-purple { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }

.xlorin-stat-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-top: -4px;
}
.xlorin-stat-badge-success { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.xlorin-stat-badge-danger { background: rgba(217, 83, 79, 0.15); color: #d9534f; }

.xlorin-stat-number {
    font-family: "Manrope", "Inter", sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1.15;
}
.xlorin-stat-label {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    margin-top: 2px;
}
.xlorin-stat-foot {
    border-top: 1px solid var(--hairline);
    padding-top: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.xlorin-stat-card:hover .xlorin-stat-foot {
    color: var(--accent);
}
.xlorin-stat-foot i {
    font-size: 0.75rem;
}
.xlorin-stat-foot-green { color: #5cb85c; }
.xlorin-stat-foot-purple { color: #9b59b6; }
.xlorin-stat-foot-gold { color: #f0ad4e; }

.xlorin-stat-note {
    font-size: 0.8rem;
    font-weight: 500;
}
.xlorin-stat-note-green { color: #5cb85c; }
.xlorin-stat-note-gold { color: #f0ad4e; }
.xlorin-stat-note-danger { color: #d9534f; font-weight: 700; }

/* ---------------------------------------------------
   14c. My Services — tabs, list card, empty state, promo
--------------------------------------------------- */
.xlorin-services-card .card-body {
    padding: 0;
}
.xlorin-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background-color: transparent;
}

.xlorin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.xlorin-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.xlorin-tab:hover {
    color: var(--foreground);
    background-color: var(--muted);
}
.xlorin-tab.active {
    color: var(--primary);
    background-color: rgba(53, 154, 255, 0.12);
}

.xlorin-services-actions {
    display: flex;
    gap: 10px;
}

.xlorin-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted-foreground);
}
.xlorin-empty-state i {
    font-size: 2.5rem;
    opacity: 0.35;
    margin-bottom: 14px;
    display: block;
}

.xlorin-promo-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 18px 22px;
    border-radius: var(--radius-xl);
    background-color: var(--glass-bg);
    border: 1px solid var(--hairline);
}
.xlorin-promo-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
    font-size: 1.1rem;
}
.xlorin-promo-body {
    flex: 1 1 auto;
    min-width: 0;
}
.xlorin-promo-title {
    font-weight: 700;
    color: var(--foreground);
}
.xlorin-promo-text {
    font-size: 0.85rem;
}
@media (max-width: 575.98px) {
    .xlorin-promo-banner { flex-wrap: wrap; }
}

/* ---------------------------------------------------
   14b. Dashboard — Upcoming Renewals + Quick Actions
--------------------------------------------------- */
.xlorin-dash-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}
@media (max-width: 991.98px) {
    .xlorin-dash-row { grid-template-columns: 1fr; }
}
.xlorin-dash-card .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xlorin-dash-card .card-title > i:first-child {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
}
.xlorin-dash-card .card-title .float-right {
    margin-left: auto;
}

.xlorin-renewal-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border-left: none;
    border-right: none;
    padding: 14px 4px;
}
.xlorin-renewal-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
}
.xlorin-renewal-icon-green {
    background: rgba(92, 184, 92, 0.15);
    color: #5cb85c;
}
.xlorin-renewal-body {
    flex: 1 1 auto;
    min-width: 0;
}
.xlorin-renewal-label {
    font-weight: 600;
    color: var(--foreground);
}
.xlorin-renewal-date {
    font-size: 0.8rem;
}
.xlorin-renewal-amount {
    font-weight: 700;
    color: var(--foreground);
    white-space: nowrap;
}

.xlorin-quickactions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 480px) {
    .xlorin-quickactions-grid { grid-template-columns: repeat(2, 1fr); }
}
.xlorin-quickaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 18px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    background: var(--muted);
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.xlorin-quickaction:hover {
    text-decoration: none;
    color: var(--foreground);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.xlorin-quickaction-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ---------------------------------------------------
   15. Client area dashboard — home panels (Your Info,
   Active Products, Overdue Invoices, etc.)
--------------------------------------------------- */
.client-home-cards .card {
    margin-bottom: 20px;
}
.client-home-cards .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
}
.client-home-cards .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
}
.client-home-cards .card-title > i {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
}
.client-home-cards .card-title .float-right {
    order: 2;
    margin-left: auto;
}
.client-home-cards .card-body {
    padding: 20px;
}
.client-home-cards .list-group-item {
    border-left: none;
    border-right: none;
    background-color: transparent;
    padding: 14px 20px;
}
.client-home-cards .list-group-item:first-child {
    border-top: none;
}
.client-home-cards .card-footer {
    background-color: transparent;
}
.client-home-cards .card-footer:empty {
    display: none;
    padding: 0;
    border: none;
}

.card-accent-green .card-title > i { background: rgba(92, 184, 92, 0.15); color: #5cb85c; }
.card-accent-red .card-title > i { background: rgba(217, 83, 79, 0.15); color: #d9534f; }
.card-accent-gold .card-title > i,
.card-accent-sun-flower .card-title > i { background: rgba(240, 173, 78, 0.15); color: #f0ad4e; }
.card-accent-blue .card-title > i { background: rgba(91, 192, 222, 0.15); color: #5bc0de; }
.card-accent-orange .card-title > i,
.card-accent-brand-cpanel-orange .card-title > i { background: rgba(255, 102, 0, 0.15); color: #ff6600; }
.card-accent-purple .card-title > i,
.card-accent-amethyst .card-title > i { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }
.card-accent-teal .card-title > i,
.card-accent-turquoise .card-title > i { background: rgba(26, 188, 156, 0.15); color: #1abc9c; }
.card-accent-midnight-blue .card-title > i,
.card-accent-wet-asphalt .card-title > i { background: rgba(53, 154, 255, 0.15); color: var(--primary); }

/* ---------------------------------------------------
   16. Secondary sidebar cards (View / Actions / filters
   — used across Services, Domains, Invoices, etc.)
--------------------------------------------------- */
.card-sidebar .card-header {
    padding: 16px 20px;
}
.card-sidebar .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
}
.card-sidebar .card-title > i:not(.card-minimise) {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
}
.card-sidebar .card-title .badge.float-right,
.card-sidebar .card-title .card-minimise {
    margin-left: auto;
    color: var(--muted-foreground);
}
.card-sidebar .card-body {
    padding: 20px;
}
.card-sidebar .list-group-item {
    padding: 12px 20px;
    border-left: none;
    border-right: none;
    background-color: transparent;
}
.card-sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-sidebar .sidebar-menu-item-icon-wrapper {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    background: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-sidebar .sidebar-menu-item-icon {
    color: var(--primary);
    font-size: 0.8rem;
}
.card-sidebar .sidebar-menu-item-label {
    flex: 1 1 auto;
}
.card-sidebar .sidebar-menu-item-badge {
    margin-left: auto;
}
.card-sidebar .list-group-item.active {
    background: var(--brand-gradient);
    color: #fff;
}
.card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
}
.card-sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: #fff;
}

/* ---------------------------------------------------
   17. DataTables list pages (Services, Domains, Invoices...)
--------------------------------------------------- */
.dataTables_wrapper table.table-list,
table.table-list thead th,
.table-list > tbody > tr > td {
    background-color: var(--card);
    border-color: var(--hairline);
}
table.table-list thead th {
    color: var(--muted-foreground);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.table-list > tbody > tr:hover > td {
    background-color: var(--muted);
}
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_length select {
    background-color: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: 999px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    color: var(--muted-foreground);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--foreground) !important;
    border-radius: var(--radius);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--muted) !important;
    border-color: var(--hairline) !important;
    color: var(--foreground) !important;
}

.label.status {
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.xlorin-auth-foot {
    position: relative;
    text-align: center;
    margin-top: 20px;
    color: var(--muted-foreground);
    font-size: 0.8rem;
}

/* ---------------------------------------------------
   18. Detail pages — service, invoice, domain, ticket,
   account (reskins the stock twenty-one markup)
--------------------------------------------------- */

/* --- Reusable label/value info grid --- */
.xlorin-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-top: 22px;
}
.xlorin-info-item {
    background: var(--card);
    padding: 16px 18px;
}
.xlorin-info-item-wide {
    grid-column: 1 / -1;
}
.xlorin-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    margin-bottom: 5px;
}
.xlorin-info-value {
    font-size: 0.95rem;
    color: var(--foreground);
    word-break: break-word;
}

/* --- Service Details — header --- */
.xlorin-service-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.xlorin-service-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
}
.xlorin-service-titles {
    flex: 1 1 auto;
    min-width: 0;
}
.xlorin-service-name {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0;
    color: var(--foreground);
}
.xlorin-service-group {
    color: var(--muted-foreground);
    font-size: 0.9rem;
}
.xlorin-service-status {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--muted);
    color: var(--muted-foreground);
}
.xlorin-service-status.status-active { background: rgba(92,184,92,0.15); color: #5cb85c; }
.xlorin-service-status.status-pending { background: rgba(240,173,78,0.15); color: #f0ad4e; }
.xlorin-service-status.status-suspended,
.xlorin-service-status.status-terminated,
.xlorin-service-status.status-cancelled,
.xlorin-service-status.status-fraud { background: rgba(217,83,79,0.15); color: #d9534f; }

.xlorin-service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.xlorin-service-actions .btn { display: inline-flex; align-items: center; gap: 7px; }

/* --- Detail-page tabs (service / domain) --- */
.product-details-tab-container,
.tab-content.bg-white {
    background-color: var(--card) !important;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-top: 4px;
}
.responsive-tabs-sm-connector { display: none; }
#tabOverview .nav-tabs,
.clientareadomaindetails .nav-tabs {
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 0;
    gap: 2px;
}
#tabOverview .nav-tabs .nav-link,
.clientareadomaindetails .nav-tabs .nav-link {
    border: none;
    color: var(--muted-foreground);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--radius) var(--radius) 0 0;
}
#tabOverview .nav-tabs .nav-link.active,
.clientareadomaindetails .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}
.product-details-tab-container .row {
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
}
.product-details-tab-container .row:last-child { border-bottom: none; }
.module-client-area { text-align: left !important; }

/* --- View Invoice / View Quote (standalone pages, now load custom.css) --- */
body { background-color: var(--background); color: var(--foreground); }
.invoice-container {
    max-width: 900px;
    margin: 30px auto;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl, 16px);
    padding: 34px;
    color: var(--foreground);
}
.invoice-container .invoice-header h2,
.invoice-container .invoice-header h3 { color: var(--foreground); }
.invoice-container hr { border-color: var(--hairline); }
.invoice-status span,
.quote-status span {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 18px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.invoice-status .paid, .quote-status .accepted { background: rgba(92,184,92,0.15); color: #5cb85c; }
.invoice-status .unpaid { background: rgba(240,173,78,0.16); color: #f0ad4e; }
.invoice-status .cancelled, .invoice-status .refunded,
.invoice-status .collections { background: rgba(217,83,79,0.15); color: #d9534f; }
.invoice-container table > thead > tr > th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    border-color: var(--hairline) !important;
}
.invoice-container table > tbody > tr > td,
.invoice-container table > tfoot > tr > td,
.invoice-container table > tbody > tr > th { border-color: var(--hairline) !important; }
.invoice-items-total-due { color: var(--primary); font-weight: 800; }

/* --- View Ticket --- */
.card.view-ticket { border: 1px solid var(--hairline); border-radius: var(--radius-xl); }
.ticket-reply {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 18px;
    margin-bottom: 14px;
    background: var(--card);
}
.ticket-reply.staff {
    border-left: 3px solid var(--primary);
    background: rgba(53, 154, 255, 0.05);
}
.ticket-reply .posted-by {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--hairline);
    color: var(--muted-foreground);
    font-size: 0.85rem;
}
.ticket-reply .posted-by-name { color: var(--foreground); font-weight: 700; }
.requestor-badge, .label.requestor-badge {
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
    background: var(--muted);
    color: var(--muted-foreground);
}
.requestor-type-owner, .requestor-type-admin { background: rgba(53,154,255,0.15); color: var(--primary); }
#ticketReplyContainer .card, .ticket-reply-form { border-radius: var(--radius-xl); }

/* --- Support ticket list / departments / submit steps --- */
.support-department-list .card,
.ticket-list .card { border-radius: var(--radius-xl); }
#frmpriority, #ticketsubmit .form-control { border-radius: var(--radius-lg); }
.kbsuggestions, .kb-suggestions {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--card);
}

/* --- Account / profile / security / users / payment methods --- */
.clientareadetails .card,
.account-details .card,
.usermgmt .card,
.payment-methods .card,
#frmClientAreaDetails .card { border-radius: var(--radius-xl); }
.clientareadetails label,
.account-details label,
.usermgmt label,
form[action*="action=details"] label,
form[action*="paymentmethods"] label {
    color: var(--muted-foreground);
    font-weight: 600;
    font-size: 0.85rem;
}
.user-management-item,
.payment-method-item,
.contact-list-item {
    border: 1px solid var(--hairline) !important;
    border-radius: var(--radius-xl);
    background: var(--card);
    margin-bottom: 10px;
}
.two-factor-status .card,
.security-question .card { border-radius: var(--radius-xl); }

/* --- Domain details tabs / management --- */
.clientareadomaindetails .nav-tabs .nav-link { padding: 10px 16px; }
.domain-management-actions .btn,
#domainoptions .btn { border-radius: 999px; }
.clientareadomaindetails .card,
.domain-details .card { border-radius: var(--radius-xl); }
.nameserver-row, .dnsmanagement-row, .contact-info-row {
    border-bottom: 1px solid var(--hairline);
    padding: 8px 0;
}

/* --- Order form (standard_cart — already loads custom.css via common.tpl) --- */
#order-standard_cart .cart-product-group,
#order-standard_cart .panel,
#order-standard_cart .card,
.cart-container .card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--card);
}
#order-standard_cart .product,
#order-standard_cart .cart-item {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--card);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart .product:hover,
#order-standard_cart .cart-item:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px rgba(53,154,255,0.18), 0 6px 20px -14px rgba(53,154,255,0.3);
}
#order-standard_cart .product h3,
#order-standard_cart .product .title { color: var(--foreground); }
#order-standard_cart .product .price,
#order-standard_cart .cart-item-price,
.summary-container .cart-total,
#orderSummary .total { color: var(--primary); font-weight: 800; }
#order-standard_cart .btn-add-to-cart,
#order-standard_cart .checkout-button,
.cart-checkout .btn-primary {
    border-radius: 999px;
    background: var(--brand-gradient);
    border: none;
}
#orderSummary, .summary-container, .order-summary {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}
#order-standard_cart .sidebar .list-group-item,
.cart-sidebar-categories .list-group-item {
    background: transparent;
    border-color: var(--hairline);
}
#order-standard_cart .domain-checker-availability,
.domain-search-results .card { border-radius: var(--radius-xl); }
#order-standard_cart input.form-control,
#order-standard_cart select.form-control {
    background: var(--muted);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: var(--radius-lg);
}
#order-standard_cart .cart-nav-steps .active,
.checkout-steps .active { color: var(--primary); }

/* --- Public pages: homepage hero, contact, kb, announcements, network status --- */
.homepage-hero, .jumbotron {
    background: var(--brand-gradient) !important;
    border-radius: var(--radius-3xl, 20px);
    color: #fff;
}
.knowledgebase-category .card,
.announcement-item .card,
.network-issue .card,
.server-status-item {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--card);
}
.contact-form .form-control { border-radius: var(--radius-lg); }

/* --- Generic: make stock centred label stacks left-aligned in cards --- */
#additionalinfo.text-center,
#configoptions.text-center,
#domain.text-center { text-align: left !important; }

@media (max-width: 575.98px) {
    .xlorin-service-head { gap: 12px; }
    .xlorin-service-status { order: 3; }
    .invoice-container { padding: 20px; margin: 12px; }
}

/* ---------------------------------------------------
   19. De-WHMCS pass — dark-mode hardening, secondary
   sidebar, empty-box cleanup, topbar/breadcrumb polish
--------------------------------------------------- */

/* --- Kill stray empty containers WHMCS leaves behind --- */
.sidebar:empty,
.card-sidebar:empty,
.xlorin-topbar-item:empty,
#main-body .row > .col-lg-4:empty,
#main-body .row > .col-xl-3:empty,
.responsive-tabs-sm-connector,
.master-breadcrumb:empty { display: none !important; }

/* --- Secondary sidebar: strip the card chrome, make it a clean nav --- */
.card.card-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 18px !important;
}
.card-sidebar > .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 4px 8px !important;
}
.card-sidebar > .card-header .card-title {
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-foreground);
}
.card-sidebar > .card-header .card-title > i:not(.card-minimise) { display: none; }
.card-sidebar .card-minimise { display: none !important; }
.card-sidebar .collapsable-card-body,
.card-sidebar .list-group { background: transparent !important; }
.card-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    padding: 9px 12px !important;
    color: var(--muted-foreground);
    margin-bottom: 2px;
}
.card-sidebar .list-group-item:hover {
    background: var(--muted) !important;
    color: var(--foreground);
}
.card-sidebar .list-group-item.active {
    background: rgba(53, 154, 255, 0.12) !important;
    color: var(--primary) !important;
    box-shadow: inset 3px 0 0 0 var(--primary);
}
.card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { background: transparent; }
.card-sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--primary); }
.card-sidebar .sidebar-menu-item-icon-wrapper {
    width: 24px; height: 24px; background: transparent;
}

/* --- Topbar / breadcrumb — quieter, less WHMCS --- */
.master-breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
}
.master-breadcrumb .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.8rem;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--muted-foreground); }
.master-breadcrumb .breadcrumb-item.active { color: var(--foreground); }
.xlorin-topbar .btn[data-toggle="popover"],
.xlorin-topbar .active-client .input-group-text {
    background: transparent;
    border-color: var(--border);
    color: var(--muted-foreground);
}
.xlorin-topbar .btn-active-client { color: var(--foreground); font-weight: 600; }
#header.xlorin-topbar { background: var(--background) !important; border-bottom: 1px solid var(--hairline); }

/* --- Return-to-admin vertical tab --- */
.btn-return-to-admin { border-radius: var(--radius) 0 0 var(--radius) !important; }

/* --- DARK-MODE HARDENING: force WHMCS's light defaults onto our tokens --- */
:root:not(.light-mode) .card,
:root:not(.light-mode) .panel,
:root:not(.light-mode) .panel-default,
:root:not(.light-mode) .well,
:root:not(.light-mode) .modal-content,
:root:not(.light-mode) .dropdown-menu,
:root:not(.light-mode) .popover,
:root:not(.light-mode) .list-group-item,
:root:not(.light-mode) .bg-white,
:root:not(.light-mode) .bg-light,
:root:not(.light-mode) .tab-content.bg-white,
:root:not(.light-mode) .product-details-tab-container {
    background-color: var(--card) !important;
    color: var(--foreground);
    border-color: var(--hairline);
}
:root:not(.light-mode) body,
:root:not(.light-mode) .primary-bg-color { background-color: var(--background) !important; }
:root:not(.light-mode) .panel-heading,
:root:not(.light-mode) .card-header,
:root:not(.light-mode) .card-footer {
    background-color: transparent !important;
    border-color: var(--hairline);
    color: var(--foreground);
}
:root:not(.light-mode) .table,
:root:not(.light-mode) .table > tbody > tr > td,
:root:not(.light-mode) .table > thead > tr > th,
:root:not(.light-mode) .table > tfoot > tr > td {
    color: var(--foreground);
    border-color: var(--hairline) !important;
    background-color: transparent;
}
:root:not(.light-mode) .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--muted); }
:root:not(.light-mode) .table-hover > tbody > tr:hover { background-color: var(--muted); }
:root:not(.light-mode) input.form-control,
:root:not(.light-mode) select.form-control,
:root:not(.light-mode) textarea.form-control,
:root:not(.light-mode) .input-group-text,
:root:not(.light-mode) .field,
:root:not(.light-mode) .custom-select {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
:root:not(.light-mode) input.form-control::placeholder,
:root:not(.light-mode) textarea.form-control::placeholder { color: var(--muted-foreground); }
:root:not(.light-mode) .form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.20) !important;
}
:root:not(.light-mode) code,
:root:not(.light-mode) pre,
:root:not(.light-mode) kbd {
    background-color: var(--muted) !important;
    color: var(--accent);
    border: 1px solid var(--hairline);
}
:root:not(.light-mode) .text-dark,
:root:not(.light-mode) .text-body,
:root:not(.light-mode) h1, :root:not(.light-mode) h2, :root:not(.light-mode) h3,
:root:not(.light-mode) h4, :root:not(.light-mode) h5, :root:not(.light-mode) h6 { color: var(--foreground); }
:root:not(.light-mode) .text-muted,
:root:not(.light-mode) .help-block,
:root:not(.light-mode) small.text-muted { color: var(--muted-foreground) !important; }
:root:not(.light-mode) hr { border-color: var(--hairline); }
:root:not(.light-mode) .modal-header,
:root:not(.light-mode) .modal-footer { border-color: var(--hairline); }
:root:not(.light-mode) .close { color: var(--foreground); opacity: 0.7; }
:root:not(.light-mode) .breadcrumb-item + .breadcrumb-item::before { color: var(--muted-foreground); }
:root:not(.light-mode) .alert-info {
    background-color: rgba(53, 154, 255, 0.10);
    border-color: rgba(53, 154, 255, 0.25);
    color: var(--foreground);
}
:root:not(.light-mode) .alert-warning {
    background-color: rgba(240, 173, 78, 0.10);
    border-color: rgba(240, 173, 78, 0.28);
    color: var(--foreground);
}
:root:not(.light-mode) .alert-danger {
    background-color: rgba(217, 83, 79, 0.10);
    border-color: rgba(217, 83, 79, 0.28);
    color: var(--foreground);
}
:root:not(.light-mode) .alert-success {
    background-color: rgba(92, 184, 92, 0.10);
    border-color: rgba(92, 184, 92, 0.28);
    color: var(--foreground);
}

/* invoice / quote standalone pages in dark mode */
:root:not(.light-mode) .invoice-container { background: var(--card); }
:root:not(.light-mode) .invoice-container * { border-color: var(--hairline); }

/* --- Horizontal sub-nav (replaces the left secondary-sidebar cards) --- */
.xlorin-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin: 4px 0 22px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}
.xlorin-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted-foreground);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.xlorin-subnav-link:hover { color: var(--foreground); background: var(--card); text-decoration: none; }
.xlorin-subnav-link.active {
    color: #fff;
    background: var(--brand-gradient);
    box-shadow: 0 6px 16px -10px rgba(10, 132, 255, 0.6);
}
.xlorin-subnav-link.active:hover { color: #fff; }
.xlorin-subnav-link.disabled { opacity: 0.45; pointer-events: none; }
.xlorin-subnav-link .badge {
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    border-radius: 999px;
}
.xlorin-subnav-link.active .badge { background: rgba(255, 255, 255, 0.25); }

/* clean pages: content spans full width, kill the old sidebar column entirely */
.xlorin-main #main-body .primary-content { width: 100%; max-width: 100%; }

@media (max-width: 575.98px) {
    .xlorin-subnav { border-radius: var(--radius-xl); width: 100%; }
}

/* ---------------------------------------------------
   20. Lagom-inspired polish — page header, tiles,
   empty states, roomy tables, type hierarchy
--------------------------------------------------- */

/* --- Page header block (title + breadcrumb), every inner page --- */
.xlorin-page-head {
    padding: 26px 0 20px;
    margin-bottom: 6px;
}
.xlorin-page-head-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.xlorin-page-title {
    margin: 0;
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--foreground);
}
.xlorin-page-head .master-breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 !important;
}
.xlorin-page-head .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
}
.xlorin-page-head .breadcrumb-item,
.xlorin-page-head .breadcrumb-item a { color: var(--muted-foreground); }
.xlorin-page-head .breadcrumb-item.active { color: var(--muted-foreground); opacity: 0.75; }

/* --- Dashboard tiles — Lagom "tile" pattern --- */
.xlorin-stat-grid { gap: 16px; }
.xlorin-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 22px 20px;
    min-height: 118px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.xlorin-stat-card:hover {
    border-color: rgba(53, 154, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -20px rgba(2, 6, 20, 0.5);
    text-decoration: none;
}
.xlorin-stat-card .xlorin-stat-icon,
.xlorin-stat-card .xlorin-stat-row > .xlorin-stat-icon {
    position: absolute;
    top: 16px;
    right: 18px;
    width: auto; height: auto;
    background: none !important;
    font-size: 1.05rem;
    color: var(--muted-foreground);
    opacity: 0.55;
}
.xlorin-stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--foreground);
    margin-bottom: 4px;
}
.xlorin-stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.xlorin-stat-foot { display: none; }
.xlorin-stat-badge {
    position: absolute;
    bottom: 16px; right: 18px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
}
.xlorin-stat-badge-success { background: rgba(92,184,92,0.15); color: #5cb85c; }
.xlorin-stat-badge-danger { background: rgba(217,83,79,0.15); color: #d9534f; }

/* --- Empty states (Lagom .no-data) --- */
.xlorin-empty-state,
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 46px 24px 38px;
    color: var(--muted-foreground);
}
.xlorin-empty-state i,
.no-data-icon {
    font-size: 2.4rem;
    opacity: 0.3;
    margin-bottom: 16px;
}

/* --- Roomier tables (Lagom td height ~58px) --- */
.table-list > tbody > tr > td,
table.table-list > tbody > tr > td,
.card .table > tbody > tr > td {
    padding-top: 15px;
    padding-bottom: 15px;
    vertical-align: middle;
}
.table-list > thead > tr > th { padding-top: 12px; padding-bottom: 12px; }

/* --- Type hierarchy — stronger, Lagom-like --- */
h1, .h1 { font-weight: 800; letter-spacing: -0.01em; }
h2, .h2 { font-weight: 800; letter-spacing: -0.01em; }
h3, .h3 { font-weight: 700; }
.card-title, .panel-title {
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-weight: 700;
}

/* --- Softer, tinted alerts with a leading accent bar --- */
.alert {
    border-radius: var(--radius-lg);
    border-width: 1px;
    border-left-width: 3px;
    padding: 14px 16px;
}

/* --- Cards a touch flatter + roomier, Lagom-style --- */
.card {
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(2, 6, 20, 0.04);
}
.card > .card-header {
    padding: 16px 20px;
    min-height: 54px;
    display: flex;
    align-items: center;
}
.card > .card-body { padding: 20px; }

@media (max-width: 575.98px) {
    .xlorin-page-title { font-size: 1.5rem; }
    .xlorin-page-head { padding: 18px 0 14px; }
}

/* --- Form pages (account details, contacts, profile, security) --- */
.form-group label,
.form-group .col-form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted-foreground);
    margin-bottom: 5px;
}
.form-control {
    border-radius: var(--radius-lg);
    padding: 10px 13px;
    height: auto;
    min-height: 42px;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.18);
}
.custom-select { border-radius: var(--radius-lg); min-height: 42px; }
.form-group { margin-bottom: 18px; }

/* collapsible card headers — remove the WHMCS "minimise" chrome everywhere */
.card-minimise,
.collapsable-card-body .card-minimise { display: none !important; }
.card-title.m-0 { font-size: 1.05rem; }

/* the stock DataTable container */
.table-container { border-radius: var(--radius-xl); overflow: hidden; }
.table-container.clearfix { background: transparent; }

/* primary submit rows */
.form-group.text-center,
.form-group.row:last-child { margin-top: 6px; }
.btn.btn-primary { font-weight: 600; }

/* --- Sub-tab panels inside detail pages (domain manage, ssl, etc.) --- */
.tab-pane > .row:not(.no-gutters) {
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline);
    margin: 0;
}
.tab-pane > .row:last-child { border-bottom: none; }

/* --- kill the leftover WHMCS breadcrumb bar when page-head owns it --- */
.xlorin-page-head + .master-breadcrumb,
#main-body > .container > .master-breadcrumb:first-child { display: none; }

/* ===================================================
   21. Dashboard — purpose-built ".xh" components
   (clientareahome.tpl is a full custom rewrite)
=================================================== */
.xh { display: block; }
.xh > * { margin-bottom: 20px; }
.xh > *:last-child { margin-bottom: 0; }

/* sticky footer: main content fills the column so the footer can't float up */
.xlorin-main > #main-body,
.xlorin-main > section#main-body { flex: 1 1 auto; }
.xlorin-main > #footer { flex: 0 0 auto; margin-top: auto; }

/* --- Hero --- */
.xh-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 26px 28px;
    border-radius: var(--radius-2xl, 18px);
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(53,154,255,0.16), transparent 60%),
        var(--card);
    border: 1px solid var(--hairline);
}
.xh-hero-title {
    margin: 0 0 4px;
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--foreground);
}
.xh-hero-sub { margin: 0; color: var(--muted-foreground); font-size: 0.95rem; }

/* --- Buttons --- */
.xh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    white-space: nowrap;
}
.xh-btn:hover { text-decoration: none; transform: translateY(-1px); }
.xh-btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.xh-btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(10,132,255,0.6);
}
.xh-btn-primary:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(10,132,255,0.7); }
.xh-btn-danger { background: var(--destructive); color: #fff; }
.xh-btn-danger:hover { color: #fff; }

/* --- Alert (overdue) --- */
.xh-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: var(--radius-xl);
    text-decoration: none;
    border: 1px solid rgba(217,83,79,0.3);
    background: rgba(217,83,79,0.08);
    color: var(--foreground);
}
.xh-alert:hover { text-decoration: none; border-color: rgba(217,83,79,0.5); }
.xh-alert-icon { color: var(--destructive); font-size: 1.2rem; flex: 0 0 auto; }
.xh-alert-body { flex: 1 1 auto; font-size: 0.9rem; }
.xh-alert .xh-btn { flex: 0 0 auto; }

/* --- Stat tiles --- */
.xh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.xh-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    min-height: 120px;
    border-radius: var(--radius-xl);
    background: var(--card);
    border: 1px solid var(--hairline);
    text-decoration: none;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.xh-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(53,154,255,0.4);
    box-shadow: 0 18px 36px -22px rgba(2,6,20,0.55);
    text-decoration: none;
}
.xh-stat-ico {
    position: absolute;
    top: 18px; right: 18px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 0.9rem;
}
.xh-stat-num {
    margin-top: auto;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--foreground);
}
.xh-stat-label {
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted-foreground);
}
.xh-stat-alert .xh-stat-num { color: var(--destructive); }

.xh-c-blue   { background: rgba(53,154,255,0.14); color: #359aff; }
.xh-c-green  { background: rgba(92,184,92,0.14);  color: #5cb85c; }
.xh-c-purple { background: rgba(155,89,182,0.14); color: #9b59b6; }
.xh-c-gold   { background: rgba(240,173,78,0.14); color: #f0ad4e; }
.xh-c-red    { background: rgba(217,83,79,0.14);  color: #d9534f; }

/* --- Content grid --- */
.xh-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
}
.xh-span-2 { grid-column: 1 / -1; }

.xh-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.xh-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hairline);
}
.xh-card-title {
    margin: 0;
    font-family: "Manrope", "Inter", "Hind Siliguri", sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 9px;
}
.xh-card-title > i { color: var(--primary); font-size: 0.85rem; }
.xh-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.xh-link:hover { color: var(--accent); text-decoration: none; }

/* --- List rows --- */
.xh-list { list-style: none; margin: 0; padding: 6px; }
.xh-list > li + li { border-top: 1px solid var(--hairline); }
.xh-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: background .12s ease;
}
.xh-row:hover { background: var(--muted); text-decoration: none; }
.xh-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex: 0 0 auto;
    background: var(--muted-foreground);
}
.xh-dot-active { background: #5cb85c; box-shadow: 0 0 0 3px rgba(92,184,92,0.2); }
.xh-dot-pending { background: #f0ad4e; }
.xh-dot-suspended, .xh-dot-terminated, .xh-dot-cancelled { background: #d9534f; }
.xh-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xh-row-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-row-sub { font-size: 0.78rem; color: var(--muted-foreground); }
.xh-row-meta {
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    flex: 0 0 auto;
}
.xh-row-date { font-size: 0.72rem; color: var(--muted-foreground); }
.xh-row-amount { font-weight: 700; font-size: 0.88rem; color: var(--foreground); }

/* --- Badges --- */
.xh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--muted);
    color: var(--muted-foreground);
}
.xh-badge-active,
.xh-badge-paid { background: rgba(92,184,92,0.15); color: #5cb85c; }
.xh-badge-pending,
.xh-badge-unpaid,
.xh-badge-ticket-customer-reply,
.xh-badge-ticket-answered { background: rgba(240,173,78,0.16); color: #f0ad4e; }
.xh-badge-suspended,
.xh-badge-terminated,
.xh-badge-cancelled,
.xh-badge-overdue,
.xh-badge-refunded { background: rgba(217,83,79,0.15); color: #d9534f; }
.xh-badge-ticket-open,
.xh-badge-ticket-inprogress { background: rgba(53,154,255,0.15); color: #359aff; }
.xh-badge-ticket-closed { background: var(--muted); color: var(--muted-foreground); }

/* --- Empty state --- */
.xh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    color: var(--muted-foreground);
    gap: 10px;
}
.xh-empty > i { font-size: 2rem; opacity: 0.3; }
.xh-empty > p { margin: 0; font-size: 0.88rem; }

/* --- Quick actions --- */
.xh-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 16px;
}
.xh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline);
    text-decoration: none;
    color: var(--muted-foreground);
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.xh-action:hover {
    border-color: rgba(53,154,255,0.4);
    background: var(--muted);
    color: var(--foreground);
    transform: translateY(-2px);
    text-decoration: none;
}
.xh-action > i { font-size: 1.15rem; }

.xh-addon { margin-top: 4px; }

@media (max-width: 991.98px) {
    .xh-grid { grid-template-columns: 1fr; }
    .xh-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .xh-hero { padding: 20px; }
    .xh-hero-title { font-size: 1.35rem; }
    .xh-actions { grid-template-columns: repeat(2, 1fr); }
    .xh-row-meta { align-items: flex-start; }
}

/* ===================================================
   14. COMPREHENSIVE SAAS CLOUD PLATFORM OVERHAUL
   =================================================== */

/* --- Universal Component Base Tokens --- */
.xh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: "Inter", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.xh-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}
.xh-btn-sm {
    padding: 6px 14px;
    font-size: 0.78rem;
}
.xh-btn-lg {
    padding: 13px 28px;
    font-size: 0.95rem;
    font-weight: 700;
}
.xh-btn-block {
    display: flex;
    width: 100%;
}
.xh-btn-primary {
    background: var(--brand-gradient);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 14px -6px rgba(10, 132, 255, 0.5);
}
.xh-btn-primary:hover {
    background: var(--brand-gradient);
    color: #fff !important;
    box-shadow: 0 6px 20px -6px rgba(10, 132, 255, 0.7);
}
.xh-btn-secondary {
    background: var(--muted);
    color: var(--foreground) !important;
    border-color: var(--hairline);
}
.xh-btn-secondary:hover {
    background: var(--card);
    border-color: var(--primary);
    color: var(--foreground) !important;
}
.xh-btn-danger {
    background: var(--destructive);
    color: #fff !important;
    border-color: transparent;
}
.xh-btn-danger:hover {
    background: #d62828;
    color: #fff !important;
}

.xh-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.xh-badge-active, .xh-badge-paid {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.xh-badge-pending, .xh-badge-unpaid {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.xh-badge-suspended, .xh-badge-overdue, .xh-badge-cancelled {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.xh-badge-ticket-open {
    background: rgba(53, 154, 255, 0.15);
    color: var(--accent);
    border: 1px solid rgba(53, 154, 255, 0.3);
}
.xh-badge-ticket-customer-reply {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.3);
}
.xh-badge-ticket-answered {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.xh-badge-ticket-closed {
    background: var(--muted);
    color: var(--muted-foreground);
    border: 1px solid var(--hairline);
}

.xh-alert-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-xl);
    background: var(--card);
    border: 1px solid var(--hairline);
    color: var(--foreground);
    margin-bottom: 20px;
}

/* --- Form inputs & fields --- */
.xlorin-input,
.xlorin-tld-select,
.xlorin-tld-input {
    background: var(--muted) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius-lg) !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.xlorin-input:focus,
.xlorin-tld-select:focus,
.xlorin-tld-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.22) !important;
    outline: none !important;
}
.xlorin-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted-foreground);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===================================================
   15. SAAS ORDERFORM & CART STYLING
   =================================================== */
.xlorin-cart-wrapper {
    width: 100%;
    margin-top: 10px;
}
.xlorin-cart-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
.xlorin-cart-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl, 16px);
    padding: 24px;
    box-shadow: 0 10px 30px -15px rgba(2, 6, 20, 0.6);
}
.xlorin-cat-title {
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.xlorin-cat-card .list-group-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
    padding: 10px 14px;
    margin-bottom: 4px;
    font-weight: 500;
    transition: all .15s ease;
}
.xlorin-cat-card .list-group-item:hover {
    background: var(--muted);
    color: var(--foreground);
}
.xlorin-cat-card .list-group-item.active {
    background: var(--brand-gradient);
    color: #fff;
}

.xlorin-cart-header {
    margin-bottom: 24px;
}
.xlorin-cart-title {
    font-family: "Manrope", sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 6px;
}
.xlorin-cart-subtitle {
    color: var(--muted-foreground);
    font-size: 0.95rem;
    margin: 0;
}

/* --- Plan cards grid --- */
.xlorin-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.xlorin-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl, 16px);
    padding: 28px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.xlorin-plan-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 12px 36px -12px rgba(53, 154, 255, 0.25);
}
.xlorin-plan-card.is-featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 10px 30px -10px rgba(53, 154, 255, 0.3);
}
.xlorin-plan-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}
.xlorin-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.xlorin-plan-name {
    font-family: "Manrope", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}
.xlorin-stock-badge {
    font-size: 0.75rem;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    padding: 3px 8px;
    border-radius: 6px;
}
.xlorin-plan-desc {
    color: var(--muted-foreground);
    font-size: 0.88rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
.xlorin-plan-pricing {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--hairline);
}
.xlorin-price-from {
    font-size: 0.78rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}
.xlorin-price-val {
    font-family: "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--foreground);
    line-height: 1;
}
.xlorin-price-cycle {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted-foreground);
}
.xlorin-setup-fee {
    font-size: 0.78rem;
    color: var(--muted-foreground);
    margin-top: 6px;
}
.xlorin-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}
.xlorin-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 0.88rem;
    color: var(--muted-foreground);
}
.xlorin-feat-icon {
    color: var(--primary);
    font-size: 0.95rem;
    margin-top: 2px;
}
.xlorin-plan-foot {
    margin-top: auto;
}

/* --- Domain Selection Tabs --- */
.xlorin-domain-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    background: var(--muted);
    border-radius: var(--radius-xl);
    margin-bottom: 24px;
}
.xlorin-domain-tab {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin: 0;
    transition: all .15s ease;
}
.xlorin-domain-tab input[type="radio"] {
    display: none;
}
.xlorin-domain-tab span {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 8px;
}
.xlorin-domain-tab.is-active,
.xlorin-domain-tab:has(input:checked) {
    background: var(--card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.xlorin-domain-tab.is-active span,
.xlorin-domain-tab:has(input:checked) span {
    color: var(--primary);
}

.xlorin-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.xlorin-input-prefix {
    padding: 10px 14px;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--muted-foreground);
    font-weight: 600;
    font-size: 0.9rem;
}
.xlorin-tld-select {
    max-width: 120px;
}
.xlorin-tld-input {
    max-width: 100px;
}

/* --- Domain search results --- */
.xlorin-results-wrap {
    margin-top: 24px;
}
.xlorin-results-heading {
    font-family: "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 12px;
}
.xlorin-result-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.xlorin-res-msg {
    font-size: 1.1rem;
    font-weight: 700;
}
.xlorin-res-avail { color: #4ade80; }
.xlorin-res-taken { color: #f87171; }
.xlorin-domain-pricing-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.xlorin-domain-price-val {
    font-family: "Manrope", sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--foreground);
}

.xlorin-suggestions-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 20px;
}
.xlorin-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.xlorin-sug-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--muted);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.xlorin-sug-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.xlorin-sug-price {
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    color: var(--foreground);
}

/* --- Complete Screen --- */
.xlorin-complete-card {
    max-width: 680px;
    margin: 40px auto;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-3xl, 20px);
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 20px 50px -20px rgba(2, 6, 20, 0.7);
}
.xlorin-complete-icon {
    font-size: 4rem;
    color: #4ade80;
    margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.4);
}
.xlorin-complete-title {
    font-family: "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 8px;
}
.xlorin-complete-subtitle {
    color: var(--muted-foreground);
    font-size: 1.05rem;
    margin-bottom: 24px;
}
.xlorin-order-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    padding: 8px 20px;
    border-radius: 999px;
    margin-bottom: 24px;
}
.xlorin-order-label {
    font-size: 0.85rem;
    color: var(--muted-foreground);
}
.xlorin-order-num {
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary);
}
.xlorin-unpaid-invoice-box {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--radius-xl);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0;
}
.xlorin-complete-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

/* ===================================================
   16. SUPPORT TICKETS & TIMELINE UI
   =================================================== */
.xlorin-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.xlorin-dept-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 22px;
    text-decoration: none;
    transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.xlorin-dept-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px -8px rgba(53, 154, 255, 0.25);
    text-decoration: none;
}
.xlorin-dept-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(53, 154, 255, 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.xlorin-dept-body {
    flex-grow: 1;
}
.xlorin-dept-name {
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 4px 0;
}
.xlorin-dept-desc {
    font-size: 0.82rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.4;
}
.xlorin-dept-arrow {
    color: var(--muted-foreground);
    font-size: 0.9rem;
    transition: transform .15s ease, color .15s ease;
}
.xlorin-dept-card:hover .xlorin-dept-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* --- View Ticket Timeline --- */
.xlorin-ticket-wrap {
    width: 100%;
}
.xlorin-ticket-topbar {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-2xl, 16px);
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.xlorin-ticket-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.xlorin-ticket-urgency {
    font-size: 0.76rem;
    font-weight: 700;
}
.urgency-high { color: #f87171; }
.urgency-medium { color: #fbbf24; }
.urgency-low { color: #4ade80; }

.xlorin-ticket-subject {
    font-family: "Manrope", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 6px 0;
}
.xlorin-ticket-actions {
    display: flex;
    gap: 10px;
}

.xlorin-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.xlorin-msg-card {
    display: flex;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    padding: 24px;
}
.xlorin-msg-card.is-staff {
    border-left: 3px solid var(--primary);
    background: rgba(53, 154, 255, 0.03);
}
.xlorin-avatar-staff, .xlorin-avatar-client {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
}
.xlorin-avatar-staff {
    background: var(--brand-gradient);
    color: #fff;
}
.xlorin-avatar-client {
    background: var(--muted);
    border: 1px solid var(--hairline);
    color: var(--foreground);
}
.xlorin-msg-content {
    flex-grow: 1;
}
.xlorin-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.xlorin-msg-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--foreground);
}
.xlorin-staff-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(53, 154, 255, 0.15);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}
.xlorin-client-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted-foreground);
    background: var(--muted);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}
.xlorin-msg-time {
    font-size: 0.8rem;
}
.xlorin-msg-body {
    color: var(--foreground);
    font-size: 0.92rem;
    line-height: 1.6;
}
.xlorin-attach-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.xlorin-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    font-size: 0.78rem;
    color: var(--foreground);
    text-decoration: none;
}
.xlorin-attach-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
}

/* --- Tables & DataTables SaaS Polish --- */
.xlorin-card-table {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 0;
}
.xlorin-card-table .table {
    margin-bottom: 0;
}
.xlorin-card-table .table th {
    background: var(--muted);
    border-bottom: 1px solid var(--hairline);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 18px;
}
.xlorin-card-table .table td {
    padding: 16px 18px;
    vertical-align: middle;
    border-top: 1px solid var(--hairline);
    font-size: 0.88rem;
}
.xlorin-card-table .table tbody tr {
    cursor: pointer;
    transition: background-color .12s ease;
}
.xlorin-card-table .table tbody tr:hover {
    background-color: var(--muted);
}
.xlorin-dept-pill {
    font-weight: 600;
    color: var(--foreground);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xlorin-ticket-title-link {
    text-decoration: none;
    color: var(--foreground);
}
.xlorin-ticket-title-link:hover {
    color: var(--primary);
    text-decoration: none;
}

/* --- DataTables Controls --- */
.dataTables_wrapper {
    padding: 16px 18px 0;
}
.dataTables_wrapper .dataTables_filter input {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--foreground);
    outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 999px !important;
    border: 1px solid var(--hairline) !important;
    background: var(--muted) !important;
    color: var(--foreground) !important;
    padding: 4px 12px !important;
    margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
}

@media (max-width: 991.98px) {
    .xlorin-cart-layout {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   17. LAYOUT STABILITY & ZERO-OVERLAP GUARANTEE
   =================================================== */

/* Prevent float collapse on WHMCS primary-content & main-body */
.primary-content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    clear: both !important;
}

#main-body,
section#main-body {
    float: none !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
    padding-bottom: 30px !important;
}

#main-body::after,
.primary-content::after,
.xh::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Ensure footer is ALWAYS strictly at the bottom of page and never floats into content */
footer.footer,
#footer {
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
    padding: 30px 0 !important;
    background-color: var(--card) !important;
    border-top: 1px solid var(--hairline) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* Dashboard grid layout reinforcement */
.xh {
    display: block !important;
    width: 100% !important;
    clear: both !important;
}
.xh-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
    clear: both !important;
}
.xh-span-2 {
    grid-column: 1 / -1 !important;
}

/* Light mode crisp borders and no stray gray lines */
html.light-mode {
    --border: rgba(11, 22, 40, 0.09) !important;
    --hairline: rgba(11, 22, 40, 0.08) !important;
    --card: #ffffff !important;
    --popover: #ffffff !important;
    --background: #f7fafe !important;
    --muted: #f1f5f9 !important;
}
html.light-mode .card,
html.light-mode .xh-card,
html.light-mode .xh-stat,
html.light-mode .xh-hero {
    background-color: #ffffff !important;
    border: 1px solid rgba(11, 22, 40, 0.09) !important;
    box-shadow: 0 4px 20px -8px rgba(11, 22, 40, 0.06) !important;
}
html.light-mode footer.footer,
html.light-mode #footer {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(11, 22, 40, 0.09) !important;
}
html.light-mode header.header,
html.light-mode .xlorin-topbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(11, 22, 40, 0.09) !important;
}
html.light-mode .xlorin-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(11, 22, 40, 0.09) !important;
}

@media (max-width: 991.98px) {
    .xh-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================
   19. FIXED PERMANENT SIDEBAR & SAAS ORDER CARDS
   =================================================== */

@media (min-width: 992px) {
    body.xlorin-shell-body {
        display: block !important;
        min-height: 100vh !important;
        width: 100% !important;
        position: relative !important;
    }
    .xlorin-app-shell {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        position: relative !important;
    }
    .xlorin-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 264px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        z-index: 1000 !important;
        background-color: var(--card) !important;
        border-right: 1px solid var(--hairline) !important;
        overflow: hidden !important;
    }
    .xlorin-sidebar-inner {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        max-height: 100vh !important;
        width: 100% !important;
    }
    .xlorin-sidebar-head {
        flex: 0 0 auto !important;
        padding: 20px 18px !important;
        border-bottom: 1px solid var(--hairline) !important;
    }
    .xlorin-sidebar-nav {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px 12px !important;
    }
    .xlorin-sidebar-foot {
        flex: 0 0 auto !important;
        padding: 16px 14px !important;
        border-top: 1px solid var(--hairline) !important;
        background-color: var(--card) !important;
    }
    .xlorin-main {
        margin-left: 264px !important;
        width: calc(100% - 264px) !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    .xlorin-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
        width: 100% !important;
        background-color: var(--card) !important;
        border-bottom: 1px solid var(--hairline) !important;
    }
}

/* Modern SaaS Order / Package Cards Overhaul */
.xlorin-cart-wrapper {
    width: 100%;
    margin-top: 10px;
}
.xlorin-products-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}
.xlorin-plan-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.xlorin-plan-card:hover {
    transform: translateY(-5px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 16px 40px -12px rgba(53, 154, 255, 0.3) !important;
}
.xlorin-plan-card.is-featured {
    border-color: #359aff !important;
    box-shadow: 0 0 0 1px #359aff, 0 16px 40px -12px rgba(53, 154, 255, 0.35) !important;
}
.xlorin-plan-name {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    margin-bottom: 8px !important;
}
.xlorin-price-val {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    margin: 12px 0 16px 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}
.xlorin-price-cycle {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--muted-foreground) !important;
}
.xlorin-plan-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    flex-grow: 1 !important;
}
.xlorin-plan-features li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-size: 0.9rem !important;
    color: var(--foreground) !important;
}
.xlorin-plan-features li:last-child {
    border-bottom: none !important;
}
.xlorin-feat-icon {
    color: #10b981 !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.xlorin-plan-foot {
    margin-top: 16px !important;
}

/* ===================================================
   20. CLOUD CONSOLE / MULTI-COLUMN WORKSPACE
   =================================================== */

.xlorin-console-shell {
    width: 100%;
    margin-top: 10px;
}

/* Top Hero Header */
.xlorin-console-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 30px;
    background: radial-gradient(120% 160% at 100% 0%, rgba(53,154,255,0.18), transparent 60%), var(--card);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15);
}
.xlorin-system-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10b981;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.xlorin-status-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.6; }
}
.xlorin-console-title {
    font-family: "Manrope", sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--foreground);
    margin: 4px 0 6px 0;
    letter-spacing: -0.02em;
}
.xlorin-console-desc {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

/* Dues Banner */
.xlorin-dues-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    padding: 18px 24px;
    border-radius: 16px;
}
.xlorin-dues-icon {
    font-size: 1.8rem;
    color: #ef4444;
}

/* Multi-Column Console Grid */
.xlorin-console-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
    width: 100%;
}

@media (max-width: 1199.98px) {
    .xlorin-console-grid {
        grid-template-columns: 1fr;
    }
}

/* Active Node Grid */
.xlorin-node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.xlorin-node-card {
    background: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 18px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.xlorin-node-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px -6px rgba(53, 154, 255, 0.2);
}
.xlorin-node-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(53, 154, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.xlorin-node-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--foreground);
}

/* Launchpad Grid */
.xlorin-launchpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 767.98px) {
    .xlorin-launchpad-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.xlorin-launch-tile {
    display: flex;
    flex-direction: column;
    padding: 18px 16px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.xlorin-launch-tile:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 10px 24px -8px rgba(53, 154, 255, 0.25);
}
.xlorin-launch-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.xlorin-launch-title {
    font-weight: 700;
    color: var(--foreground);
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.xlorin-launch-desc {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Telemetry List */
.xlorin-telemetry-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xlorin-tele-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 12px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    text-decoration: none !important;
    color: var(--foreground);
    transition: all 0.15s ease;
}
.xlorin-tele-item:hover {
    background: var(--card);
    border-color: var(--primary);
}
.xlorin-tele-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ===================================================
   21. LAGOM 2-INSPIRED UI & TOPBAR AVATAR CHIP
   =================================================== */

.xlorin-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dropdown-menu {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    padding: 8px 0 !important;
}
.dropdown-item {
    color: var(--foreground) !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
}
.dropdown-item:hover {
    background: var(--muted) !important;
    color: var(--primary) !important;
}
.dropdown-divider {
    border-top: 1px solid var(--hairline) !important;
    margin: 6px 0 !important;
}

/* Lagom-Style Popover Client Alerts */
.popover {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.3) !important;
    min-width: 280px !important;
}
.popover-body {
    padding: 0 !important;
    color: var(--foreground) !important;
}
ul.client-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.client-alerts li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
    color: var(--foreground);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}
ul.client-alerts li a:hover {
    background: var(--muted);
}
ul.client-alerts li:last-child a {
    border-bottom: none;
}

/* ===================================================
   22. UNIVERSAL PRODUCT & COMPARISON CARD STYLING
   =================================================== */

#order-premium_comparison,
#order-pure_comparison,
#order-supreme_comparison,
.price-table-container {
    width: 100% !important;
}

#btnShowSidebar {
    display: none !important;
}

.price-table-container > ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 30px 0 !important;
}

.price-table-container > ul > li {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    padding: 0 !important;
}

.price-table {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.price-table:hover {
    transform: translateY(-6px) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 16px 40px -12px rgba(53, 154, 255, 0.3) !important;
}

.price-table .top-head {
    background: radial-gradient(120% 160% at 50% 0%, rgba(53, 154, 255, 0.15), transparent 70%), var(--card) !important;
    padding: 24px 20px 20px 20px !important;
    border-bottom: 1px solid var(--hairline) !important;
    text-align: center !important;
}

.price-table .top-head .top-area h4 {
    font-family: "Manrope", sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    margin: 0 0 6px 0 !important;
}

.price-table .price-area {
    padding: 16px 0 10px 0 !important;
}

.price-table .price-area .price {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
}

.price-table .order-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 30px) !important;
    margin: 14px 15px 4px 15px !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    background: var(--brand-gradient) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.4) !important;
    transition: all 0.2s ease !important;
}

.price-table .order-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(10, 132, 255, 0.6) !important;
    color: #ffffff !important;
}

.price-table > ul {
    list-style: none !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

.price-table > ul > li {
    position: relative !important;
    padding: 10px 0 10px 24px !important;
    border-bottom: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-size: 0.88rem !important;
    text-align: left !important;
    background: transparent !important;
}

.price-table > ul > li:last-child {
    border-bottom: none !important;
}

.price-table > ul > li::before {
    content: "?" !important;
    position: absolute !important;
    left: 0 !important;
    top: 10px !important;
    color: #10b981 !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
}

/* Light mode overrides */
html.light-mode .price-table {
    background: #ffffff !important;
    border-color: rgba(11, 22, 40, 0.09) !important;
    box-shadow: 0 4px 20px -8px rgba(11, 22, 40, 0.06) !important;
}
html.light-mode .price-table .top-head {
    background: #f8fafc !important;
    border-bottom-color: rgba(11, 22, 40, 0.09) !important;
}

/* ===================================================
   23. HIGH-TECH SAAS HOMEPAGE & DOMAIN HERO
   =================================================== */

.xlorin-homepage-shell {
    width: 100%;
    margin-top: 15px;
}

/* Hero Banner */
.xlorin-hero-banner {
    width: 100%;
    padding: 60px 24px 50px 24px;
    background: radial-gradient(120% 160% at 50% 0%, rgba(53,154,255,0.22), transparent 70%), var(--card);
    border: 1px solid var(--hairline);
    border-radius: 24px;
    margin-bottom: 40px;
    box-shadow: 0 16px 40px -15px rgba(0,0,0,0.2);
}
.xlorin-hero-inner {
    max-width: 860px;
    margin: 0 auto;
}
.xlorin-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(53, 154, 255, 0.12);
    border: 1px solid rgba(53, 154, 255, 0.3);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
}
.xlorin-hero-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: pulseGlow 2s infinite ease-in-out;
}
.xlorin-hero-headline {
    font-family: "Manrope", sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--foreground);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 14px;
}
@media (max-width: 767.98px) {
    .xlorin-hero-headline {
        font-size: 1.85rem;
    }
}
.xlorin-hero-subtext {
    font-size: 1.05rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Domain Search Bar */
.xlorin-domain-search-box {
    display: flex;
    align-items: center;
    background: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 6px 8px 6px 18px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.25);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.xlorin-domain-search-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(53, 154, 255, 0.25);
}
.xlorin-search-icon {
    font-size: 1.2rem;
    color: var(--muted-foreground);
    margin-right: 12px;
}
.xlorin-domain-input {
    flex: 1 1 auto;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--foreground) !important;
    font-size: 1.05rem !important;
    padding: 10px 0 !important;
}
.xlorin-domain-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xlorin-btn-domain {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}

/* TLD Pills */
.xlorin-tld-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}
.xlorin-tld-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--muted);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.85rem;
}
.xlorin-tld-name {
    font-weight: 800;
    color: var(--primary);
}
.xlorin-tld-price {
    color: var(--foreground);
    font-weight: 600;
}
.xlorin-tld-more {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    margin-left: 6px;
}
.xlorin-tld-more:hover {
    text-decoration: underline;
}

/* Section Headings */
.xlorin-home-section {
    margin-bottom: 50px;
}
.xlorin-section-title {
    font-family: "Manrope", sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.xlorin-section-sub {
    color: var(--muted-foreground);
    font-size: 0.95rem;
}

/* Cloud Products Grid */
.xlorin-cloud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.xlorin-cloud-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 28px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.xlorin-cloud-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 14px 36px -10px rgba(53, 154, 255, 0.25);
}
.xlorin-cloud-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(53, 154, 255, 0.15);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}
.xlorin-cloud-name {
    font-family: "Manrope", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--foreground);
    margin-bottom: 8px;
}
.xlorin-cloud-desc {
    color: var(--muted-foreground);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 24px;
    min-height: 44px;
}

/* Features Grid */
.xlorin-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
.xlorin-feat-card {
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.2s ease;
}
.xlorin-feat-card:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}
.xlorin-feat-ico {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 16px;
}
.xlorin-feat-title {
    font-family: "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 8px;
}
.xlorin-feat-text {
    color: var(--muted-foreground);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Hub Grid */
.xlorin-hub-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
@media (max-width: 991.98px) {
    .xlorin-hub-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 575.98px) {
    .xlorin-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.xlorin-hub-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 24px 16px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.xlorin-hub-tile:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px rgba(53, 154, 255, 0.25);
}
.xlorin-hub-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
}
.xlorin-hub-title {
    font-weight: 700;
    color: var(--foreground);
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.xlorin-hub-desc {
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Hide default duplicate WHMCS homepage header */
.home-domain-search {
    display: none !important;
}

/* ===================================================
   24. 100% ISOLATED CLEAN AUTHENTICATION PAGES
   =================================================== */

body.xlorin-body-auth {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    width: 100% !important;
    background-color: var(--background) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.xlorin-body-auth .xlorin-app-shell,
body.xlorin-body-auth .xlorin-sidebar,
body.xlorin-body-auth .xlorin-topbar,
body.xlorin-body-auth .xlorin-page-head,
body.xlorin-body-auth .master-breadcrumb,
body.xlorin-body-auth footer.footer,
body.xlorin-body-auth #footer {
    display: none !important;
}

.xlorin-auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 16px !important;
}

.xlorin-auth-column {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}

.xlorin-auth-body {
    width: 100% !important;
}

.xlorin-auth-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
}

/* ===================================================
   25. NESTED COLLAPSIBLE SUBMENUS IN SIDEBAR
   =================================================== */

.xlorin-nav-nested-item {
    margin: 3px 0;
}
.xlorin-sub-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px 8px 24px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
    cursor: pointer !important;
    border-radius: var(--radius-md) !important;
    list-style: none !important;
    transition: all 0.15s ease !important;
}
.xlorin-sub-summary::-webkit-details-marker {
    display: none !important;
}
.xlorin-sub-summary:hover {
    color: var(--foreground) !important;
    background: var(--muted) !important;
}
.xlorin-sub-caret {
    font-size: 0.72rem !important;
    transition: transform 0.2s ease !important;
    color: var(--muted-foreground) !important;
}
details[open] > .xlorin-sub-summary .xlorin-sub-caret {
    transform: rotate(180deg) !important;
    color: var(--primary) !important;
}
.xlorin-nav-nested-list {
    list-style: none !important;
    padding: 4px 0 6px 36px !important;
    margin: 0 !important;
}
.xlorin-nav-nested-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    color: var(--muted-foreground) !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
.xlorin-nav-nested-list li a i {
    font-size: 0.65rem !important;
    color: var(--primary) !important;
    opacity: 0.7 !important;
}
.xlorin-nav-nested-list li a:hover {
    color: var(--primary) !important;
    background: rgba(53, 154, 255, 0.1) !important;
}

/* ===================================================
   26. FULL-WIDTH MODERN CLOUD ORDER FORM CONFIGURATOR
   =================================================== */

.cart-sidebar,
.xlorin-cart-sidebar,
#secondary-sidebar,
#premiumComparisonSidebar {
    display: none !important;
}

.xlorin-cart-layout,
.cart-body,
.xlorin-cart-main,
.xlorin-cart-fullwidth {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.xlorin-domain-config-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.2) !important;
}

/* Domain Option Tabs */
.xlorin-domain-tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.xlorin-domain-tab {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
    transition: all 0.2s ease !important;
}
.xlorin-domain-tab input[type="radio"] {
    margin-right: 8px !important;
}
.xlorin-domain-tab:hover {
    color: var(--foreground) !important;
    border-color: var(--primary) !important;
    background: var(--card) !important;
}
.xlorin-domain-tab.is-active {
    background: var(--brand-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 20px -6px rgba(10, 132, 255, 0.5) !important;
}
.xlorin-domain-tab.is-active span,
.xlorin-domain-tab.is-active i {
    color: #ffffff !important;
}

/* Domain Input Row */
.xlorin-domain-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 760px !important;
    margin: 0 auto !important;
}
@media (max-width: 575.98px) {
    .xlorin-domain-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}
.xlorin-input-prefix {
    padding: 12px 16px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    color: var(--muted-foreground) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}
.xlorin-domain-text {
    flex: 1 1 auto !important;
    height: 48px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
}
.xlorin-tld-select,
.xlorin-tld-input {
    width: 120px !important;
    height: 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
}
.xlorin-check-btn {
    height: 48px !important;
    padding: 0 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
}

/* Domain Search Results */
.xlorin-search-result-box {
    padding: 20px !important;
    border-radius: 14px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
}

/* ===================================================
   27. CLEAN VECTOR CHECKMARK ICONS (NO ? ARTIFACTS)
   =================================================== */

.price-table > ul > li::before,
.includes-features ul.list-features li::before {
    content: none !important;
    display: none !important;
}

.price-table > ul > li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-size: 0.9rem !important;
    color: var(--foreground) !important;
}

.xlorin-feat-icon {
    color: #10b981 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

/* ===================================================
   28. TOPBAR THEME SWITCHER TOGGLE
   =================================================== */

.xlorin-theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
.xlorin-theme-toggle-btn:hover {
    border-color: var(--primary) !important;
    background: var(--muted) !important;
}
.xlorin-icon-moon {
    display: inline-block !important;
    color: #38bdf8 !important;
    font-size: 0.95rem !important;
}
.xlorin-icon-sun {
    display: none !important;
    color: #f59e0b !important;
    font-size: 1rem !important;
}
html.light-mode .xlorin-icon-moon {
    display: none !important;
}
html.light-mode .xlorin-icon-sun {
    display: inline-block !important;
}

/* ===================================================
   29. SLEEK SAAS TOPBAR ACTIONS & BUTTON SPACING
   =================================================== */

.xlorin-topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.xlorin-topbar-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}
.xlorin-topbar-btn:hover {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--muted) !important;
    transform: translateY(-1px) !important;
}

.xlorin-topbar-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(10, 132, 255, 0.4) !important;
}

.xlorin-user-chip {
    height: 40px !important;
    padding: 4px 14px 4px 6px !important;
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 0.88rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}
.xlorin-user-chip:hover {
    border-color: var(--primary) !important;
    background: var(--muted) !important;
}
.xlorin-user-chip::after {
    display: none !important;
}
.xlorin-chip-caret {
    font-size: 0.7rem !important;
    color: var(--muted-foreground) !important;
    transition: transform 0.2s ease !important;
}
.dropdown.show .xlorin-chip-caret {
    transform: rotate(180deg) !important;
    color: var(--primary) !important;
}

/* Light Mode Overrides */
html.light-mode .xlorin-topbar-btn,
html.light-mode .xlorin-user-chip {
    background: #ffffff !important;
    border-color: rgba(11, 22, 40, 0.1) !important;
    box-shadow: 0 2px 6px rgba(11, 22, 40, 0.04) !important;
}
html.light-mode .xlorin-topbar-btn:hover,
html.light-mode .xlorin-user-chip:hover {
    background: #f1f5f9 !important;
    border-color: var(--primary) !important;
}

/* ===================================================
   30. MODERN SAAS CLOUD FOOTER (LAGOM 2 / CLOUDFLARE STYLE)
   =================================================== */

.xlorin-saas-footer {
    background: var(--card) !important;
    border-top: 1px solid var(--hairline) !important;
    margin-top: 60px !important;
    position: relative !important;
    color: var(--foreground) !important;
}

.xlorin-footer-logo {
    max-height: 38px !important;
    width: auto !important;
}

.xlorin-footer-desc {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    max-width: 320px !important;
}

.xlorin-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.xlorin-status-badge:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    transform: translateY(-1px) !important;
}
.xlorin-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 8px #10b981 !important;
    animation: xlorinPulse 2s infinite !important;
}

.xlorin-footer-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--foreground) !important;
    margin-bottom: 20px !important;
}

.xlorin-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.xlorin-footer-links li {
    margin-bottom: 10px !important;
}
.xlorin-footer-links li a {
    color: var(--muted-foreground) !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.xlorin-footer-links li a i {
    font-size: 0.8rem !important;
    color: var(--primary) !important;
    opacity: 0.7 !important;
}
.xlorin-footer-links li a:hover {
    color: var(--primary) !important;
    transform: translateX(3px) !important;
}

.xlorin-footer-hr {
    border: none !important;
    border-top: 1px solid var(--hairline) !important;
    margin: 0 !important;
}

.xlorin-locale-btn {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px !important;
    color: var(--foreground) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
}
.xlorin-locale-btn:hover {
    border-color: var(--primary) !important;
    color: var(--foreground) !important;
}

/* Light Mode Overrides */
html.light-mode .xlorin-saas-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
html.light-mode .xlorin-footer-links li a {
    color: #475569 !important;
}
html.light-mode .xlorin-footer-links li a:hover {
    color: var(--primary) !important;
}

/* ===================================================
   31. HANDCRAFTED CORPORATE INVOICE & CRISP SVGs
   =================================================== */

.xlorin-invoice-body {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
}

.xlorin-invoice-topbar {
    background: var(--card) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 12px 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}
.xlorin-invoice-back {
    color: var(--muted-foreground) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}
.xlorin-invoice-back:hover {
    color: var(--primary) !important;
}

.xlorin-invoice-sheet {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 36px 40px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}
@media (max-width: 767.98px) {
    .xlorin-invoice-sheet {
        padding: 20px 16px !important;
    }
}

.xlorin-invoice-logo {
    max-height: 38px !important;
    width: auto !important;
}

.xlorin-invoice-stamp {
    display: inline-block !important;
    padding: 6px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    border: 2px solid !important;
}
.stamp-paid {
    color: #10b981 !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08) !important;
}
.stamp-unpaid {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
.stamp-cancelled,
.stamp-draft {
    color: #94a3b8 !important;
    border-color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.08) !important;
}
.stamp-refunded {
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

.xlorin-invoice-party-card {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    height: 100% !important;
}
.xlorin-party-head {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--muted-foreground) !important;
    margin-bottom: 8px !important;
}

.xlorin-invoice-table-wrap {
    border: 1px solid var(--hairline) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}
.xlorin-invoice-table {
    width: 100% !important;
}
.xlorin-invoice-table th {
    background: var(--muted) !important;
    color: var(--foreground) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--hairline) !important;
}
.xlorin-invoice-table td {
    padding: 12px 16px !important;
    border-top: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-size: 0.9rem !important;
}
.xlorin-total-row td {
    background: var(--muted) !important;
    border-top: 2px solid var(--hairline) !important;
}

/* Light Mode Overrides for Invoices */
html.light-mode .xlorin-invoice-sheet {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}
html.light-mode .xlorin-invoice-party-card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Professional Vector SVG Theme Toggle Styling */
.xlorin-svg-moon {
    display: inline-block !important;
    color: #38bdf8 !important;
    transition: transform 0.3s ease !important;
}
.xlorin-svg-sun {
    display: none !important;
    color: #f59e0b !important;
    transition: transform 0.3s ease !important;
}
html.light-mode .xlorin-svg-moon {
    display: none !important;
}
html.light-mode .xlorin-svg-sun {
    display: inline-block !important;
}
.xlorin-theme-toggle-btn:hover .xlorin-svg-moon,
.xlorin-theme-toggle-btn:hover .xlorin-svg-sun {
    transform: scale(1.1) rotate(15deg) !important;
}

/* ===================================================
   32. HIGH-TECH CLOUD CONSOLE & INSTANCE MANAGEMENT (BDIXVPS STYLE)
   =================================================== */

/* Wallet Pill in Topbar */
.xlorin-wallet-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: rgba(10, 132, 255, 0.08) !important;
    border: 1px solid rgba(10, 132, 255, 0.2) !important;
    border-radius: 999px !important;
    color: var(--primary) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.xlorin-wallet-pill:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}
.xlorin-wallet-plus {
    font-size: 1rem !important;
    font-weight: 800 !important;
}

/* 5 KPI Summary Row */
.xlorin-kpi-row {
    margin-left: -8px !important;
    margin-right: -8px !important;
}
.xlorin-kpi-row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.xlorin-kpi-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.xlorin-kpi-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
}
.xlorin-kpi-card.kpi-total {
    border-color: rgba(10, 132, 255, 0.4) !important;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.04) 0%, transparent 100%) !important;
}

.xlorin-kpi-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.xlorin-kpi-num {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--foreground) !important;
    margin-bottom: 4px !important;
}
.xlorin-kpi-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
}

.xlorin-kpi-badge {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
}
.badge-blue { background: rgba(10, 132, 255, 0.1) !important; color: #0a84ff !important; }
.badge-green { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.badge-yellow { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; }
.badge-grey { background: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; }
.badge-red { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }

.xlorin-kpi-link {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    margin-top: 14px !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.xlorin-kpi-link:hover {
    text-decoration: underline !important;
}

/* Cloud Instances Table */
.xlorin-instance-table-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.xlorin-cloud-table th {
    background: var(--muted) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--muted-foreground) !important;
    padding: 14px 20px !important;
}
.xlorin-cloud-table td {
    padding: 16px 20px !important;
    border-top: 1px solid var(--hairline) !important;
    vertical-align: middle !important;
}

.xlorin-table-hostname {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
}
.xlorin-table-hostname:hover {
    color: var(--primary) !important;
}
.xlorin-table-subspec {
    font-size: 0.8rem !important;
    color: var(--muted-foreground) !important;
    margin-top: 2px !important;
}

.xlorin-table-status-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.dot-active { background: #10b981 !important; box-shadow: 0 0 8px #10b981 !important; }
.dot-pending { background: #f59e0b !important; }
.dot-suspended { background: #ef4444 !important; }

.xlorin-status-pill {
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    text-transform: capitalize !important;
}
.pill-active, .pill-running { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.pill-pending { background: rgba(245, 158, 11, 0.1) !important; color: #f59e0b !important; }
.pill-suspended { background: rgba(239, 68, 68, 0.1) !important; color: #ef4444 !important; }
.pill-cancelled, .pill-terminated { background: rgba(148, 163, 184, 0.1) !important; color: #94a3b8 !important; }

/* 6-Pillar Spec Ribbon */
.xlorin-spec-ribbon {
    margin-left: -6px !important;
    margin-right: -6px !important;
}
.xlorin-spec-ribbon > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.xlorin-spec-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    text-align: left !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.xlorin-spec-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    font-size: 0.95rem !important;
}
.icon-purple { background: rgba(147, 51, 234, 0.1) !important; color: #9333ea !important; }
.icon-blue { background: rgba(10, 132, 255, 0.1) !important; color: #0a84ff !important; }
.icon-green { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }
.icon-orange { background: rgba(249, 115, 22, 0.1) !important; color: #f97316 !important; }
.icon-cyan { background: rgba(6, 182, 212, 0.1) !important; color: #06b6d4 !important; }
.icon-emerald { background: rgba(16, 185, 129, 0.1) !important; color: #10b981 !important; }

.xlorin-spec-label {
    font-size: 0.75rem !important;
    color: var(--muted-foreground) !important;
    font-weight: 600 !important;
}
.xlorin-spec-val {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--foreground) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Instance Hero & Panels */
.xlorin-instance-hero-card,
.xlorin-panel-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
.xlorin-panel-header {
    background: var(--muted) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 14px 20px !important;
}

.xlorin-status-dot-lg {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.xlorin-ip-badge {
    padding: 3px 8px !important;
    background: var(--muted) !important;
    border-radius: 6px !important;
    font-family: monospace !important;
    font-size: 0.8rem !important;
    color: var(--foreground) !important;
}

.xlorin-metric-box {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    padding: 16px !important;
}
.xlorin-progress {
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.xlorin-shortcut-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    height: 100% !important;
}
.xlorin-shortcut-btn i {
    font-size: 1.4rem !important;
    color: var(--primary) !important;
    margin-bottom: 8px !important;
}
.xlorin-shortcut-btn:hover {
    border-color: var(--primary) !important;
    background: var(--card) !important;
    transform: translateY(-2px) !important;
    color: var(--primary) !important;
}

.xlorin-detail-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.xlorin-detail-list li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid var(--hairline) !important;
    font-size: 0.88rem !important;
}
.xlorin-detail-list li:last-child {
    border-bottom: none !important;
}
.xlorin-detail-label {
    color: var(--muted-foreground) !important;
    font-weight: 500 !important;
}
.xlorin-detail-val {
    color: var(--foreground) !important;
    text-align: right !important;
}

/* ===================================================
   33. NEXT-GEN CLOUD DOMAIN HUB (ZERO YELLOW BOX)
   =================================================== */

.domain-checker-bg,
.domain-checker-container {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

.xlorin-domain-reg-hero {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 20px !important;
    padding: 40px 24px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2) !important;
}

.xlorin-domain-search-wrapper {
    max-width: 720px !important;
    margin: 0 auto !important;
}

.xlorin-search-bar-unified {
    display: flex !important;
    align-items: center !important;
    background: var(--card) !important;
    border: 2px solid var(--hairline) !important;
    border-radius: 14px !important;
    padding: 6px 8px 6px 18px !important;
    box-shadow: 0 8px 25px -6px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
}
.xlorin-search-bar-unified:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15) !important;
}

.xlorin-search-icon {
    font-size: 1.2rem !important;
    color: var(--muted-foreground) !important;
    margin-right: 12px !important;
}

.xlorin-domain-main-input {
    border: none !important;
    background: transparent !important;
    height: 48px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.xlorin-domain-main-input:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--foreground) !important;
}

.xlorin-domain-search-btn {
    height: 48px !important;
    padding: 0 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
}

/* Exact Match Result Card */
.xlorin-exact-match-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.2) !important;
}
.xlorin-exact-match-label {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--muted-foreground) !important;
}

/* Spotlight TLD Cards */
.xlorin-tld-spotlight-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.xlorin-tld-spotlight-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
}
.xlorin-tld-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
}

/* Suggested Domains Card */
.xlorin-suggested-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.xlorin-suggested-header {
    background: var(--muted) !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding: 14px 20px !important;
}
.domain-suggestion.list-group-item {
    background: transparent !important;
    border-bottom: 1px solid var(--hairline) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}
.domain-suggestion.list-group-item:hover {
    background: var(--muted) !important;
}

/* Light Mode Overrides */
html.light-mode .xlorin-domain-reg-hero {
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%) !important;
    border-color: #cbd5e1 !important;
}
html.light-mode .xlorin-search-bar-unified {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* ===================================================
   34. BESPOKE MULTI-CARD REGISTRATION (REFERENCE MATCH)
   =================================================== */

.xlorin-reg-wrapper {
    max-width: 860px !important;
    margin: 20px auto 50px auto !important;
    padding: 0 15px !important;
}

/* Top Blue Gradient Banner */
.xlorin-reg-banner {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important;
    border-radius: 16px !important;
    padding: 24px 32px !important;
    box-shadow: 0 10px 25px -5px rgba(13, 110, 253, 0.3) !important;
    color: #ffffff !important;
}
.reg-banner-logo-img {
    max-height: 42px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
}
.reg-banner-logo-text {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}
.xlorin-reg-banner-titles {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Form Cards */
.xlorin-reg-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.xlorin-reg-section-head {
    position: relative !important;
}
.xlorin-reg-accent-line {
    width: 36px !important;
    height: 3px !important;
    background: var(--primary, #0d6efd) !important;
    border-radius: 2px !important;
    margin-top: 6px !important;
}

/* Input Fields with Prefix Icons */
.xlorin-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.xlorin-input-icon {
    position: absolute !important;
    left: 14px !important;
    color: var(--muted-foreground) !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    z-index: 4 !important;
}
.xlorin-reg-input {
    height: 48px !important;
    padding-left: 42px !important;
    padding-right: 14px !important;
    border-radius: 10px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-size: 0.92rem !important;
    transition: all 0.2s ease !important;
}
.xlorin-reg-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
    background: var(--card) !important;
    color: var(--foreground) !important;
}

.xlorin-input-action {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: var(--muted-foreground) !important;
    padding: 6px 10px !important;
    z-index: 5 !important;
}
.xlorin-input-action:hover {
    color: var(--primary) !important;
}

.xlorin-gen-pw-btn {
    height: 48px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.xlorin-pw-meter-box {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    height: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.xlorin-tos-box {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    padding: 12px 18px !important;
    display: inline-block !important;
}

.xlorin-reg-submit-btn {
    height: 50px !important;
    min-width: 220px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Light Mode Specific Overrides */
html.light-mode .xlorin-reg-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
html.light-mode .xlorin-reg-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}
html.light-mode .xlorin-tos-box,
html.light-mode .xlorin-pw-meter-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ===================================================
   35. AUTH SHELL SCROLL FIX & WIDE LAYOUT
   =================================================== */

html, body {
    overflow-x: hidden !important;
}

body.xlorin-body-auth {
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    display: block !important;
    background-color: var(--background) !important;
}

.xlorin-auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 40px 16px 80px 16px !important;
    box-sizing: border-box !important;
}

.xlorin-auth-column {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
}

.xlorin-auth-column.xlorin-auth-column-wide,
body.xlorin-body-register .xlorin-auth-column,
.xlorin-reg-wrapper {
    max-width: 860px !important;
    width: 100% !important;
}

/* Ensure all cards and banner render properly */
.xlorin-reg-wrapper {
    margin: 0 auto !important;
    width: 100% !important;
}

/* ===================================================
   36. REGISTRATION REFINEMENTS (DARK CONTRAST & PHONE FIX)
   =================================================== */

/* Sleek Typography Header */
.xlorin-reg-header h1 {
    font-size: 1.85rem !important;
    letter-spacing: -0.02em !important;
}

/* Phone Input intl-tel-input Fix */
.xlorin-phone-wrap {
    position: relative !important;
    width: 100% !important;
}
.xlorin-phone-wrap .iti {
    width: 100% !important;
    display: block !important;
}
.xlorin-phone-wrap .iti__selected-flag {
    padding: 0 12px 0 14px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    background: transparent !important;
}
.xlorin-phone-wrap input.form-control,
.xlorin-phone-wrap input.xlorin-phone-input {
    width: 100% !important;
    height: 48px !important;
    padding-left: 92px !important;
    padding-right: 14px !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
}

/* Custom Modern Toggle Switch */
.xlorin-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 48px !important;
    height: 26px !important;
    cursor: pointer !important;
}
.xlorin-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.xlorin-toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--muted, rgba(255, 255, 255, 0.15)) !important;
    border: 1px solid var(--hairline) !important;
    transition: .3s !important;
    border-radius: 999px !important;
}
.xlorin-toggle-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: #ffffff !important;
    transition: .3s !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.xlorin-toggle-switch input:checked + .xlorin-toggle-slider {
    background-color: var(--primary, #0d6efd) !important;
    border-color: var(--primary, #0d6efd) !important;
}
.xlorin-toggle-switch input:checked + .xlorin-toggle-slider:before {
    transform: translateX(22px) !important;
}

/* High Contrast Dark Mode Inputs & Cards */
.xlorin-reg-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.xlorin-reg-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--foreground, #ffffff) !important;
}
.xlorin-reg-input::placeholder {
    color: var(--muted-foreground, rgba(255, 255, 255, 0.45)) !important;
    opacity: 1 !important;
}
.xlorin-reg-input:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--primary, #0d6efd) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
    color: #ffffff !important;
}

.xlorin-reg-input option {
    background-color: #0b172e !important;
    color: #ffffff !important;
}

.xlorin-input-icon {
    color: #3b82f6 !important;
}

.xlorin-pw-meter-box,
.xlorin-tos-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Light Mode Overrides */
html.light-mode .xlorin-reg-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
html.light-mode .xlorin-reg-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode .xlorin-reg-input::placeholder {
    color: #94a3b8 !important;
}
html.light-mode .xlorin-reg-input:focus {
    background: #ffffff !important;
    color: #0f172a !important;
}
html.light-mode .xlorin-reg-input option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html.light-mode .xlorin-pw-meter-box,
html.light-mode .xlorin-tos-box {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ===================================================
   37. CONFIGURE PRODUCT & CART DARK/LIGHT OVERHAUL (ZERO WHITE BOX)
   =================================================== */

#order-standard_cart,
#order-xlorin_cart,
#order-premium_comparison,
.cart-body,
.secondary-cart-body,
.field-container,
.product-info,
.order-summary,
.order-summary .summary-container,
.summary-container {
    color: var(--foreground) !important;
}

/* Main Left Configuration Body */
#order-standard_cart .secondary-cart-body,
#order-xlorin_cart .secondary-cart-body,
.secondary-cart-body {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    padding: 28px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    color: var(--foreground) !important;
}

/* Product Info Banner Box */
#order-standard_cart .product-info,
#order-xlorin_cart .product-info,
.product-info {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    color: var(--foreground) !important;
}
.product-info .product-title {
    color: var(--foreground) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
}

/* Form Section Field Containers */
#order-standard_cart .field-container,
#order-xlorin_cart .field-container,
.field-container {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    padding: 18px 20px !important;
    margin-bottom: 20px !important;
    color: var(--foreground) !important;
}
.field-container label {
    color: var(--foreground) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
}

/* Sub Headings */
#order-standard_cart .sub-heading,
#order-xlorin_cart .sub-heading,
.sub-heading {
    color: var(--foreground) !important;
    font-weight: 800 !important;
    border-bottom: 1px solid var(--hairline) !important;
    padding-bottom: 8px !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
}

/* Right Side Order Summary Box */
#order-standard_cart .order-summary,
#order-xlorin_cart .order-summary,
.order-summary,
#orderSummary,
.order-summary .summary-container,
.summary-container {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    color: var(--foreground) !important;
}

#order-standard_cart .order-summary .order-summary-header,
.order-summary .order-summary-header,
.order-summary .header,
.order-summary .headline {
    background: var(--muted) !important;
    border-bottom: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    padding: 14px 20px !important;
}

#order-standard_cart .order-summary .content,
.order-summary .content,
.order-summary-content {
    background: var(--card) !important;
    color: var(--foreground) !important;
    padding: 20px !important;
}

.order-summary .product-name {
    color: var(--foreground) !important;
    font-weight: 700 !important;
}
.order-summary .product-group {
    color: var(--muted-foreground) !important;
    font-size: 0.82rem !important;
}

.order-summary .summary-totals {
    border-top: 1px solid var(--hairline) !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    color: var(--foreground) !important;
}
.order-summary .total-due-today {
    color: var(--foreground) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
}
.order-summary .total-due-today .amt {
    color: #3b82f6 !important;
    font-weight: 800 !important;
}

/* Addons Panels */
#order-standard_cart .addon-products,
.addon-products,
.panel-addon {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 10px !important;
    color: var(--foreground) !important;
    padding: 16px !important;
}
.panel-addon.panel-addon-selected {
    border-color: var(--primary) !important;
    background: rgba(13, 110, 253, 0.08) !important;
}
.panel-addon .panel-body {
    background: transparent !important;
    color: var(--foreground) !important;
}
.panel-addon .panel-add {
    color: var(--foreground) !important;
}

/* Form Controls Inside Orderforms */
#order-standard_cart input.form-control,
#order-standard_cart select.form-control,
#order-standard_cart textarea.form-control,
#order-xlorin_cart input.form-control,
#order-xlorin_cart select.form-control,
#order-xlorin_cart textarea.form-control {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    border-radius: 8px !important;
}
#order-standard_cart select option,
#order-xlorin_cart select option {
    background-color: #0b172e !important;
    color: #ffffff !important;
}

/* Light Mode Overrides */
html.light-mode #order-standard_cart .secondary-cart-body,
html.light-mode #order-xlorin_cart .secondary-cart-body,
html.light-mode .secondary-cart-body,
html.light-mode #order-standard_cart .order-summary,
html.light-mode #order-xlorin_cart .order-summary,
html.light-mode .order-summary,
html.light-mode .summary-container {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light-mode #order-standard_cart .product-info,
html.light-mode #order-standard_cart .field-container,
html.light-mode #order-standard_cart .addon-products,
html.light-mode .panel-addon,
html.light-mode #order-standard_cart .order-summary .order-summary-header {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light-mode #order-standard_cart input.form-control,
html.light-mode #order-standard_cart select.form-control,
html.light-mode #order-standard_cart textarea.form-control {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light-mode #order-standard_cart select option,
html.light-mode #order-xlorin_cart select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ===================================================
   38. 100% MOBILE & DESKTOP SCROLL FIX FOR REGISTRATION
   =================================================== */

html, body {
    height: auto !important;
    min-height: 100% !important;
}

body.xlorin-body-auth,
body.xlorin-body-register {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
}

body.xlorin-body-register .xlorin-auth-shell {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    padding: 30px 14px 80px 14px !important;
    margin: 0 auto !important;
    position: static !important;
    top: 0 !important;
}

body.xlorin-body-register .xlorin-auth-column,
body.xlorin-body-register .xlorin-reg-wrapper {
    max-width: 860px !important;
    margin: 0 auto !important;
    width: 100% !important;
    position: static !important;
}

@media (max-width: 767.98px) {
    body.xlorin-body-register .xlorin-auth-shell {
        padding: 16px 10px 60px 10px !important;
    }
    .xlorin-reg-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    .xlorin-reg-card .card-body {
        padding: 20px 16px !important;
    }
    .xlorin-reg-header h1 {
        font-size: 1.45rem !important;
    }
    .xlorin-reg-header p {
        font-size: 0.85rem !important;
    }
}

/* ===================================================
   39. CORE FULL-WIDTH FLUID LAYOUT (ZERO DEAD MARGINS)
   =================================================== */

/* Eliminate rigid 1140px/1320px container caps across all app-shell pages */
.xlorin-main .container,
.xlorin-main #main-body > .container,
.xlorin-main .xlorin-page-head > .container,
.xlorin-main .xlorin-saas-footer .container,
.xlorin-main #main-body,
.xlorin-main .primary-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.xlorin-main .xlorin-topbar {
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Fluid Breadcrumbs & Page Titles */
.xlorin-page-head {
    padding: 24px 0 16px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--hairline) !important;
    margin-bottom: 24px !important;
}
.xlorin-page-head > .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Email Verification Banner Dark/Light Harmonization */
.verification-banner.email-verification {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: 12px !important;
    color: var(--foreground) !important;
    margin: 20px 32px !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}
.verification-banner.email-verification .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}
.verification-banner.email-verification i {
    color: #f59e0b !important;
    margin-right: 8px !important;
}
.verification-banner.email-verification .btn-resend-verify-email {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.verification-banner.email-verification .btn-resend-verify-email:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

@media (min-width: 1600px) {
    .xlorin-main .container,
    .xlorin-main #main-body > .container,
    .xlorin-main .xlorin-page-head > .container,
    .xlorin-main .xlorin-saas-footer .container,
    .xlorin-main .xlorin-topbar {
        padding-left: 44px !important;
        padding-right: 44px !important;
    }
    .verification-banner.email-verification {
        margin-left: 44px !important;
        margin-right: 44px !important;
    }
}

@media (max-width: 991.98px) {
    .xlorin-main .container,
    .xlorin-main #main-body > .container,
    .xlorin-main .xlorin-page-head > .container,
    .xlorin-main .xlorin-saas-footer .container,
    .xlorin-main .xlorin-topbar {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .verification-banner.email-verification {
        margin: 16px 20px !important;
    }
}

@media (max-width: 575.98px) {
    .xlorin-main .container,
    .xlorin-main #main-body > .container,
    .xlorin-main .xlorin-page-head > .container,
    .xlorin-main .xlorin-saas-footer .container,
    .xlorin-main .xlorin-topbar {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .verification-banner.email-verification {
        margin: 14px !important;
    }
}

/* ===================================================
   40. 100% TRUE FULL-WIDTH EXPANSION ACROSS ALL PAGES
   =================================================== */

.container,
.container-fluid,
.xlorin-main .container,
.xlorin-main .container-fluid,
.xlorin-main #main-body > .container,
.xlorin-main #main-body > .container-fluid,
.xlorin-page-head > .container,
.xlorin-page-head > .container-fluid,
.xlorin-console-shell,
.xlorin-console-hero,
.xlorin-console-grid,
.xlorin-dues-card,
.xlorin-saas-footer .container,
.xlorin-saas-footer .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.xlorin-main {
    padding: 0 !important;
    width: calc(100% - 264px) !important;
    max-width: calc(100% - 264px) !important;
}

.xlorin-main #main-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.xlorin-topbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.verification-banner.email-verification {
    margin: 16px 24px 20px 24px !important;
    width: calc(100% - 48px) !important;
}

.xlorin-saas-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

@media (max-width: 991.98px) {
    .xlorin-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .xlorin-main #main-body,
    .xlorin-topbar,
    .xlorin-saas-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .verification-banner.email-verification {
        margin: 12px 14px !important;
        width: calc(100% - 28px) !important;
    }
}

/* ===================================================
   41. GLOBAL TRUE 100% EDGE-TO-EDGE FULL WIDTH ACROSS ALL TEMPLATES
   =================================================== */

/* Completely remove Bootstrap container max-width limits across all templates */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid,
.xlorin-main .container,
.xlorin-main .container-fluid,
.xlorin-main #main-body,
.xlorin-main #main-body > .container,
.xlorin-main #main-body > .container-fluid,
.xlorin-main .primary-content,
.xlorin-page-head > .container,
.xlorin-page-head > .container-fluid,
.xlorin-instance-detail-shell,
.xlorin-instances-shell,
.xlorin-console-shell {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Eliminate dead spacing on main-body & inner columns */
.xlorin-main #main-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
}

.xlorin-page-head {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
}
.xlorin-page-head > .container,
.xlorin-page-head > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.xlorin-topbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
}

.verification-banner,
.alert {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.xlorin-main #main-body > .container,
.xlorin-main #main-body > .container-fluid,
.xlorin-main .primary-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 767.98px) {
    .xlorin-main #main-body,
    .xlorin-page-head,
    .xlorin-topbar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ===================================================
   42. MY DOMAINS HUB (EXONHOST / LAGOM REFERENCE UI)
   =================================================== */

.xlorin-kpi-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.xlorin-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.xlorin-kpi-icon-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
}
.xlorin-kpi-icon-circle.icon-green {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #22c55e !important;
}
.xlorin-kpi-icon-circle.icon-blue {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
}
.xlorin-kpi-icon-circle.icon-orange {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
}
.xlorin-kpi-icon-circle.icon-purple {
    background: rgba(168, 85, 247, 0.12) !important;
    color: #a855f7 !important;
}

.xlorin-kpi-label {
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: var(--muted-foreground) !important;
}
.xlorin-kpi-val {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--foreground) !important;
    margin: 2px 0 !important;
}
.xlorin-kpi-sub {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Domain Hub Table Card & Tabs */
.xlorin-domain-table-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
}

.xlorin-domain-tabs-bar {
    background: var(--card) !important;
}
.xlorin-domain-tab-link {
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    color: var(--muted-foreground) !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.xlorin-domain-tab-link:hover {
    color: var(--primary) !important;
}
.xlorin-domain-tab-link.active {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

.xlorin-btn-export {
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.xlorin-domain-icon-pill {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.xlorin-badge-autorenew-enabled {
    color: #22c55e !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    display: inline-flex !important;
    align-items: center !important;
}
.xlorin-badge-autorenew-disabled {
    color: var(--muted-foreground) !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

.xlorin-quick-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.xlorin-quick-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.xlorin-manage-domain-btn {
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}
.xlorin-manage-domain-btn:hover {
    background: #22c55e !important;
    color: #ffffff !important;
}

.xlorin-kebab-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
}

/* Light mode specifics */
html.light-mode .xlorin-kpi-card,
html.light-mode .xlorin-domain-table-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 18px rgba(11, 22, 40, 0.05) !important;
}
html.light-mode .xlorin-domain-tabs-bar {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light-mode .xlorin-quick-btn,
html.light-mode .xlorin-btn-export,
html.light-mode .xlorin-kebab-btn {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ===================================================
   43. BESPOKE DATATABLE TOOLBAR & SEARCH BOX
   =================================================== */

.xlorin-search-box {
    position: relative !important;
    min-width: 220px !important;
}
.xlorin-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--muted-foreground, #94a3b8) !important;
    font-size: 0.85rem !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.xlorin-search-input {
    padding-left: 36px !important;
    padding-right: 12px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-size: 0.88rem !important;
}
.xlorin-search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2) !important;
}

.xlorin-custom-select {
    height: 36px !important;
    border-radius: 8px !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    font-size: 0.88rem !important;
}
.xlorin-custom-select option {
    background-color: #0b172e !important;
    color: #ffffff !important;
}

/* DataTables Pagination Styling */
.xlorin-dt-pagination .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.xlorin-dt-pagination .paginate_button {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    background: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--foreground) !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.xlorin-dt-pagination .paginate_button:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}
.xlorin-dt-pagination .paginate_button.current {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}
.xlorin-dt-pagination .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Light mode overrides */
html.light-mode .xlorin-search-input,
html.light-mode .xlorin-custom-select {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
html.light-mode .xlorin-custom-select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html.light-mode .xlorin-dt-pagination .paginate_button {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ===================================================
   44. COMPACT & SLEEK CARD PROPORTIONS ACROSS SYSTEM
   =================================================== */

/* Sleek KPI Summary Cards */
.xlorin-kpi-card {
    border-radius: 12px !important;
    border: 1px solid var(--hairline) !important;
}
.xlorin-kpi-card .card-body {
    padding: 12px 16px !important;
}
.xlorin-kpi-icon-circle {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.15rem !important;
    border-radius: 10px !important;
}
.xlorin-kpi-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.xlorin-kpi-val {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 1px 0 !important;
}
.xlorin-kpi-sub {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
}

/* Compact Spec Cards & Product Details */
.xlorin-spec-card,
.xlorin-stat-card,
.xlorin-compute-card,
.xlorin-plan-card {
    border-radius: 12px !important;
}
.xlorin-spec-card .card-body,
.xlorin-stat-card .card-body,
.xlorin-compute-card .card-body {
    padding: 14px 16px !important;
}

/* Compact Hero Banners */
.xlorin-console-hero,
.xlorin-instance-hero-card .card-body {
    padding: 16px 20px !important;
    border-radius: 12px !important;
}
.xlorin-console-title {
    font-size: 1.45rem !important;
}
.xlorin-console-desc {
    font-size: 0.86rem !important;
}

/* Compact Table Headers & Rows */
.xlorin-modern-table th {
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}
.xlorin-modern-table td {
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
}

/* ===================================================
   45. EXONHOST / LAGOM DOMAIN REGISTER 2-COLUMN LAYOUT
   =================================================== */

.xlorin-exon-input-group {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 4px !important;
}
.xlorin-exon-input-group input.form-control {
    background: transparent !important;
    border: none !important;
    color: var(--foreground) !important;
    font-size: 1.05rem !important;
    height: 48px !important;
    box-shadow: none !important;
}
.xlorin-exon-input-group .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--muted-foreground) !important;
}
.xlorin-exon-input-group .xlorin-domain-search-btn,
.xlorin-exon-input-group .btn-success,
.xlorin-exon-input-group .btn-primary {
    border-radius: 8px !important;
    background: var(--brand-gradient, linear-gradient(135deg, #0284c7 0%, #2563eb 100%)) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    transition: all 0.2s ease !important;
}
.xlorin-exon-input-group .xlorin-domain-search-btn:hover,
.xlorin-exon-input-group .btn-success:hover,
.xlorin-exon-input-group .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
    color: #ffffff !important;
}

.xlorin-tld-filter-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}
.xlorin-tld-scroll-list::-webkit-scrollbar {
    width: 5px;
}
.xlorin-tld-scroll-list::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 4px;
}

.xlorin-exact-match-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
}

.xlorin-suggested-card {
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}
.xlorin-suggested-card .list-group-item {
    background: transparent !important;
    border-color: var(--hairline) !important;
}

/* Light mode specifics */
html.light-mode .xlorin-exon-input-group {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html.light-mode .xlorin-tld-filter-card,
html.light-mode .xlorin-exact-match-card,
html.light-mode .xlorin-suggested-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* ===================================================
   46. MOBILE REGISTRATION 100% VISIBILITY & TOUCH FIX
   =================================================== */

@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
        position: static !important;
    }
    
    body.xlorin-body-auth,
    body.xlorin-body-register {
        display: block !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .xlorin-auth-shell {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        padding: 16px 10px 80px 10px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }
    
    .xlorin-auth-column,
    .xlorin-auth-column-wide,
    .xlorin-auth-body,
    .xlorin-reg-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important;
        overflow: visible !important;
    }
    
    .xlorin-reg-header {
        margin-bottom: 20px !important;
        padding: 0 4px !important;
    }
    .xlorin-reg-header h1 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }
    .xlorin-reg-header p {
        font-size: 0.82rem !important;
    }
    
    .xlorin-reg-card {
        border-radius: 14px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .xlorin-reg-card .card-body {
        padding: 18px 14px !important;
    }
    
    .xlorin-reg-section-head {
        margin-bottom: 16px !important;
    }
    .xlorin-reg-section-head h2 {
        font-size: 1.05rem !important;
    }
    
    .xlorin-input-wrap {
        width: 100% !important;
    }
    
    .xlorin-reg-input,
    .xlorin-phone-input,
    .xlorin-reg-wrapper input.form-control,
    .xlorin-reg-wrapper select.form-control {
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }
    
    .xlorin-phone-wrap .iti {
        width: 100% !important;
    }
    .xlorin-phone-wrap input.xlorin-phone-input {
        padding-left: 88px !important;
    }
    
    .xlorin-gen-pw-btn {
        height: 40px !important;
        font-size: 0.85rem !important;
    }
    
    .xlorin-pw-meter-box {
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .xlorin-reg-submit-btn {
        width: 100% !important;
        height: 48px !important;
        font-size: 1rem !important;
        justify-content: center !important;
    }
    
    .cf-turnstile {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ===================================================
   47. 100% MOBILE FULL-BLEED REGISTRATION (ZERO SIDE GAPS)
   =================================================== */

@media (max-width: 767.98px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: var(--background, #060e1d) !important;
    }

    body.xlorin-body-auth,
    body.xlorin-body-register {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        min-height: 100vh !important;
        background-color: var(--background, #060e1d) !important;
    }

    .xlorin-auth-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 16px 12px 60px 12px !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
    }

    .xlorin-auth-column,
    .xlorin-auth-column-wide,
    .xlorin-auth-body,
    .xlorin-reg-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .xlorin-reg-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 14px !important;
        border-radius: 14px !important;
    }
    .xlorin-reg-card .card-body {
        padding: 16px 12px !important;
    }

    .xlorin-reg-header {
        margin: 10px 0 20px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    .xlorin-reg-header h1 {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }
    .xlorin-reg-header p {
        font-size: 0.82rem !important;
    }

    .xlorin-phone-wrap {
        width: 100% !important;
    }
    .xlorin-phone-wrap .iti {
        width: 100% !important;
        display: block !important;
    }
    .xlorin-phone-wrap input.form-control,
    .xlorin-phone-wrap input.xlorin-phone-input {
        width: 100% !important;
        padding-left: 88px !important;
    }

    .xlorin-reg-submit-btn {
        width: 100% !important;
        height: 48px !important;
        font-size: 1rem !important;
    }
}

/* ===================================================
   48. PERFECT MOBILE AUTH CENTERING & FULL-WIDTH CARDS
   =================================================== */

/* All Auth Pages (Desktop & Tablet) */
.xlorin-auth-shell {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 16px !important;
    box-sizing: border-box !important;
    background-color: var(--background, #060e1d) !important;
}

/* Registration Shell specifically starts from top to allow long scroll */
body.xlorin-body-register .xlorin-auth-shell {
    justify-content: flex-start !important;
    padding: 24px 14px 60px 14px !important;
}

.xlorin-auth-column {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
}

.xlorin-auth-column-wide,
body.xlorin-body-register .xlorin-auth-column {
    max-width: 860px !important;
}

.xlorin-auth-card {
    width: 100% !important;
    background: var(--card) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
}

/* Mobile Screens (Phones < 768px) */
@media (max-width: 767.98px) {
    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: var(--background, #060e1d) !important;
    }

    body.xlorin-body-auth {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        background-color: var(--background, #060e1d) !important;
    }

    .xlorin-auth-shell {
        width: 100% !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        flex: 1 0 auto !important;
    }

    body.xlorin-body-register .xlorin-auth-shell {
        justify-content: flex-start !important;
        padding: 16px 10px 60px 10px !important;
        min-height: 100vh !important;
    }

    .xlorin-auth-column,
    .xlorin-auth-column-wide,
    .xlorin-auth-form,
    .xlorin-auth-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .xlorin-auth-card .card-body {
        padding: 24px 18px !important;
    }

    .xlorin-auth-submit {
        width: 100% !important;
        height: 48px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .xlorin-turnstile-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        overflow-x: auto !important;
        margin: 14px 0 !important;
    }
}