/* ==========================================================================
   QuickServers design system
   Loaded after WHMCS stock CSS. Scoped under body.qs-body so tokenized
   overrides win on specificity, not luck.
   Tokens: black #000 · hairline #161616 · green #3fdf9a · radius 6px
   ========================================================================== */

:root {
    --qs-bg: #000000;
    --qs-panel: #0b0b0c;
    --qs-panel-2: #101011;
    --qs-line: #161616;
    --qs-line-strong: #242424;
    --qs-text: #ffffff;
    --qs-text-2: #c9c9c9;
    --qs-text-3: #8f8f8f;
    --qs-text-4: #6f6f6f;
    --qs-green: #3fdf9a;
    --qs-green-dim: #1f6b4c;
    --qs-danger: #f0655a;
    --qs-warn: #e8b13f;
    --qs-radius: 6px;
    --qs-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --qs-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.qs-body {
    background: var(--qs-bg);
    color: var(--qs-text-2);
    font-family: var(--qs-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body.qs-body h1, body.qs-body h2, body.qs-body h3,
body.qs-body h4, body.qs-body h5, body.qs-body h6 {
    color: var(--qs-text);
    font-weight: 500;
    letter-spacing: -0.01em;
}
body.qs-body a { color: var(--qs-text); }
body.qs-body a:hover { color: var(--qs-green); text-decoration: none; }
body.qs-body :focus-visible {
    outline: 2px solid var(--qs-green);
    outline-offset: 2px;
}
/* v2.17: bottom padding removed — it painted a black band between the
   last (gray) bleed section and the footer hairline on home/product/
   support/auth pages. Sections carry their own bottom padding. */
body.qs-body #main-body { padding: 32px 0 0; }

.qs-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--qs-green); display: inline-block;
}
.qs-dot-pulse { animation: qs-pulse 1.8s ease-in-out infinite; }
@keyframes qs-pulse { 50% { background: var(--qs-green-dim); } }

/* Full-bleed sections escape the main-body container */
.qs-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
body.qs-body .qs-header { background: var(--qs-bg); border-bottom: 1px solid var(--qs-line); }
.qs-topbar { border-bottom: 1px solid var(--qs-line); }
.qs-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; }
body.qs-body .qs-topbar-btn { color: var(--qs-text-3); font-size: 12px; padding: 4px 8px; }
body.qs-body .qs-topbar-btn:hover { color: var(--qs-text); }
.qs-topbar-right { display: flex; gap: 18px; align-items: center; }
.qs-topbar-link { font-size: 12px; color: var(--qs-text-2); display: inline-flex; gap: 7px; align-items: center; }
.qs-topbar-link.qs-muted { color: var(--qs-text-4); }

body.qs-body .qs-nav { padding: 14px 0; background: transparent; }
.qs-brand-text { color: var(--qs-text); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }
.qs-brand-logo { max-height: 30px; }
body.qs-body .qs-nav .navbar-nav .nav-link {
    color: var(--qs-text-3); font-size: 13px; padding: 8px 14px;
}
body.qs-body .qs-nav .navbar-nav .nav-link:hover,
body.qs-body .qs-nav .navbar-nav .active > .nav-link { color: var(--qs-text); }
body.qs-body .qs-nav .dropdown-menu {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
}
body.qs-body .qs-nav .dropdown-item { color: var(--qs-text-2); font-size: 13px; }
body.qs-body .qs-nav .dropdown-item:hover { background: var(--qs-panel-2); color: var(--qs-text); }
body.qs-body .qs-nav-toggle { color: var(--qs-text); border: 1px solid var(--qs-line-strong); }

body.qs-body .qs-breadcrumb { background: transparent; border-bottom: 1px solid var(--qs-line); }
body.qs-body .qs-breadcrumb .breadcrumb {
    background: transparent; margin: 0; padding: 10px 0; font-size: 12px;
}
body.qs-body .qs-breadcrumb .breadcrumb-item a { color: var(--qs-text-3); }
body.qs-body .qs-breadcrumb .breadcrumb-item.active { color: var(--qs-text-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.qs-btn {
    display: inline-block; font-size: 13px; font-weight: 500;
    padding: 9px 20px; border-radius: var(--qs-radius);
    border: 1px solid transparent; line-height: 1.4;
}
.qs-btn-primary { background: #ffffff; color: #000000; }
.qs-btn-primary:hover { background: #e6e6e6; color: #000000; }
.qs-btn-ghost { background: transparent; color: var(--qs-text); border-color: var(--qs-line-strong); }
.qs-btn-ghost:hover { border-color: var(--qs-text-3); color: var(--qs-text); }

/* Restyle stock bootstrap buttons so fallback pages match */
body.qs-body .btn-primary {
    background: #ffffff; border-color: #ffffff; color: #000000;
}
body.qs-body .btn-primary:hover, body.qs-body .btn-primary:focus {
    background: #e6e6e6; border-color: #e6e6e6; color: #000000;
}
body.qs-body .btn-default, body.qs-body .btn-secondary {
    background: transparent; border: 1px solid var(--qs-line-strong); color: var(--qs-text-2);
}
body.qs-body .btn-default:hover, body.qs-body .btn-secondary:hover {
    border-color: var(--qs-text-3); color: var(--qs-text); background: transparent;
}
body.qs-body .btn-success { background: var(--qs-green); border-color: var(--qs-green); color: #000; }
body.qs-body .btn-danger { background: var(--qs-danger); border-color: var(--qs-danger); color: #000; }

/* --------------------------------------------------------------------------
   Panels, cards, tables, forms (fallback-page dark pass)
   -------------------------------------------------------------------------- */
body.qs-body .card,
body.qs-body .panel,
body.qs-body .tile,
body.qs-body .list-group-item {
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); color: var(--qs-text-2);
}
body.qs-body .card-header, body.qs-body .card-footer,
body.qs-body .panel-heading, body.qs-body .panel-footer {
    background: transparent; border-color: var(--qs-line);
}
body.qs-body .table { color: var(--qs-text-2); }
body.qs-body .table th {
    color: var(--qs-text-3); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-color: var(--qs-line) !important;
}
body.qs-body .table td { border-color: var(--qs-line) !important; }
body.qs-body .table-hover tbody tr:hover { background: var(--qs-panel-2); color: var(--qs-text); }
body.qs-body .table .odd, body.qs-body .table .even,
body.qs-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; }

body.qs-body .form-control, body.qs-body .custom-select {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong);
    color: var(--qs-text); border-radius: var(--qs-radius); font-size: 13.5px;
}
body.qs-body .form-control:focus {
    background: var(--qs-panel); border-color: var(--qs-text-3);
    color: var(--qs-text); box-shadow: none;
}
body.qs-body .form-control::placeholder { color: var(--qs-text-4); }
body.qs-body label, body.qs-body .form-control-label { color: var(--qs-text-3); font-size: 12.5px; }
body.qs-body .input-group-text {
    background: var(--qs-panel-2); border-color: var(--qs-line-strong); color: var(--qs-text-3);
}

body.qs-body .modal-content {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong); color: var(--qs-text-2);
}
body.qs-body .modal-header, body.qs-body .modal-footer { border-color: var(--qs-line); }
body.qs-body .modal-header .close { color: var(--qs-text); text-shadow: none; }

body.qs-body .alert { border-radius: var(--qs-radius); border: 1px solid var(--qs-line-strong); background: var(--qs-panel); color: var(--qs-text-2); }
body.qs-body .alert-success { border-color: var(--qs-green-dim); color: var(--qs-green); }
body.qs-body .alert-danger { border-color: var(--qs-danger); color: var(--qs-danger); }
body.qs-body .alert-warning { border-color: var(--qs-warn); color: var(--qs-warn); }

body.qs-body .pagination .page-link {
    background: transparent; border-color: var(--qs-line); color: var(--qs-text-3);
}
body.qs-body .pagination .page-item.active .page-link {
    background: #ffffff; border-color: #ffffff; color: #000000;
}

/* Sidebar (WHMCS menu panels) */
body.qs-body .qs-sidebar .card, body.qs-body .qs-sidebar .panel { background: transparent; }
body.qs-body .qs-sidebar .list-group-item {
    background: transparent; border: none; border-bottom: 1px solid var(--qs-line);
    color: var(--qs-text-3); font-size: 13px; border-radius: 0;
}
body.qs-body .qs-sidebar .list-group-item:hover,
body.qs-body .qs-sidebar .list-group-item.active {
    background: transparent; color: var(--qs-text);
}

/* --------------------------------------------------------------------------
   Homepage — hero
   -------------------------------------------------------------------------- */
.qs-hero {
    position: relative; background: #050607;
    border-bottom: 1px solid var(--qs-line);
    overflow: hidden;
}
.qs-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.qs-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0, 2, 6, 0.55);
}
.qs-hero-inner { position: relative; z-index: 2; padding: 88px 15px 64px; max-width: 640px; margin-left: 0; }
.qs-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--qs-text-2);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    padding: 5px 14px; background: rgba(0,2,8,0.4);
}
.qs-hero-title {
    font-size: clamp(34px, 6vw, 56px); line-height: 1.06;
    letter-spacing: -0.02em; margin: 22px 0 0; color: var(--qs-text);
}
.qs-hero-sub { color: var(--qs-text-2); font-size: 15px; line-height: 1.65; margin: 16px 0 0; max-width: 420px; }
.qs-hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.qs-hero .qs-btn-ghost { background: rgba(0,2,8,0.35); border-color: rgba(255,255,255,0.28); }

