/* =============================================================
 * RootReseller Galaxy — WHMCS skin (v3)
 * Child of twenty-one. Loads AFTER Bootstrap so we win the cascade.
 * Goal: nothing on screen should look like default WHMCS.
 * ============================================================= */

:root {
    --rr-bg-0:#03050f; --rr-bg-1:#070b1c; --rr-bg-2:#0c1428; --rr-bg-3:#131c34; --rr-bg-4:#1a2545;
    --rr-line: rgba(148,190,255,.16);
    --rr-line-2: rgba(148,190,255,.08);
    --rr-ink:#eef6ff; --rr-ink-2:#c8d6ec; --rr-muted:#94a8c4; --rr-muted-2:#6e80a0;
    --rr-brand:#39f7b2; --rr-cyan:#64dcff; --rr-blue:#5a7cff; --rr-magenta:#f858bc; --rr-orange:#fe7b02;
    --rr-warn:#ffc857; --rr-danger:#ff5d7a; --rr-ok:#39f7b2;
    --rr-grad-brand:linear-gradient(135deg,#39f7b2 0%,#64dcff 60%,#5a7cff 100%);
    --rr-grad-nebula:radial-gradient(60% 70% at 12% 18%, rgba(90,124,255,.18), transparent 60%),radial-gradient(50% 50% at 88% 12%, rgba(248,88,188,.14), transparent 60%),radial-gradient(60% 70% at 50% 110%, rgba(57,247,178,.10), transparent 60%);
    --rr-grad-button:linear-gradient(135deg,#39f7b2 0%,#64dcff 55%,#5a7cff 100%);
    --rr-grad-card:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    --rr-grad-soft:linear-gradient(135deg, rgba(57,247,178,.10), rgba(90,124,255,.10));
    --rr-radius:14px; --rr-radius-sm:10px; --rr-radius-xs:8px;
    --rr-shadow-sm:0 4px 16px rgba(2,5,18,.45); --rr-shadow-md:0 12px 36px rgba(2,5,18,.55); --rr-shadow-lg:0 24px 64px rgba(2,5,18,.65);
    --rr-glow-brand:0 0 28px rgba(57,247,178,.32); --rr-glow-blue:0 0 28px rgba(90,124,255,.32);
    --rr-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rr-font-display:'Space Grotesk', 'Inter', system-ui, sans-serif;
    --rr-font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
html, body { background: var(--rr-bg-1); }
body.rr-galaxy {
    color: var(--rr-ink-2); font-family: var(--rr-font-body); line-height:1.55;
    background:
        radial-gradient(60% 50% at 10% 0%,  rgba(90,124,255,.10), transparent 60%),
        radial-gradient(50% 50% at 100% 8%, rgba(248,88,188,.10), transparent 60%),
        radial-gradient(80% 60% at 50% 100%,rgba(57,247,178,.06), transparent 60%),
        var(--rr-bg-1);
    background-attachment: fixed; min-height: 100vh;
}
body.rr-galaxy::before {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1px 1px at 27% 72%, rgba(255,255,255,.40), transparent 60%),
        radial-gradient(1.2px 1.2px at 62% 33%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(1px 1px at 80% 80%, rgba(255,255,255,.30), transparent 60%),
        radial-gradient(1px 1px at 92% 24%, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(1px 1px at 47% 90%, rgba(255,255,255,.35), transparent 60%);
    opacity:.55;
}
body.rr-galaxy > * { position: relative; z-index: 1; }

a, a:visited { color: var(--rr-cyan); text-decoration:none; }
a:hover, a:focus { color: var(--rr-brand); text-decoration:none; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--rr-font-display); color: var(--rr-ink); font-weight:700; letter-spacing:-0.01em; margin-top:0;
}
h1,.h1 { font-size: clamp(28px,3.4vw,42px); }
h2,.h2 { font-size: clamp(22px,2.6vw,30px); }
h3,.h3 { font-size: clamp(18px,2vw,22px); }
hr { border-color: var(--rr-line); }
small,.small,.text-muted { color: var(--rr-muted) !important; }

.main-content, main, #main-body, .body-content, .container, .container-fluid { color: var(--rr-ink-2); }
.rr-section { padding: 56px clamp(20px,5vw,56px); max-width: 1240px; margin:0 auto; }
.rr-section--narrow { max-width: 880px; }
.rr-section--wide { max-width: 1320px; }

.navbar, .header-lined { background: transparent !important; border:0 !important; }
.navbar a, .navbar .nav-link { color: var(--rr-ink-2) !important; font-weight:500; }
.navbar a:hover, .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--rr-brand) !important; }

.panel, .card, .well, .panel-default, .panel-primary,
.dashboard-item, .domainchecker-results, .order-summary,
.list-group, .ticket-item, .invoiceitem, .product-block, .panel-sidebar {
    background: var(--rr-bg-2) !important;
    background-image: var(--rr-grad-card) !important;
    border: 1px solid var(--rr-line) !important;
    border-radius: var(--rr-radius) !important;
    box-shadow: var(--rr-shadow-sm) !important;
    color: var(--rr-ink-2) !important;
}
.panel-heading, .card-header, .panel-heading.panel-title {
    background: rgba(255,255,255,.02) !important;
    border-bottom: 1px solid var(--rr-line) !important;
    color: var(--rr-ink) !important;
    font-family: var(--rr-font-display); font-weight:600;
    padding: 14px 18px;
    border-radius: var(--rr-radius) var(--rr-radius) 0 0 !important;
}
.panel-body, .card-body { padding: 18px; color: var(--rr-ink-2); }
.panel-footer, .card-footer {
    background: rgba(255,255,255,.02) !important;
    border-top: 1px solid var(--rr-line) !important;
    border-radius: 0 0 var(--rr-radius) var(--rr-radius) !important;
}
.rr-card        { background: var(--rr-bg-2); background-image: var(--rr-grad-card); border:1px solid var(--rr-line); border-radius: var(--rr-radius); padding: 22px; box-shadow: var(--rr-shadow-sm); }
.rr-card--glow  { box-shadow: var(--rr-shadow-md), 0 0 0 1px rgba(57,247,178,.20) inset; }
.rr-card--lift:hover { transform: translateY(-2px); transition: transform .2s ease; }
.rr-card__h     { font-family: var(--rr-font-display); color: var(--rr-ink); margin: 0 0 8px; }

.list-group { background: transparent !important; border:0 !important; }
.list-group-item, .list-group-item-action {
    background: var(--rr-bg-2) !important;
    border: 1px solid var(--rr-line) !important;
    border-radius: var(--rr-radius-sm) !important;
    color: var(--rr-ink-2) !important;
    margin-bottom: 8px; padding: 14px 16px;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.list-group-item:hover, .list-group-item-action:hover {
    border-color: rgba(57,247,178,.45) !important;
    background: var(--rr-bg-3) !important; color: var(--rr-ink) !important; transform: translateX(2px);
}
.list-group-item.active, .list-group-item-action.active {
    background: var(--rr-grad-soft) !important;
    border-color: rgba(100,220,255,.40) !important; color: var(--rr-ink) !important;
    box-shadow: var(--rr-glow-brand);
}

.btn { border-radius: var(--rr-radius-sm); padding: 10px 18px; font-weight:600; font-family: var(--rr-font-body); letter-spacing:.01em; border:1px solid transparent; transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; text-decoration:none !important; line-height:1.3; }
.btn:focus, .btn:focus-visible { outline: 2px solid rgba(100,220,255,.55); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-cta { background: var(--rr-grad-button) !important; background-color: var(--rr-brand) !important; color: #061022 !important; border-color: transparent !important; box-shadow: var(--rr-glow-brand); }
.btn-primary:hover, .btn-cta:hover { color:#061022 !important; box-shadow: 0 0 36px rgba(57,247,178,.45); transform: translateY(-1px); }
.btn-default, .btn-secondary, .btn-outline { background: rgba(255,255,255,.04) !important; color: var(--rr-ink) !important; border:1px solid var(--rr-line) !important; }
.btn-default:hover, .btn-secondary:hover, .btn-outline:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(100,220,255,.45) !important; color: var(--rr-ink) !important; }
.btn-success { background: linear-gradient(135deg,#39f7b2,#39d1f7) !important; color:#061022 !important; border:0 !important; }
.btn-info    { background: linear-gradient(135deg,#64dcff,#5a7cff) !important; color:#061022 !important; border:0 !important; }
.btn-warning { background: linear-gradient(135deg,#ffc857,#fe7b02) !important; color:#1a0c00 !important; border:0 !important; }
.btn-danger  { background: linear-gradient(135deg,#ff5d7a,#f858bc) !important; color:#1a0009 !important; border:0 !important; }
.btn-link    { background: transparent !important; color: var(--rr-cyan) !important; border:0 !important; }
.btn-link:hover { color: var(--rr-brand) !important; }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }

label, .form-label, .control-label { color: var(--rr-ink); font-weight:600; font-size:13px; letter-spacing:.02em; margin-bottom:6px; }
.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], select, textarea {
    background: var(--rr-bg-3) !important;
    border: 1px solid var(--rr-line) !important;
    color: var(--rr-ink) !important;
    border-radius: var(--rr-radius-sm) !important;
    padding: 11px 14px !important;
    font-family: var(--rr-font-body); font-size: 14px;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    width: 100%;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    background: var(--rr-bg-4) !important;
    border-color: rgba(57,247,178,.55) !important;
    box-shadow: 0 0 0 3px rgba(57,247,178,.15) !important;
    outline: 0 !important; color: var(--rr-ink) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--rr-muted-2); }
select.form-control, select { appearance:none; -webkit-appearance:none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a8c4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; }

.input-group { display:flex; align-items:stretch; border-radius: var(--rr-radius-sm); overflow:hidden; }
.input-group .form-control { border-radius:0 !important; }
.input-group > :first-child, .input-group .form-control:first-child { border-top-left-radius: var(--rr-radius-sm) !important; border-bottom-left-radius: var(--rr-radius-sm) !important; }
.input-group > :last-child, .input-group .form-control:last-child { border-top-right-radius: var(--rr-radius-sm) !important; border-bottom-right-radius: var(--rr-radius-sm) !important; }
.input-group-addon, .input-group-text { background: var(--rr-bg-4) !important; border: 1px solid var(--rr-line) !important; color: var(--rr-ink-2) !important; padding: 11px 14px !important; font-size: 14px; }
.input-group-btn .btn { border-radius:0 !important; }

.checkbox label, .radio label, .form-check-label { color: var(--rr-ink-2); font-weight:500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--rr-brand); }
.help-block, .form-text, .text-help { color: var(--rr-muted) !important; font-size:12px; }
.has-error .form-control { border-color: var(--rr-danger) !important; box-shadow: 0 0 0 3px rgba(255,93,122,.18) !important; }
.has-error .help-block, .has-error label { color: var(--rr-danger) !important; }

.nav-tabs, .nav-pills { border-bottom:1px solid var(--rr-line) !important; margin-bottom: 18px; gap:4px; }
.nav-tabs > li, .nav-pills > li { margin-bottom: -1px; }
.nav-tabs > li > a, .nav-pills > li > a, .nav-link { background:transparent !important; color: var(--rr-muted) !important; border:1px solid transparent !important; border-radius: var(--rr-radius-sm) var(--rr-radius-sm) 0 0 !important; padding: 12px 18px !important; font-weight: 600; }
.nav-tabs > li > a:hover, .nav-pills > li > a:hover, .nav-link:hover { color: var(--rr-ink) !important; background: rgba(255,255,255,.03) !important; border-color: var(--rr-line) !important; }
.nav-tabs > li.active > a, .nav-tabs > li > a.active, .nav-pills > li.active > a, .nav-link.active { background: var(--rr-bg-2) !important; color: var(--rr-ink) !important; border-color: var(--rr-line) var(--rr-line) var(--rr-bg-2) !important; border-bottom: 2px solid var(--rr-brand) !important; }

.dropdown-menu { background: var(--rr-bg-3) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius-sm) !important; box-shadow: var(--rr-shadow-md) !important; padding:6px; }
.dropdown-menu > li > a, .dropdown-item { color: var(--rr-ink-2) !important; border-radius: 8px !important; padding: 9px 12px !important; }
.dropdown-menu > li > a:hover, .dropdown-item:hover, .dropdown-item:focus { background: var(--rr-bg-4) !important; color: var(--rr-ink) !important; }
.dropdown-divider { border-color: var(--rr-line) !important; }

.alert { border-radius: var(--rr-radius-sm) !important; border: 1px solid var(--rr-line) !important; padding: 14px 16px !important; background: var(--rr-bg-2) !important; color: var(--rr-ink-2) !important; }
.alert-success { border-color: rgba(57,247,178,.45) !important; background: rgba(57,247,178,.06) !important; color:#aef9d9 !important; }
.alert-info    { border-color: rgba(100,220,255,.45) !important; background: rgba(100,220,255,.06) !important; color:#bfecff !important; }
.alert-warning { border-color: rgba(255,200,87,.45) !important; background: rgba(255,200,87,.06) !important; color:#ffe2a8 !important; }
.alert-danger  { border-color: rgba(255,93,122,.45) !important; background: rgba(255,93,122,.06) !important; color:#ffc1cb !important; }

.badge, .label { display:inline-block; padding: 4px 10px; border-radius: 999px; font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; background: rgba(255,255,255,.06); color: var(--rr-ink); border:1px solid var(--rr-line); }
.badge-success, .label-success, .status-active, .status-paid { background: rgba(57,247,178,.14) !important; color:#aef9d9 !important; border-color: rgba(57,247,178,.40) !important; }
.badge-info, .label-info { background: rgba(100,220,255,.14) !important; color:#bfecff !important; border-color: rgba(100,220,255,.40) !important; }
.badge-warning, .label-warning, .status-pending, .status-unpaid { background: rgba(255,200,87,.14) !important; color:#ffe2a8 !important; border-color: rgba(255,200,87,.40) !important; }
.badge-danger, .label-danger, .status-suspended, .status-cancelled, .status-overdue { background: rgba(255,93,122,.14) !important; color:#ffc1cb !important; border-color: rgba(255,93,122,.40) !important; }
.badge-default, .label-default { background: rgba(148,168,196,.14); color: var(--rr-ink-2); border-color: var(--rr-line); }

.table, table.table, .dataTable { background: transparent !important; color: var(--rr-ink-2); border-collapse: separate; border-spacing: 0; width: 100%; }
.table thead > tr > th, .table th { background: rgba(255,255,255,.02) !important; color: var(--rr-ink) !important; border-bottom:1px solid var(--rr-line) !important; border-top:0 !important; font-family: var(--rr-font-display); font-weight:600; text-transform: uppercase; font-size:12px; letter-spacing:.06em; padding:14px 16px; }
.table tbody > tr > td, .table td { border-top:1px solid var(--rr-line-2) !important; padding:14px 16px; color: var(--rr-ink-2); background: transparent !important; }
.table tbody > tr:hover > td, .table-hover tbody tr:hover td { background: rgba(255,255,255,.03) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(255,255,255,.015) !important; }

.pagination { display:inline-flex; gap:4px; padding:0; margin: 16px 0; }
.pagination > li > a, .pagination > li > span, .page-link { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; color: var(--rr-ink-2) !important; border-radius:8px !important; padding: 8px 12px !important; margin: 0 !important; font-weight:600; }
.pagination > li.active > span, .pagination > li.active > a, .page-item.active .page-link { background: var(--rr-grad-button) !important; color: #061022 !important; border:0 !important; }

.modal-content { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; box-shadow: var(--rr-shadow-lg) !important; color: var(--rr-ink-2); }
.modal-header { border-bottom:1px solid var(--rr-line) !important; }
.modal-footer { border-top:1px solid var(--rr-line) !important; }
.modal-backdrop { background: #02040d !important; }
.modal-backdrop.in, .modal-backdrop.show { opacity: .82 !important; }

.popover, .tooltip-inner { background: var(--rr-bg-3) !important; border:1px solid var(--rr-line) !important; color: var(--rr-ink) !important; border-radius: var(--rr-radius-sm) !important; box-shadow: var(--rr-shadow-md) !important; }
.popover-title, .popover-header { background: rgba(255,255,255,.03) !important; border-bottom:1px solid var(--rr-line) !important; color: var(--rr-ink) !important; }
.tooltip .tooltip-arrow, .tooltip .arrow::before { border-color: var(--rr-bg-3) !important; }

.breadcrumb { background: transparent !important; padding: 0 0 12px !important; font-size: 13px; color: var(--rr-muted); }
.breadcrumb a { color: var(--rr-ink-2); }
.breadcrumb > .active, .breadcrumb-item.active { color: var(--rr-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--rr-muted-2) !important; content: "›"; }

.progress { background: var(--rr-bg-3) !important; border:1px solid var(--rr-line) !important; border-radius: 999px !important; height: 10px !important; overflow:hidden; }
.progress-bar { background: var(--rr-grad-button) !important; }

.cart-sidebar, .panel-sidebar { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; padding: 18px !important; box-shadow: var(--rr-shadow-sm) !important; }
.cart-body { color: var(--rr-ink-2); }
.cart-body .item { border-bottom:1px solid var(--rr-line) !important; padding: 12px 0; }
.cart-total, .cart-subtotal, .cart-tax, .cart-discount { color: var(--rr-ink); }
.domain-checker-bg, .domainchecker-results { background: linear-gradient(180deg, rgba(57,247,178,.04), rgba(90,124,255,.04)) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; padding: 24px !important; }
.domain-promo-box { background: var(--rr-grad-soft) !important; border:1px solid rgba(100,220,255,.30) !important; border-radius: var(--rr-radius) !important; padding: 16px !important; color: var(--rr-ink); }
.tld-pricing-header { background: rgba(255,255,255,.02) !important; color: var(--rr-ink) !important; border-bottom:1px solid var(--rr-line) !important; padding:14px 18px; font-family: var(--rr-font-display); font-weight:600; }
.idn-language-selector { background: var(--rr-bg-3) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius-sm) !important; color: var(--rr-ink-2) !important; padding: 10px 12px !important; }

.header-lined { border-bottom:1px solid var(--rr-line) !important; padding-bottom: 12px; margin-bottom: 18px; }
.header-lined h1, .header-lined h2 { color: var(--rr-ink); margin: 0; }

.client-home-panels .dashboard-item .header { color: var(--rr-ink) !important; font-family: var(--rr-font-display); }
.client-home-panels .dashboard-item { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; }
.invoiceitem, .ticketitem, .order-item, .product-info { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; }
.signin-wrapper, .signup-wrapper { background: transparent !important; }

.site-footer { background: linear-gradient(180deg,rgba(7,11,28,.10), #050814 38%); border-top:1px solid var(--rr-line); color: var(--rr-ink-2); margin-top: 60px; }

* { scrollbar-color: rgba(148,190,255,.25) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(148,190,255,.20); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148,190,255,.40); }
*::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(57,247,178,.30); color:#fff; }

.rr-pill { display:inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--rr-ink); border:1px solid var(--rr-line); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.rr-pill--brand { background: rgba(57,247,178,.12); border-color: rgba(57,247,178,.40); color:#aef9d9; }
.rr-pill--blue  { background: rgba(90,124,255,.12); border-color: rgba(90,124,255,.40); color:#cad6ff; }
.rr-pill--magenta { background: rgba(248,88,188,.12); border-color: rgba(248,88,188,.40); color:#ffd1ee; }

.rr-grid { display:grid; gap:18px; }
.rr-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.rr-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.rr-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width:980px){ .rr-grid--3,.rr-grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .rr-grid--2,.rr-grid--3,.rr-grid--4 { grid-template-columns: 1fr; } }

.rr-stat { display:grid; gap:6px; padding: 18px; }
.rr-stat__label { font-size: 12px; letter-spacing:.08em; text-transform: uppercase; color: var(--rr-muted); }
.rr-stat__value { font-family: var(--rr-font-display); font-size: 28px; font-weight: 700; color: var(--rr-ink); }
.rr-stat__delta { font-size: 12px; color: var(--rr-brand); font-weight:600; }
.rr-stat__icon  { width:36px; height:36px; border-radius:10px; background: var(--rr-grad-soft); display:grid; place-items:center; color: var(--rr-cyan); }

.rr-orbit { position:relative; padding: 22px; border-radius: var(--rr-radius); background: var(--rr-bg-2); border:1px solid var(--rr-line); overflow:hidden; }
.rr-orbit::after { content:""; position:absolute; inset:-40% -40% auto auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(90,124,255,.18), transparent 60%); pointer-events:none; }

.rr-hero-aurora { position:relative; padding: clamp(40px,6vw,88px) clamp(20px,5vw,56px); border-radius: var(--rr-radius); background: var(--rr-bg-2); border:1px solid var(--rr-line); overflow:hidden; }
.rr-hero-aurora::before { content:""; position:absolute; inset:0; background: var(--rr-grad-nebula); pointer-events:none; }
.rr-hero-aurora > * { position:relative; z-index:1; }

.rr-sidenav { display:grid; gap:4px; }
.rr-sidenav a { display:flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 10px; color: var(--rr-ink-2); border:1px solid transparent; }
.rr-sidenav a:hover { background: var(--rr-bg-3); color: var(--rr-ink); border-color: var(--rr-line); }
.rr-sidenav a.active { background: var(--rr-grad-soft); color: var(--rr-ink); border-color: rgba(100,220,255,.30); }

.WHMCSEntry, .powered-by, .whmcs-credit, .whmcs-attribution { display:none !important; }
body.rr-galaxy > .header, body.rr-galaxy > .header-lined--top, body.rr-galaxy > .top-bar:not(.topbar) { display:none !important; }

.invoice-summary, .invoice-totals { background: var(--rr-bg-2); border:1px solid var(--rr-line); border-radius: var(--rr-radius); padding: 18px; }
.invoice-totals .total { color: var(--rr-brand); font-family: var(--rr-font-display); font-weight:700; }

.ticketreply { background: var(--rr-bg-2) !important; border:1px solid var(--rr-line) !important; border-radius: var(--rr-radius) !important; padding: 16px; margin-bottom: 12px; }
.ticketreply.staff { border-left: 3px solid var(--rr-brand) !important; }
.ticketreply.client { border-left: 3px solid var(--rr-cyan) !important; }

@media (max-width: 768px) { .rr-section { padding: 36px 18px; } }

/* =============================================================
 * v3.0 EMERALD ALIGNMENT — Lovable reference parity
 * Per Rob's design-tokens.md, the reference palette is emerald
 * (HSL 152–160°), not navy. We re-bind the same custom props so
 * every existing rule above flips to emerald automatically.
 * ============================================================= */
:root {
    /* Surfaces — emerald-dark */
    --rr-bg-0:  #02160c;   /* surface-deep */
    --rr-bg-1:  #031f12;   /* page bg (was #070b1c) */
    --rr-bg-2:  #0a2a1c;   /* panel bg (was #0c1428) */
    --rr-bg-3:  #0f3a26;   /* raised */
    --rr-bg-4:  #144a32;   /* hover/input */
    --rr-line:    rgba(36,210,128,.14);
    --rr-line-2:  rgba(36,210,128,.07);

    /* Ink */
    --rr-ink:    #e8f7ee;
    --rr-ink-2:  #c2dfd0;
    --rr-muted:  #8db4a0;
    --rr-muted-2:#5e8772;

    /* Accent — Lovable emerald */
    --rr-brand:   #14c97a;   /* signature emerald */
    --rr-cyan:    #27e493;   /* gradient end */
    --rr-blue:    #1ea668;   /* primary-glow */
    --rr-magenta: #4ad991;   /* support tint (used sparingly; pulled toward green) */
    --rr-orange:  #ffb43a;
    --rr-warn:    #ffb43a;
    --rr-danger:  #ff6b6b;
    --rr-ok:      #14c97a;

    /* Gradients — emerald system */
    --rr-grad-brand:  linear-gradient(135deg,#14c97a 0%,#27e493 60%,#1ea668 100%);
    --rr-grad-button: linear-gradient(135deg,#14c97a 0%,#27e493 55%,#0a8a4f 100%);
    --rr-grad-soft:   linear-gradient(135deg, rgba(20,201,122,.12), rgba(39,228,147,.10));
    --rr-grad-card:   linear-gradient(160deg, rgba(15,58,38,.92), rgba(2,22,12,.92));
    --rr-grad-nebula: radial-gradient(ellipse at top, hsl(158 60% 14%) 0%, hsl(160 75% 5%) 60%, hsl(160 80% 3%) 100%);

    /* Glow */
    --rr-glow-brand: 0 10px 40px -10px hsl(152 70% 32% / .65);
    --rr-glow-blue:  0 0 80px hsl(152 80% 42% / .35);
}

/* Body re-tint with emerald hero gradient */
body.rr-galaxy {
    background:
        radial-gradient(ellipse 60% 50% at 10% 0%,  rgba(20,201,122,.10), transparent 60%),
        radial-gradient(ellipse 50% 50% at 100% 8%, rgba(39,228,147,.10), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%,rgba(20,201,122,.06), transparent 60%),
        var(--rr-bg-1) !important;
}

/* Hero gets the canonical emerald gradient straight from Lovable */
.rr-hero-aurora { background: var(--rr-bg-2); }
.rr-hero-aurora::before { background: var(--rr-grad-nebula); opacity: .85; }

/* Re-tint the topbar / nav backgrounds to emerald */
.rr-topbar { background: rgba(3,31,18,.92) !important; border-bottom: 1px solid rgba(36,210,128,.16) !important; }
.rr-nav    { background: rgba(3,31,18,.78) !important; border-bottom: 1px solid rgba(36,210,128,.16) !important; }

/* Footer to emerald */
.rr-footer { background: linear-gradient(180deg, rgba(3,31,18,.10), #02160c 38%) !important; border-top: 1px solid rgba(36,210,128,.16) !important; }
.rr-footer-cta { background: linear-gradient(135deg, rgba(20,201,122,.14), rgba(39,228,147,.10)) !important; border-top: 1px solid rgba(36,210,128,.16) !important; border-bottom: 1px solid rgba(36,210,128,.16) !important; }

/* The brand gradient lockup tile */
.rr-brand span:first-child,
.rr-footer a span:first-child {
    background: linear-gradient(135deg,#14c97a 0%,#27e493 60%,#0a8a4f 100%) !important;
    box-shadow: 0 10px 40px -10px hsl(152 70% 32% / .65) !important;
    color: #02160c !important;
}

/* Buttons stay green now too */
.btn-primary, .btn-cta { background: var(--rr-grad-button) !important; color: #02160c !important; box-shadow: var(--rr-glow-brand) !important; }
.btn-primary:hover { box-shadow: 0 14px 48px -10px hsl(152 70% 38% / .8) !important; }