.qs-stats { position: relative; z-index: 2; background: rgba(0,2,6,0.62); border-top: 1px solid rgba(255,255,255,0.10); }
.qs-stats-inner { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.qs-stat { padding: 16px 18px 16px 0; border-right: 1px solid rgba(255,255,255,0.08); }
.qs-stat + .qs-stat { padding-left: 18px; }
.qs-stat:last-child { border-right: none; }
.qs-stat-label { display: block; font-size: 11px; color: var(--qs-text-3); }
.qs-stat-value {
    display: block; font-size: 19px; font-weight: 500; color: var(--qs-text);
    margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* Homepage — products */
.qs-products { border-bottom: 1px solid var(--qs-line); }
.qs-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.qs-product {
    display: block; padding: 30px 26px 34px;
    border-right: 1px solid var(--qs-line); color: inherit;
}
.qs-product:first-child { padding-left: 0; }
.qs-product:last-child { border-right: none; }
.qs-product:hover { text-decoration: none; }
.qs-product-name { display: block; color: var(--qs-text); font-size: 15px; font-weight: 500; }
.qs-product-desc { display: block; color: var(--qs-text-3); font-size: 13px; line-height: 1.6; margin-top: 7px; }
.qs-product-price { display: block; color: var(--qs-text); font-size: 13px; margin-top: 16px; }
.qs-product-price .fa-arrow-right { font-size: 11px; color: var(--qs-text-4); margin-left: 4px; transition: transform 0.15s ease; }
.qs-product:hover .fa-arrow-right { transform: translateX(3px); color: var(--qs-green); }
.qs-trustline {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--qs-line);
    font-size: 11px; color: var(--qs-text-4); letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.qs-auth-wrap { display: flex; justify-content: center; padding: 40px 0; }
.qs-auth-card {
    width: 100%; max-width: 420px;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: 10px; padding: 36px 34px 28px;
}
.qs-auth-title { font-size: 22px; margin: 0; }
.qs-auth-sub { color: var(--qs-text-3); font-size: 13px; margin: 6px 0 22px; }
.qs-field { margin-bottom: 18px; }
.qs-label { display: block; margin-bottom: 7px; }
.qs-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.qs-link-muted { font-size: 12px; color: var(--qs-text-4); }
.qs-input-group { display: flex; }
.qs-input-group .qs-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.qs-body .qs-reveal {
    border: 1px solid var(--qs-line-strong); border-left: none;
    border-radius: 0 var(--qs-radius) var(--qs-radius) 0;
    background: var(--qs-panel-2); color: var(--qs-text-3);
}
.qs-auth-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.qs-remember { color: var(--qs-text-3); font-size: 12.5px; display: flex; gap: 8px; align-items: center; margin: 0; }
.qs-auth-foot {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--qs-line);
    font-size: 13px; color: var(--qs-text-3);
}
.qs-auth-foot a { margin-left: 6px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
body.qs-body .qs-footer {
    background: var(--qs-bg); border-top: 1px solid var(--qs-line);
    padding: 44px 0 24px; color: var(--qs-text-3);
}
/* v2.64: pair LEFT-aligned — brand's left edge flush with the container
   (same edge as the hairline above the copyright), 200px gutter kept. */
.qs-footer-grid {
    display: grid; grid-template-columns: auto auto; justify-content: start;
    align-items: start; gap: 32px 200px;
    padding-bottom: 28px; border-bottom: 1px solid var(--qs-line);
}
.qs-footer-grid:has(.qs-footer-lang) { grid-template-columns: auto auto auto; }
.qs-footer-grid > .qs-footer-links { align-self: start; }
.qs-footer-tag { font-size: 13px; line-height: 1.6; margin: 12px 0 0; color: var(--qs-text-3); }
.qs-footer-status { font-size: 12px; margin: 14px 0 0; display: flex; gap: 8px; align-items: center; color: var(--qs-text-2); }
/* v2.65: link typography hard-pinned to the tagline's exact recipe
   (Inter 13px / 400 / 1.6) with footer-scoped specificity, so base-theme
   footer styles can't nudge font or rhythm. Gap tuned so line spacing
   reads like the text block on the left. */
.qs-footer-links { display: flex; flex-direction: column; gap: 8px; }
body.qs-body .qs-footer .qs-footer-links a {
    font-family: var(--qs-sans); font-size: 13px; font-weight: 400;
    line-height: 1.6; letter-spacing: normal; text-transform: none;
    color: #ffffff; text-decoration: none;
}
body.qs-body .qs-footer .qs-footer-links a:hover { color: #3fdf9a; }
body.qs-body .qs-lang-btn {
    color: var(--qs-text-3); border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius); font-size: 12px; padding: 6px 12px;
}
.qs-copyright { font-size: 12px; color: var(--qs-text-4); margin: 22px 0 0; }
/* v2.18 — nexus theme.css outguns .qs-copyright with footer.footer
   .copyright (margin 30px 0, --text-lifted color, base font): that's
   why the line sat lower-heavy with the wrong color. Rebalanced:
   24px above the line, 24px footer padding below it. */
body.qs-body footer.footer .copyright {
    font-family: var(--qs-sans);
    font-size: 13px;
    color: var(--qs-text-3) !important;
    text-align: center;
    margin: 24px 0 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .qs-stats-inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .qs-stat:nth-child(2) { border-right: none; }
    .qs-stat { padding-left: 0 !important; }
    .qs-products-grid { grid-template-columns: 1fr; }
    .qs-product { border-right: none; border-bottom: 1px solid var(--qs-line); padding-left: 0; }
    .qs-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    body.qs-body .qs-nav .navbar-collapse {
        background: var(--qs-panel); border: 1px solid var(--qs-line);
        border-radius: var(--qs-radius); padding: 10px; margin-top: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qs-dot-pulse { animation: none; }
    .qs-product-price .fa-arrow-right { transition: none; }
}

/* --------------------------------------------------------------------------
   v0.4 hardening — win against nexus theme.min.css specifics
   -------------------------------------------------------------------------- */
html, body.qs-body { background: #000000 !important; }
body.qs-body #header,
body.qs-body #header .navbar,
body.qs-body .qs-nav {
    background: #000000 !important;
    border-bottom: 1px solid var(--qs-line);
}
body.qs-body #header .qs-brand { margin-right: 28px; display: inline-flex; align-items: center; }
body.qs-body #header .qs-brand-text { color: #ffffff !important; font-size: 16px; font-weight: 500; }
body.qs-body #header .navbar-nav .nav-link { color: var(--qs-text-3) !important; }
body.qs-body #header .navbar-nav .nav-link:hover,
body.qs-body #header .navbar-nav .active > .nav-link { color: #ffffff !important; }
body.qs-body #main-body { background: transparent; }

/* Link color must not bleed into buttons (body.qs-body a outranks .qs-btn-*) */
body.qs-body a.qs-btn-primary, body.qs-body .qs-btn-primary { color: #000000 !important; background: #ffffff !important; }
body.qs-body a.qs-btn-primary:hover { background: #e6e6e6 !important; color: #000000 !important; }
body.qs-body a.qs-btn-ghost, body.qs-body .qs-btn-ghost { color: #ffffff !important; }
body.qs-body a.qs-product, body.qs-body a.qs-product:hover { color: inherit; }

/* Footer must stay dark against theme.min.css #footer rules */
body.qs-body #footer { background: #000000 !important; border-top: 1px solid var(--qs-line); color: var(--qs-text-3); }

/* v0.5 — nav spacing */
body.qs-body #header .qs-brand { margin-right: 32px !important; }
body.qs-body #header .navbar-nav .nav-link { padding: 8px 14px !important; font-size: 13px !important; }
body.qs-body #header .navbar { padding-top: 14px; padding-bottom: 14px; }

/* v0.6 — hero atmosphere */
.qs-hero svg.qs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.qs-hero { min-height: 480px; }

/* --------------------------------------------------------------------------
   v0.8 — IPv4 Hub-weight typography and edge-aligned layout
   -------------------------------------------------------------------------- */
/* Full-width sections with a fixed viewport gutter instead of centered container */
.qs-bleed .container,
body.qs-body #header .container {
    max-width: 100% !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}
.qs-hero-inner { max-width: 760px; margin-left: 0; }

/* Heavy display type, tight leading */
.qs-hero-title {
    font-size: clamp(46px, 6.5vw, 84px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.025em !important;
}
.qs-hero-sub { font-size: 16px; max-width: 460px; }
.qs-pill { letter-spacing: 0.02em; }

/* Products/stats headings gain weight to match */
.qs-product-name { font-weight: 700; font-size: 16px; }
.qs-stat-value { font-weight: 700 !important; }
body.qs-body #header .qs-brand-text { font-weight: 700 !important; letter-spacing: 0.02em; }

@media (max-width: 991px) {
    .qs-bleed .container,
    body.qs-body #header .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* v0.9 — photographic hero */
.qs-hero { min-height: 540px; }
.qs-hero .qs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.qs-hero picture { position: absolute; inset: 0; z-index: 0; }
.qs-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
}
.qs-hero-flicker { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qs-hero-flicker span {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: #6db4ff; box-shadow: 0 0 8px 2px rgba(109,180,255,0.55);
    opacity: 0; transition: opacity 0.25s ease;
}
.qs-hero-flicker span.on { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .qs-hero-flicker { display: none; } }

/* v0.10 — flicker dots pinned to photo LEDs */
.qs-hero-flicker span { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: 0 0 6px 2px rgba(109,180,255,0.5); }

/* --------------------------------------------------------------------------
   v0.11 — network map section
   -------------------------------------------------------------------------- */
.qs-map-section { background: #000; border-bottom: 1px solid var(--qs-line); padding: 72px 0 80px; }
.qs-map-head { margin-bottom: 36px; }
.qs-map-title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; }
.qs-map-sub { color: var(--qs-text-3); font-size: 15px; margin: 10px 0 0; }
.qs-map-panel { border: 1px solid var(--qs-line); border-radius: 10px; background: #040507; overflow: hidden; }
.qs-map-svg { display: block; width: 100%; height: auto; }
.qs-map-grid line { stroke: #101318; stroke-width: 1; }
.qs-map-arcs path { fill: none; stroke: #1f4d3c; stroke-width: 1.4; stroke-dasharray: 4 6; animation: qs-arc-flow 30s linear infinite; }
@keyframes qs-arc-flow { to { stroke-dashoffset: -300; } }
.qs-node text { fill: #e8eaee; font-family: var(--qs-sans); font-size: 12px; font-weight: 700; text-anchor: middle; letter-spacing: 0.08em; }
.qs-node .qs-node-code { fill: #6f7680; font-family: var(--qs-mono); font-size: 10px; font-weight: 400; }
.qs-node-dot { fill: #3fdf9a; }
.qs-node-ring { fill: none; stroke: #3fdf9a; stroke-width: 1.5; opacity: 0.7; animation: qs-node-pulse 2.4s ease-out infinite; transform-origin: center; }
.qs-node:nth-child(2) .qs-node-ring { animation-delay: 0.8s; }
.qs-node:nth-child(3) .qs-node-ring { animation-delay: 1.6s; }
@keyframes qs-node-pulse {
    0% { r: 6; opacity: 0.8; }
    100% { r: 26; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-map-arcs path { animation: none; }
    .qs-node-ring { animation: none; }
}

/* v0.12 — dot-matrix continents */
.qs-map-land path { stroke: #1b2530; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.qs-map-grid line { stroke: #0c0f13; }

/* v0.13 — brighter landmass */
.qs-map-land path { stroke: #3a4a5c !important; }
.qs-map-grid line { stroke: #0a0d11; }

/* v0.17 — center the primary nav between brand and account controls */
body.qs-body #header .qs-nav .navbar-collapse { display: flex; align-items: center; }
body.qs-body #header .qs-nav .qs-nav-primary {
    margin-left: auto !important;
    margin-right: auto !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
body.qs-body #header .qs-nav .container { position: relative; }
body.qs-body #header .qs-nav .qs-nav-secondary { margin-left: auto !important; }
@media (max-width: 1199px) {
    /* collapsed mobile menu: stack normally, no absolute centering */
    body.qs-body #header .qs-nav .qs-nav-primary {
        position: static;
        transform: none;
    }
}

/* v0.18 — Account joins the centered group; brand alone on the left */
body.qs-body #header .qs-nav .qs-nav-primary {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}
body.qs-body #header .qs-nav .navbar-collapse {
    display: flex;
    justify-content: center;
    align-items: center;
}
body.qs-body #header .qs-nav .qs-nav-secondary { margin: 0 !important; }
@media (max-width: 1199px) {
    body.qs-body #header .qs-nav .navbar-collapse { display: none; }
    body.qs-body #header .qs-nav .navbar-collapse.show { display: block; }
}

/* v0.19 — gap between primary and secondary nav groups */
body.qs-body #header .qs-nav .navbar-collapse { column-gap: 18px; }
body.qs-body #header .qs-nav .qs-nav-secondary .nav-link { padding: 8px 14px !important; }

/* v0.24 — six-product grid (3x2) */
.qs-products-grid .qs-product:nth-child(3n) { border-right: none; }
.qs-products-grid .qs-product:nth-child(-n+3) { border-bottom: 1px solid var(--qs-line); }
.qs-products-grid .qs-product:nth-child(3n+1) { padding-left: 0; }
@media (max-width: 991px) {
    .qs-products-grid .qs-product { border-right: none !important; padding-left: 0 !important; }
    .qs-products-grid .qs-product:not(:last-child) { border-bottom: 1px solid var(--qs-line); }
}

/* v0.25 — products as a full section */
.qs-products { padding: 72px 0 56px; }
.qs-products .qs-trustline { margin-top: 40px; }
.qs-products-grid .qs-product { padding-top: 34px; padding-bottom: 38px; }

/* v0.27 — section banding: products on lifted charcoal, map back on black */
.qs-products {
    background: #0b0c0e;
    border-top: none;
    border-bottom: none;
}
.qs-products .qs-product { border-color: #1b1c1f; }
.qs-products-grid .qs-product:nth-child(-n+3) { border-bottom-color: #1b1c1f; }
.qs-products .qs-product-desc { color: #97979c; }
.qs-map-section { background: #000; }
/* hero -> stats -> products -> map now band: photo / translucent / charcoal / black */

/* v0.28 — true page-center for the nav group */
@media (min-width: 1200px) {
    body.qs-body #header .qs-nav .container { position: relative; }
    body.qs-body #header .qs-nav .navbar-collapse {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        flex-grow: 0;
    }
}

/* v0.29 — nav links pure white like the hero headline; no highlight boxes */
body.qs-body #header .navbar-nav .nav-link,
body.qs-body #header .navbar-nav .dropdown-toggle {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 500;
}
body.qs-body #header .navbar-nav .nav-link:hover,
body.qs-body #header .navbar-nav .nav-link:focus,
body.qs-body #header .navbar-nav .active > .nav-link {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 0.75;
}

/* v0.30 — normalize every nav item: one color, one spacing, no exceptions */
body.qs-body #header .navbar-nav > li,
body.qs-body #header .navbar-nav .nav-item {
    margin: 0 !important;
}
body.qs-body #header .navbar-nav > li > a,
body.qs-body #header .navbar-nav .nav-link,
body.qs-body #header .navbar-nav .dropdown-toggle {
    color: #ffffff !important;
    opacity: 1 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
}
body.qs-body #header .navbar-nav > li > a:hover,
body.qs-body #header .navbar-nav .nav-link:hover {
    opacity: 0.7 !important;
}

/* v0.31 — hand-rolled nav: three words, no framework */
.qs-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.qs-menu a {
    display: inline-block;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    background: transparent !important;
}
.qs-menu a:hover { opacity: 0.7; text-decoration: none; }
@media (max-width: 1199px) {
    .qs-menu { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* v0.32 — custom dropdowns */
.qs-menu .qs-caret { font-size: 9px; margin-left: 5px; opacity: 0.6; vertical-align: 1px; }
.qs-has-drop { position: relative; }
.qs-drop {
    position: absolute;
    top: 100%;
    left: 8px;
    min-width: 200px;
    background: #0b0c0e;
    border: 1px solid #1e1f22;
    border-radius: 8px;
    padding: 6px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 50;
}
.qs-has-drop::after {   /* hover bridge so the menu doesn't vanish crossing the gap */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
}
.qs-has-drop:hover .qs-drop,
.qs-has-drop:focus-within .qs-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
}
.qs-drop li a {
    display: block;
    color: #c9c9c9 !important;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 5px;
}
.qs-drop li a:hover { color: #ffffff !important; background: #141518 !important; opacity: 1; }
@media (max-width: 1199px) {
    .qs-drop {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        background: transparent;
        padding-left: 14px;
    }
    .qs-menu .qs-caret { display: none; }
}

/* v0.33 — 3x3 grid rows */
.qs-products-grid .qs-product:nth-child(-n+6) { border-bottom: 1px solid #1b1c1f; }

/* v0.39 — wordmark in logo-style face (Orbitron ~ squared techno) */
.qs-brand-text {
    font-family: 'Orbitron', var(--qs-sans) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #ffffff !important;
}
body.qs-body #footer .qs-brand-text { font-size: 16px !important; }

/* v0.40 — bigger wordmark */
.qs-brand-text { font-size: 19px !important; }
body.qs-body #footer .qs-brand-text { font-size: 20px !important; }

/* v0.42 — refined wordmark: Michroma, wide-tracked */
.qs-brand-text {
    font-family: 'Michroma', 'Orbitron', var(--qs-sans) !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    letter-spacing: 0.16em !important;
}
body.qs-body #footer .qs-brand-text { font-size: 18px !important; }

/* v0.43 — cloud mark beside wordmark */
.qs-brand { display: inline-flex !important; align-items: center; gap: 11px; }
.qs-brand-cloud { height: 26px; width: auto; display: inline-block; }
body.qs-body #footer .qs-brand-cloud { height: 28px; margin-right: 11px; vertical-align: -6px; }

/* v0.44 — wordmark in motion: lean + ghost trails + arrival slide */
.qs-brand-cloud { display: none !important; }
.qs-brand-text {
    display: inline-block;
    transform: skewX(-8deg);
    text-shadow:
        -5px 0 rgba(255,255,255,0.28),
        -10px 0 rgba(255,255,255,0.14),
        -16px 0 rgba(255,255,255,0.06);
    animation: qs-arrive 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes qs-arrive {
    from { transform: translateX(-46px) skewX(-14deg); opacity: 0; }
    to   { transform: translateX(0) skewX(-8deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-brand-text { animation: none; transform: skewX(-8deg); }
}

/* v0.45 — trails only while arriving; clean at rest */
.qs-brand-text {
    text-shadow: none;
    animation: qs-arrive2 0.65s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes qs-arrive2 {
    0% {
        transform: translateX(-52px) skewX(-14deg);
        opacity: 0;
        text-shadow: -6px 0 rgba(255,255,255,0.35), -13px 0 rgba(255,255,255,0.18), -22px 0 rgba(255,255,255,0.08);
    }
    60% {
        opacity: 1;
        text-shadow: -4px 0 rgba(255,255,255,0.22), -9px 0 rgba(255,255,255,0.10), -15px 0 rgba(255,255,255,0.04);
    }
    100% {
        transform: translateX(0) skewX(-8deg);
        text-shadow: 0 0 rgba(255,255,255,0), 0 0 rgba(255,255,255,0), 0 0 rgba(255,255,255,0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .qs-brand-text { animation: none; text-shadow: none; }
}

/* v0.46 — back to Orbitron wordmark, keep the motion */
.qs-brand-text {
    font-family: 'Orbitron', var(--qs-sans) !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    letter-spacing: 0.08em !important;
}
body.qs-body #footer .qs-brand-text { font-size: 20px !important; }

/* v0.47 — oversized initials */
.qs-brand-text .qs-cap {
    font-size: 1.28em;
    line-height: 1;
}

/* v0.47 — wordmark in the hero's own voice: Inter 800, mixed case */
.qs-brand-text {
    font-family: 'Inter', var(--qs-sans) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}
body.qs-body #footer .qs-brand-text { font-size: 21px !important; }

/* v0.48 — upright at rest, hero font, calmer size */
.qs-brand-text {
    font-size: 18px !important;
    letter-spacing: -0.01em !important;
    transform: none;
    animation: qs-arrive3 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
body.qs-body #footer .qs-brand-text { font-size: 19px !important; }
@keyframes qs-arrive3 {
    0% {
        transform: translateX(-48px) skewX(-12deg);
        opacity: 0;
        text-shadow: -6px 0 rgba(255,255,255,0.35), -13px 0 rgba(255,255,255,0.18), -22px 0 rgba(255,255,255,0.08);
    }
    70% {
        opacity: 1;
        text-shadow: -3px 0 rgba(255,255,255,0.15), -7px 0 rgba(255,255,255,0.06), 0 0 rgba(255,255,255,0);
    }
    100% {
        transform: translateX(0) skewX(0);
        text-shadow: 0 0 rgba(255,255,255,0), 0 0 rgba(255,255,255,0), 0 0 rgba(255,255,255,0);
    }
}
@media (prefers-reduced-motion: reduce) { .qs-brand-text { animation: none; transform: none; } }

/* v0.48b — neutralize any stray cap styling */
.qs-cap { font-size: inherit !important; }

/* v0.49 — bigger wordmark */
.qs-brand-text { font-size: 22px !important; }
body.qs-body #footer .qs-brand-text { font-size: 23px !important; }

/* v0.50 — bigger still */
.qs-brand-text { font-size: 26px !important; }
body.qs-body #footer .qs-brand-text { font-size: 27px !important; }

/* v0.51 — taller hero */
.qs-hero { min-height: 78vh; display: flex; flex-direction: column; }
.qs-hero-inner { padding-top: 120px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.qs-stats { margin-top: auto; }
@media (max-width: 991px) {
    .qs-hero { min-height: 620px; }
    .qs-hero-inner { padding-top: 70px; }
}

/* v0.52 — fix pill stretch from flex column; center map heading */
.qs-hero-inner { align-items: flex-start; }
.qs-hero-inner > * { max-width: 100%; }
.qs-map-section .qs-map-head { text-align: center; }
.qs-map-section .qs-map-sub { margin-left: auto; margin-right: auto; }

/* v0.53 — center products heading too */
.qs-products .qs-map-head { text-align: center; }
.qs-products .qs-map-sub { margin-left: auto; margin-right: auto; }

/* v0.54 — uniform full-height section panels */
.qs-hero,
.qs-products,
.qs-map-section {
    min-height: 92vh;
}
.qs-products,
.qs-map-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
}
.qs-map-panel { max-width: 1320px; margin: 0 auto; width: 100%; }
.qs-map-section .container { width: 100%; }
@media (max-width: 991px) {
    .qs-hero { min-height: 620px; }
    .qs-products, .qs-map-section { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
}

/* v0.55 — hero fits above the fold including stats (header takes ~72px) */
.qs-hero { min-height: calc(100vh - 76px); }
@media (max-width: 991px) { .qs-hero { min-height: 620px; } }

/* v0.56 — cancel main-body top padding under the hero; exact fold math */
.qs-hero {
    margin-top: -32px;                 /* offsets body.qs-body #main-body top padding */
    min-height: calc(100vh - 77px);    /* header height */
}
@media (max-width: 991px) { .qs-hero { min-height: 620px; } }

/* --------------------------------------------------------------------------
   v0.72 — product pages
   -------------------------------------------------------------------------- */
.qs-pp-hero {
    background: #000;
    margin-top: -32px;
    padding: 96px 0 72px;
    border-bottom: 1px solid var(--qs-line);
}
.qs-pp-eyebrow { font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--qs-green); margin-bottom: 16px; }
/* v1.80 — product hero titles match the homepage hero exactly */
.qs-pp-title {
    font-size: clamp(46px, 6.5vw, 84px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.025em !important;
    font-family: var(--qs-sans) !important;
    color: #fff; margin: 0 0 18px;
}
.qs-pp-sub { color: var(--qs-text-2); font-size: 16px; line-height: 1.7; max-width: 560px; margin: 0 0 26px; }

.qs-pp-features { background: #0b0c0e; padding: 56px 0; border-bottom: 1px solid var(--qs-line); }
.qs-pp-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: #1b1c1f; border: 1px solid #1b1c1f; }
.qs-pp-feature { background: #0b0c0e; padding: 28px 26px 32px; }
.qs-pp-feature-title { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.qs-pp-feature-desc { color: #97979c; font-size: 13.5px; line-height: 1.65; }

.qs-pp-plans { background: #000; padding: 72px 0 88px; }
.qs-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1320px; margin: 0 auto; }
.qs-plan {
    background: #0b0c0e; border: 1px solid #1e1f22; border-radius: 10px;
    padding: 26px 24px 24px; display: flex; flex-direction: column;
}
.qs-plan-name { color: #fff; font-size: 16px; font-weight: 700; }
.qs-plan-price { color: #fff; font-size: 30px; font-weight: 800; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.qs-plan-price span { font-size: 13px; color: var(--qs-text-3); font-weight: 400; }
.qs-plan-price-quote { font-size: 20px; color: var(--qs-text-2); }
.qs-plan-desc { color: #97979c; font-size: 13px; line-height: 1.65; margin-bottom: 18px; flex: 1; }
.qs-plan-desc ul { padding-left: 18px; margin: 0; }
.qs-plan-order { text-align: center; margin-top: auto; }
.qs-plan-empty { text-align: center; color: var(--qs-text-2); }
.qs-plan-empty p { margin-bottom: 18px; font-size: 15px; }

@media (max-width: 991px) {
    .qs-pp-hero { padding: 64px 0 48px; }
    .qs-pp-feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v0.73 — reconciliation: restores v0.57–v0.71 blocks lost to workspace revert
   ========================================================================== */

/* v0.57 — about section */
.qs-about { background: #0b0c0e; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
.qs-about .qs-map-head { text-align: center; }
.qs-about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; max-width: 1320px; margin: 0 auto; width: 100%; align-items: start; }
.qs-about-story p { color: #b8b8bd; font-size: 15px; line-height: 1.75; margin: 0 0 18px; }
.qs-about-facts { border: 1px solid #1e1f22; border-radius: 10px; background: #060708; padding: 10px 0; }
.qs-fact { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 20px; border-bottom: 1px solid #141518; }
.qs-fact:last-child { border-bottom: none; }
.qs-fact-k { font-family: var(--qs-mono); font-size: 10.5px; letter-spacing: 0.12em; color: #6f7680; padding-top: 2px; }
.qs-fact-v { font-size: 13.5px; color: #e6e6ea; }
.qs-fact-v a { color: #ffffff; text-decoration: underline; text-decoration-color: #3a3a40; }
.qs-fact-v a:hover { text-decoration-color: #3fdf9a; }
@media (max-width: 991px) {
    .qs-about { min-height: 0; padding: 64px 0; }
    .qs-about-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* v0.58 — heading-to-content spacing */
.qs-map-section .qs-map-head, .qs-about .qs-map-head { margin-bottom: 68px; }

/* v0.59 — header wordmark matches footer: static, sharp, 27px */
.qs-brand-text { font-size: 27px !important; animation: none !important; transform: none !important; text-shadow: none !important; line-height: 1.1; }
body.qs-body #header .qs-nav { padding-top: 16px; padding-bottom: 16px; }

/* v0.60 — centered stat cells */
.qs-stat { text-align: center; padding-left: 18px !important; }

/* v0.62 — occluder dots over the photo's green LEDs */
.qs-hero-flicker span { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #04060a; border-radius: 50%; box-shadow: 0 0 3px 2px rgba(4,6,10,0.9); opacity: 0; }
.qs-hero-flicker span.off { opacity: 0.96; }

/* v0.71 — dropdowns above hero; Products label hover-only (hardened) */
body.qs-body #header { position: relative; z-index: 1000; overflow: visible !important; }
body.qs-body #header .navbar, body.qs-body #header .qs-nav { overflow: visible !important; }
.qs-drop { z-index: 1001; }
/* v2.55: .qs-nolink retired — the Products trigger now links to the
   homepage product grid (#products), matching Support/Account behavior
   and getting the pointer cursor natively. Kept as a no-op selector in
   case any cached markup lingers. */
.qs-menu a.qs-nolink { cursor: pointer; }

/* v0.75 — product hero matches homepage hero height (full viewport, no stats bar) */
.qs-pp-hero {
    min-height: calc(100vh - 77px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}
@media (max-width: 991px) {
    .qs-pp-hero { min-height: 620px; }
}

/* --------------------------------------------------------------------------
   v0.77 — auth pages: hero photo backdrop; wide register card
   -------------------------------------------------------------------------- */
.qs-auth-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -32px;
    min-height: calc(100vh - 77px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    position: relative;
    background: #000 url('../img/hero-aisle.jpg') right center / cover no-repeat;
}
.qs-auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,2,8,0.88) 0%, rgba(0,2,8,0.72) 50%, rgba(0,2,8,0.55) 100%);
}
.qs-auth-card { position: relative; z-index: 1; background: rgba(9,10,12,0.92); backdrop-filter: blur(4px); }
.qs-auth-card--wide { max-width: 720px; padding: 36px 38px 28px; }
.qs-reg-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.qs-field--full { grid-column: 1 / -1; }
.qs-pw-meter { height: 5px; background: #1a1c1f; border-radius: 3px; margin-bottom: 6px; }
.qs-auth-card select.qs-input { appearance: auto; }
@media (max-width: 767px) {
    .qs-reg-grid { grid-template-columns: 1fr; }
    .qs-auth-card--wide { padding: 28px 22px 22px; }
}

/* v0.78 — auth flicker layer + stacking order inside auth wrap */
.qs-auth-flicker { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qs-auth-flicker span { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #04060a; border-radius: 50%; box-shadow: 0 0 3px 2px rgba(4,6,10,0.9); opacity: 0; transition: opacity 0.3s ease; }
.qs-auth-flicker span.off { opacity: 0.96; }
.qs-auth-card { z-index: 2; }

/* v0.79 — auth backdrop matches homepage exactly: same scrim, same layer order */
.qs-auth-wrap::before {
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
    z-index: 1;
}
.qs-auth-flicker { z-index: 0; }   /* dots under the scrim, like the hero */
.qs-auth-card { z-index: 2; }

/* v0.79 — auth scrim matches homepage: photo crisp on the right, lights visible */
.qs-auth-wrap::before {
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
}

/* v0.80 — product heroes: homepage photo, scrim, and LED flicker */
.qs-pp-hero {
    position: relative;
    background: #000 url('../img/hero-aisle.jpg') right center / cover no-repeat;
    overflow: hidden;
}
.qs-pp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
}
.qs-pp-hero .container { position: relative; z-index: 2; }
.qs-pp-flicker { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qs-pp-flicker span { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #04060a; border-radius: 50%; box-shadow: 0 0 3px 2px rgba(4,6,10,0.9); opacity: 0; transition: opacity 0.3s ease; }
.qs-pp-flicker span.off { opacity: 0.96; }

/* v0.83 — ticket department chooser */
.qs-ticket-wrap { background: #000; padding: 88px 0 96px; min-height: calc(100vh - 77px - 340px); }
.qs-dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.qs-dept {
    display: flex; flex-direction: column;
    background: #0b0c0e; border: 1px solid #1e1f22; border-radius: 10px;
    padding: 26px 24px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.qs-dept:hover { border-color: #3fdf9a; transform: translateY(-2px); text-decoration: none; }
.qs-dept-name { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.qs-dept-desc { color: #97979c; font-size: 13.5px; line-height: 1.6; flex: 1; margin-bottom: 16px; }
.qs-dept-cta { color: #3fdf9a; font-size: 13px; font-weight: 600; }
.qs-dept-cta .fa-arrow-right { font-size: 11px; margin-left: 4px; }

/* v0.84 — ticket flow: photo + lights on chooser fallback; form uses auth-card system */
.qs-ticket-wrap {
    position: relative;
    background: #000 url('../img/hero-aisle.jpg') right center / cover no-repeat;
}
.qs-ticket-wrap::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
}
.qs-ticket-wrap .qs-auth-flicker { z-index: 1; }

/* v0.87 — modern ticket message box */
.qs-textarea {
    width: 100%;
    background: #0e0f11;
    border: 1px solid #232529;
    border-radius: 8px;
    color: #e8eaee;
    font-size: 14px;
    line-height: 1.6;
    padding: 12px 14px;
    resize: vertical;
    min-height: 180px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qs-textarea::placeholder { color: #5b5f66; }
.qs-textarea:focus {
    outline: none;
    border-color: #3fdf9a;
    box-shadow: 0 0 0 3px rgba(63,223,154,0.12);
}

/* v0.88 — Option A spec-sheet plan cards */
.qs-plan { padding: 22px 20px 20px; }
.qs-plan:hover { border-color: #3fdf9a; }
.qs-plan-price { font-size: 28px; margin: 8px 0 12px; }
.qs-plan-specs { margin-bottom: 14px; }
.qs-plan-spec {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7.5px 0;
    border-bottom: 0.5px solid #17181b;
    font-size: 12.5px;
}
.qs-plan-spec-k { color: #6f7680; font-family: var(--qs-mono); font-size: 9.5px; letter-spacing: 0.1em; }
.qs-plan-spec-v { color: #d7dae0; text-align: right; }
.qs-plan--featured { border-color: #3fdf9a; background: #0c1512; }
.qs-plan--featured .qs-plan-name { color: #3fdf9a; }
.qs-plan-desc p { margin: 0 0 8px; }

/* v0.89 — center plans heading on product pages */
.qs-pp-plans .qs-map-head { text-align: center; }
.qs-pp-plans .qs-map-sub { margin-left: auto; margin-right: auto; }

/* v0.92 — larger, more legible spec rows */
.qs-plan-spec { font-size: 14px; padding: 10px 0; }
.qs-plan-spec-k { font-size: 11px; }
.qs-plan-spec-v { font-weight: 500; }
.qs-plan-name { font-size: 18px; }
.qs-plan-price { font-size: 32px; }
.qs-plan-price span { font-size: 14px; }

/* v0.93 — dedicated server inventory table */
.qs-srv-scroll { max-width: 1320px; margin: 0 auto; overflow-x: auto; border: 1px solid #1e1f22; border-radius: 12px; background: #0b0c0e; }
.qs-srv-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.qs-srv-table thead th {
    text-align: left; padding: 14px 18px;
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.12em;
    color: #6f7680; font-weight: 400;
    border-bottom: 1px solid #1e1f22;
    white-space: nowrap;
}
.qs-srv-table tbody td { padding: 15px 18px; font-size: 14px; color: #d7dae0; border-bottom: 0.5px solid #17181b; white-space: nowrap; }
.qs-srv-table tbody tr:last-child td { border-bottom: none; }
.qs-srv-table tbody tr { transition: background 0.12s ease; }
.qs-srv-table tbody tr:hover { background: #101216; }
.qs-srv-name { color: #fff; font-weight: 700; }
.qs-srv-price { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.qs-srv-btn {
    display: inline-block; background: #fff; color: #000 !important;
    font-size: 12px; font-weight: 800; border-radius: 7px; padding: 8px 18px;
    transition: background 0.12s ease;
}
.qs-srv-btn:hover { background: #3fdf9a; text-decoration: none; }
@media (max-width: 991px) { .qs-srv-table tbody td, .qs-srv-table thead th { padding: 12px 12px; } }

/* v0.97 — coded price/available columns */
.qs-srv-permo { font-size: 11px; color: #6f7680; font-weight: 400; }
.qs-srv-stock--ok { color: #3fdf9a; font-weight: 700; }
.qs-srv-stock--out { color: #e05252; font-weight: 700; }
.qs-srv-btn--out { background: #1a1c1f; color: #6f7680 !important; cursor: not-allowed; }
.qs-srv-btn--out:hover { background: #1a1c1f; }

/* v0.98 — stronger table anatomy */
.qs-srv-table thead th { background: #101216; border-bottom: 1px solid #26282c; }
.qs-srv-table tbody tr:nth-child(even) { background: #0d0e11; }
.qs-srv-table tbody tr:hover { background: #12151a; }
.qs-srv-table tbody td { border-right: 0.5px solid #141518; }
.qs-srv-table tbody td:last-child { border-right: none; }
.qs-srv-table thead th { border-right: 0.5px solid #1a1c20; }
.qs-srv-table thead th:last-child { border-right: none; }
.qs-plans-embedded { padding: 0; }

/* v0.99 — table fits the page */
.qs-srv-table { min-width: 0; table-layout: auto; }
.qs-srv-table thead th { padding: 12px 12px; font-size: 9.5px; }
.qs-srv-table tbody td { padding: 12px 12px; font-size: 13px; white-space: nowrap; }
.qs-srv-table tbody td:first-child { white-space: normal; color: #fff; font-weight: 700; min-width: 150px; }
.qs-srv-scroll { max-width: 1400px; }

/* v1.00 — centered, sortable, filterable inventory */
.qs-srv-table thead th, .qs-srv-table tbody td { text-align: center; }
.qs-srv-table tbody td:first-child { text-align: center; }
.qs-srv-table tbody tr { cursor: default; }
.qs-srv-btn { cursor: pointer; }
.qs-srv-table thead th.qs-sortable { cursor: pointer; user-select: none; }
.qs-srv-table thead th.qs-sortable:hover { color: #d7dae0; }
.qs-srv-table thead th.qs-sort-asc::after { content: " \25B2"; font-size: 8px; color: #3fdf9a; }
.qs-srv-table thead th.qs-sort-desc::after { content: " \25BC"; font-size: 8px; color: #3fdf9a; }
.qs-srv-toolbar { max-width: 1400px; margin: 0 auto 14px; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.qs-srv-avail {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #9aa0a8; cursor: pointer;
    user-select: none; white-space: nowrap;
}
.qs-srv-avail input { accent-color: #3fdf9a; cursor: pointer; margin: 0; }
.qs-srv-filter {
    background: #0e0f11; border: 1px solid #232529; border-radius: 8px;
    color: #e8eaee; font-size: 13px; padding: 9px 14px; width: 320px;
    transition: border-color 0.15s ease;
}
.qs-srv-filter::placeholder { color: #5b5f66; }
.qs-srv-filter:focus { outline: none; border-color: #3fdf9a; }
@media (max-width: 767px) { .qs-srv-filter { width: 100%; } }

/* v1.01 — table headers match the VPS card spec labels (11px mono) */
.qs-srv-table thead th { font-size: 11px; letter-spacing: 0.1em; }

/* v1.02 — column menus */
.qs-srv-table thead th { position: relative; }
.qs-colmenu {
    position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 210px; text-align: left;
    background: #0e0f12; border: 1px solid #26282c; border-radius: 10px;
    padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,0.55);
    font-family: var(--qs-sans); letter-spacing: normal;
}
.qs-colmenu-item { padding: 8px 10px; border-radius: 6px; font-size: 12.5px; color: #d7dae0; cursor: pointer; }
.qs-colmenu-item:hover { background: #16181c; color: #fff; }
.qs-colmenu-hr { height: 1px; background: #1c1e22; margin: 6px 4px; }
.qs-colmenu-list { max-height: 220px; overflow-y: auto; padding: 2px 4px; }
.qs-colmenu-check { display: flex; align-items: center; gap: 8px; padding: 6px 6px; font-size: 12.5px; color: #c9c9ce; cursor: pointer; font-weight: 400; text-transform: none; }
.qs-colmenu-check:hover { color: #fff; }
.qs-colmenu-check input { accent-color: #3fdf9a; }
.qs-colmenu-all { border-bottom: 1px solid #1c1e22; margin-bottom: 4px; padding-bottom: 8px; }
.qs-srv-table thead th.qs-col-filtered { color: #3fdf9a; }
.qs-srv-table thead th.qs-col-filtered::before { content: "\\25CF "; font-size: 7px; vertical-align: 2px; }

/* v1.04 — OS grid, FAQ, CTA band */
.qs-os-section { background: #000; padding: 72px 0 80px; border-bottom: 1px solid var(--qs-line); }
.qs-os-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: #1b1c1f; border: 1px solid #1b1c1f; max-width: 1320px; margin: 0 auto; }
.qs-os { background: #0b0c0e; padding: 22px 18px; text-align: center; display: block; transition: background 0.15s ease; }
a.qs-os:hover { background: #101216; text-decoration: none; }
.qs-os-name { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.qs-os-ver { display: block; color: #6f7680; font-family: var(--qs-mono); font-size: 10.5px; letter-spacing: 0.08em; margin-top: 6px; }

.qs-faq-section { background: #0b0c0e; padding: 72px 0 80px; border-bottom: 1px solid var(--qs-line); }
.qs-faq-list { max-width: 780px; margin: 0 auto; }
.qs-faq { border-bottom: 1px solid #1a1c1f; }
.qs-faq summary {
    cursor: pointer; list-style: none; padding: 18px 4px;
    color: #fff; font-size: 15.5px; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center;
}
.qs-faq summary::-webkit-details-marker { display: none; }
.qs-faq summary::after { content: "+"; color: #3fdf9a; font-size: 20px; font-weight: 400; }
.qs-faq[open] summary::after { content: "\2212"; }
.qs-faq-a { color: #a7a7ad; font-size: 14px; line-height: 1.7; padding: 0 4px 20px; max-width: 640px; }
.qs-faq-a a { color: #3fdf9a; }

.qs-cta-band { background: #000; padding: 64px 0; }
.qs-cta-inner { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.qs-cta-text { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }

/* v1.05 — center OS section heading */
.qs-os-section .qs-map-head { text-align: center; }
.qs-os-section .qs-map-sub { margin-left: auto; margin-right: auto; }
.qs-os-note { max-width: 720px; margin: 26px auto 0; text-align: center; color: #97979c; font-size: 13.5px; line-height: 1.7; }

/* v1.06 — center FAQ heading */
.qs-faq-section .qs-map-head { text-align: center; }

/* v1.07 — hypervisor row under the OS grid */
.qs-os-sublabel {
    text-align: center;
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.2em;
    color: #6f7680; margin: 34px 0 14px;
}
.qs-os-grid--hv { max-width: 760px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* v1.09 — CTA band breathing room */
.qs-cta-band { padding: 110px 0; }
.qs-cta-inner { flex-direction: column; gap: 22px; text-align: center; }
.qs-cta-text { font-size: 26px; }

/* v1.10 — CTA band evened out: 140px visual gap above and below */
.qs-cta-band { padding: 60px 0 96px; }

/* v1.11 — CTA band: symmetric inside the box (top pad = bottom pad) */
.qs-cta-band { padding: 96px 0; }

/* v1.12 — CTA band: extra top weight */
.qs-cta-band { padding: 128px 0 96px; }

/* v1.13 — CTA inline: text left, button at the end; section type >= FAQ question size */
.qs-cta-inner { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; max-width: 1320px; }
.qs-pp-feature-title { font-size: 16.5px; }
.qs-pp-feature-desc { font-size: 15.5px; }
.qs-os-name { font-size: 16.5px; }
.qs-os-ver { font-size: 12px; }
.qs-os-note { font-size: 15.5px; }
.qs-faq-a { font-size: 15.5px; max-width: 700px; }

/* v1.14 — CTA: centered, button inline with the sentence */
.qs-cta-inner { justify-content: center; gap: 26px; }

/* v1.17 — homepage product grid: heading gap matches map section; side padding on grid */
.qs-products .qs-map-head { margin-bottom: 68px; }
.qs-products .qs-products-grid { padding-left: 28px; padding-right: 28px; }

/* v1.18 — product grid side padding doubled */
.qs-products .qs-products-grid { padding-left: 56px; padding-right: 56px; }
@media (max-width: 767px) {
    .qs-products .qs-products-grid { padding-left: 20px; padding-right: 20px; }
}

/* v1.19 — products section top spacing matches the map section */
.qs-products { padding-top: 96px; }

/* v1.19b — products: fixed top gap tuned to the map section's rendered spacing */
.qs-products {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 130px;
    padding-bottom: 96px;
}

/* v1.20 — products & map share one layout model: fixed gaps, identical at every zoom */
.qs-products,
.qs-map-section {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 110px;
    padding-bottom: 104px;
}

/* v1.22 — layout frame: cap full-bleed content growth so zoom-out stays sane */
:root { --qs-frame: 1520px; }
/* hero text stays anchored to the photo's dark left zone at every zoom */
.qs-stats .qs-stats-grid,
.qs-stats > .container,
.qs-products-grid {
    max-width: var(--qs-frame);
    margin-left: auto;
    margin-right: auto;
}
.qs-pp-hero .container,
.qs-pp-features .container,
.qs-os-section .container,
.qs-faq-section .container,
.qs-cta-band .container,
.qs-about .container {
    max-width: var(--qs-frame);
}

/* v1.24 — product pages: unified formatting system
   Same frame width and same heading-to-content rhythm everywhere. */
.qs-plan-grid,
.qs-srv-scroll,
.qs-srv-toolbar,
.qs-os-grid,
.qs-pp-plans .container,
.qs-pp-feature-grid {
    max-width: var(--qs-frame);
}
.qs-pp-plans .qs-map-head,
.qs-os-section .qs-map-head,
.qs-faq-section .qs-map-head {
    margin-bottom: 68px;
}
.qs-os-grid--hv { max-width: 800px; }  /* hypervisor sub-row stays intentionally narrower */

/* v1.25 — feature grid centers within its frame (all product pages) */
.qs-pp-feature-grid { margin-left: auto; margin-right: auto; }

/* v1.26 — OpenClaw comparison section */
.qs-vs-section { background: #000; padding: 72px 0 88px; border-bottom: 1px solid var(--qs-line); }
.qs-vs-section .qs-map-head { text-align: center; margin-bottom: 68px; }
.qs-vs-section .qs-map-sub { max-width: 640px; margin-left: auto; margin-right: auto; }
.qs-vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; }
.qs-vs-card { border-radius: 12px; padding: 28px 28px 24px; border: 1px solid #1e1f22; background: #0b0c0e; }
.qs-vs-card--good { border-color: rgba(63,223,154,0.35); }
.qs-vs-title { color: #fff; font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.qs-vs-card ul { list-style: none; margin: 0; padding: 0; }
.qs-vs-card li { position: relative; padding: 8px 0 8px 30px; color: #c9c9ce; font-size: 15px; line-height: 1.6; border-bottom: 0.5px solid #141518; }
.qs-vs-card li:last-child { border-bottom: none; }
.qs-vs-card--good li::before { content: "\2713"; position: absolute; left: 2px; color: #3fdf9a; font-weight: 700; }
.qs-vs-card--bad li::before { content: "\2717"; position: absolute; left: 2px; color: #e05252; font-weight: 700; }
@media (max-width: 900px) { .qs-vs-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   One-page order form (order.php / order-product.tpl) — v1.28
   -------------------------------------------------------------------------- */
.qs-order-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px 110px;
}
.qs-order-head { margin-bottom: 40px; }
.qs-order-kicker {
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--qs-green);
    margin-bottom: 10px;
}
.qs-order-title {
    font-family: var(--qs-sans) !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    letter-spacing: -0.01em;
    color: var(--qs-text) !important;
    margin: 0 0 12px;
    line-height: 1.05;
}
.qs-order-stockpill {
    display: inline-block;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--qs-green);
    border: 1px solid var(--qs-line-strong);
    border-radius: 999px;
    padding: 4px 12px;
}
.qs-order-stockpill--out { color: var(--qs-danger); }
.qs-order-cookiewarn,
.qs-order-error {
    border: 1px solid var(--qs-line-strong);
    border-left: 2px solid var(--qs-warn);
    background: var(--qs-panel);
    color: var(--qs-text-2);
    font-size: 14px;
    padding: 14px 16px;
    border-radius: var(--qs-radius);
    margin-bottom: 24px;
}
.qs-order-error { border-left-color: var(--qs-danger); }
.qs-order-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 900px) {
    .qs-order-grid { grid-template-columns: 1fr; }
    /* rail stacks above the form on mobile — sticky here pins it over
       the Billing cycle / hostname cards while scrolling, so it must
       scroll away normally */
    .qs-order-rail { order: -1; position: static !important; top: auto !important; }
}
.qs-order-card {
    background: var(--qs-panel);
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    padding: 24px;
    margin-bottom: 20px;
}
.qs-order-card-label {
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--qs-text-3);
    margin-bottom: 18px;
}
.qs-order-cycles { display: grid; gap: 10px; }
.qs-order-cycle { display: block; cursor: pointer; }
.qs-order-cycle input { position: absolute; opacity: 0; }
.qs-order-cycle-body {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius);
    padding: 14px 16px;
    transition: border-color 0.15s ease;
}
.qs-order-cycle input:checked + .qs-order-cycle-body {
    border-color: var(--qs-green);
}
.qs-order-cycle-name { color: var(--qs-text); font-size: 14px; font-weight: 600; min-width: 110px; }
.qs-order-cycle-price { color: var(--qs-text-2); font-family: var(--qs-mono); font-size: 13px; }
.qs-order-cycle-price em { color: var(--qs-text-4); font-style: normal; }
.qs-order-cycle-setup { color: var(--qs-text-4); font-family: var(--qs-mono); font-size: 12px; margin-left: auto; }
.qs-order-field { margin-bottom: 18px; }
.qs-order-field:last-child { margin-bottom: 0; }
.qs-order-field-label {
    display: block;
    color: var(--qs-text-2);
    font-size: 13px;
    margin-bottom: 8px;
}
.qs-order-req { color: var(--qs-green); margin-left: 3px; }
.qs-order-input {
    width: 100%;
    background: var(--qs-panel-2);
    border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
    color: var(--qs-text);
    font-family: var(--qs-mono);
    font-size: 13px;
    padding: 11px 13px;
    outline: none;
    transition: border-color 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}
select.qs-order-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f8f8f' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}
.qs-order-input:focus { border-color: var(--qs-green); }
.qs-order-textarea { min-height: 90px; resize: vertical; font-family: var(--qs-sans); }
.qs-order-tick { display: flex; gap: 10px; align-items: center; color: var(--qs-text-2); font-size: 13px; cursor: pointer; }
.qs-order-hint { color: var(--qs-text-4); font-size: 12px; margin-top: 7px; }
/* sticky only in the desktop side-column layout; the ≤900px media
   block above forces static (rail stacks on top of the form there).
   This rule sits LATER in the file than that media block, hence the
   !importants there — plain static was losing the cascade (v1.68). */
.qs-order-rail { position: sticky; top: 92px; }
.qs-order-summary {
    background: var(--qs-panel);
    border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
    padding: 24px;
}
.qs-order-sum-product { color: var(--qs-text); font-weight: 700; font-size: 16px; margin-bottom: 16px; }
.qs-order-sum-specs { border-top: 1px solid var(--qs-line); padding-top: 14px; margin-bottom: 14px; }
.qs-order-sum-spec {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 12px;
}
.qs-order-sum-spec span:first-child { font-family: var(--qs-mono); letter-spacing: 0.08em; color: var(--qs-text-4); font-size: 10px; padding-top: 2px; }
.qs-order-sum-spec span:last-child { color: var(--qs-text-2); text-align: right; }
.qs-order-sum-lines { border-top: 1px solid var(--qs-line); padding-top: 14px; }
.qs-order-sum-line {
    display: flex;
    justify-content: space-between;
    color: var(--qs-text-2);
    font-size: 13px;
    padding: 4px 0;
}
.qs-order-sum-total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--qs-line-strong);
    margin-top: 12px;
    padding-top: 14px;
    margin-bottom: 20px;
    color: var(--qs-text);
    font-weight: 700;
    font-size: 16px;
}
.qs-order-sum-total span:last-child { font-family: var(--qs-mono); color: var(--qs-green); }
.qs-order-submit { width: 100%; text-align: center; }
.qs-order-submit--out {
    display: block;
    background: transparent !important;
    color: var(--qs-danger) !important;
    border: 1px solid var(--qs-line-strong);
    cursor: not-allowed;
}
.qs-order-sum-note { color: var(--qs-text-4); font-size: 12px; margin-top: 12px; text-align: center; }
.qs-order-sum-trust {
    font-family: var(--qs-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--qs-text-4);
    text-align: center;
    border-top: 1px solid var(--qs-line);
    margin-top: 16px;
    padding-top: 14px;
}

/* --------------------------------------------------------------------------
   Knowledgebase (knowledgebase*.tpl) — v1.29
   -------------------------------------------------------------------------- */
.qs-kb-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 72px 64px 110px;
}
.qs-kb-wrap > * { max-width: var(--qs-frame); margin-left: auto; margin-right: auto; }
.qs-kb-head { margin-bottom: 48px; }
.qs-kb-head--compact { margin-bottom: 36px; }
.qs-kb-kicker {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 12px;
}
.qs-kb-back { color: var(--qs-green); text-decoration: none; }
.qs-kb-back:hover { color: var(--qs-text); }
.qs-kb-title {
    font-family: var(--qs-sans); font-weight: 800;
    font-size: clamp(26px, 3.6vw, 40px); color: var(--qs-text);
    margin: 0 0 28px; line-height: 1.1; max-width: 640px;
}
.qs-kb-search { display: flex; gap: 10px; max-width: 560px; }
.qs-kb-search-input {
    flex: 1; background: var(--qs-panel-2); border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius); color: var(--qs-text);
    font-family: var(--qs-mono); font-size: 13px; padding: 12px 14px; outline: none;
}
.qs-kb-search-input:focus { border-color: var(--qs-green); }
.qs-kb-search-btn { flex-shrink: 0; }
.qs-kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 56px; }
.qs-kb-cat {
    display: block; background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 20px; text-decoration: none;
    transition: border-color 0.15s ease;
}
.qs-kb-cat:hover { border-color: var(--qs-line-strong); text-decoration: none; }
.qs-kb-cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.qs-kb-cat-name { color: var(--qs-text); font-weight: 700; font-size: 15px; }
.qs-kb-cat-count {
    font-family: var(--qs-mono); font-size: 11px; color: var(--qs-text-4);
    border: 1px solid var(--qs-line); border-radius: 999px; padding: 2px 9px;
}
.qs-kb-cat:hover .qs-kb-cat-count { color: var(--qs-green); }
.qs-kb-cat-desc { color: var(--qs-text-3); font-size: 13px; margin: 8px 0 0; }
.qs-kb-section-label {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--qs-text-3); margin-top: 0; margin-bottom: 16px;
}
.qs-kb-list { border-top: 1px solid var(--qs-line); }
.qs-kb-item {
    display: block; padding: 16px 4px; border-bottom: 1px solid var(--qs-line);
    text-decoration: none; transition: background 0.15s ease;
}
.qs-kb-item:hover { background: var(--qs-panel); text-decoration: none; }
.qs-kb-item-title { display: block; color: var(--qs-text); font-size: 14px; font-weight: 600; }
.qs-kb-item:hover .qs-kb-item-title { color: var(--qs-green); }
.qs-kb-item-preview { display: block; color: var(--qs-text-4); font-size: 12px; margin-top: 4px; }
.qs-kb-empty { color: var(--qs-text-3); font-size: 14px; padding: 32px 0; }
.qs-kb-empty a { color: var(--qs-green); }
.qs-kb-wrap--article > * { max-width: 780px; }
.qs-kb-article-title {
    font-family: var(--qs-sans); font-weight: 800;
    font-size: clamp(24px, 3.2vw, 36px); color: var(--qs-text);
    margin-top: 0; margin-bottom: 14px; line-height: 1.12;
}
.qs-kb-article-meta {
    display: flex; gap: 18px; font-family: var(--qs-mono); font-size: 11px;
    letter-spacing: 0.06em; color: var(--qs-text-4);
    border-bottom: 1px solid var(--qs-line); padding-bottom: 18px; margin-bottom: 28px;
}
.qs-kb-article-meta a { color: var(--qs-text-4); text-decoration: none; }
.qs-kb-article-meta a:hover { color: var(--qs-green); }
.qs-kb-article { color: var(--qs-text-2); font-size: 15px; line-height: 1.75; }
.qs-kb-article h1, .qs-kb-article h2, .qs-kb-article h3, .qs-kb-article h4 {
    color: var(--qs-text); font-weight: 700; margin: 32px 0 12px; line-height: 1.25;
}
.qs-kb-article h2 { font-size: 22px; } .qs-kb-article h3 { font-size: 18px; } .qs-kb-article h4 { font-size: 15px; }
.qs-kb-article p { margin: 0 0 16px; }
.qs-kb-article a { color: var(--qs-green); }
.qs-kb-article ul, .qs-kb-article ol { margin: 0 0 16px; padding-left: 22px; }
.qs-kb-article li { margin-bottom: 6px; }
.qs-kb-article code, .qs-kb-article pre {
    font-family: var(--qs-mono); font-size: 13px; background: var(--qs-panel);
    border: 1px solid var(--qs-line); border-radius: 4px;
}
.qs-kb-article code { padding: 1px 6px; }
.qs-kb-article pre { padding: 14px 16px; overflow-x: auto; }
.qs-kb-article img { max-width: 100%; border: 1px solid var(--qs-line); border-radius: var(--qs-radius); }
.qs-kb-article table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.qs-kb-article th, .qs-kb-article td { border: 1px solid var(--qs-line); padding: 8px 12px; font-size: 13px; }
.qs-kb-voted {
    border: 1px solid var(--qs-line-strong); border-left: 2px solid var(--qs-green);
    background: var(--qs-panel); color: var(--qs-text-2); font-size: 13px;
    padding: 12px 16px; border-radius: var(--qs-radius); margin-bottom: 24px;
}
.qs-kb-vote {
    display: flex; align-items: center; gap: 16px;
    border-top: 1px solid var(--qs-line); margin-top: 36px; padding-top: 22px; margin-bottom: 48px;
}
.qs-kb-vote-label { color: var(--qs-text-3); font-size: 13px; }
.qs-kb-vote-form { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Cart pages dark reskin (viewcart / checkout / complete via standard_cart)
   Scoped to #order-standard_cart — stock markup untouched, JS intact. v1.29
   -------------------------------------------------------------------------- */
#order-standard_cart { color: var(--qs-text-2); padding-top: 32px; padding-bottom: 80px; }
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3,
#order-standard_cart h4, #order-standard_cart h5 { color: var(--qs-text); font-weight: 700; }
#order-standard_cart a { color: var(--qs-green); }
#order-standard_cart .text-muted, #order-standard_cart small { color: var(--qs-text-4) !important; }
#order-standard_cart hr { border-color: var(--qs-line); }

/* headings: mono section labels */
#order-standard_cart .sub-heading { border-bottom: 1px solid var(--qs-line); margin: 28px 0 20px; }
#order-standard_cart .sub-heading span {
    background: var(--qs-bg) !important; color: var(--qs-text-3) !important;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; padding-right: 14px; border: 0;
}

/* panels / cards / wells */
#order-standard_cart .card, #order-standard_cart .panel, #order-standard_cart .well,
#order-standard_cart .view-cart-items-header, #order-standard_cart .view-cart-items .item,
#order-standard_cart .order-summary, #order-standard_cart .cc-input-container {
    background: var(--qs-panel) !important; border-color: var(--qs-line) !important;
    color: var(--qs-text-2); border-radius: var(--qs-radius);
}
#order-standard_cart .card-header, #order-standard_cart .panel-heading {
    background: var(--qs-panel-2) !important; border-color: var(--qs-line) !important; color: var(--qs-text);
}
#order-standard_cart .view-cart-items-header {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--qs-text-3);
}
#order-standard_cart .view-cart-items .item { border: 1px solid var(--qs-line); margin-bottom: 10px; }
#order-standard_cart .view-cart-items .item-title,
#order-standard_cart .view-cart-items .item-group { color: var(--qs-text); }
#order-standard_cart .view-cart-items .item-price span { color: var(--qs-green); font-family: var(--qs-mono); }

/* forms */
#order-standard_cart .form-control, #order-standard_cart .field,
#order-standard_cart select, #order-standard_cart textarea {
    background: var(--qs-panel-2) !important; border: 1px solid var(--qs-line-strong) !important;
    color: var(--qs-text) !important; border-radius: var(--qs-radius);
    font-size: 13px; box-shadow: none !important;
}
#order-standard_cart .form-control:focus, #order-standard_cart .field:focus {
    border-color: var(--qs-green) !important;
}
#order-standard_cart ::placeholder { color: var(--qs-text-4); }
#order-standard_cart label { color: var(--qs-text-2); font-size: 13px; }
#order-standard_cart .field-icon { color: var(--qs-text-4); }
#order-standard_cart .input-group-addon, #order-standard_cart .input-group-text {
    background: var(--qs-panel) !important; border-color: var(--qs-line-strong) !important; color: var(--qs-text-3);
}

/* buttons */
#order-standard_cart .btn-primary, #order-standard_cart .btn-success {
    background: #ffffff !important; border-color: #ffffff !important; color: #000000 !important;
    font-weight: 700; border-radius: var(--qs-radius);
}
#order-standard_cart .btn-primary:hover, #order-standard_cart .btn-success:hover { background: var(--qs-green) !important; border-color: var(--qs-green) !important; }
#order-standard_cart .btn-default, #order-standard_cart .btn-secondary {
    background: transparent !important; border: 1px solid var(--qs-line-strong) !important;
    color: var(--qs-text-2) !important; border-radius: var(--qs-radius);
}
#order-standard_cart .btn-default:hover, #order-standard_cart .btn-secondary:hover { border-color: var(--qs-green) !important; color: var(--qs-text) !important; }
#order-standard_cart .btn-link { color: var(--qs-text-3) !important; }
#order-standard_cart .btn-link:hover { color: var(--qs-danger) !important; }

/* alerts */
#order-standard_cart .alert {
    background: var(--qs-panel) !important; border: 1px solid var(--qs-line-strong) !important;
    color: var(--qs-text-2) !important; border-radius: var(--qs-radius);
}
#order-standard_cart .alert-danger { border-left: 2px solid var(--qs-danger) !important; }
#order-standard_cart .alert-success { border-left: 2px solid var(--qs-green) !important; }
#order-standard_cart .alert-info, #order-standard_cart .alert-warning { border-left: 2px solid var(--qs-warn) !important; }

/* tabs (promo / estimate taxes) */
#order-standard_cart .nav-tabs { border-bottom: 1px solid var(--qs-line); }
#order-standard_cart .nav-tabs > li > a, #order-standard_cart .nav-tabs .nav-link {
    color: var(--qs-text-3); background: transparent; border: 0;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
#order-standard_cart .nav-tabs > li.active > a, #order-standard_cart .nav-tabs .nav-link.active {
    color: var(--qs-text); background: transparent !important;
    border: 0; border-bottom: 2px solid var(--qs-green);
}

/* summary & totals */
#order-standard_cart #orderSummary {
    background: var(--qs-panel) !important; border: 1px solid var(--qs-line-strong) !important; border-radius: var(--qs-radius);
}
#order-standard_cart .summary-container { border: 0 !important; border-radius: 0; }
#order-standard_cart .summary-totals, #order-standard_cart .recurring-totals { border-color: var(--qs-line) !important; }
#order-standard_cart .amt, #order-standard_cart .total-due-today .amt,
#order-standard_cart .summary-totals span.pull-right { font-family: var(--qs-mono); color: var(--qs-green) !important; }

/* tables (complete page, totals rows) */
#order-standard_cart table { color: var(--qs-text-2); }
#order-standard_cart table th, #order-standard_cart table td { border-color: var(--qs-line) !important; }

/* payment method radios & cc fields */
#order-standard_cart .radio-inline, #order-standard_cart .form-check-label { color: var(--qs-text-2); }
#order-standard_cart .cc-input-container { padding: 18px; }

/* --------------------------------------------------------------------------
   Cart pages rebuilt on the order.php design system (viewcart + checkout).
   Same frame (1100px / 72px pad), kicker + Inter 800 title, 1fr + 360px
   sticky rail grid, charcoal cards with mono labels. Stock markup untouched;
   !important where stock all.css (loaded later) competes. v1.61 + v1.62
   -------------------------------------------------------------------------- */

/* frame — mirrors .qs-order-wrap */
#order-standard_cart {
    max-width: 1100px;
    margin: 0 auto !important;
    padding: 72px 24px 110px !important;
}

/* category/actions sidebar gone at every width; body takes the frame */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed { display: none !important; }
#order-standard_cart .cart-body { width: 100% !important; float: none !important; padding: 0 !important; }

/* page head — mirrors .qs-order-kicker / .qs-order-title */
#order-standard_cart .header-lined { border: 0 !important; margin: 0 0 40px !important; padding: 0 !important; }
#order-standard_cart .header-lined::before {
    content: "ORDER";
    display: block;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 10px;
}
#order-standard_cart .header-lined h1 {
    font-family: var(--qs-sans); font-weight: 800 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    color: var(--qs-text) !important; line-height: 1.05;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
}

/* two-column grid — mirrors .qs-order-grid (viewcart only: checkout.tpl
   has no direct .row child under .cart-body) */
#order-standard_cart .cart-body > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px; align-items: start; margin: 0 !important;
}
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important;
}
/* stock all.css (loaded later, same selector) sets position: relative on
   this element — without !important our sticky loses and the leftover
   top: 92px becomes a relative 92px downward shift (v1.64's misaligned
   rail). Sticky must be !important. */
#order-standard_cart .secondary-cart-sidebar { position: sticky !important; top: 92px; }
@media (max-width: 900px) {
    #order-standard_cart .cart-body > .row { grid-template-columns: 1fr; }
    #order-standard_cart .secondary-cart-sidebar { position: static !important; top: auto; }
}

/* items — ONE card like the Billing-cycle card on order.php: mono label
   header joined to the item stack; each item a hairline row inside.
   nexus theme.css styles all of this with body#id selectors, so every
   property carries !important. */
#order-standard_cart .view-cart-items-header {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important; border-bottom: 0 !important;
    border-radius: var(--qs-radius) var(--qs-radius) 0 0 !important;
    padding: 20px 24px 8px !important; margin: 0 !important;
    color: var(--qs-text-3) !important;
    font-family: var(--qs-mono) !important; font-size: 11px !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
}
#order-standard_cart .view-cart-items {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important; border-top: 0 !important;
    border-radius: 0 0 var(--qs-radius) var(--qs-radius) !important;
    padding: 4px 24px 24px !important; margin: 0 0 20px !important;
}
#order-standard_cart .view-cart-items .item {
    background: transparent !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
    padding: 16px !important; margin: 10px 0 0 !important;
}
#order-standard_cart .view-cart-items .view-cart-empty {
    background: transparent !important; border: 0 !important;
    color: var(--qs-text-3) !important; padding: 16px 0 0 !important;
}
#order-standard_cart .view-cart-items .item-title {
    font-size: 16px !important; font-weight: 700; color: var(--qs-text) !important;
}
#order-standard_cart .view-cart-items .item-group {
    font-size: 12px !important; font-style: normal; color: var(--qs-text-3) !important;
}
#order-standard_cart .view-cart-items .item-domain {
    color: var(--qs-text-4) !important; font-family: var(--qs-mono); font-size: 12px;
}
#order-standard_cart .view-cart-items .item-price span { color: var(--qs-green); font-family: var(--qs-mono); }

/* empty cart link */
#order-standard_cart .empty-cart { margin: -4px 0 24px !important; }
#order-standard_cart .empty-cart .btn {
    background: transparent !important; border: 1px solid var(--qs-line-strong) !important;
    color: var(--qs-text-3) !important; border-radius: var(--qs-radius);
    padding: 6px 12px !important; font-size: 12px;
}
#order-standard_cart .empty-cart .btn:hover { border-color: var(--qs-danger) !important; color: var(--qs-danger) !important; }

/* order summary rail — mirrors .qs-order-summary */
#order-standard_cart .order-summary {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line-strong) !important;
    border-radius: var(--qs-radius);
    padding: 24px !important; margin: 0 !important;
}
#order-standard_cart .order-summary h2 {
    /* nexus theme.css draws a bordered rounded band on this h2 via
       body#id selectors — every property needs !important */
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    text-align: left !important;
    margin: 0 0 18px !important; padding: 0 !important;
    font-family: var(--qs-mono) !important; font-size: 11px !important;
    font-weight: 400 !important; letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--qs-text-3) !important; line-height: 1.4 !important;
}
#order-standard_cart .summary-container {
    background: transparent !important; border: 0 !important;
    padding: 0 !important; min-height: 0 !important; font-size: 13px !important;
}
/* summary rows on flex — no float/clearfix dependence (v1.62 fix) */
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals > div,
#order-standard_cart .order-summary .recurring-totals {
    display: flex !important; justify-content: space-between;
    align-items: baseline; gap: 12px;
}
#order-standard_cart .order-summary .subtotal span,
#order-standard_cart .order-summary .bordered-totals span,
#order-standard_cart .order-summary .recurring-totals > span,
#order-standard_cart .order-summary .total-due-today span {
    float: none !important;
}
#order-standard_cart .order-summary .subtotal {
    border-bottom: 1px solid var(--qs-line) !important;
    padding: 4px 0 12px !important; font-size: 13px !important; color: var(--qs-text-2);
}
#order-standard_cart .order-summary .bordered-totals {
    border-bottom: 1px solid var(--qs-line) !important; padding: 8px 0 !important; margin: 0 !important;
}
#order-standard_cart .order-summary .recurring-totals { color: var(--qs-text-2); padding: 12px 0 0 !important; margin: 0 !important; }
#order-standard_cart .order-summary .recurring-charges {
    color: var(--qs-text-4) !important; font-style: normal !important;
    font-family: var(--qs-mono); font-size: 12px !important; text-align: right !important;
}
#order-standard_cart .order-summary .recurring-charges > span { display: block; }

/* total line — mirrors .qs-order-sum-total: label left, green mono amount
   right (markup is amt-first, so row-reverse) */
#order-standard_cart .order-summary .total-due-today {
    display: flex; flex-direction: row-reverse;
    justify-content: space-between; align-items: baseline; gap: 12px;
    border-top: 1px solid var(--qs-line-strong);
    margin: 16px 0 20px !important; padding: 14px 0 0 !important;
}
#order-standard_cart .order-summary .total-due-today span {
    display: inline !important; text-align: left !important;
    font-family: var(--qs-sans); font-size: 16px; font-weight: 700;
    color: var(--qs-text); letter-spacing: 0; text-transform: none;
}
#order-standard_cart .order-summary .total-due-today .amt {
    font-family: var(--qs-mono); color: var(--qs-green) !important;
    font-size: 20px !important; white-space: nowrap;
}
#order-standard_cart .btn-checkout {
    display: block; width: 100%;
    padding: 13px 20px !important; font-size: 14px;
}
#order-standard_cart .btn-continue-shopping {
    display: inline-block; width: 100%; text-align: center;
    color: var(--qs-text-3) !important; font-size: 12px; margin-top: 6px;
}
#order-standard_cart .express-checkout-buttons .separator {
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--qs-text-4); text-align: center; margin: 10px 0;
}

/* promo / estimate-taxes tabs — tab content as a qs-order-card */
#order-standard_cart .view-cart-tabs .nav-tabs {
    padding-left: 0 !important; border-bottom: 1px solid var(--qs-line);
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    background: transparent !important; border-color: transparent !important;
    color: var(--qs-text) !important;
    border-bottom: 2px solid var(--qs-green) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius); padding: 24px !important;
}
#order-standard_cart .view-cart-promotion-code {
    background: var(--qs-panel-2); border: 1px solid var(--qs-line);
    color: var(--qs-text); border-radius: var(--qs-radius);
}

/* --------------------------------------------------------------------------
   Checkout step (cart.php?a=checkout) — whole personal-details form as one
   glass card, section sub-headings as mono kickers on the panel tone. v1.69
   -------------------------------------------------------------------------- */
#order-standard_cart #frmCheckout {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius);
    padding: 28px 32px 32px;
    margin: 0 0 20px;
}
@media (max-width: 700px) {
    #order-standard_cart #frmCheckout { padding: 20px 18px; }
}

/* intro line + already-registered switcher above the card */
#order-standard_cart .already-registered { margin: 0 0 18px !important; }
#order-standard_cart .already-registered p {
    color: var(--qs-text-3); font-size: 14px; margin: 8px 0 0;
}

/* section labels: mono kickers — chip background must match the card,
   and nexus sets a light #f8f9fa on the span with body#id specificity */
#order-standard_cart #frmCheckout .sub-heading {
    border-bottom: 1px solid var(--qs-line) !important; margin: 30px 0 20px;
}
#order-standard_cart #frmCheckout .sub-heading span {
    background: var(--qs-panel) !important; color: var(--qs-text-3) !important;
    font-family: var(--qs-mono) !important; font-size: 11px !important;
    letter-spacing: 0.1em !important; text-transform: uppercase !important;
    border: 0 !important; padding-right: 14px;
}

/* mailing list block: quiet hairline-topped section inside the card */
#order-standard_cart #frmCheckout .marketing-email-optin {
    border-top: 1px solid var(--qs-line);
    margin-top: 28px; padding-top: 22px;
}
#order-standard_cart #frmCheckout .marketing-email-optin h4 {
    font-size: 14px !important; font-weight: 700; color: var(--qs-text);
    margin: 0 0 8px;
}
#order-standard_cart #frmCheckout .marketing-email-optin p {
    color: var(--qs-text-4); font-size: 13px;
}

/* complete order: white pill, roomy */
#order-standard_cart #btnCompleteOrder {
    padding: 13px 34px !important; font-size: 14px !important;
    margin-top: 8px;
}

/* SSL/IP notice below the card: quiet footnote, green lock */
#order-standard_cart .checkout-security-msg {
    background: transparent !important;
    border: 1px solid var(--qs-line) !important;
    border-left: 2px solid var(--qs-green) !important;
    color: var(--qs-text-4) !important;
    font-size: 12px !important; border-radius: var(--qs-radius);
}
#order-standard_cart .checkout-security-msg .fa-lock {
    color: var(--qs-green); margin-right: 8px;
}
#order-standard_cart .checkout-security-msg strong { color: var(--qs-text-3); }

/* already-registered / create-account switcher buttons: btn-info and
   btn-warning were never covered by the v1.29 button pass — Bootstrap
   painted them cyan and amber. Ghost hairline style instead. v1.70 */
#order-standard_cart .btn-info,
#order-standard_cart .btn-warning {
    background: transparent !important;
    border: 1px solid var(--qs-line-strong) !important;
    color: var(--qs-text-2) !important;
    border-radius: var(--qs-radius); box-shadow: none !important;
    font-weight: 600;
}
#order-standard_cart .btn-info:hover, #order-standard_cart .btn-info:focus,
#order-standard_cart .btn-warning:hover, #order-standard_cart .btn-warning:focus {
    background: transparent !important;
    border-color: var(--qs-green) !important;
    color: var(--qs-text) !important;
}

/* mailing-list Yes/No toggle (bootstrap-switch): was invisible on the
   dark card and used Bootstrap's own #28a745 green. Theme tokens:
   QS green ON state with black text, muted OFF, white knob. v1.71 */
#order-standard_cart .bootstrap-switch {
    background: var(--qs-panel-2) !important;
    border: 1px solid var(--qs-line-strong) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: none !important;
}
#order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on,
#order-standard_cart .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--qs-green) !important;
    color: #000000 !important; font-weight: 700 !important;
    border-radius: 0 !important;
}
#order-standard_cart .bootstrap-switch .bootstrap-switch-handle-off,
#order-standard_cart .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: var(--qs-panel-2) !important;
    color: var(--qs-text-3) !important;
    border-radius: 0 !important;
}
#order-standard_cart .bootstrap-switch .bootstrap-switch-label {
    background: var(--qs-text) !important;
    border-radius: 3px !important;
}
#order-standard_cart .bootstrap-switch.bootstrap-switch-focused {
    box-shadow: none !important;
    border-color: var(--qs-green) !important;
}

/* --------------------------------------------------------------------------
   Client area dark reskin — dashboard shell + every stock page under
   #main-body (lists, details, password reset, modals). v1.32
   -------------------------------------------------------------------------- */
.qs-dash-head { margin: 40px 0 32px; }
.qs-dash-kicker {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 10px;
}
.qs-dash-title {
    font-family: var(--qs-sans); font-weight: 800;
    font-size: clamp(24px, 3vw, 34px); color: var(--qs-text); margin: 0; line-height: 1.1;
}
.qs-dash-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px; margin-bottom: 36px;
}
.qs-dash-tile {
    display: block; background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 20px; text-decoration: none;
    transition: border-color 0.15s ease;
}
.qs-dash-tile:hover { border-color: var(--qs-line-strong); text-decoration: none; }
.qs-dash-tile-num {
    display: block; font-family: var(--qs-mono); font-size: 30px; font-weight: 700;
    color: var(--qs-text); line-height: 1;
}
.qs-dash-tile--due .qs-dash-tile-num { color: var(--qs-warn); }
.qs-dash-tile--cta .qs-dash-tile-num { color: var(--qs-green); }
.qs-dash-tile-label {
    display: block; font-family: var(--qs-mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--qs-text-4); margin-top: 10px;
}
.qs-dash-tile:hover .qs-dash-tile-label { color: var(--qs-text-3); }

/* ---- generic stock-page reskin, scoped to the main body ---- */
#main-body { color: var(--qs-text-2); }
#main-body h1, #main-body h2, #main-body h3, #main-body h4, #main-body h5 { color: var(--qs-text); }
#main-body a:not(.qs-btn):not(.btn) { color: var(--qs-green); }
#main-body .text-muted, #main-body small { color: var(--qs-text-4) !important; }
#main-body hr { border-color: var(--qs-line); }

#main-body .card, #main-body .panel, #main-body .well {
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); color: var(--qs-text-2);
}
#main-body .card-header, #main-body .panel-heading {
    background: var(--qs-panel-2); border-bottom: 1px solid var(--qs-line); color: var(--qs-text);
}
#main-body .card-header .card-title { font-size: 14px; font-weight: 700; }
#main-body .card-footer { background: var(--qs-panel); border-top: 1px solid var(--qs-line); }
#main-body [class*="card-accent-"] { border-top-color: var(--qs-line-strong) !important; }

#main-body .list-group-item {
    background: transparent; border-color: var(--qs-line); color: var(--qs-text-2);
}
#main-body a.list-group-item:hover { background: var(--qs-panel-2); color: var(--qs-text); }
#main-body .list-group-item.active {
    background: var(--qs-panel-2); border-color: var(--qs-line-strong);
    color: var(--qs-green); border-left: 2px solid var(--qs-green);
}
#main-body .badge { background: var(--qs-panel-2); color: var(--qs-text-3); border: 1px solid var(--qs-line-strong); }

/* tables + DataTables chrome */
#main-body table.table { color: var(--qs-text-2); }
#main-body .table th {
    border-color: var(--qs-line-strong); color: var(--qs-text-3);
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
#main-body .table td { border-color: var(--qs-line); font-size: 13px; }
#main-body .table-list tbody tr { cursor: pointer; }
#main-body .table-list tbody tr:hover td { background: var(--qs-panel); color: var(--qs-text); }
#main-body .dataTables_filter input, #main-body .dataTables_length select {
    background: var(--qs-panel-2); border: 1px solid var(--qs-line-strong);
    color: var(--qs-text); border-radius: var(--qs-radius); padding: 6px 10px;
    font-family: var(--qs-mono); font-size: 12px;
}
#main-body .dataTables_info, #main-body .dataTables_length, #main-body .dataTables_filter { color: var(--qs-text-4); font-size: 12px; }
#main-body .paginate_button { color: var(--qs-text-3) !important; background: transparent !important; border-color: var(--qs-line) !important; }
#main-body .paginate_button.current { color: var(--qs-text) !important; border-color: var(--qs-green) !important; }
#main-body .paginate_button:hover { color: var(--qs-text) !important; border-color: var(--qs-line-strong) !important; }

/* status labels: paid/active/open = green; unpaid/overdue = amber; cancelled/terminated = red */
#main-body .label.status, #main-body .status {
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    background: transparent; border: 1px solid var(--qs-line-strong);
    border-radius: 999px; padding: 3px 10px; color: var(--qs-text-3);
}
#main-body .status-paid, #main-body .status-active, #main-body .status-open,
#main-body .status-answered, #main-body .status-completed { color: var(--qs-green); border-color: var(--qs-green-dim); }
#main-body .status-unpaid, #main-body .status-pending, #main-body .status-customer-reply,
#main-body .status-payment-pending, #main-body .status-suspended { color: var(--qs-warn); }
#main-body .status-overdue, #main-body .status-cancelled, #main-body .status-terminated,
#main-body .status-refunded, #main-body .status-collections { color: var(--qs-danger); }
#main-body .status-closed { color: var(--qs-text-4); }

/* forms + buttons (stock pages only; qs-btn unaffected) */
#main-body .form-control {
    background: var(--qs-panel-2); border: 1px solid var(--qs-line-strong);
    color: var(--qs-text); border-radius: var(--qs-radius); box-shadow: none;
}
#main-body .form-control:focus { border-color: var(--qs-green); }
#main-body label { color: var(--qs-text-2); }
#main-body .btn-primary, #main-body .btn-success {
    background: #ffffff; border-color: #ffffff; color: #000000; font-weight: 700; border-radius: var(--qs-radius);
}
#main-body .btn-primary:hover, #main-body .btn-success:hover { background: var(--qs-green); border-color: var(--qs-green); color: #000000; }
#main-body .btn-default, #main-body .btn-secondary {
    background: transparent; border: 1px solid var(--qs-line-strong); color: var(--qs-text-2); border-radius: var(--qs-radius);
}
#main-body .btn-default:hover, #main-body .btn-secondary:hover { border-color: var(--qs-green); color: var(--qs-text); }
#main-body .alert { background: var(--qs-panel); border: 1px solid var(--qs-line-strong); color: var(--qs-text-2); border-radius: var(--qs-radius); }
#main-body .alert-danger, #main-body .alert-error { border-left: 2px solid var(--qs-danger); }
#main-body .alert-success { border-left: 2px solid var(--qs-green); }
#main-body .alert-info, #main-body .alert-warning { border-left: 2px solid var(--qs-warn); }

/* modals (generate password, confirmations) */
.modal-content { background: var(--qs-panel); border: 1px solid var(--qs-line-strong); color: var(--qs-text-2); }
.modal-header, .modal-footer { border-color: var(--qs-line); }
.modal-title { color: var(--qs-text); }

/* --------------------------------------------------------------------------
   Dashboard console over the aisle photo (clientareahome) — v1.33
   Same photo/scrim/flicker paradigm as the auth pages.
   -------------------------------------------------------------------------- */
.qs-ca-wrap {
    width: 100%;
    margin-top: -32px;
    /* v2.85: was -56px — counterweighted #main-body's old bottom padding;
       after v2.17 zeroed that padding it dragged the footer up under the
       console (clipped links), same bug as network.php in v2.56. */
    margin-bottom: 0;
    min-height: calc(100vh - 77px);
    padding: 72px 5vw 100px;
    position: relative;
    background: #000 url('../img/hero-aisle.jpg') right center / cover no-repeat;
    background-attachment: fixed;
}
.qs-ca-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
    z-index: 1;
}
.qs-ca-flicker { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.qs-ca-flicker span { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #04060a; border-radius: 50%; box-shadow: 0 0 3px 2px rgba(4,6,10,0.9); opacity: 0; transition: opacity 0.3s ease; }
.qs-ca-flicker span.off { opacity: 0.96; }
.qs-ca-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(1280px, 66vw);
    background: rgba(9,10,12,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--qs-line-strong);
    border-radius: 10px;
    padding: 34px 38px 28px;
}
.qs-ca-kicker {
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 10px;
}
.qs-ca-name {
    font-family: var(--qs-sans); font-weight: 800;
    font-size: clamp(28px, 2.6vw, 40px); color: var(--qs-text);
    margin: 0 0 22px; line-height: 1.1;
}
.qs-ca-stats {
    display: flex;
    border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
    margin-bottom: 22px;
    max-width: 560px;
}
.qs-ca-stat {
    flex: 1; padding: 12px 16px; text-decoration: none;
    border-right: 1px solid var(--qs-line);
    transition: background 0.15s ease;
}
.qs-ca-stat:last-child { border-right: 0; }
.qs-ca-stat:hover { background: rgba(255,255,255,0.03); text-decoration: none; }
.qs-ca-stat-num { display: block; font-family: var(--qs-mono); font-size: 18px; color: var(--qs-text); line-height: 1; }
.qs-ca-stat-num--ok { color: var(--qs-green); }
.qs-ca-stat-num--due { color: var(--qs-warn); }
.qs-ca-stat-label {
    display: block; font-family: var(--qs-mono); font-size: 10px;
    letter-spacing: 0.08em; color: var(--qs-text-4); margin-top: 7px;
}
.qs-ca-services { border-top: 1px solid var(--qs-line); }
.qs-ca-svc {
    display: grid;
    grid-template-columns: 1.2fr 1.3fr 0.9fr 0.6fr;
    gap: 12px;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid var(--qs-line);
    text-decoration: none;
    transition: background 0.15s ease;
}
.qs-ca-svc:hover { background: rgba(255,255,255,0.03); text-decoration: none; }
.qs-ca-svc-name { color: var(--qs-text); font-size: 15px; font-weight: 600; }
.qs-ca-svc:hover .qs-ca-svc-name { color: var(--qs-green); }
.qs-ca-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    margin-right: 9px; vertical-align: 1px; background: var(--qs-text-4);
}
.qs-ca-dot--active { background: var(--qs-green); }
.qs-ca-dot--pending { background: var(--qs-warn); }
.qs-ca-dot--suspended { background: var(--qs-danger); }
.qs-ca-svc-host { font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-ca-svc-renews { font-family: var(--qs-mono); font-size: 13px; color: var(--qs-text-4); }
.qs-ca-svc-price { font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text-2); text-align: right; }
.qs-ca-empty { color: var(--qs-text-3); font-size: 15px; padding: 22px 0; border-top: 1px solid var(--qs-line); }
.qs-ca-actions { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; }
.qs-ca-action {
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.08em;
    color: var(--qs-text-3); text-decoration: none;
}
.qs-ca-action:hover { color: var(--qs-text); text-decoration: none; }
.qs-ca-action--deploy { color: var(--qs-green); }
.qs-ca-action--deploy:hover { color: var(--qs-text); }
.qs-ca-extras { position: relative; z-index: 2; width: 100%; max-width: none; margin-top: 22px; }
.qs-ca-extras .card { background: rgba(9,10,12,0.92) !important; backdrop-filter: blur(4px); }
.qs-ca-extras .card:empty { display: none; }
@media (max-width: 900px) {
    .qs-ca-wrap { padding: 48px 20px 70px; background-attachment: scroll; }
    .qs-ca-panel { max-width: none; padding: 24px 20px 20px; }
    .qs-ca-extras { max-width: none; }
    .qs-ca-svc { grid-template-columns: 1fr auto; }
    .qs-ca-svc-host, .qs-ca-svc-renews { display: none; }
    .qs-ca-stats { flex-wrap: wrap; max-width: none; }
    .qs-ca-stat { flex: 1 1 40%; border-bottom: 1px solid var(--qs-line); }
}

/* v1.33 design G: header row, mini stats, filter tabs, bottom strip */
.qs-ca-head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.qs-ca-head .qs-ca-name { margin-bottom: 0; }
.qs-ca-ministats { display: flex; gap: 34px; padding-top: 0; }
.qs-ca-ministat { text-align: left; text-decoration: none; }
.qs-ca-ministat:hover { text-decoration: none; }
.qs-ca-ministat-num { display: block; font-family: var(--qs-mono); font-size: 22px; color: var(--qs-text); line-height: 1; }
.qs-ca-num--ok { color: var(--qs-green) !important; }
.qs-ca-num--due { color: var(--qs-warn) !important; }
.qs-ca-ministat-label { display: block; font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--qs-text-4); margin-top: 8px; }
.qs-ca-ministat:hover .qs-ca-ministat-label { color: var(--qs-text-3); }
.qs-ca-tabs { display: flex; gap: 28px; margin-top: 28px; border-bottom: 1px solid var(--qs-line-strong); overflow-x: auto; }
.qs-ca-tab {
    appearance: none; background: none; border: 0; cursor: pointer;
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.08em;
    color: var(--qs-text-3); padding: 0 0 11px; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.qs-ca-tab:hover { color: var(--qs-text); }
.qs-ca-tab.on { color: var(--qs-text); border-bottom-color: var(--qs-green); }
.qs-ca-tabs + .qs-ca-services { border-top: 0; }
.qs-ca-svc--hidden { display: none; }
.qs-ca-svc-renews--warn { color: var(--qs-warn); }
.qs-ca-strip {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    border-top: 1px solid var(--qs-line-strong); margin-top: 14px; padding-top: 13px;
}
.qs-ca-strip-item { font-size: 14px; color: var(--qs-text-3); }
.qs-ca-strip-label {
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--qs-text-4); margin-right: 8px;
}
.qs-ca-strip-link { color: var(--qs-text-2); text-decoration: none; }
.qs-ca-strip-link:hover { color: var(--qs-green); text-decoration: none; }
.qs-ca-strip-meta { font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--qs-text-4); margin-left: 8px; text-transform: uppercase; }
@media (max-width: 900px) {
    .qs-ca-ministats { gap: 16px; }
    .qs-ca-strip { flex-direction: column; gap: 8px; }
}

/* v1.37 — account rail beside the console (sidebar reborn in-design) */
.qs-ca-cols { position: relative; z-index: 2; display: flex; gap: 18px; align-items: flex-start; }
.qs-ca-cols .qs-ca-panel { flex: 1 1 auto; max-width: none; min-width: 0; }
.qs-ca-rail {
    order: -1;
    flex: 0 0 280px;
    background: rgba(9,10,12,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--qs-line-strong);
    border-radius: 10px;
    padding: 26px 24px;
}
.qs-ca-rail-block { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--qs-line); }
.qs-ca-rail-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.qs-ca-rail-label {
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.1em;
    color: var(--qs-text-4); margin-bottom: 12px;
}
.qs-ca-rail-name { color: var(--qs-text); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.qs-ca-rail-line { color: var(--qs-text-3); font-size: 13px; line-height: 1.5; }
.qs-ca-rail-link {
    display: block; font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    color: var(--qs-text-3); text-decoration: none; margin-top: 12px;
}
.qs-ca-rail-link:hover { color: var(--qs-text); text-decoration: none; }
.qs-ca-rail-link--green { color: var(--qs-green); }
.qs-ca-rail-link--green:hover { color: var(--qs-text); }
@media (max-width: 1100px) {
    .qs-ca-cols { flex-direction: column; }
    .qs-ca-rail { order: 0; }
    .qs-ca-cols .qs-ca-panel { max-width: none; width: 100%; }
    .qs-ca-rail { flex: none; width: 100%; }
}

/* v1.40 — page-level kicker above the console + rail */
.qs-ca-kicker--page { position: relative; z-index: 2; margin-bottom: 16px; }

/* --------------------------------------------------------------------------
   Client-area shell — every account page in the dashboard's skin:
   photo, scrim, LED flicker, glass panels. v1.42
   -------------------------------------------------------------------------- */
body.qs-body #main-body.qs-shell {
    position: relative;
    margin-top: -32px;
    margin-bottom: 0;
    padding: 68px 0 100px;
    min-height: calc(100vh - 77px - 320px);
    background: #050608;   /* flat near-black per design decision v1.43 */
}
.qs-shell-flicker { display: none; }
.qs-shell-flicker span { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #04060a; border-radius: 50%; box-shadow: 0 0 3px 2px rgba(4,6,10,0.9); opacity: 0; transition: opacity 0.3s ease; }
.qs-shell-flicker span.off { opacity: 0.96; }
#main-body.qs-shell .container { position: relative; z-index: 2; max-width: 1720px; }
.qs-shell-kicker { margin-bottom: 18px; padding-left: 15px; }
.qs-shell-panel {
    background: rgba(9,10,12,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--qs-line-strong);
    border-radius: 10px;
    padding: 30px 34px;
}
#main-body.qs-shell .qs-sidebar {
    background: rgba(9,10,12,0.92);
    backdrop-filter: blur(4px);
    border: 1px solid var(--qs-line-strong);
    border-radius: 10px;
    padding: 22px 20px;
    margin-bottom: 18px;
}
#main-body.qs-shell .card { background: rgba(13,14,17,0.85) !important; }
@media (max-width: 900px) {
    #main-body.qs-shell { background-attachment: scroll; }
    .qs-shell-panel { padding: 22px 18px; }
}

/* v1.44 — account links in nav; notifications beside dashboard kicker */
.qs-nav-account { display: flex; align-items: center; gap: 18px; margin-left: 28px; }
@media (max-width: 991px) { .qs-nav-account { margin: 12px 0 4px; } }
.qs-ca-kickrow { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.qs-ca-kickrow .qs-ca-kicker { margin-bottom: 0; }
.qs-ca-notif {
    appearance: none; background: transparent; cursor: pointer;
    border: 1px solid var(--qs-line-strong); border-radius: 999px;
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.08em;
    color: var(--qs-text-3); padding: 5px 14px; text-transform: uppercase;
}
.qs-ca-notif:hover { color: var(--qs-text); border-color: var(--qs-green); }
.qs-ca-notif .far, .qs-ca-notif .fas { margin-right: 6px; }

/* v1.45 — nav account links: far right, white, larger */
.qs-nav-account { margin-left: auto; gap: 22px; }
.qs-nav-account .qs-topbar-link { color: #ffffff; font-size: 14px; }
.qs-nav-account .qs-topbar-link:hover { color: var(--qs-green); text-decoration: none; }
.qs-nav-account .qs-topbar-link.qs-muted { color: #ffffff; }
.qs-nav-account .qs-topbar-link.qs-muted:hover { color: var(--qs-green); }

/* v1.46 — nav row: collapse fills the row; menu centered; account at true right edge */
body.qs-body #header .qs-nav .navbar-collapse { flex: 1 1 auto; }
body.qs-body #header .qs-nav .qs-menu { margin-left: auto; }
body.qs-body #header .qs-nav .qs-nav-account { margin-left: auto; }
@media (max-width: 991px) {
    body.qs-body #header .qs-nav .qs-menu,
    body.qs-body #header .qs-nav .qs-nav-account { margin-left: 0; }
}

/* v1.47 — account links: absolute at the nav's right edge (flex-independent) */
body.qs-body #header .qs-nav { position: relative; }
body.qs-body #header .qs-nav .qs-nav-account {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
@media (max-width: 991px) {
    body.qs-body #header .qs-nav .qs-nav-account {
        position: static;
        transform: none;
        margin: 12px 0 4px;
    }
}

/* v1.48 — account links outside the menu box: anchored to the nav row itself */
body.qs-body #header .qs-nav .qs-nav-account,
body.qs-body #header .qs-nav > .container > .qs-nav-account {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    display: flex;
}
@media (max-width: 991px) {
    body.qs-body #header .qs-nav .qs-nav-account { display: none; }
}

/* v1.49 — nav account name: force white over any header link color */
body.qs-body #header .qs-nav-account .qs-topbar-link,
body.qs-body #header .qs-nav-account .qs-topbar-link.qs-muted {
    color: #ffffff !important;
    font-size: 14px;
}
body.qs-body #header .qs-nav-account .qs-topbar-link:hover {
    color: var(--qs-green) !important;
}

/* v1.50 — hide nav account links at the same breakpoint the menu collapses (1199px) */
@media (max-width: 1199px) {
    body.qs-body #header .qs-nav .qs-nav-account { display: none !important; }
}

/* --------------------------------------------------------------------------
   List tables, refined (invoices / quotes / services / emails / any
   DataTables list inside the shell) — v1.54
   The v1.32 pass was written before parent fallback worked; now that these
   pages render, nexus's chrome wins several fights. Kill it properly:
   no border box, left-aligned, hairline separators, mono header, ghost
   search, underline pagination. Specificity: body.qs-body #main-body
   beats every nexus/theme.min rule (id > classes).
   -------------------------------------------------------------------------- */

/* the table itself: frameless, transparent, hairlines only */
body.qs-body #main-body .dataTables_wrapper table.table-list {
    border: 0; border-radius: 0; background: transparent;
    margin: 8px 0 20px !important;
}
body.qs-body #main-body table.table-list thead th {
    background: transparent; text-align: left;
    font-family: var(--qs-mono); font-size: 11px; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--qs-text-4);
    border: 0; border-bottom: 1px solid var(--qs-line-strong);
    padding: 10px 16px 12px;
}
body.qs-body #main-body table.table-list tbody td {
    background: transparent; text-align: left;
    color: var(--qs-text-2); font-size: 13px;
    border: 0; border-bottom: 1px solid var(--qs-line);
    padding: 15px 16px; vertical-align: middle;
}
body.qs-body #main-body table.table-list tbody tr:last-child td { border-bottom: 0; }
body.qs-body #main-body table.table-list tbody tr:hover td {
    background: var(--qs-panel); color: var(--qs-text);
}
/* first column (invoice # / quote #) reads as an identifier */
body.qs-body #main-body table.table-list tbody td:first-child {
    font-family: var(--qs-mono); font-size: 12px; color: var(--qs-text-3);
}
body.qs-body #main-body table.table-list tbody tr:hover td:first-child { color: var(--qs-green); }

/* sorting: no grey header wash; active sort = green label + single caret */
body.qs-body #main-body .dataTables_wrapper table.table-list thead th.sorting_asc,
body.qs-body #main-body .dataTables_wrapper table.table-list thead th.sorting_desc {
    background: transparent; color: var(--qs-green);
}
body.qs-body #main-body table.dataTable thead > tr > th.sorting:before,
body.qs-body #main-body table.dataTable thead > tr > th.sorting:after {
    opacity: 0; transition: opacity 0.1s ease;
}
body.qs-body #main-body table.dataTable thead > tr > th.sorting:hover:after { opacity: 0.35; }
body.qs-body #main-body table.dataTable thead > tr > th.sorting_asc:before,
body.qs-body #main-body table.dataTable thead > tr > th.sorting_desc:after {
    opacity: 1; color: var(--qs-green);
}
body.qs-body #main-body table.dataTable thead > tr > th.sorting_asc:after,
body.qs-body #main-body table.dataTable thead > tr > th.sorting_desc:before { opacity: 0; }

/* search: ghost field — hairline underline, mono, no box */
body.qs-body #main-body .dataTables_filter { float: right; }
body.qs-body #main-body .dataTables_filter input {
    background: transparent; border: 0; border-bottom: 1px solid var(--qs-line-strong);
    border-radius: 0; color: var(--qs-text); padding: 6px 2px;
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.04em;
    min-width: 220px; transition: border-color 0.15s ease;
}
body.qs-body #main-body .dataTables_filter input:focus {
    border-bottom-color: var(--qs-green); outline: 0; box-shadow: none;
}
body.qs-body #main-body .dataTables_filter input::placeholder { color: var(--qs-text-4); }

/* "showing 1 to 10 of 95" — quiet mono caption */
body.qs-body #main-body .dataTables_info {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--qs-text-4); padding-top: 6px;
}

/* pagination: strip the boxes; numbers as quiet mono, current = green underline
   (same vocabulary as the dashboard filter tabs) */
body.qs-body #main-body .dataTables_paginate { margin-top: 10px; }
body.qs-body #main-body .dataTables_paginate .pagination { gap: 2px; }
body.qs-body #main-body .dataTables_paginate .page-link,
body.qs-body #main-body .page-link {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: var(--qs-text-3);
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.06em;
    padding: 6px 10px; margin: 0; box-shadow: none;
}
body.qs-body #main-body .page-link:hover { color: var(--qs-text); background: transparent; }
body.qs-body #main-body .page-item.active .page-link {
    color: var(--qs-text); background: transparent; border-bottom-color: var(--qs-green);
}
body.qs-body #main-body .page-item.disabled .page-link { color: var(--qs-line-strong); background: transparent; }
body.qs-body #main-body .page-link:focus { box-shadow: none; }

/* "show N entries" — compact, right of pagination row */
body.qs-body #main-body .dataTables_length {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--qs-text-4); margin-top: 12px;
}
body.qs-body #main-body .dataTables_length select {
    background: transparent; border: 0; border-bottom: 1px solid var(--qs-line-strong);
    border-radius: 0; color: var(--qs-text); padding: 3px 4px;
    font-family: var(--qs-mono); font-size: 12px;
}
body.qs-body #main-body .dataTables_length select:focus { border-bottom-color: var(--qs-green); outline: 0; }

/* status pills: keep v1.32 colors, stop wrap/squeeze in tight cells */
body.qs-body #main-body .table-list .label.status { white-space: nowrap; }

/* table loading state */
body.qs-body #main-body #tableLoading { color: var(--qs-text-4); font-family: var(--qs-mono); font-size: 12px; }

/* --------------------------------------------------------------------------
   List tables speak the dashboard console's language — v1.55
   Same vocabulary as .qs-ca-svc rows (v1.33): 17px row rhythm, faint white
   hover wash, 15px/600 white names that green on hover, mono dim hostnames
   and dates, status = LED dot + lowercase word instead of a pill.
   -------------------------------------------------------------------------- */

/* row rhythm + hover: match .qs-ca-svc exactly */
body.qs-body #main-body table.table-list tbody td { padding: 17px 16px; }
body.qs-body #main-body table.table-list tbody tr:hover td {
    background: rgba(255,255,255,0.03); color: var(--qs-text-2);
}

/* status: pill -> dashboard LED dot + lowercase word (colors stay v1.32:
   paid/active green, pending/suspended amber, overdue/cancelled red) */
body.qs-body #main-body .label.status, body.qs-body #main-body .status {
    background: transparent; border: 0; border-radius: 0; padding: 0;
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.04em;
    text-transform: lowercase;
}
body.qs-body #main-body .label.status::before {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; margin-right: 9px; vertical-align: 1px;
    background: currentColor;
}

/* ---- services list (#tableServicesList): the dashboard table, stock ---- */
/* kill bootstrap's centered cells; dashboard is left-aligned */
body.qs-body #main-body #tableServicesList td.text-center,
body.qs-body #main-body #tableServicesList th { text-align: left !important; }
/* product name = .qs-ca-svc-name */
body.qs-body #main-body #tableServicesList td strong {
    color: var(--qs-text); font-size: 15px; font-weight: 600;
}
body.qs-body #main-body #tableServicesList tbody tr:hover td strong { color: var(--qs-green); }
/* hostname under it = .qs-ca-svc-host (not a green link) */
body.qs-body #main-body #tableServicesList td a:not(.btn) {
    font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text-3);
}
body.qs-body #main-body #tableServicesList tbody tr:hover td a:not(.btn) { color: var(--qs-text-2); }
/* price = .qs-ca-svc-price; cycle small = dim */
body.qs-body #main-body #tableServicesList td[data-order] {
    font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text-2);
}
body.qs-body #main-body #tableServicesList td[data-order] small { font-size: 12px; }
/* due date = .qs-ca-svc-renews */
body.qs-body #main-body #tableServicesList td:nth-child(4) {
    font-family: var(--qs-mono); font-size: 13px; color: var(--qs-text-4);
}
/* ssl icon column: quiet on black */
body.qs-body #main-body #tableServicesList td:first-child img {
    filter: grayscale(1) opacity(0.45);
}
body.qs-body #main-body #tableServicesList tbody tr:hover td:first-child img { filter: grayscale(0) opacity(1); }

/* ---- invoices (#tableInvoicesList): id mono (v1.54), dates dim, total strong ---- */
body.qs-body #main-body #tableInvoicesList td:nth-child(2),
body.qs-body #main-body #tableInvoicesList td:nth-child(3) {
    font-family: var(--qs-mono); font-size: 13px; color: var(--qs-text-3);
}
body.qs-body #main-body #tableInvoicesList td:nth-child(4) {
    font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text);
}

/* ---- domains (#tableDomainsList): domain name reads like a service name ---- */
body.qs-body #main-body #tableDomainsList td a:not(.btn) { color: var(--qs-text); font-weight: 600; font-size: 15px; }
body.qs-body #main-body #tableDomainsList tbody tr:hover td a:not(.btn) { color: var(--qs-green); }

/* --------------------------------------------------------------------------
   Service detail page (clientareaproductdetails via nexus fallback) — v1.56
   Compact dark header, LED status, Tesla underline tabs, dark spec panes.
   -------------------------------------------------------------------------- */

/* header card: kill the giant icon + oversized type; left-aligned, quiet */
body.qs-body #main-body .product-details .product-status { background: transparent; padding: 0; }
body.qs-body #main-body .product-details .product-icon .fa-stack { display: none; }
body.qs-body #main-body .product-details .product-icon { text-align: left !important; }
body.qs-body #main-body .product-details .product-icon h3 {
    font-size: 20px; font-weight: 700; color: var(--qs-text); margin: 0 0 4px;
}
body.qs-body #main-body .product-details .product-icon h4 {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--qs-text-4); margin: 0;
}

/* ACTIVE banner -> dashboard LED language */
body.qs-body #main-body .product-details .product-status-text {
    background: transparent !important; text-align: left; padding: 12px 0 0;
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.06em;
    text-transform: lowercase; color: var(--qs-green);
}
body.qs-body #main-body .product-details .product-status-text::before {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; margin-right: 9px; vertical-align: 1px; background: currentColor;
}
body.qs-body #main-body .product-status-suspended .product-status-text { color: var(--qs-warn); }
body.qs-body #main-body .product-status-terminated .product-status-text,
body.qs-body #main-body .product-status-cancelled .product-status-text { color: var(--qs-danger); }

/* right column: compact left-aligned spec list (labels mono, values plain) */
body.qs-body #main-body .product-details .col-md-6.text-center { text-align: left !important; }
body.qs-body #main-body .product-details .col-md-6.text-center h4 {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--qs-text-4); margin: 16px 0 3px; font-weight: 400;
}
body.qs-body #main-body .product-details .col-md-6.text-center h4:first-of-type { margin-top: 0; }

/* cancellation: quiet outline, not a red slab */
body.qs-body #main-body .product-details .btn-danger {
    background: transparent; border: 1px solid var(--qs-line-strong);
    color: var(--qs-danger); border-radius: var(--qs-radius); font-weight: 600;
}
body.qs-body #main-body .product-details .btn-danger:hover { border-color: var(--qs-danger); background: transparent; color: var(--qs-danger); }

/* tabs (Server Information / Additional Information): Tesla underline */
body.qs-body #main-body .nav-tabs { border-bottom: 1px solid var(--qs-line); }
body.qs-body #main-body .nav-tabs .nav-link {
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 12px 16px;
    font-family: var(--qs-mono); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--qs-text-3) !important;
}
body.qs-body #main-body .nav-tabs .nav-link:hover { color: var(--qs-text) !important; border-bottom-color: var(--qs-line-strong); }
body.qs-body #main-body .nav-tabs .nav-link.active {
    background: transparent; color: var(--qs-text) !important; border-bottom-color: var(--qs-green);
}
body.qs-body #main-body .nav-tabs .nav-link i { display: none; }

/* the white tab box goes dark + frameless */
body.qs-body #main-body .tab-content.bg-white,
body.qs-body #main-body .product-details-tab-container {
    background: transparent !important; border: 0; box-shadow: none; padding: 24px 4px;
}
body.qs-body #main-body .product-details-tab-container .row { padding: 6px 0; }
body.qs-body #main-body .product-details-tab-container strong {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--qs-text-4); font-weight: 400;
}

/* virtualizor manager iframe sits clean on the page */
body.qs-body #main-body #virtualizor_manager { background: transparent !important; border-radius: var(--qs-radius); }

/* --------------------------------------------------------------------------
   Service detail: kill the white product box for real, manager on top,
   spec rows hard-left — v1.57
   v1.56 hid the icon glyph but nexus paints .product-icon itself #efefef
   with 30px padding, and slab-colors .product-status-{status}. Both die
   here. Then #tabOverview's siblings get flex-ordered so the Virtualizor
   manager leads and the product/billing card follows.
   -------------------------------------------------------------------------- */

/* the white box + status slab */
body.qs-body #main-body .product-details .product-icon {
    background: transparent !important; padding: 0 !important;
    font-size: inherit !important; border-radius: 0;
}
body.qs-body #main-body .product-status,
body.qs-body #main-body .product-status-active,
body.qs-body #main-body .product-status-pending,
body.qs-body #main-body .product-status-suspended,
body.qs-body #main-body .product-status-cancelled,
body.qs-body #main-body .product-status-terminated,
body.qs-body #main-body .product-status-fraud { background: transparent !important; }

/* order: tabs + manager first, hook output next, product/billing card last */
body.qs-body #main-body #tabOverview.active { display: flex; flex-direction: column; }
body.qs-body #main-body #tabOverview > ul.nav-tabs { order: 1; }
body.qs-body #main-body #tabOverview > .tab-content.product-details-tab-container { order: 2; }
body.qs-body #main-body #tabOverview > div { order: 3; }
body.qs-body #main-body #tabOverview > .card { order: 4; margin-top: 28px; }

/* hostname / IP rows: hard left, fixed label column (spec-sheet style) */
body.qs-body #main-body .product-details-tab-container .tab-pane .row { display: flex; }
body.qs-body #main-body .product-details-tab-container .row > .col-sm-5.text-right {
    flex: 0 0 200px; max-width: 200px; text-align: left !important;
}
body.qs-body #main-body .product-details-tab-container .row > .col-sm-7 {
    flex: 1; text-align: left;
}

/* --------------------------------------------------------------------------
   Cancellation demoted to a whisper — v1.58
   Full-width outline button -> quiet mono text link. Reads dim gray,
   turns danger-red only on hover. Deliberately unnoticeable.
   -------------------------------------------------------------------------- */
body.qs-body #main-body .product-details .btn-danger,
body.qs-body #main-body .product-details .btn.btn-block.btn-danger {
    display: inline-block; width: auto;
    background: transparent !important; border: 0 !important; box-shadow: none;
    padding: 4px 0; margin-top: 14px;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 400; color: var(--qs-text-4);
}
body.qs-body #main-body .product-details .btn-danger:hover { color: var(--qs-danger); background: transparent !important; }
body.qs-body #main-body .product-details .btn-danger i { display: none; }

/* --------------------------------------------------------------------------
   Dashboard news ticker — v1.59
   Bottom-strip NEWS cycles the 5 latest announcements: quiet vertical
   slide + fade every 5s. Single announcement = static, no motion.
   -------------------------------------------------------------------------- */
.qs-ca-ticker {
    position: relative; display: inline-block; vertical-align: bottom;
    height: 1.5em; overflow: hidden; min-width: 300px; max-width: 480px;
}
.qs-ca-ticker-item {
    position: absolute; left: 0; top: 0; white-space: nowrap;
    opacity: 0; transform: translateY(9px); pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.qs-ca-ticker-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.qs-ca-ticker-item.is-out { opacity: 0; transform: translateY(-9px); }
@media (prefers-reduced-motion: reduce) {
    .qs-ca-ticker-item { transition: opacity 0.4s ease; transform: none; }
}


/* --------------------------------------------------------------------------
   v1.73 — Wordmark "D": terminal prompt. JetBrains Mono lowercase with a
   blinking QS-green block cursor. Lives at END of file, header-scoped, to
   supersede the v0.39-0.43 wordmark experiments layered above with
   !important. Footer wordmark deliberately untouched.
   -------------------------------------------------------------------------- */
body.qs-body #header .qs-brand-text {
    font-family: var(--qs-mono) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;
    color: #ffffff !important;
}
/* v0.43's .qs-brand rule (line ~676) sets a flex gap: 11px for the old
   cloud mark — that gap lands between wordmark and cursor. Kill it in
   the header; the cursor's own 3px margin is the only spacing. */
body.qs-body #header .qs-brand { gap: 0 !important; }
body.qs-body #header .qs-brand-cursor {
    display: inline-block;
    width: 10px; height: 19px;
    background: var(--qs-green);
    margin-left: 3px;
    align-self: center;
    animation: qsBrandCursor 1.1s step-end infinite;
}
@keyframes qsBrandCursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    body.qs-body #header .qs-brand-cursor { animation: none; }
}

/* top-level nav links join the system: small tracked caps.
   Dropdown items stay mixed-case for scanability. */
body.qs-body #header .qs-menu > li > a {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}
body.qs-body #header .qs-menu .qs-drop a {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
body.qs-body #header .qs-nav-account .qs-topbar-link {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   v1.82 — shared left edge. The wordmark (header padding 64px) and the
   homepage hero content (bootstrap container + 15px padding, ~57px) sat
   on two unrelated systems that almost-but-not-quite agreed. Both now
   pin to --qs-edge so the mark and "Order." left-align at every width.
   -------------------------------------------------------------------------- */
:root { --qs-edge: 64px; }
body.qs-body #header .container {
    padding-left: var(--qs-edge) !important;
    padding-right: var(--qs-edge) !important;
}
.qs-hero-inner {
    margin-left: 0 !important;
    padding-left: var(--qs-edge) !important;
    max-width: calc(760px + var(--qs-edge) - 15px) !important;
}
@media (max-width: 1199px) {
    :root { --qs-edge: 20px; }
}

/* --------------------------------------------------------------------------
   v1.83 — guided deploy (deploy.php / deploy-guide.tpl). One question per
   screen, big card options, terminal cards link to product pages.
   -------------------------------------------------------------------------- */
.qs-guide-wrap {
    min-height: calc(100vh - 220px);
    max-width: 1100px; margin: 0 auto;
    padding: 96px 24px 110px;
    display: flex; flex-direction: column;
}
.qs-guide-kicker {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 14px;
}
.qs-guide-title {
    font-family: var(--qs-sans); font-weight: 800 !important;
    font-size: clamp(30px, 4.4vw, 52px) !important;
    line-height: 1.05; letter-spacing: -0.02em;
    color: var(--qs-text); margin: 0 0 40px;
}
.qs-guide-step { display: none; }
.qs-guide-step.is-active { display: block; animation: qsGuideIn 0.22s ease; }
@keyframes qsGuideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-guide-step.is-active { animation: none; }
}
.qs-guide-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 760px) { .qs-guide-grid { grid-template-columns: 1fr; } }
.qs-guide-card {
    display: block; text-align: left; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 26px 28px 28px;
    text-decoration: none !important;
    transition: border-color 0.15s ease;
    font-family: var(--qs-sans);
}
.qs-guide-card:hover, .qs-guide-card:focus-visible {
    border-color: var(--qs-green); outline: none;
}
.qs-guide-card-title {
    display: block; color: var(--qs-text);
    font-size: 18px; font-weight: 700; margin-bottom: 8px;
}
.qs-guide-card-sub {
    display: block; color: var(--qs-text-3);
    font-size: 14px; line-height: 1.55;
}
.qs-guide-foot {
    margin-top: auto; padding-top: 48px;
    display: flex; align-items: center; gap: 24px;
}
.qs-guide-back {
    appearance: none; background: transparent; cursor: pointer;
    border: 1px solid var(--qs-line-strong); border-radius: var(--qs-radius);
    color: var(--qs-text-2); font-size: 13px; padding: 9px 16px;
    transition: border-color 0.15s ease;
}
.qs-guide-back:hover { border-color: var(--qs-green); color: var(--qs-text); }
.qs-guide-skip {
    display: inline-block;
    color: var(--qs-text-2) !important; font-size: 13px;
    border: 1px solid var(--qs-line-strong); border-radius: var(--qs-radius);
    padding: 9px 16px; text-decoration: none !important;
    transition: border-color 0.15s ease;
}
.qs-guide-skip:hover { border-color: var(--qs-green); color: var(--qs-text) !important; }
.qs-guide-bleed .qs-guide-skip { background: rgba(9, 10, 12, 0.75); }

/* v1.84 — guided deploy rides the auth-page hero backdrop (photo, scrim,
   LED engine all via .qs-auth-wrap / .qs-auth-flicker — quickservers.js
   attaches automatically). This modifier un-centers the auth layout for
   the guide's left-anchored frame and puts cards on glass. */
.qs-auth-wrap.qs-guide-bleed { align-items: stretch; padding: 0 20px; }
.qs-guide-bleed .qs-guide-wrap {
    position: relative; z-index: 2;
    width: 100%; min-height: 0;
    padding-top: 88px; padding-bottom: 96px;
}
.qs-guide-bleed .qs-guide-card {
    background: rgba(9, 10, 12, 0.9);
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.12);
}
.qs-guide-bleed .qs-guide-card:hover,
.qs-guide-bleed .qs-guide-card:focus-visible { border-color: var(--qs-green); }
.qs-guide-bleed .qs-guide-back { background: rgba(9, 10, 12, 0.75); }

/* v1.86 — guide composition fixes. Left-anchor the frame like the
   homepage hero (content over the dark third, racks breathe right),
   guide-tuned scrim, narrower card grid, footer pulled up under the
   cards instead of orphaned at viewport bottom. */
.qs-auth-wrap.qs-guide-bleed::before {
    background: linear-gradient(90deg,
        rgba(0,2,8,0.94) 0%,
        rgba(0,2,8,0.86) 45%,
        rgba(0,2,8,0.42) 100%);
}
.qs-guide-bleed .qs-guide-wrap {
    max-width: none;
    margin: 0;
    padding-left: var(--qs-edge);
    padding-right: 24px;
}
.qs-guide-bleed .qs-guide-grid { max-width: 900px; }
.qs-guide-bleed .qs-guide-title { max-width: 900px; }
.qs-guide-bleed .qs-guide-foot {
    margin-top: 0;
    padding-top: 44px;
    max-width: 900px;
}

/* v1.87 — desktop: guide block (kicker + question + cards + foot)
   vertically centered in the photo. <992px keeps the top-flow layout. */
@media (min-width: 992px) {
    .qs-guide-bleed .qs-guide-wrap {
        justify-content: center;
        padding-top: 48px;
        padding-bottom: 64px;
    }
}

/* v1.88 — #products anchor target for the deploy-guide skip link;
   scroll-margin keeps "Nine ways to deploy." off the viewport edge */
#products { scroll-margin-top: 28px; }

/* --------------------------------------------------------------------------
   v1.90 — network page (network.php / network-page.tpl). Hero rides the
   .qs-pp-hero photo + LED system; below: telemetry rows, routing cards,
   platform status, chips, CTA. Shared map lives in includes/network-map.tpl.
   -------------------------------------------------------------------------- */
/* v1.92 — page title header replaces the map opener (map stays on the
   homepage via includes/network-map.tpl) */
/* v1.94 — cancel #main-body's 32/56 wrapper padding (same convention
   as the heroes and the client-area shell) so the page's own section
   rhythm is authoritative: no dead band above the header or between
   the last section and the footer. */
.qs-net-head { background: var(--qs-bg); padding: 72px 0 8px; margin-top: -32px; }
/* v2.56: -56px removed — it counterweighted #main-body's old 56px bottom
   padding; after v2.17 zeroed that padding, this pulled the footer up under
   the platform-status section (clipped footer links). */
.qs-net-section.qs-net-last { margin-bottom: 0; }
/* v1.93 — last section drops its border-bottom: it doubled up with the
   footer's top rule (two hairlines) */
.qs-net-section.qs-net-last { border-bottom: 0; }
.qs-net-kicker {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-green); margin-bottom: 14px;
}
.qs-net-title {
    font-family: var(--qs-sans) !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 4vw, 44px) !important;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--qs-text) !important;
    margin: 0 0 10px;
}
.qs-net-sub { color: var(--qs-text-3); font-size: 15px; margin: 0; }

.qs-net-section { background: var(--qs-bg); border-bottom: 1px solid var(--qs-line); padding: 52px 0; }
.qs-net-label {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    color: var(--qs-text-4); margin-bottom: 16px;
}
.qs-net-led {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--qs-green); flex: 0 0 auto;
}

/* site telemetry rows */
.qs-net-row {
    display: flex; align-items: center; gap: 16px;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 16px 22px; margin-bottom: 10px;
}
.qs-net-name { color: var(--qs-text); font-weight: 700; font-size: 16px; min-width: 96px; }
.qs-net-code { font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--qs-text-4); }
.qs-net-stats { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.qs-net-stats > div { text-align: right; min-width: 66px; }
.qs-net-k {
    display: block; font-family: var(--qs-mono); font-size: 9px;
    letter-spacing: 0.1em; color: var(--qs-text-4); margin-bottom: 3px;
}
.qs-net-v { font-family: var(--qs-mono); font-size: 14px; color: var(--qs-text-2); }
.qs-net-on {
    font-family: var(--qs-mono); font-size: 10px; letter-spacing: 0.12em;
    color: var(--qs-green);
}
@media (max-width: 860px) {
    .qs-net-row { flex-wrap: wrap; }
    .qs-net-stats { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
    .qs-net-stats > div { text-align: left; }
}

/* routing & address space */
.qs-net-asnstrip {
    display: flex; gap: 22px; flex-wrap: wrap;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 14px 22px; margin-bottom: 12px;
    font-family: var(--qs-mono); font-size: 12px; color: var(--qs-text-3);
}
.qs-net-asnstrip b { color: var(--qs-green); font-weight: 700; }
.qs-net-dim { color: var(--qs-text-4); }
.qs-net-cardgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1200px) { .qs-net-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .qs-net-cardgrid { grid-template-columns: 1fr; } }
.qs-net-card {
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 20px 22px;
}
.qs-net-cardhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.qs-net-cardname { color: var(--qs-text); font-weight: 700; font-size: 15px; }
.qs-net-cardhead .qs-net-code { margin-left: auto; }
.qs-net-cardlbl { margin: 12px 0 6px; }
.qs-net-cardlbl:first-of-type { margin-top: 0; }
.qs-net-up { font-family: var(--qs-mono); font-size: 13px; color: var(--qs-text-2); padding: 2px 0; }
.qs-net-up span { color: var(--qs-text-4); }
.qs-net-pfx {
    font-family: var(--qs-mono); font-size: 13px; color: var(--qs-text);
    padding: 5px 0; border-bottom: 1px solid var(--qs-line);
}
.qs-net-pfx:last-child { border-bottom: 0; }
.qs-net-tbd { font-family: var(--qs-mono); font-size: 12px; color: var(--qs-text-4); font-style: italic; padding: 3px 0; }

/* platform status */
.qs-net-svcpanel {
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 4px 22px;
}
.qs-net-svc {
    display: flex; align-items: center; gap: 13px;
    border-bottom: 1px solid var(--qs-line); padding: 15px 0;
}
.qs-net-svc:last-child { border-bottom: 0; }
.qs-net-svcname { color: var(--qs-text); font-size: 14px; font-weight: 600; }
.qs-net-svcsub { font-family: var(--qs-mono); font-size: 11px; color: var(--qs-text-4); }
.qs-net-svc .qs-net-on { margin-left: auto; }
@media (max-width: 640px) { .qs-net-svcsub { display: none; } }


/* v2.07 — conditional Cart item at the far right of the top nav.
   Only rendered when the WHMCS session cart has items. */
.qs-cart-nav { margin-left: 6px; }
.qs-cart-count {
    display: inline-block; min-width: 17px; padding: 1px 5px; margin-left: 5px;
    border-radius: 9px; background: #3fdf9a; color: #000;
    font-family: var(--qs-mono); font-size: 10px; font-weight: 700;
    line-height: 14px; text-align: center; letter-spacing: 0;
    vertical-align: 1px;
}

/* v2.08 — Cart moved to the true right edge: rendered inside the
   absolutely-positioned .qs-nav-account slot (last item = far right).
   The in-menu li.qs-cart-nav is mobile-only, since the account slot
   is hidden at <=1199px. */
@media (min-width: 1200px) { .qs-cart-nav { display: none; } }
body.qs-body #header .qs-nav-account .qs-cart-link { white-space: nowrap; }

/* ---------------------------------------------------------------------
   v2.09 — configure-product step (cart.php?a=confproduct): finish the
   dark reskin. The a=view/checkout pages were covered in v1.29; this
   step's product-info panel, selects, and autofilled inputs were not.
--------------------------------------------------------------------- */
#order-standard_cart .product-info {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius);
    color: var(--qs-text-2);
    padding: 22px 24px;
    box-shadow: none !important;
}
#order-standard_cart .product-info .product-title {
    color: var(--qs-text) !important;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 10px;
}
#order-standard_cart .product-info p { color: var(--qs-text-3) !important; }

/* selects (billing cycle, config options): dark control + dark options */
#order-standard_cart select.form-control,
#order-standard_cart .custom-select {
    background-color: var(--qs-panel-2) !important;
    color: var(--qs-text) !important;
    border-color: var(--qs-line-strong) !important;
}
#order-standard_cart select.form-control option,
#order-standard_cart .custom-select option {
    background: var(--qs-panel-2);
    color: var(--qs-text);
}

/* Chrome/Safari autofill paints inputs lavender; force the dark base */
#order-standard_cart input.form-control:-webkit-autofill,
#order-standard_cart input.form-control:-webkit-autofill:hover,
#order-standard_cart input.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--qs-panel-2) inset !important;
    -webkit-text-fill-color: var(--qs-text) !important;
    caret-color: var(--qs-text);
}

/* v2.10 — confproduct form labels were stock dark-on-dark:
   Choose Billing Cycle / Hostname / Root Password / Name Server 1+2
   and any config-option labels. */
#order-standard_cart label,
#order-standard_cart .form-group label {
    color: var(--qs-text-2) !important;
    font-size: 13px;
}

/* v2.13 — confproduct: the outer .row lives under form#frmConfigureProduct,
   so the v1.29 .cart-body > .row margin reset never matched it. Its -15px
   Bootstrap margin (with column padding already zeroed) pulled the content
   15px left of the ORDER/Configure header. Neutralize the OUTER row only —
   inner field rows keep their balanced gutters. */
#order-standard_cart .cart-body > form > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ---------------------------------------------------------------------
   v2.14 — confproduct: left column becomes ONE panel card, mirroring
   the #frmCheckout card (Personal Information / Billing Address etc.).
   Selector chain outweighs the v1.29 padding:0 reset on the same node.
--------------------------------------------------------------------- */
#order-standard_cart .cart-body > form > .row > .secondary-cart-body {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius);
    padding: 28px 32px 32px !important;
}
@media (max-width: 700px) {
    #order-standard_cart .cart-body > form > .row > .secondary-cart-body {
        padding: 20px 18px !important;
    }
}

/* product-info now lives INSIDE the card: flatten the v2.09 card look
   into a hairline-bottomed header section */
#order-standard_cart .cart-body > form .product-info {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--qs-line) !important;
    border-radius: 0 !important;
    padding: 0 0 18px !important;
    margin: 0 0 8px !important;
    box-shadow: none !important;
}

/* section kickers inside the card — same treatment as #frmCheckout;
   chip background must match the panel or the hairline shows through */
#order-standard_cart #frmConfigureProduct .sub-heading {
    border-bottom: 1px solid var(--qs-line) !important;
    margin: 30px 0 20px;
}
#order-standard_cart #frmConfigureProduct .sub-heading span {
    background: var(--qs-panel) !important;
    color: var(--qs-text-3) !important;
    font-family: var(--qs-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    padding-right: 14px;
}

/* order summary: the name+group header line duplicated the priced line
   below it — drop the leading name, promote the group to the header */
#order-standard_cart .order-summary .product-name:has(+ .product-group) {
    display: none !important;
}
#order-standard_cart .order-summary .product-group {
    font-style: normal !important;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--qs-text);
}

/* v2.15 — confproduct right column: the summary card and Continue
   button were flush against the big form card above (stacked layout,
   and .order-summary carries margin: 0 !important from v1.29). */
#order-standard_cart .cart-body > form .secondary-cart-sidebar { margin-top: 24px !important; }
#order-standard_cart #orderSummary .text-center { margin-top: 18px; }
#order-standard_cart #btnCompleteProductConfig { padding: 12px 32px !important; }

/* v2.16 — confproduct right column: #orderSummary is a CARD on
   viewcart (v1.29) but on confproduct it wraps the summary card AND
   the Continue button — its panel background was the gray band
   between them. Strip it here only; the inner .order-summary card
   stays. Continue becomes a floating white pill on the page bg. */
#order-standard_cart .cart-body > form #orderSummary {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#order-standard_cart #btnCompleteProductConfig {
    width: auto !important;
    display: inline-block !important;
    border-radius: 999px !important;
}

/* drop the "Configure and continue to checkout." intro line — it now
   renders as the first line inside the form card and adds nothing */
#order-standard_cart .cart-body > form .secondary-cart-body > p:first-child {
    display: none !important;
}

/* v2.24 — CTA band symmetric again. v1.12's "extra top weight"
   (128px top / 96px bottom) reads as uneven now that the FAQ
   section's hairline and the footer hairline frame the band:
   128px above the line of text vs 96px below. Equal on both
   sides; applies to every product page via product-cta.tpl. */
.qs-cta-band { padding: 96px 0; }

/* v2.25 — mobile map labels. The city labels are SVG text that scales
   with the 1200-unit viewBox: at phone widths 12px becomes ~4px and is
   unreadable. Mid widths get a size bump; small widths hide the in-map
   labels and show an HTML legend under the map instead. Shared include,
   so homepage and network page both benefit. */
.qs-map-legend { display: none; }
@media (max-width: 990px) {
    .qs-node text { font-size: 18px; }
    .qs-node .qs-node-code { font-size: 14px; }
}
@media (max-width: 640px) {
    .qs-node text { display: none; }
    .qs-map-legend {
        display: flex; justify-content: center; flex-wrap: wrap;
        gap: 10px 22px; margin-top: 16px;
    }
    .qs-map-legend-item {
        display: inline-flex; align-items: center; gap: 7px;
        color: #e8eaee; font-size: 13px; font-weight: 700;
        letter-spacing: 0.05em;
    }
    .qs-map-legend-item em {
        font-style: normal; font-family: var(--qs-mono);
        font-size: 11px; font-weight: 400; color: #6f7680;
    }
    .qs-map-legend-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: #3fdf9a; flex: 0 0 auto;
    }
}

/* v2.26 — mobile header: wordmark + cursor were drifting to the
   center. Pin the brand to the left edge and the hamburger to the
   right, overriding whatever flex justification is centering the
   row at collapsed widths. */
@media (max-width: 1199px) {
    body.qs-body #header .qs-nav .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
    }
    body.qs-body #header .qs-brand { margin-right: auto !important; }
    body.qs-body #header .qs-nav-toggle { margin-left: auto; }
}

/* ---------------------------------------------------------------------
   v2.27 — Bulk IPv4 request form (bulk-ip-servers.php#ipv4-request).
   Panel card + two-column field grid in the theme's form language.
--------------------------------------------------------------------- */
.qs-ipv4-section { background: #000; padding: 88px 0 96px; }
.qs-ipv4-section .qs-map-head { text-align: center; }
.qs-ipv4-section .qs-map-sub { margin-left: auto; margin-right: auto; max-width: 720px; }
.qs-ipv4-card {
    max-width: 880px; margin: 0 auto; display: block;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); padding: 34px 36px 36px;
}
.qs-ipv4-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.qs-ipv4-field { display: flex; flex-direction: column; gap: 7px; }
.qs-ipv4-field--wide { grid-column: 1 / -1; }
.qs-ipv4-field label {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #9aa0a8; margin: 0;
}
.qs-ipv4-field input,
.qs-ipv4-field select,
.qs-ipv4-field textarea {
    background: var(--qs-panel-2); border: 1px solid var(--qs-line-strong);
    border-radius: 8px; color: var(--qs-text); font-size: 14px;
    padding: 10px 12px; width: 100%; outline: none;
}
.qs-ipv4-field input:focus,
.qs-ipv4-field select:focus,
.qs-ipv4-field textarea:focus { border-color: #3fdf9a; }
.qs-ipv4-field input::placeholder,
.qs-ipv4-field textarea::placeholder { color: var(--qs-text-4); }
.qs-ipv4-field select option { background: var(--qs-panel-2); color: var(--qs-text); }
.qs-ipv4-field textarea { resize: vertical; min-height: 120px; }
.qs-ipv4-field input:-webkit-autofill,
.qs-ipv4-field input:-webkit-autofill:hover,
.qs-ipv4-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--qs-panel-2) inset !important;
    -webkit-text-fill-color: var(--qs-text) !important;
    caret-color: var(--qs-text);
}
.qs-ipv4-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.qs-ipv4-agree {
    display: flex; align-items: flex-start; gap: 10px; margin: 26px 0 0;
    color: var(--qs-text-2); font-size: 13px; line-height: 1.5; cursor: pointer;
}
.qs-ipv4-agree input { accent-color: #3fdf9a; margin-top: 2px; cursor: pointer; }
.qs-ipv4-submit { margin-top: 26px; text-align: center; }
.qs-ipv4-errors {
    border: 1px solid #e05252; border-radius: 8px; padding: 14px 16px;
    color: #e05252; font-size: 13px; margin-bottom: 24px;
    display: flex; flex-direction: column; gap: 4px;
}
.qs-ipv4-success { text-align: center; color: var(--qs-text-2); }
.qs-ipv4-success-title { color: var(--qs-text); font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.qs-ipv4-success strong { color: var(--qs-text); }
@media (max-width: 700px) {
    .qs-ipv4-grid { grid-template-columns: 1fr; }
    .qs-ipv4-card { padding: 24px 18px; }
}

/* --------------------------------------------------------------------------
   Service detail: identity stack rhythm — v2.70
   (v2.68 horizontal band retracted; the stacked billing column stays as-is.)
   Name tight over group, breathing room before the LED, cancel link joins
   the block instead of floating below it.
   -------------------------------------------------------------------------- */
body.qs-body #main-body .product-details .product-icon h3 { margin: 0 0 12px; }
body.qs-body #main-body .product-details .product-status-text { padding: 14px 0 0; }
body.qs-body #main-body .product-details .product-actions-wrapper { margin: 18px 0 0; }
body.qs-body #main-body .product-details .product-actions-wrapper .col-12 { padding: 0; }

/* =====================================================================
   v2.77 — EasyDCIM client area reskin (ModulesGarden "Lumen" UI).
   The module renders under #layers with .lu-widget cards, and its
   mg_styles.css paints #contentarea white with a gray border. All
   light DOM -> full override, matching the Virtualizor page treatment:
   black shell, charcoal panels, hairlines, green accent.
===================================================================== */
/* kill the module's white page container */
body.qs-body #contentarea {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* base text + headings inside the module UI */
body.qs-body #layers { color: var(--qs-text-2); }
body.qs-body #layers h1, body.qs-body #layers h2, body.qs-body #layers h3,
body.qs-body #layers h4, body.qs-body #layers .lu-heading,
body.qs-body #layers .header { color: #ffffff; }
body.qs-body #layers .text-black { color: #ffffff !important; }

/* widget cards (Service Actions tiles, Server Information, everything) */
body.qs-body #layers .lu-widget {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: none !important;
}
body.qs-body #layers .lu-widget:hover { border-color: var(--qs-line-strong) !important; }
body.qs-body #layers .lu-widget__top,
body.qs-body #layers .lu-widget__header,
body.qs-body #layers .lu-widget__body,
body.qs-body #layers .lu-widget__content,
body.qs-body #layers .lu-widget__actions {
    background: transparent !important;
    border-color: var(--qs-line) !important;
}
body.qs-body #layers .lu-widget a { color: var(--qs-text); }
body.qs-body #layers .lu-widget a:hover { color: #3fdf9a; }

/* action tiles: green the icons, hairline dividers */
body.qs-body #layers .lu-widget [class*="lu-icon"],
body.qs-body #layers .lu-widget i { color: #3fdf9a; }
body.qs-body #layers .lu-widget__divider { border-color: var(--qs-line) !important; }

/* tables: Server Information + all ca*Table datatables */
body.qs-body #layers table,
body.qs-body #layers .lu-table { background: transparent !important; color: var(--qs-text-2); }
body.qs-body #layers .lu-table thead th, body.qs-body #layers table thead th {
    background: transparent !important; color: #9aa0a8;
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; border-color: var(--qs-line) !important;
}
body.qs-body #layers .lu-table tbody td, body.qs-body #layers table tbody td {
    background: transparent !important; color: var(--qs-text-2);
    border-color: var(--qs-line) !important;
}
body.qs-body #layers table tbody tr td:first-child {
    font-family: var(--qs-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: #9aa0a8;
}
body.qs-body #layers table tbody tr:hover td { background: rgba(255,255,255,0.02) !important; }

/* buttons: match site language — primary white pill, danger red, rest ghost */
body.qs-body #layers .lu-btn {
    background: transparent; border: 1px solid var(--qs-line-strong);
    color: var(--qs-text); border-radius: 8px; box-shadow: none !important;
}
body.qs-body #layers .lu-btn:hover { border-color: #3fdf9a; color: #3fdf9a; }
body.qs-body #layers .lu-btn--primary, body.qs-body #layers .lu-btn--success {
    background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important;
}
body.qs-body #layers .lu-btn--primary:hover, body.qs-body #layers .lu-btn--success:hover { opacity: 0.9; }
body.qs-body #layers .lu-btn--danger {
    background: transparent !important; color: #e05252 !important; border-color: #e05252 !important;
}

/* forms inside the module (search fields, selects, password reveal) */
body.qs-body #layers input, body.qs-body #layers select, body.qs-body #layers textarea {
    background: var(--qs-panel-2) !important; color: var(--qs-text) !important;
    border: 1px solid var(--qs-line-strong) !important; border-radius: 8px;
}
body.qs-body #layers input:focus, body.qs-body #layers select:focus { border-color: #3fdf9a !important; outline: none; }
body.qs-body #layers .password_element input,
body.qs-body #layers .password_element input:focus {
    background: transparent !important; border: 0 !important; color: var(--qs-text) !important;
}

/* dropdowns / modals / popovers rendered by the framework */
body.qs-body #layers .lu-modal__content, body.qs-body #layers .lu-dropdown,
body.qs-body #layers .lu-popover, body.qs-body #layers .lu-menu {
    background: var(--qs-panel) !important; color: var(--qs-text-2);
    border: 1px solid var(--qs-line) !important; box-shadow: none !important;
}

/* v2.78 — EasyDCIM Service Action tiles. These are .lu-tile (white bg,
   #edeff2 border, shadow — layers-ui.css:21380), a separate family from
   the .lu-widget cards v2.77 covered. Same panel treatment; hover and
   selected state go green instead of Lumen blue. */
body.qs-body #layers .lu-tile {
    background: var(--qs-panel) !important;
    border: 1px solid var(--qs-line) !important;
    border-radius: var(--qs-radius) !important;
    box-shadow: none !important;
}
body.qs-body #layers .lu-tile:hover,
body.qs-body #layers .lu-tile.lu-is-checked {
    border-color: #3fdf9a !important;
}
body.qs-body #layers .lu-tile__title {
    background: transparent !important;
    color: var(--qs-text) !important;
}
body.qs-body #layers .lu-tile:hover .lu-tile__title { color: #3fdf9a !important; }
/* icon art is drawn for light tiles — slight lift keeps the gray ones
   (BMC / Rescue) readable on the dark panel */
body.qs-body #layers .lu-tile img { filter: brightness(1.18); }

/* v2.79 — EasyDCIM section headings ("Service Actions", "Server
   Information", ...) were muted gray on black. Force full white with
   display weight; covers headings whether the module renders them as
   h-tags, .lu-heading, or widget title spans. */
body.qs-body #layers h1, body.qs-body #layers h2, body.qs-body #layers h3,
body.qs-body #layers h4, body.qs-body #layers h5,
body.qs-body #layers .lu-heading,
body.qs-body #layers .lu-widget__title,
body.qs-body #layers .lu-section__title {
    color: #ffffff !important;
}

/* v2.80 — the module's section titles ("Service Actions", "General
   Information", "Location", "Bandwidth Usage") are NOT h-tags: they use
   Lumen's .lu-h4/.lu-h5 utility classes (+ .lu-top__title in widget
   headers), which is why the previous heading selectors missed. */
body.qs-body #layers .lu-h1, body.qs-body #layers .lu-h2,
body.qs-body #layers .lu-h3, body.qs-body #layers .lu-h4,
body.qs-body #layers .lu-h5, body.qs-body #layers .lu-h6,
body.qs-body #layers .lu-top__title {
    color: #ffffff !important;
}

/* v2.82 — EasyDCIM search pills + primary buttons.
   Search inputs are .lu-form-control (--rounded pill variant) and some
   sit inside input-group/search wrappers that carry the white paint —
   cover input, variants, and the usual wrapper suspects. Primary/success
   buttons in-module go GREEN (accent) instead of white so they read as
   styled controls on the dark panels. */
body.qs-body #layers .lu-form-control,
body.qs-body #layers [class*="lu-form-control"],
body.qs-body #layers .lu-input-group,
body.qs-body #layers [class*="lu-input-group"],
body.qs-body #layers [class*="lu-search"],
body.qs-body #layers .dataTables_filter input {
    background: var(--qs-panel-2) !important;
    color: var(--qs-text) !important;
    border-color: var(--qs-line-strong) !important;
}
body.qs-body #layers .lu-input-group .lu-form-control,
body.qs-body #layers [class*="lu-input-group"] input {
    background: transparent !important;
    border: 0 !important;
}
body.qs-body #layers .lu-form-control::placeholder { color: var(--qs-text-4) !important; }
body.qs-body #layers .lu-form-control:focus { border-color: #3fdf9a !important; box-shadow: none !important; }
/* icon inside the search pill */
body.qs-body #layers [class*="lu-input-group"] i,
body.qs-body #layers [class*="lu-search"] i { color: var(--qs-text-4); }

/* primary/success actions (Add ISO Image, Add SSH Key, save buttons):
   green accent, overrides the v2.77 white treatment inside the module */
body.qs-body #layers .lu-btn--primary,
body.qs-body #layers .lu-btn--success {
    background: #3fdf9a !important;
    color: #000000 !important;
    border-color: #3fdf9a !important;
    border-radius: 8px;
}
body.qs-body #layers .lu-btn--primary:hover,
body.qs-body #layers .lu-btn--success:hover { opacity: 0.88; }

/* v2.83 — services list status colors: green active, yellow suspended,
   red cancelled/terminated. Quiet text treatment (mono uppercase),
   not bootstrap pills. */
body.qs-body span.status {
    background: transparent !important;
    font-family: var(--qs-mono); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0; box-shadow: none;
}
body.qs-body span.status.status-active { color: #3fdf9a !important; }
body.qs-body span.status.status-suspended { color: #e6c14f !important; }
body.qs-body span.status.status-cancelled,
body.qs-body span.status.status-terminated { color: #e05252 !important; }
body.qs-body span.status.status-pending { color: #9aa0a8 !important; }

/* v2.87 — reCAPTCHA treatment. The invisible-captcha badge is a fixed-
   position iframe; our transformed/filtered panels break its viewport
   anchoring, so it was floating mid-page over the hero photo. Kill the
   badge globally and show the Google-required attribution inline instead
   (rendered by includes/captcha.tpl on every captcha-enabled form). */
.grecaptcha-badge { visibility: hidden !important; }

body.qs-body .qs-captcha-note {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--qs-mono); font-size: 10.5px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--qs-text-4);
    margin: 2px 0 16px;
}
body.qs-body .qs-captcha-note a {
    color: var(--qs-text-3);
    border-bottom: 1px solid var(--qs-line-strong);
    text-decoration: none;
}
body.qs-body .qs-captcha-note a:hover {
    color: var(--qs-green);
    border-bottom-color: var(--qs-green);
}
.qs-captcha-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--qs-green-dim);
    flex: 0 0 auto;
}

/* Checkbox / image captcha variants, if ever switched on in admin —
   left-aligned in the form column, hairline-framed, no bootstrap rows */
body.qs-body .qs-captcha-block { margin: 2px 0 16px; text-align: left; }
body.qs-body .qs-captcha-block .recaptcha-container { margin: 0; }
body.qs-body .qs-captcha-image-row {
    display: flex; align-items: center; gap: 12px; margin-top: 6px;
}
body.qs-body .qs-captcha-image-row img {
    border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
}
body.qs-body .qs-captcha-image-row .qs-input { max-width: 180px; }

/* v2.88 — error pages (404/500/429). Rendered inside the standard shell. */
body.qs-body .qs-errpage {
    min-height: 55vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 80px 24px;
}
body.qs-body .qs-errpage-code {
    font-family: var(--qs-mono); font-size: 96px; font-weight: 700;
    color: var(--qs-green); letter-spacing: 0.06em; line-height: 1;
}
body.qs-body .qs-errpage-title {
    font-family: var(--qs-mono); font-size: 13px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--qs-text);
    margin: 18px 0 10px; padding-top: 16px;
    border-top: 1px solid var(--qs-line-strong);
}
body.qs-body .qs-errpage-text { color: var(--qs-text-3); font-size: 14px; line-height: 1.7; margin: 0 0 26px; }
body.qs-body .qs-errpage-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* v2.89 - email verification / validate-user banners: nexus positioning
   clipped inside the QS shell. Force normal flow, QS styling. */
body.qs-body .verification-banner {
    position: relative !important; top: 0 !important;
    height: auto !important; min-height: 0 !important;
    overflow: visible !important; margin: 0 !important;
    padding: 12px 0 !important;
    background: #0f1512 !important;
    border-bottom: 1px solid var(--qs-green-dim) !important;
}
body.qs-body .verification-banner,
body.qs-body .verification-banner p,
body.qs-body .verification-banner span { color: var(--qs-text-2) !important; }
body.qs-body .verification-banner .btn-resend-verify-email {
    background: transparent; border: 1px solid var(--qs-green);
    color: var(--qs-green); font-family: var(--qs-mono);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 7px 14px; border-radius: 6px; white-space: nowrap; width: auto;
}
body.qs-body .verification-banner .btn-resend-verify-email:hover { background: var(--qs-green); color: #000; }
body.qs-body .verification-banner .close { color: var(--qs-text-3); opacity: 1; }

/* v2.89b - qs-shell tucks up -32px and paints over the verification
   banner on shell pages. When a banner precedes the shell, don't tuck. */
body.qs-body .verification-banner { position: relative !important; z-index: 40 !important; }
body.qs-body .verification-banner + #main-body.qs-shell,
body.qs-body .verification-banner ~ #main-body.qs-shell { margin-top: 0 !important; }