/* =====================================================================
   QCoreT Cloud theme — design system (2026)
   Brand manual: azul noche #061228 · azul marino #032C6A · azul rey #013388
                 cian #62E4FF (single accent) · gris acero #5C6C84 · white
   Type: Saira (UI + display) · IBM Plex Mono (prices, numbers)
   Everything is scoped to html.qx so legacy pages are never touched.
   ===================================================================== */

html.qx {
    --qx-night: #061228;
    --qx-night-2: #0a1b38;
    --qx-night-3: #0e2547;
    --qx-navy: #032C6A;
    --qx-royal: #013388;
    --qx-royal-2: #0a46b4;
    --qx-cyan: #62E4FF;
    --qx-cyan-2: #2fc8ee;
    --qx-steel: #5C6C84;
    --qx-paper: #F4F7FB;
    --qx-paper-2: #eaf0f8;
    --qx-white: #ffffff;
    --qx-ink: #0d1b33;
    --qx-ink-2: #33435e;
    --qx-line: rgba(3, 44, 106, .11);
    --qx-line-2: rgba(3, 44, 106, .18);
    --qx-line-dark: rgba(98, 228, 255, .14);
    --qx-ok: #0f9d63;
    --qx-ok-bg: #e5f7ef;
    --qx-warn: #b86e00;
    --qx-warn-bg: #fff4e0;
    --qx-bad: #d23a4a;
    --qx-bad-bg: #fdecee;
    --qx-info: #0a6fb8;
    --qx-info-bg: #e6f3ff;

    --qx-font: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --qx-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --qx-r-sm: 10px;
    --qx-r: 14px;
    --qx-r-lg: 20px;
    --qx-r-xl: 28px;

    --qx-sh-1: 0 1px 2px rgba(6, 18, 40, .05), 0 6px 18px -6px rgba(6, 18, 40, .10);
    --qx-sh-2: 0 2px 6px rgba(6, 18, 40, .06), 0 22px 48px -18px rgba(6, 18, 40, .28);
    --qx-sh-3: 0 30px 80px -30px rgba(3, 20, 60, .55);
    --qx-glow: 0 0 0 1px rgba(98, 228, 255, .35), 0 12px 40px -12px rgba(98, 228, 255, .55);

    --qx-ease: cubic-bezier(.2, .8, .2, 1);
    --qx-ease-out: cubic-bezier(.16, 1, .3, 1);
    --qx-nav-h: 76px;

    /* Bootstrap 5.3 variables mapped to the brand */
    --bs-font-sans-serif: var(--qx-font);
    --bs-body-font-family: var(--qx-font);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--qx-ink);
    --bs-body-color-rgb: 13, 27, 51;
    --bs-body-bg: var(--qx-paper);
    --bs-emphasis-color: var(--qx-navy);
    --bs-secondary-color: var(--qx-steel);
    --bs-tertiary-bg: var(--qx-paper-2);
    --bs-primary: var(--qx-royal);
    --bs-primary-rgb: 1, 51, 136;
    --bs-primary-text-emphasis: var(--qx-navy);
    --bs-primary-bg-subtle: #e4ecfa;
    --bs-primary-border-subtle: #b9cbee;
    --bs-link-color: var(--qx-royal-2);
    --bs-link-color-rgb: 10, 70, 180;
    --bs-link-hover-color: var(--qx-navy);
    --bs-link-hover-color-rgb: 3, 44, 106;
    --bs-border-color: var(--qx-line-2);
    --bs-border-color-translucent: var(--qx-line);
    --bs-border-radius: var(--qx-r-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--qx-r);
    --bs-border-radius-xl: var(--qx-r-lg);
    --bs-focus-ring-color: rgba(98, 228, 255, .45);
    --bs-success: var(--qx-ok);
    --bs-success-rgb: 15, 157, 99;
    --bs-danger: var(--qx-bad);
    --bs-danger-rgb: 210, 58, 74;
    --bs-warning: #f0a020;
    --bs-info: var(--qx-cyan);
    --bs-info-rgb: 98, 228, 255;
    --bs-dark: var(--qx-night);
    --bs-dark-rgb: 6, 18, 40;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--qx-nav-h) + 16px);
}

/* ---------- base ---------- */
html.qx, html.qx body { max-width: 100%; overflow-x: clip; }
html.qx body {
    font-family: var(--qx-font);
    color: var(--qx-ink);
    background: var(--qx-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
html.qx ::selection { background: rgba(98, 228, 255, .45); color: var(--qx-night); }
html.qx h1, html.qx h2, html.qx h3, html.qx h4, html.qx h5, html.qx h6,
html.qx .h1, html.qx .h2, html.qx .h3, html.qx .h4, html.qx .h5, html.qx .h6 {
    font-family: var(--qx-font);
    color: var(--qx-navy);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}
html.qx a { text-underline-offset: .18em; }
html.qx :focus-visible { outline: 2px solid var(--qx-cyan); outline-offset: 2px; border-radius: 6px; }
html.qx .qx-mono, html.qx .qx-price { font-family: var(--qx-mono); font-feature-settings: "tnum" 1; letter-spacing: -.01em; }
html.qx .text-muted { color: var(--qx-steel) !important; }
html.qx .text-primary { color: var(--qx-royal) !important; }
html.qx .bg-primary { background-color: var(--qx-royal) !important; }
html.qx .qx-ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.22em; }
html.qx .qx-flip { transform: scaleX(-1); }
html.qx .qx-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; }
html.qx img { max-width: 100%; }

/* scrollbars */
html.qx * { scrollbar-width: thin; scrollbar-color: rgba(3, 44, 106, .28) transparent; }
html.qx *::-webkit-scrollbar { width: 10px; height: 10px; }
html.qx *::-webkit-scrollbar-thumb { background: rgba(3, 44, 106, .22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- typography helpers ---------- */
html.qx .qx-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--qx-royal-2); margin: 0 0 .9rem;
}
html.qx .qx-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--qx-cyan), var(--qx-royal-2)); }
html.qx .qx-eyebrow--dark { color: var(--qx-cyan); }
html.qx .qx-display {
    font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.02; font-weight: 800;
    letter-spacing: -.035em; font-variation-settings: "wdth" 96;
}
html.qx .qx-h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 1rem; }
html.qx .qx-lead { font-size: clamp(1.05rem, 1.35vw, 1.22rem); color: var(--qx-ink-2); line-height: 1.6; max-width: 46rem; }
html.qx .qx-grad {
    background: linear-gradient(100deg, #9bf0ff 0%, var(--qx-cyan) 35%, #7fb4ff 70%, #c9f6ff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: qx-shimmer 7s linear infinite;
}
html.qx .qx-grad--light {
    background: linear-gradient(100deg, var(--qx-royal-2), var(--qx-royal) 40%, #1a8fd0 80%, var(--qx-royal-2));
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: qx-shimmer 9s linear infinite;
}
@keyframes qx-shimmer { to { background-position: -220% 0; } }

/* ---------- buttons ---------- */
html.qx .btn {
    --bs-btn-font-family: var(--qx-font);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 12px;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: .6rem;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(98, 228, 255, .35);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    letter-spacing: .005em;
    transition: transform .25s var(--qx-ease), box-shadow .25s var(--qx-ease), background .25s, color .2s, border-color .2s;
    position: relative; isolation: isolate;
}
html.qx .btn .qx-ico { width: 1.1em; height: 1.1em; }
html.qx .btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .38rem; --bs-btn-font-size: .85rem; --bs-btn-border-radius: 10px; }
html.qx .btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1.04rem; --bs-btn-border-radius: 14px; }
html.qx .btn-primary, html.qx .btn-dark {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
    --bs-btn-bg: var(--qx-royal); --bs-btn-hover-bg: var(--qx-royal); --bs-btn-active-bg: var(--qx-navy);
    --bs-btn-disabled-bg: #8b9ab4; --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(135deg, #0a4fc2 0%, var(--qx-royal) 55%, var(--qx-navy) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 22px -10px rgba(1, 51, 136, .75);
    overflow: hidden;
}
html.qx .btn-dark { background-image: linear-gradient(135deg, var(--qx-night-3), var(--qx-night)); }
html.qx .btn-primary::after, html.qx .btn-cyan::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--qx-ease);
}
html.qx .btn-primary:hover, html.qx .btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 0 1px rgba(98, 228, 255, .45), 0 16px 34px -12px rgba(1, 51, 136, .8);
}
html.qx .btn-primary:hover::after, html.qx .btn-cyan:hover::after { transform: translateX(120%); }
html.qx .btn-primary:active { transform: translateY(0); }
html.qx .btn-cyan {
    color: var(--qx-night); background: var(--qx-cyan); border: 0; font-weight: 700;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 10px 34px -10px rgba(98, 228, 255, .85);
    overflow: hidden;
}
html.qx .btn-cyan:hover { color: var(--qx-night); background: #8deeff; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 16px 44px -12px rgba(98, 228, 255, .95); }
html.qx .btn-outline-primary, html.qx .btn-outline-secondary {
    --bs-btn-color: var(--qx-navy); --bs-btn-border-color: var(--qx-line-2);
    --bs-btn-hover-color: var(--qx-navy); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--qx-royal-2);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--qx-navy); --bs-btn-active-border-color: var(--qx-navy);
    background: rgba(255, 255, 255, .7);
}
html.qx .btn-outline-primary:hover, html.qx .btn-outline-secondary:hover { transform: translateY(-1px); box-shadow: var(--qx-sh-1); }
html.qx .btn-light { --bs-btn-bg: #fff; --bs-btn-color: var(--qx-navy); --bs-btn-border-color: transparent; --bs-btn-hover-bg: #eef6ff; --bs-btn-hover-color: var(--qx-navy); }
html.qx .btn-outline-light {
    --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .28);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .08); --bs-btn-hover-border-color: rgba(98, 228, 255, .7);
    backdrop-filter: blur(8px);
}
html.qx .btn-link { --bs-btn-color: var(--qx-royal-2); --bs-btn-hover-color: var(--qx-navy); text-decoration: none; }
html.qx .btn-success { --bs-btn-bg: var(--qx-ok); --bs-btn-border-color: var(--qx-ok); --bs-btn-hover-bg: #0b8654; --bs-btn-hover-border-color: #0b8654; }
html.qx .btn-warning { --bs-btn-bg: #ffd27a; --bs-btn-border-color: #ffd27a; --bs-btn-color: #4a3000; --bs-btn-hover-bg: #ffc455; --bs-btn-hover-border-color: #ffc455; }
html.qx .btn-danger { --bs-btn-bg: var(--qx-bad); --bs-btn-border-color: var(--qx-bad); }
html.qx .btn-outline-success { --bs-btn-color: var(--qx-ok); --bs-btn-border-color: rgba(15, 157, 99, .4); --bs-btn-hover-bg: var(--qx-ok); --bs-btn-hover-border-color: var(--qx-ok); --bs-btn-active-bg: var(--qx-ok); }
html.qx .btn-outline-danger { --bs-btn-color: var(--qx-bad); --bs-btn-border-color: rgba(210, 58, 74, .4); --bs-btn-hover-bg: var(--qx-bad); --bs-btn-hover-border-color: var(--qx-bad); --bs-btn-active-bg: var(--qx-bad); }

html.qx .qx-iconbtn {
    display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--qx-line); background: #fff; color: var(--qx-navy); cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}
html.qx .qx-iconbtn:hover { border-color: var(--qx-royal-2); transform: translateY(-1px); }
html.qx .qx-iconbtn .qx-ico { width: 22px; height: 22px; }

/* ---------- forms ---------- */
html.qx .form-control, html.qx .form-select, html.qx .ts-control {
    font-family: var(--qx-font);
    border: 1.5px solid #d6dfec; border-radius: 12px; background-color: #fff; color: var(--qx-ink);
    padding: .68rem .9rem; min-height: 46px; font-size: .98rem;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
html.qx .form-control-sm, html.qx .form-select-sm { min-height: 40px; padding: .48rem .75rem; font-size: .9rem; border-radius: 10px; }
html.qx .form-control:hover, html.qx .form-select:hover { border-color: #b8c7de; }
html.qx .form-control:focus, html.qx .form-select:focus {
    border-color: var(--qx-royal-2);
    box-shadow: 0 0 0 4px rgba(98, 228, 255, .28);
    outline: 0;
}
html.qx .form-control::placeholder { color: #8d9ab0; }
html.qx .form-label, html.qx .control-label, html.qx label.form-check-label { font-weight: 600; color: var(--qx-ink-2); font-size: .9rem; }
html.qx .form-label { margin-bottom: .4rem; }
html.qx .form-text { color: var(--qx-steel); font-size: .84rem; }
html.qx .form-floating > .form-control, html.qx .form-floating > .form-select { min-height: 56px; padding-top: 1.55rem; padding-bottom: .5rem; }
html.qx .form-floating > label { color: var(--qx-steel); font-weight: 500; }
html.qx .form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid #b9c6da; }
html.qx .form-check-input:checked { background-color: var(--qx-royal); border-color: var(--qx-royal); }
html.qx .form-check-input:focus { box-shadow: 0 0 0 4px rgba(98, 228, 255, .3); border-color: var(--qx-royal-2); }
html.qx .form-switch .form-check-input { width: 2.4em; }
html.qx .input-group-text { border: 1.5px solid #d6dfec; background: var(--qx-paper); color: var(--qx-steel); border-radius: 12px; font-weight: 600; }
html.qx .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.qx .input-group > .form-control:not(:last-child), html.qx .input-group > .input-group-text:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.qx .input-group > .input-group-text + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.qx .was-validated .form-control:invalid, html.qx .form-control.is-invalid { border-color: var(--qx-bad); }

/* ---------- cards / surfaces ---------- */
html.qx .card {
    --bs-card-border-color: var(--qx-line);
    --bs-card-border-radius: var(--qx-r-lg);
    --bs-card-inner-border-radius: calc(var(--qx-r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-x: 1.35rem;
    --bs-card-spacer-y: 1.2rem;
    background: #fff;
    box-shadow: var(--qx-sh-1);
}
html.qx .card-header { border-bottom: 1px solid var(--qx-line); background: transparent; padding-top: 1rem; padding-bottom: 1rem; }
html.qx .card-header h1, html.qx .card-header h2, html.qx .card-header h3, html.qx .card-header h4, html.qx .card-header h5, html.qx .card-header h6 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--qx-navy); }
html.qx .card-header h1 { font-size: 1.5rem; }
html.qx .card-footer { background: var(--qx-paper); border-top: 1px solid var(--qx-line); }
html.qx .well { background: var(--qx-paper); border: 1px solid var(--qx-line); border-radius: var(--qx-r); padding: 1.1rem; }
html.qx .list-group { --bs-list-group-border-color: var(--qx-line); --bs-list-group-action-hover-bg: var(--qx-paper); --bs-list-group-active-bg: var(--qx-royal); --bs-list-group-active-border-color: var(--qx-royal); }
html.qx .list-group-item { padding: .85rem 1.1rem; transition: background .2s; }
html.qx a.list-group-item:hover { background: var(--qx-paper); }

/* ---------- tables ---------- */
html.qx .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(3, 44, 106, .025);
    --bs-table-hover-bg: rgba(98, 228, 255, .08);
    --bs-table-border-color: var(--qx-line);
    color: var(--qx-ink);
    vertical-align: middle;
    margin-bottom: 0;
}
html.qx .table > thead > tr > th, html.qx .table > thead th {
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    color: var(--qx-steel); background: var(--qx-paper); border-bottom: 1px solid var(--qx-line-2); padding: .75rem .9rem; white-space: nowrap;
}
html.qx .table > tbody > tr > td, html.qx .table > tbody > tr > th { padding: .8rem .9rem; }
html.qx .table-bordered > :not(caption) > * > * { border-color: var(--qx-line); }
html.qx .table-responsive { border-radius: var(--qx-r); }

/* ---------- badges / alerts ---------- */
html.qx .badge { font-family: var(--qx-font); font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .38em .72em; }
html.qx .badge.bg-success, html.qx .badge.text-bg-success { background: var(--qx-ok-bg) !important; color: var(--qx-ok) !important; }
html.qx .badge.bg-warning, html.qx .badge.text-bg-warning { background: var(--qx-warn-bg) !important; color: var(--qx-warn) !important; }
html.qx .badge.bg-danger, html.qx .badge.text-bg-danger { background: var(--qx-bad-bg) !important; color: var(--qx-bad) !important; }
html.qx .badge.bg-info, html.qx .badge.text-bg-info { background: rgba(98, 228, 255, .2) !important; color: #05608a !important; }
html.qx .badge.bg-primary, html.qx .badge.text-bg-primary { background: #e4ecfa !important; color: var(--qx-royal) !important; }
html.qx .badge.bg-secondary, html.qx .badge.text-bg-secondary, html.qx .badge.bg-light { background: #eef2f8 !important; color: var(--qx-ink-2) !important; }
html.qx .badge.bg-dark { background: var(--qx-night) !important; color: var(--qx-cyan) !important; }
html.qx .alert {
    --bs-alert-border-radius: var(--qx-r);
    border: 1px solid transparent; border-left-width: 4px; padding: 1rem 1.15rem; font-size: .96rem;
}
html.qx .alert-info { background: var(--qx-info-bg); border-color: rgba(10, 111, 184, .18); border-left-color: var(--qx-info); color: #0b3d66; }
html.qx .alert-success { background: var(--qx-ok-bg); border-color: rgba(15, 157, 99, .2); border-left-color: var(--qx-ok); color: #0b4f34; }
html.qx .alert-warning { background: var(--qx-warn-bg); border-color: rgba(184, 110, 0, .2); border-left-color: #e79a20; color: #5c3a00; }
html.qx .alert-danger { background: var(--qx-bad-bg); border-color: rgba(210, 58, 74, .2); border-left-color: var(--qx-bad); color: #6e1520; }
html.qx .alert-light, html.qx .alert-secondary { background: #fff; border-color: var(--qx-line); border-left-color: var(--qx-cyan); color: var(--qx-ink); box-shadow: var(--qx-sh-1); }
html.qx .alert-link { color: inherit; font-weight: 700; }

/* ---------- dropdowns, nav, pagination, modal ---------- */
html.qx .dropdown-menu, html.qx .qx-menu {
    --bs-dropdown-border-radius: var(--qx-r);
    --bs-dropdown-border-color: var(--qx-line);
    --bs-dropdown-link-hover-bg: var(--qx-paper);
    --bs-dropdown-link-active-bg: var(--qx-royal);
    --bs-dropdown-padding-y: .45rem;
    box-shadow: var(--qx-sh-2);
    padding: .45rem;
    font-size: .94rem;
    animation: qx-pop .22s var(--qx-ease-out);
}
html.qx .dropdown-item { border-radius: 10px; padding: .55rem .75rem; display: flex; align-items: center; gap: .6rem; color: var(--qx-ink); font-weight: 500; }
html.qx .dropdown-item .qx-ico { color: var(--qx-steel); }
html.qx .dropdown-item.active, html.qx .dropdown-item:active { background: var(--qx-paper-2); color: var(--qx-navy); }
@keyframes qx-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
html.qx .qx-menu__head { padding: .6rem .75rem .7rem; display: flex; flex-direction: column; border-bottom: 1px solid var(--qx-line); margin-bottom: .35rem; }
html.qx .qx-menu__head strong { color: var(--qx-navy); }
html.qx .qx-menu__head span { color: var(--qx-steel); font-size: .84rem; }
html.qx .nav-tabs { --bs-nav-tabs-border-color: var(--qx-line); --bs-nav-tabs-link-active-color: var(--qx-navy); --bs-nav-tabs-link-active-border-color: transparent transparent var(--qx-royal); gap: .25rem; }
html.qx .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--qx-steel); font-weight: 600; padding: .7rem 1rem; }
html.qx .nav-tabs .nav-link.active { border-bottom-color: var(--qx-royal); background: transparent; color: var(--qx-navy); }
html.qx .nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--qx-ink-2); }
html.qx .nav-pills .nav-link.active { background: var(--qx-navy); color: #fff; }
html.qx .pagination { --bs-pagination-border-radius: 10px; --bs-pagination-color: var(--qx-navy); --bs-pagination-active-bg: var(--qx-royal); --bs-pagination-active-border-color: var(--qx-royal); --bs-pagination-border-color: var(--qx-line); gap: .3rem; }
html.qx .page-link { border-radius: 10px !important; font-weight: 600; }
html.qx .modal { --bs-modal-border-radius: var(--qx-r-lg); --bs-modal-border-color: transparent; }
html.qx .modal-content { box-shadow: var(--qx-sh-3); }
html.qx .modal-backdrop { --bs-backdrop-bg: #061228; --bs-backdrop-opacity: .62; }
html.qx .breadcrumb { --bs-breadcrumb-divider-color: #a6b2c6; --bs-breadcrumb-item-active-color: var(--qx-steel); font-size: .86rem; margin-bottom: 1.2rem; }
html.qx .breadcrumb a { color: var(--qx-royal-2); text-decoration: none; font-weight: 500; }
html.qx .progress { --bs-progress-bg: var(--qx-paper-2); --bs-progress-bar-bg: var(--qx-royal); border-radius: 999px; }
html.qx .toast { border-radius: var(--qx-r); border: 1px solid var(--qx-line); box-shadow: var(--qx-sh-2); }
html.qx hr { border-color: var(--qx-line-2); opacity: 1; }
html.qx .spinner-border { color: var(--qx-cyan); }
html.qx .wait { background: rgba(6, 18, 40, .35); backdrop-filter: blur(3px); position: fixed; inset: 0; z-index: 998; }

/* =====================================================================
   PUBLIC SHELL — navbar, mega menu, drawer, footer
   ===================================================================== */
html.qx .qx-nav {
    position: fixed; inset: 0 0 auto 0; z-index: 1030; height: var(--qx-nav-h);
    color: #fff; transition: background .35s var(--qx-ease), box-shadow .35s, color .3s, height .3s, backdrop-filter .3s;
}
html.qx .qx-nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 40, .55), rgba(6, 18, 40, 0)); pointer-events: none; transition: opacity .35s; }
html.qx .qx-nav__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; position: relative; }
html.qx .qx-nav__brand { display: flex; align-items: center; flex: none; position: relative; height: 46px; }
html.qx .qx-nav__logo { height: 46px; width: auto; transition: opacity .3s; }
html.qx .qx-nav__logo--light { position: absolute; left: 0; top: 0; opacity: 0; height: 40px; top: 3px; }
html.qx .qx-nav__links { display: flex; align-items: center; gap: .25rem; margin-left: .75rem; }
html.qx .qx-nav__link {
    display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, .84); font: 600 .95rem/1 var(--qx-font); text-decoration: none;
    padding: .62rem .85rem; border-radius: 10px; transition: color .2s, background .2s;
}
html.qx .qx-nav__link:hover, html.qx .qx-nav__link.is-active, html.qx .qx-has-mega.is-open > .qx-nav__link { color: #fff; background: rgba(255, 255, 255, .08); }
html.qx .qx-nav__caret { width: 16px; height: 16px; transition: transform .25s; }
html.qx .qx-has-mega.is-open .qx-nav__caret { transform: rotate(180deg); }
html.qx .qx-nav__actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
html.qx .qx-nav__cta { padding: .55rem 1rem; }
html.qx .qx-nav__burger { display: none; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }

html.qx .qx-nav.is-scrolled, html.qx body.qx-nav-solid .qx-nav {
    background: rgba(255, 255, 255, .82); backdrop-filter: saturate(170%) blur(18px); -webkit-backdrop-filter: saturate(170%) blur(18px);
    box-shadow: 0 1px 0 var(--qx-line), 0 10px 30px -22px rgba(6, 18, 40, .45); color: var(--qx-navy);
}
html.qx .qx-nav.is-scrolled { height: 66px; }
html.qx .qx-nav.is-scrolled::before, html.qx body.qx-nav-solid .qx-nav::before { opacity: 0; }
html.qx .qx-nav.is-scrolled .qx-nav__logo--dark, html.qx body.qx-nav-solid .qx-nav .qx-nav__logo--dark { opacity: 0; }
html.qx .qx-nav.is-scrolled .qx-nav__logo--light, html.qx body.qx-nav-solid .qx-nav .qx-nav__logo--light { opacity: 1; }
html.qx .qx-nav.is-scrolled .qx-nav__link, html.qx body.qx-nav-solid .qx-nav .qx-nav__link { color: var(--qx-ink-2); }
html.qx .qx-nav.is-scrolled .qx-nav__link:hover, html.qx body.qx-nav-solid .qx-nav .qx-nav__link:hover,
html.qx .qx-nav.is-scrolled .qx-has-mega.is-open > .qx-nav__link, html.qx body.qx-nav-solid .qx-has-mega.is-open > .qx-nav__link { color: var(--qx-navy); background: var(--qx-paper-2); }
html.qx .qx-nav.is-scrolled .qx-nav__burger, html.qx body.qx-nav-solid .qx-nav .qx-nav__burger { background: #fff; border-color: var(--qx-line); color: var(--qx-navy); }
html.qx .qx-nav.is-scrolled .qx-lang__btn, html.qx body.qx-nav-solid .qx-nav .qx-lang__btn { color: var(--qx-ink-2); border-color: var(--qx-line); background: #fff; }

html.qx .qx-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--qx-p, 0)); background: linear-gradient(90deg, var(--qx-cyan), var(--qx-royal-2)); opacity: .9; }

/* language */
html.qx .qx-lang__btn {
    display: inline-flex; align-items: center; gap: .35rem; border-radius: 10px; padding: .5rem .65rem; cursor: pointer;
    color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
    font: 600 .82rem/1 var(--qx-font); letter-spacing: .05em; transition: border-color .2s, background .2s;
}
html.qx .qx-lang__btn:hover { border-color: rgba(98, 228, 255, .6); }
html.qx .qx-lang .qx-ico { width: 17px; height: 17px; }
html.qx .qx-lang .fi { border-radius: 3px; width: 1.2em; }
html.qx .qx-shell-app .qx-lang__btn, html.qx .qx-auth .qx-lang__btn, html.qx .qx-public-top .qx-lang__btn { color: var(--qx-ink-2); background: #fff; border-color: var(--qx-line); }

/* mega menu */
html.qx .qx-has-mega { position: relative; }
html.qx .qx-mega {
    position: absolute; left: -120px; top: calc(100% + 14px); width: min(760px, 92vw);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--qx-line); border-radius: 22px; box-shadow: var(--qx-sh-3);
    padding: .9rem; color: var(--qx-ink);
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.985); transform-origin: 30% 0;
    transition: opacity .25s var(--qx-ease), transform .3s var(--qx-ease-out), visibility .25s;
}
html.qx .qx-mega::before { content: ""; position: absolute; inset: -16px 0 auto 0; height: 16px; }
html.qx .qx-has-mega.is-open .qx-mega { opacity: 1; visibility: visible; transform: none; }
html.qx .qx-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem; }
html.qx .qx-mega__item { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s, transform .2s; }
html.qx .qx-mega__item:hover { background: var(--qx-paper); transform: translateY(-1px); }
html.qx .qx-mega__item strong { display: block; color: var(--qx-navy); font-size: .97rem; }
html.qx .qx-mega__item span span, html.qx .qx-mega__txt > span { color: var(--qx-steel); font-size: .83rem; line-height: 1.35; }
html.qx .qx-mega__ico {
    flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    color: var(--qx-cyan); background: linear-gradient(145deg, var(--qx-night-3), var(--qx-night));
    box-shadow: inset 0 0 0 1px rgba(98, 228, 255, .22), 0 6px 14px -6px rgba(6, 18, 40, .6);
}
html.qx .qx-mega__ico .qx-ico { width: 21px; height: 21px; }
html.qx .qx-mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .6rem; padding: .85rem .9rem .3rem; border-top: 1px solid var(--qx-line); font-size: .88rem; color: var(--qx-steel); }
html.qx .qx-mega__foot a { color: var(--qx-royal-2); font-weight: 700; text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }

/* mobile drawer */
html.qx .qx-drawer { position: fixed; inset: 0; z-index: 1060; visibility: hidden; }
html.qx .qx-drawer::before { content: ""; position: absolute; inset: 0; background: rgba(6, 18, 40, .55); opacity: 0; transition: opacity .3s; backdrop-filter: blur(4px); }
html.qx .qx-drawer__panel {
    position: absolute; inset: 0 0 0 auto; width: min(400px, 92vw); background: var(--qx-night); color: #fff;
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--qx-ease-out);
    box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .6);
}
html.qx .qx-drawer.is-open { visibility: visible; }
html.qx .qx-drawer.is-open::before { opacity: 1; }
html.qx .qx-drawer.is-open .qx-drawer__panel { transform: none; }
html.qx .qx-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--qx-line-dark); }
html.qx .qx-drawer__head .qx-iconbtn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
html.qx .qx-drawer__body { overflow-y: auto; padding: .5rem 1rem 1rem; flex: 1; }
html.qx .qx-drawer__label { margin: 1rem .4rem .45rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 700; }
html.qx .qx-drawer__prod { display: flex; gap: .8rem; align-items: center; padding: .6rem .45rem; border-radius: 12px; color: #fff; text-decoration: none; }
html.qx .qx-drawer__prod:hover { background: rgba(255, 255, 255, .05); }
html.qx .qx-drawer__prod strong { display: block; font-size: .97rem; }
html.qx .qx-drawer__prod small { color: rgba(255, 255, 255, .55); }
html.qx .qx-drawer__link { display: block; padding: .7rem .45rem; color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; }
html.qx .qx-drawer__link:hover { background: rgba(255, 255, 255, .05); }
html.qx .qx-drawer__foot { padding: 1rem 1.25rem 1.4rem; display: grid; gap: .6rem; border-top: 1px solid var(--qx-line-dark); }

/* public page wrapper (non-designed public pages) */
html.qx .qx-site { min-height: 60vh; }
html.qx .qx-page { padding-top: calc(var(--qx-nav-h) + 36px); padding-bottom: 72px; background:
    radial-gradient(900px 380px at 85% -60px, rgba(98, 228, 255, .18), transparent 70%),
    radial-gradient(700px 320px at 0% 0%, rgba(1, 51, 136, .10), transparent 70%), var(--qx-paper); }
html.qx .qx-page__body { max-width: 1120px; }

/* footer */
html.qx .qx-footer { position: relative; overflow: hidden; background: var(--qx-night); color: rgba(255, 255, 255, .72); padding: 0 0 26px; isolation: isolate; }
html.qx .qx-footer__glow { position: absolute; inset: -40% -10% auto -10%; height: 520px; z-index: -1;
    background: radial-gradient(600px 260px at 20% 50%, rgba(1, 51, 136, .55), transparent 70%), radial-gradient(520px 240px at 80% 30%, rgba(98, 228, 255, .16), transparent 70%); }
html.qx .qx-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: linear-gradient(rgba(98, 228, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(98, 228, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); }
html.qx .qx-footer__cta {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
    margin: 0 0 56px; padding: 44px 48px; border-radius: 28px; transform: translateY(0);
    background: linear-gradient(120deg, rgba(1, 51, 136, .9), rgba(3, 44, 106, .75) 50%, rgba(14, 37, 71, .9));
    border: 1px solid rgba(98, 228, 255, .2); box-shadow: 0 30px 80px -40px rgba(98, 228, 255, .45);
    position: relative; overflow: hidden; top: 64px;
}
html.qx .qx-footer__cta::before { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(98, 228, 255, .25); box-shadow: 0 0 0 40px rgba(98, 228, 255, .04), 0 0 0 90px rgba(98, 228, 255, .03); }
html.qx .qx-footer__cta h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }
html.qx .qx-footer__cta p { margin: 0; color: rgba(255, 255, 255, .75); max-width: 36rem; }
html.qx .qx-footer__cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; position: relative; }
html.qx .qx-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-top: 120px; padding-bottom: 40px; border-bottom: 1px solid var(--qx-line-dark); }
html.qx .qx-footer__brand img { height: 56px; width: auto; margin-bottom: 1rem; }
html.qx .qx-footer__tagline { color: #fff; font-weight: 700; font-size: 1.1rem; margin: 0 0 .4rem; }
html.qx .qx-footer__about { font-size: .92rem; max-width: 22rem; }
html.qx .qx-footer__social { display: flex; gap: .55rem; margin-top: 1.2rem; }
html.qx .qx-footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: transform .25s var(--qx-ease), background .2s, border-color .2s, color .2s; }
html.qx .qx-footer__social a:hover { transform: translateY(-3px); color: var(--qx-cyan); border-color: rgba(98, 228, 255, .5); background: rgba(98, 228, 255, .08); }
html.qx .qx-footer__social svg { width: 19px; height: 19px; }
html.qx .qx-footer__col { display: flex; flex-direction: column; gap: .55rem; }
html.qx .qx-footer__col h3 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 .5rem; font-weight: 700; }
html.qx .qx-footer__col a, html.qx .qx-footer__contact { color: rgba(255, 255, 255, .68); text-decoration: none; font-size: .94rem; transition: color .2s, transform .2s; width: fit-content; display: inline-flex; gap: .45rem; align-items: center; }
html.qx .qx-footer__col a:hover { color: var(--qx-cyan); transform: translateX(3px); }
html.qx .qx-footer__contact .qx-ico { width: 16px; height: 16px; color: var(--qx-cyan); }
html.qx .qx-footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 22px; font-size: .86rem; color: rgba(255, 255, 255, .5); }
html.qx .qx-footer__bottom a { color: rgba(255, 255, 255, .7); text-decoration: none; }
html.qx .qx-footer__bottom a:hover { color: var(--qx-cyan); }
html.qx .qx-footer__legal { display: flex; gap: 1.25rem; }

html.qx .qx-totop {
    position: fixed; right: 22px; bottom: 22px; z-index: 1020; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    background: rgba(6, 18, 40, .82); color: var(--qx-cyan); border: 1px solid rgba(98, 228, 255, .28); backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px -12px rgba(6, 18, 40, .7); opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity .3s, transform .35s var(--qx-ease-out);
}
html.qx .qx-totop svg { width: 20px; height: 20px; }
html.qx .qx-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
html.qx .qx-totop:hover { color: #fff; }

/* =====================================================================
   APP SHELL — client area
   ===================================================================== */
html.qx .qx-app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
html.qx .qx-side {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: .5rem;
    background: radial-gradient(420px 300px at 0% 0%, rgba(1, 51, 136, .55), transparent 70%), linear-gradient(180deg, var(--qx-night) 0%, #071630 100%);
    color: rgba(255, 255, 255, .78); padding: 18px 14px; overflow-y: auto; z-index: 1040;
    border-right: 1px solid rgba(98, 228, 255, .08);
}
html.qx .qx-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(98, 228, 255, .12) 1px, transparent 1px); background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); }
html.qx .qx-side > * { position: relative; z-index: 1; }
html.qx .qx-side__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 14px; border-bottom: 1px solid var(--qx-line-dark); margin-bottom: 6px; }
html.qx .qx-side__brand img { height: 50px; width: auto; }
html.qx .qx-side__close { display: none; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
html.qx .qx-side__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
html.qx .qx-side__link {
    display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 12px; position: relative;
    color: rgba(255, 255, 255, .74); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .2s, color .2s, transform .2s;
}
html.qx .qx-side__link .qx-ico { width: 21px; height: 21px; color: rgba(98, 228, 255, .7); transition: color .2s; }
html.qx .qx-side__link:hover { background: rgba(255, 255, 255, .05); color: #fff; transform: translateX(2px); }
html.qx .qx-side__link.is-active { background: linear-gradient(90deg, rgba(98, 228, 255, .16), rgba(98, 228, 255, .03)); color: #fff; box-shadow: inset 0 0 0 1px rgba(98, 228, 255, .2); }
html.qx .qx-side__link.is-active::before { content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--qx-cyan); box-shadow: 0 0 14px var(--qx-cyan); }
html.qx .qx-side__link.is-active .qx-ico { color: var(--qx-cyan); }
html.qx .qx-side__foot { margin-top: auto; display: grid; gap: .55rem; padding-top: 1rem; }
html.qx .qx-side__balance { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1rem; border-radius: 16px; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, rgba(1, 51, 136, .85), rgba(3, 44, 106, .6)); border: 1px solid rgba(98, 228, 255, .22); }
html.qx .qx-side__balance-label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
html.qx .qx-side__balance strong { font-size: 1.3rem; color: var(--qx-cyan); }
html.qx .qx-side__note { font-size: .86rem; padding: .75rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .04); display: grid; }
html.qx .qx-side__help { display: flex; gap: .7rem; align-items: center; padding: .8rem .9rem; border-radius: 14px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .2s; }
html.qx .qx-side__help:hover { border-color: rgba(98, 228, 255, .4); }
html.qx .qx-side__help .qx-ico { color: var(--qx-cyan); width: 24px; height: 24px; }
html.qx .qx-side__help strong { display: block; font-size: .9rem; }
html.qx .qx-side__help small { color: rgba(255, 255, 255, .55); font-size: .78rem; }
html.qx .qx-side__logout { color: rgba(255, 255, 255, .55); }
html.qx .qx-side__scrim { display: none; }

html.qx .qx-main { min-width: 0; display: flex; flex-direction: column; background:
    radial-gradient(800px 300px at 100% -80px, rgba(98, 228, 255, .14), transparent 70%), var(--qx-paper); }
html.qx .qx-top {
    position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 1rem; padding: 14px 32px;
    background: rgba(244, 247, 251, .78); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--qx-line);
}
html.qx .qx-top__menu { display: none; }
html.qx .qx-top__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
html.qx .qx-top__eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--qx-steel); font-weight: 700; }
html.qx .qx-top__page { font-weight: 700; color: var(--qx-navy); font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.qx .qx-top__actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
html.qx .qx-user { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .55rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--qx-line); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
html.qx .qx-user:hover { border-color: var(--qx-royal-2); box-shadow: var(--qx-sh-1); }
html.qx .qx-user__avatar, html.qx .qx-user img { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: inline-block; }
html.qx .qx-user__name { font-weight: 600; color: var(--qx-navy); font-size: .92rem; }
html.qx .qx-user__caret { width: 16px; height: 16px; color: var(--qx-steel); }
html.qx .qx-content { padding: 28px 32px 48px; flex: 1; width: 100%; max-width: 1320px; }
html.qx .qx-app-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 18px 32px 26px; font-size: .84rem; color: var(--qx-steel); border-top: 1px solid var(--qx-line); }
html.qx .qx-app-foot__links { display: flex; gap: 1rem; }
html.qx .qx-app-foot a { color: var(--qx-steel); text-decoration: none; }
html.qx .qx-app-foot a:hover { color: var(--qx-royal-2); }

/* client pages: give the stock templates a cleaner rhythm */
html.qx .qx-shell-app .content-block > .row:first-child > [class*="col"] > .card:first-child,
html.qx .qx-shell-app .content-block > .card:first-child { margin-top: 0; }
html.qx .qx-shell-app .card { margin-bottom: 1.5rem; }
html.qx .qx-shell-app .card-header .btn { white-space: nowrap; }
html.qx .qx-shell-app .card-header h1 { font-size: 1.45rem; }
html.qx .qx-shell-app dl dt, html.qx .qx-shell-app dt { color: var(--qx-steel); }

/* =====================================================================
   AUTH (login / signup / reset)
   ===================================================================== */
html.qx body.qx-auth-page { background: #fff; }
html.qx .qx-auth { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 100vh; }
html.qx .qx-auth__brand { position: relative; overflow: hidden; background: radial-gradient(700px 500px at 20% 20%, rgba(1, 51, 136, .65), transparent 70%), radial-gradient(600px 420px at 90% 90%, rgba(98, 228, 255, .14), transparent 70%), var(--qx-night); color: #fff; }
html.qx .qx-auth__brand .qx-orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
html.qx .qx-auth__brand::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(6, 18, 40, .94) 0%, rgba(6, 18, 40, .72) 34%, rgba(6, 18, 40, 0) 62%); }
html.qx .qx-auth__brand-in { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 40px 48px; pointer-events: none; }
html.qx .qx-auth__brand-in a { pointer-events: auto; }
html.qx .qx-auth__logo img { height: 64px; width: auto; }
html.qx .qx-auth__pitch { margin-top: auto; margin-bottom: auto; padding-top: 34vh; }
html.qx .qx-auth__pitch h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; max-width: 26rem; }
html.qx .qx-auth__list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
html.qx .qx-auth__list li { display: flex; gap: .6rem; align-items: center; color: rgba(255, 255, 255, .8); }
html.qx .qx-auth__list .qx-ico { color: var(--qx-cyan); width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: rgba(98, 228, 255, .12); }
html.qx .qx-auth__foot { font-size: .82rem; color: rgba(255, 255, 255, .45); margin: 0; }
html.qx .qx-auth__main { display: flex; flex-direction: column; min-width: 0; background:
    radial-gradient(500px 300px at 100% 0%, rgba(98, 228, 255, .12), transparent 70%), #fff; }
html.qx .qx-auth__top { display: flex; justify-content: space-between; align-items: center; padding: 22px 36px; }
html.qx .qx-auth__back { color: var(--qx-steel); text-decoration: none; font-weight: 600; font-size: .92rem; display: inline-flex; gap: .4rem; align-items: center; }
html.qx .qx-auth__back:hover { color: var(--qx-royal-2); }
html.qx .qx-auth__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 36px 60px; }
html.qx .qx-auth__body > .container { max-width: 520px; padding: 0; height: auto !important; }
html.qx .qx-auth__body > .container > .row { height: auto !important; margin: 0; }
html.qx .qx-auth__body > .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; padding: 0; }
html.qx .qx-auth__body > .container > .row > [class*="col-"] > .d-flex:first-child:has(img) { display: none !important; }
html.qx .qx-auth__body .card { border: 0; box-shadow: none; background: transparent; }
html.qx .qx-auth__body .card-body { padding: 0; }
html.qx .qx-auth__body .card-body > h5:first-child, html.qx .qx-auth__body h5.text-center { text-align: left !important; margin: 0 0 1.4rem !important; font-size: 1.7rem; font-weight: 800; color: var(--qx-navy); letter-spacing: -.02em; }
html.qx .qx-form { width: 100%; max-width: 440px; }
html.qx .qx-form__title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 .4rem; }
html.qx .qx-form__sub { color: var(--qx-steel); margin: 0 0 1.8rem; }
html.qx .qx-form .form-control { min-height: 52px; }
html.qx .qx-form__pass { position: relative; }
html.qx .qx-form__eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--qx-steel); width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
html.qx .qx-form__eye:hover { background: var(--qx-paper); color: var(--qx-navy); }
html.qx .qx-form__row { display: flex; justify-content: space-between; align-items: center; margin: -.2rem 0 1.2rem; font-size: .9rem; }
html.qx .qx-form__row a { color: var(--qx-royal-2); font-weight: 600; text-decoration: none; }
html.qx .qx-form__divider { display: flex; align-items: center; gap: 1rem; color: var(--qx-steel); font-size: .85rem; margin: 1.6rem 0; }
html.qx .qx-form__divider::before, html.qx .qx-form__divider::after { content: ""; flex: 1; height: 1px; background: var(--qx-line-2); }
html.qx .qx-form__alt { text-align: center; color: var(--qx-steel); margin: 1.6rem 0 0; }
html.qx .qx-form__alt a { color: var(--qx-royal-2); font-weight: 700; text-decoration: none; }
html.qx .qx-public-top { position: fixed; top: 14px; right: 14px; z-index: 1050; }

/* =====================================================================
   MARKETING SECTIONS (theme templates)
   ===================================================================== */
html.qx .qx-dark { background: var(--qx-night); color: rgba(255, 255, 255, .76); position: relative; isolation: isolate; }
html.qx .qx-dark h1, html.qx .qx-dark h2, html.qx .qx-dark h3, html.qx .qx-dark h4 { color: #fff; }
html.qx .qx-dark .qx-lead { color: rgba(255, 255, 255, .74); }
html.qx .qx-section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
html.qx .qx-section--tight { padding: clamp(48px, 6vw, 80px) 0; }
html.qx .qx-section--paper { background: var(--qx-paper); }
html.qx .qx-section--white { background: #fff; }
html.qx .qx-head { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 56px); }
html.qx .qx-head--center { margin-inline: auto; text-align: center; }
html.qx .qx-head--center .qx-lead { margin-inline: auto; }
html.qx .qx-head--center .qx-eyebrow { justify-content: center; }

/* hero */
html.qx .qx-hero {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    background: var(--qx-night); min-height: min(940px, 100vh);
    padding: calc(var(--qx-nav-h) + clamp(40px, 7vh, 90px)) 0 clamp(60px, 9vh, 110px);
    display: flex; align-items: center;
}
html.qx .qx-hero--sub { min-height: 0; padding-bottom: clamp(56px, 7vw, 96px); }
html.qx .qx-hero__bg { position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(900px 600px at 78% 45%, rgba(1, 51, 136, .75), transparent 65%),
        radial-gradient(700px 520px at 10% 0%, rgba(3, 44, 106, .9), transparent 70%),
        radial-gradient(500px 360px at 92% 95%, rgba(98, 228, 255, .14), transparent 70%),
        var(--qx-night); }
html.qx .qx-hero__grid { position: absolute; inset: 0; z-index: -1; opacity: .55;
    background-image: linear-gradient(rgba(98, 228, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(98, 228, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px; background-position: center;
    mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 45%, #000 30%, transparent 75%);
    animation: qx-grid 28s linear infinite; }
@keyframes qx-grid { to { background-position: 56px 56px, 56px 56px; } }
html.qx .qx-hero__noise { position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
html.qx .qx-hero__inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; position: relative; }
html.qx .qx-hero__copy { position: relative; z-index: 2; min-width: 0; }
html.qx .qx-hero__inner > *, html.qx .qx-split > *, html.qx .qx-order__layout > * { min-width: 0; }
html.qx .qx-hero h1 { color: #fff; margin: 0 0 1.25rem; }
html.qx .qx-hero .qx-lead { margin-bottom: 2rem; color: rgba(255, 255, 255, .78); }
html.qx .qx-hero__ctas { display: flex; gap: .8rem; flex-wrap: wrap; }
html.qx .qx-hero__trust { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 2.2rem; color: rgba(255, 255, 255, .62); font-size: .9rem; }
html.qx .qx-hero__trust span { display: inline-flex; gap: .45rem; align-items: center; }
html.qx .qx-hero__trust .qx-ico { color: var(--qx-cyan); width: 18px; height: 18px; }
html.qx .qx-pill {
    display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .9rem .38rem .45rem; margin-bottom: 1.5rem;
    border-radius: 999px; font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .86); text-decoration: none;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(98, 228, 255, .26); backdrop-filter: blur(8px);
    transition: border-color .25s, background .25s;
}
html.qx a.qx-pill:hover { border-color: rgba(98, 228, 255, .6); background: rgba(98, 228, 255, .08); color: #fff; }
html.qx .qx-pill b { background: var(--qx-cyan); color: var(--qx-night); border-radius: 999px; padding: .12rem .55rem; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
html.qx .qx-pill .qx-ico { width: 15px; height: 15px; }

/* 3D stage */
html.qx .qx-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; margin-left: auto; }
html.qx .qx-stage canvas { position: absolute; inset: -8%; width: 116%; height: 116%; }
html.qx .qx-stage__core {
    position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3;
    border-radius: 24%; display: grid; place-items: center;
    background: linear-gradient(150deg, #0e2a57, #061228 70%);
    box-shadow: 0 0 0 1px rgba(98, 228, 255, .55), 0 0 40px rgba(98, 228, 255, .35), 0 0 120px rgba(1, 51, 136, .9), inset 0 0 26px rgba(98, 228, 255, .25);
    animation: qx-core 5.5s ease-in-out infinite;
}
html.qx .qx-stage__core::before { content: ""; position: absolute; inset: -14%; border-radius: 30%;
    background: repeating-linear-gradient(90deg, rgba(98, 228, 255, .6) 0 3px, transparent 3px 11px) top / 70% 6% no-repeat,
                repeating-linear-gradient(90deg, rgba(98, 228, 255, .6) 0 3px, transparent 3px 11px) bottom / 70% 6% no-repeat,
                repeating-linear-gradient(0deg, rgba(98, 228, 255, .6) 0 3px, transparent 3px 11px) left / 6% 70% no-repeat,
                repeating-linear-gradient(0deg, rgba(98, 228, 255, .6) 0 3px, transparent 3px 11px) right / 6% 70% no-repeat; opacity: .8; }
html.qx .qx-stage__core img { width: 62%; height: auto; filter: drop-shadow(0 0 12px rgba(98, 228, 255, .65)); }
@keyframes qx-core { 0%, 100% { box-shadow: 0 0 0 1px rgba(98, 228, 255, .55), 0 0 40px rgba(98, 228, 255, .35), 0 0 120px rgba(1, 51, 136, .9), inset 0 0 26px rgba(98, 228, 255, .25); }
    50% { box-shadow: 0 0 0 1px rgba(98, 228, 255, .8), 0 0 64px rgba(98, 228, 255, .55), 0 0 160px rgba(1, 51, 136, 1), inset 0 0 34px rgba(98, 228, 255, .4); } }
html.qx .qx-stage__chip {
    position: absolute; left: 0; top: 0; z-index: 4; pointer-events: auto; will-change: transform, opacity;
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem .45rem .45rem; border-radius: 14px; white-space: nowrap;
    color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none;
    background: rgba(10, 27, 56, .72); border: 1px solid rgba(98, 228, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
    transition: border-color .2s, background .2s;
}
html.qx .qx-stage__chip:hover { color: #fff; border-color: var(--qx-cyan); background: rgba(14, 37, 71, .92); }
html.qx .qx-stage__chip i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--qx-cyan); background: rgba(98, 228, 255, .1); }
html.qx .qx-stage__chip i .qx-ico { width: 18px; height: 18px; }
html.qx .qx-stage--fallback canvas { display: none; }

/* marquee */
html.qx .qx-marquee { position: relative; overflow: hidden; border-block: 1px solid var(--qx-line-dark); background: #071731; padding: 18px 0; }
html.qx .qx-marquee__track { display: flex; gap: 3rem; width: max-content; animation: qx-marquee 38s linear infinite; }
html.qx .qx-marquee:hover .qx-marquee__track { animation-play-state: paused; }
html.qx .qx-marquee span { display: inline-flex; align-items: center; gap: .7rem; color: rgba(255, 255, 255, .7); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
html.qx .qx-marquee span .qx-ico { color: var(--qx-cyan); }
html.qx .qx-marquee::before, html.qx .qx-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; }
html.qx .qx-marquee::before { left: 0; background: linear-gradient(90deg, #071731, transparent); }
html.qx .qx-marquee::after { right: 0; background: linear-gradient(-90deg, #071731, transparent); }
@keyframes qx-marquee { to { transform: translateX(-50%); } }

/* bento product grid */
html.qx .qx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
html.qx .qx-tile {
    --mx: 50%; --my: 50%;
    grid-column: span 4; position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: .6rem; min-height: 248px; padding: 26px;
    border-radius: 24px; background: #fff; border: 1px solid var(--qx-line);
    color: var(--qx-ink); text-decoration: none;
    box-shadow: var(--qx-sh-1);
    transition: transform .45s var(--qx-ease-out), box-shadow .45s var(--qx-ease-out), border-color .3s;
    transform-style: preserve-3d;
}
html.qx .qx-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(98, 228, 255, .16), transparent 45%); }
html.qx .qx-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; opacity: 0; transition: opacity .35s;
    background: radial-gradient(300px circle at var(--mx) var(--my), rgba(98, 228, 255, .9), rgba(1, 51, 136, .2) 45%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html.qx .qx-tile:hover { transform: translateY(-6px); box-shadow: var(--qx-sh-2); border-color: transparent; color: var(--qx-ink); }
html.qx .qx-tile:hover::before, html.qx .qx-tile:hover::after { opacity: 1; }
html.qx .qx-tile--wide { grid-column: span 8; }
@media (min-width: 992px) { html.qx .qx-tile--wide:has(.qx-mock) .qx-tile__line, html.qx .qx-tile--wide:has(.qx-mock) h3 { max-width: 52%; } }
html.qx .qx-tile__big { position: absolute; right: -26px; bottom: -34px; width: 170px; height: 170px; color: var(--qx-royal); opacity: .055; z-index: -1; transform: rotate(-10deg); transition: transform .7s var(--qx-ease-out), opacity .4s; pointer-events: none; }
html.qx .qx-tile__big .qx-ico { width: 100%; height: 100%; stroke-width: 1.2; }
html.qx .qx-tile--dark .qx-tile__big { color: var(--qx-cyan); opacity: .08; }
html.qx .qx-tile:hover .qx-tile__big { transform: rotate(-4deg) translate(-10px, -10px) scale(1.06); opacity: .1; }
html.qx .qx-tile--wide:has(.qx-mock) .qx-tile__big { display: none; }
html.qx .qx-tile--half { grid-column: span 6; }
html.qx .qx-tile--tall { grid-row: span 2; }
html.qx .qx-tile--dark { background: linear-gradient(160deg, var(--qx-night-3), var(--qx-night) 70%); color: rgba(255, 255, 255, .78); border-color: rgba(98, 228, 255, .14); }
html.qx .qx-tile--dark:hover { color: rgba(255, 255, 255, .78); }
html.qx .qx-tile--dark h3 { color: #fff; }
html.qx .qx-tile--dark .qx-tile__line { color: rgba(255, 255, 255, .66); }
html.qx .qx-tile__ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: var(--qx-cyan);
    background: linear-gradient(145deg, var(--qx-night-3), var(--qx-night)); box-shadow: inset 0 0 0 1px rgba(98, 228, 255, .28), 0 10px 20px -10px rgba(6, 18, 40, .7);
    transition: transform .45s var(--qx-ease-out); }
html.qx .qx-tile:hover .qx-tile__ico { transform: translateZ(30px) rotate(-6deg) scale(1.06); }
html.qx .qx-tile__ico .qx-ico { width: 26px; height: 26px; }
html.qx .qx-tile__kicker { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--qx-royal-2); margin-top: .4rem; }
html.qx .qx-tile--dark .qx-tile__kicker { color: var(--qx-cyan); }
html.qx .qx-tile h3 { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
html.qx .qx-tile__line { margin: 0; color: var(--qx-ink-2); font-size: .98rem; max-width: 34rem; }
html.qx .qx-tile__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
html.qx .qx-tile__price { font-size: .86rem; color: var(--qx-steel); }
html.qx .qx-tile__price b { font-family: var(--qx-mono); font-size: 1.2rem; color: var(--qx-navy); font-weight: 600; margin-left: .2rem; }
html.qx .qx-tile--dark .qx-tile__price { color: rgba(255, 255, 255, .55); }
html.qx .qx-tile--dark .qx-tile__price b { color: var(--qx-cyan); }
html.qx .qx-tile__go { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--qx-line-2); color: var(--qx-navy); transition: background .3s, color .3s, transform .45s var(--qx-ease-out), border-color .3s; }
html.qx .qx-tile:hover .qx-tile__go { background: var(--qx-royal); color: #fff; border-color: var(--qx-royal); transform: translateX(4px); }
html.qx .qx-tile--dark .qx-tile__go { border-color: rgba(98, 228, 255, .3); color: var(--qx-cyan); }
html.qx .qx-tile--dark:hover .qx-tile__go { background: var(--qx-cyan); color: var(--qx-night); border-color: var(--qx-cyan); }
html.qx .qx-tile__art { position: absolute; right: -10px; bottom: -10px; width: 52%; max-width: 360px; pointer-events: none; z-index: -1; opacity: .95; transition: transform .6s var(--qx-ease-out); }
html.qx .qx-tile:hover .qx-tile__art { transform: translate(-6px, -6px) scale(1.02); }

/* mini mock-ups drawn with CSS (no images) */
html.qx .qx-mock { position: absolute; right: 28px; top: 28px; width: 42%; max-width: 380px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--qx-line);
    box-shadow: 0 30px 60px -30px rgba(6, 18, 40, .55); transform: perspective(900px) rotateY(-14deg) rotateX(6deg); transition: transform .7s var(--qx-ease-out); z-index: -1; }
html.qx .qx-tile:hover .qx-mock { transform: perspective(900px) rotateY(-6deg) rotateX(2deg) translateY(-6px); }
html.qx .qx-mock__bar { height: 26px; background: var(--qx-paper); display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--qx-line); }
html.qx .qx-mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd8e6; }
html.qx .qx-mock__hero { display: block; height: 92px; background: linear-gradient(120deg, var(--qx-navy), var(--qx-royal) 60%, #1a8fd0); position: relative; }
html.qx .qx-mock__hero::before { content: ""; position: absolute; left: 14px; top: 22px; width: 52%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .9); box-shadow: 0 20px 0 -3px rgba(255, 255, 255, .45); }
html.qx .qx-mock__hero::after { content: ""; position: absolute; left: 14px; bottom: 16px; width: 70px; height: 18px; border-radius: 6px; background: var(--qx-cyan); }
html.qx .qx-mock__rows { padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html.qx .qx-mock__rows i { height: 46px; border-radius: 8px; background: var(--qx-paper-2); }
html.qx .qx-mock__ai { position: absolute; left: 12px; top: 12px; display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: var(--qx-night); background: var(--qx-cyan); box-shadow: 0 6px 16px -6px rgba(98, 228, 255, .9); animation: qx-bob 3.6s ease-in-out infinite; }
@keyframes qx-bob { 50% { transform: translateY(-5px); } }

/* steps */
html.qx .qx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; counter-reset: qxstep; }
html.qx .qx-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 38px; height: 2px; background: linear-gradient(90deg, transparent, var(--qx-line-2) 10%, var(--qx-line-2) 90%, transparent); }
html.qx .qx-steps::after { content: ""; position: absolute; left: 8%; right: 8%; top: 38px; height: 2px; background: linear-gradient(90deg, var(--qx-cyan), var(--qx-royal-2)); transform-origin: 0 50%; transform: scaleX(var(--qx-steps, 0)); transition: transform 1.6s var(--qx-ease-out); }
html.qx .qx-step { position: relative; z-index: 1; text-align: center; padding: 0 12px; }
html.qx .qx-step__n { counter-increment: qxstep; width: 78px; height: 78px; margin: 0 auto 1.2rem; border-radius: 24px; display: grid; place-items: center; position: relative;
    background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-sh-1); color: var(--qx-royal); }
html.qx .qx-step__n .qx-ico { width: 30px; height: 30px; }
html.qx .qx-step__n::after { content: counter(qxstep); position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font: 700 .8rem/1 var(--qx-mono); background: var(--qx-night); color: var(--qx-cyan); box-shadow: 0 0 0 3px #fff; }
html.qx .qx-step h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 .4rem; }
html.qx .qx-step p { color: var(--qx-ink-2); margin: 0 auto; max-width: 18rem; font-size: .96rem; }

/* feature list / split */
html.qx .qx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
html.qx .qx-feats { display: grid; gap: 14px; margin-top: 1.6rem; }
html.qx .qx-feat { display: flex; gap: 1rem; align-items: flex-start; padding: 14px 16px; border-radius: 16px; transition: background .3s, transform .3s var(--qx-ease); }
html.qx .qx-feat:hover { background: #fff; transform: translateX(4px); box-shadow: var(--qx-sh-1); }
html.qx .qx-dark .qx-feat:hover { background: rgba(255, 255, 255, .04); box-shadow: none; }
html.qx .qx-feat__ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--qx-royal); background: #e4ecfa; }
html.qx .qx-dark .qx-feat__ico { color: var(--qx-cyan); background: rgba(98, 228, 255, .1); }
html.qx .qx-feat__ico .qx-ico { width: 22px; height: 22px; }
html.qx .qx-feat h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .2rem; }
html.qx .qx-feat p { margin: 0; color: var(--qx-ink-2); font-size: .95rem; }
html.qx .qx-dark .qx-feat p { color: rgba(255, 255, 255, .66); }

/* panel mock (client area preview) */
html.qx .qx-panel { position: relative; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(98, 228, 255, .2);
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04); transform: perspective(1400px) rotateY(-10deg) rotateX(5deg);
    transition: transform .9s var(--qx-ease-out); }
html.qx .qx-panel:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }
html.qx .qx-panel__top { height: 38px; background: var(--qx-paper); border-bottom: 1px solid var(--qx-line); display: flex; align-items: center; gap: 6px; padding: 0 14px; }
html.qx .qx-panel__top i { width: 10px; height: 10px; border-radius: 50%; background: #d3dbe8; }
html.qx .qx-panel__body { display: grid; grid-template-columns: 30% 1fr; min-height: 320px; }
html.qx .qx-panel__side { background: var(--qx-night); padding: 16px 12px; display: grid; align-content: start; gap: 8px; }
html.qx .qx-panel__side i { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
html.qx .qx-panel__side i:nth-child(2) { background: rgba(98, 228, 255, .5); width: 80%; }
html.qx .qx-panel__main { padding: 18px; display: grid; gap: 12px; align-content: start; background: var(--qx-paper); }
html.qx .qx-panel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
html.qx .qx-panel__kpis div { background: #fff; border-radius: 12px; padding: 12px; border: 1px solid var(--qx-line); }
html.qx .qx-panel__kpis b { display: block; font: 600 1.1rem/1 var(--qx-mono); color: var(--qx-navy); margin-top: 6px; }
html.qx .qx-panel__kpis small { color: var(--qx-steel); font-size: .7rem; }
html.qx .qx-panel__list { background: #fff; border-radius: 12px; border: 1px solid var(--qx-line); padding: 6px 12px; }
html.qx .qx-panel__list div { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--qx-line); font-size: .8rem; color: var(--qx-ink-2); }
html.qx .qx-panel__list div:last-child { border-bottom: 0; }
html.qx .qx-panel__list em { font-style: normal; font-size: .68rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--qx-ok-bg); color: var(--qx-ok); }
html.qx .qx-panel__float { position: absolute; padding: .7rem .9rem; border-radius: 14px; background: rgba(255, 255, 255, .96); color: var(--qx-ink); font-size: .82rem; font-weight: 600;
    box-shadow: 0 20px 40px -18px rgba(6, 18, 40, .6); border: 1px solid var(--qx-line); display: flex; gap: .5rem; align-items: center; animation: qx-bob 4.2s ease-in-out infinite; }
html.qx .qx-panel__float .qx-ico { color: var(--qx-ok); }
html.qx .qx-panel-wrap { position: relative; padding: 30px 0; }
html.qx .qx-panel-wrap .qx-panel__float--a { left: -24px; top: 20%; }
html.qx .qx-panel-wrap .qx-panel__float--b { right: -16px; bottom: 12%; animation-delay: -2s; }

/* value cards */
html.qx .qx-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
html.qx .qx-vcard { padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .03); border: 1px solid var(--qx-line-dark); transition: transform .4s var(--qx-ease-out), border-color .3s, background .3s; }
html.qx .qx-vcard:hover { transform: translateY(-5px); border-color: rgba(98, 228, 255, .4); background: rgba(98, 228, 255, .04); }
html.qx .qx-vcard .qx-feat__ico { margin-bottom: 1rem; }
html.qx .qx-vcard h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
html.qx .qx-vcard p { margin: 0; color: rgba(255, 255, 255, .66); font-size: .95rem; }
html.qx .qx-section--paper .qx-vcard, html.qx .qx-section--white .qx-vcard { background: #fff; border-color: var(--qx-line); box-shadow: var(--qx-sh-1); }
html.qx .qx-section--paper .qx-vcard p, html.qx .qx-section--white .qx-vcard p { color: var(--qx-ink-2); }

/* plans / pricing */
html.qx .qx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
html.qx .qx-plan {
    position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 26px 24px; border-radius: 24px; text-decoration: none; color: var(--qx-ink);
    background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-sh-1); overflow: hidden; isolation: isolate;
    transition: transform .45s var(--qx-ease-out), box-shadow .45s var(--qx-ease-out), border-color .3s;
}
html.qx .qx-plan:hover { transform: translateY(-6px); box-shadow: var(--qx-sh-2); border-color: rgba(10, 70, 180, .35); color: var(--qx-ink); }
html.qx .qx-plan--featured { background: linear-gradient(165deg, var(--qx-night-3), var(--qx-night) 75%); color: rgba(255, 255, 255, .78); border-color: rgba(98, 228, 255, .35); box-shadow: 0 30px 70px -36px rgba(1, 51, 136, .9); }
html.qx .qx-plan--featured:hover { color: rgba(255, 255, 255, .78); border-color: var(--qx-cyan); }
html.qx .qx-plan--featured::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(98, 228, 255, .22), transparent 65%); z-index: -1; }
html.qx .qx-plan__badge { position: absolute; top: 18px; right: 18px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 999px; background: var(--qx-cyan); color: var(--qx-night); }
html.qx .qx-plan__name { font-size: 1.25rem; font-weight: 800; color: var(--qx-navy); margin: 0; padding-right: 5.5rem; line-height: 1.2; }
html.qx .qx-plan--featured .qx-plan__name { color: #fff; }
html.qx .qx-plan__note { font-size: .93rem; color: var(--qx-ink-2); margin: 0; }
html.qx .qx-plan--featured .qx-plan__note { color: rgba(255, 255, 255, .7); }
html.qx .qx-plan__price { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--qx-line-2); display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
html.qx .qx-plan--featured .qx-plan__price { border-top-color: rgba(98, 228, 255, .25); }
html.qx .qx-plan__price small { color: var(--qx-steel); font-size: .82rem; }
html.qx .qx-plan--featured .qx-plan__price small { color: rgba(255, 255, 255, .5); }
html.qx .qx-plan__price b { font: 600 2rem/1 var(--qx-mono); color: var(--qx-navy); letter-spacing: -.03em; }
html.qx .qx-plan--featured .qx-plan__price b { color: var(--qx-cyan); }
html.qx .qx-plan__cta { margin-top: .6rem; display: inline-flex; justify-content: center; align-items: center; gap: .45rem; padding: .7rem 1rem; border-radius: 12px; font-weight: 700; color: var(--qx-navy); background: var(--qx-paper); border: 1px solid var(--qx-line); transition: background .3s, color .3s, border-color .3s; }
html.qx .qx-plan:hover .qx-plan__cta { background: var(--qx-royal); color: #fff; border-color: var(--qx-royal); }
html.qx .qx-plan--featured .qx-plan__cta { background: var(--qx-cyan); color: var(--qx-night); border-color: transparent; }
html.qx .qx-plan--featured:hover .qx-plan__cta { background: #8deeff; color: var(--qx-night); }

/* faq */
html.qx .qx-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
html.qx .qx-faq details { border-radius: 18px; background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-sh-1); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
html.qx .qx-faq details[open] { border-color: rgba(10, 70, 180, .3); box-shadow: var(--qx-sh-2); }
html.qx .qx-faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; color: var(--qx-navy); display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 1.04rem; }
html.qx .qx-faq summary::-webkit-details-marker { display: none; }
html.qx .qx-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--qx-paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032C6A' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>") center/16px no-repeat; transition: transform .35s var(--qx-ease), background-color .3s; }
html.qx .qx-faq details[open] summary::after { transform: rotate(45deg); background-color: #e4ecfa; }
html.qx .qx-faq details p { padding: 0 24px 22px; margin: 0; color: var(--qx-ink-2); }

/* category page hero visual */
html.qx .qx-cat-visual { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.08; margin-left: auto; }
html.qx .qx-cat-visual canvas { position: absolute; inset: -6%; width: 112%; height: 112%; }
html.qx .qx-cat-visual__ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1; border-radius: 28%; display: grid; place-items: center;
    background: linear-gradient(150deg, #0e2a57, #061228 70%); color: var(--qx-cyan); z-index: 2;
    box-shadow: 0 0 0 1px rgba(98, 228, 255, .5), 0 0 50px rgba(98, 228, 255, .35), 0 0 140px rgba(1, 51, 136, .9); animation: qx-core 5.5s ease-in-out infinite; }
html.qx .qx-cat-visual__ico .qx-ico { width: 46%; height: 46%; stroke-width: 1.4; filter: drop-shadow(0 0 10px rgba(98, 228, 255, .7)); }
html.qx .qx-crumbs { display: flex; gap: .5rem; align-items: center; color: rgba(255, 255, 255, .55); font-size: .88rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
html.qx .qx-crumbs a { color: rgba(255, 255, 255, .7); text-decoration: none; }
html.qx .qx-crumbs a:hover { color: var(--qx-cyan); }
html.qx .qx-crumbs .qx-ico { width: 14px; height: 14px; }

/* products index cards */
html.qx .qx-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* =====================================================================
   ORDER WIZARD (Orderbutton accordion → stepper). Markup and JS unchanged.
   ===================================================================== */
html.qx .qx-order { padding-top: calc(var(--qx-nav-h) + 30px); padding-bottom: 80px; background:
    radial-gradient(1000px 420px at 100% -100px, rgba(98, 228, 255, .16), transparent 70%),
    radial-gradient(700px 340px at -10% 0%, rgba(1, 51, 136, .12), transparent 70%), var(--qx-paper); min-height: 70vh; }
html.qx .qx-order__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 28px; }
html.qx .qx-order__head h1 { margin: 0; font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; }
html.qx .qx-order__head p { margin: .4rem 0 0; color: var(--qx-ink-2); max-width: 40rem; }
html.qx .qx-order__cur .form-select, html.qx .qx-order__cur select { min-width: 150px; }
html.qx .qx-order__cur .mt-2 { margin-top: 0 !important; display: flex; align-items: center; gap: .5rem; color: var(--qx-steel); font-size: .9rem; }
html.qx .qx-order__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
html.qx .qx-order__aside { position: sticky; top: calc(var(--qx-nav-h) + 20px); display: grid; gap: 14px; }
html.qx .qx-order__help { border-radius: 20px; padding: 22px; background: linear-gradient(160deg, var(--qx-night-3), var(--qx-night)); color: rgba(255, 255, 255, .75); position: relative; overflow: hidden; }
html.qx .qx-order__help h3 { color: #fff; font-size: 1.08rem; margin: .8rem 0 .4rem; }
html.qx .qx-order__help p { font-size: .9rem; margin: 0 0 1rem; }
html.qx .qx-order__trust { border-radius: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--qx-line); display: grid; gap: .75rem; font-size: .9rem; color: var(--qx-ink-2); box-shadow: var(--qx-sh-1); }
html.qx .qx-order__trust span { display: flex; gap: .6rem; align-items: center; }
html.qx .qx-order__trust .qx-ico { color: var(--qx-ok); flex: none; }

html.qx .qx-stepper { display: flex; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: qxs; overflow-x: auto; }
html.qx .qx-stepper li { cursor: pointer; counter-increment: qxs; flex: 1 1 0; min-width: 120px; display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-radius: 14px; background: #fff; border: 1px solid var(--qx-line); color: var(--qx-steel); font-weight: 600; font-size: .86rem; transition: all .35s var(--qx-ease); white-space: nowrap; }
html.qx .qx-stepper li::before { content: counter(qxs); flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font: 700 .78rem/1 var(--qx-mono); background: var(--qx-paper-2); color: var(--qx-steel); transition: all .35s var(--qx-ease); }
html.qx .qx-stepper li.is-done { color: var(--qx-ink-2); }
html.qx .qx-stepper li.is-done::before { content: "✓"; background: var(--qx-ok-bg); color: var(--qx-ok); }
html.qx .qx-stepper li.is-active { color: var(--qx-navy); border-color: rgba(10, 70, 180, .35); box-shadow: 0 10px 26px -16px rgba(1, 51, 136, .6); }
html.qx .qx-stepper li.is-active::before { background: var(--qx-royal); color: #fff; box-shadow: 0 0 0 4px rgba(98, 228, 255, .28); }

html.qx #orderbutton.card { border: 0; background: transparent; box-shadow: none; }
html.qx #orderbutton > .card-body { padding: 0 !important; }
html.qx #orderManager.accordion { --bs-accordion-border-color: transparent; --bs-accordion-bg: transparent; display: grid; gap: 14px; }
html.qx #orderManager > .accordion-item {
    border: 1px solid var(--qx-line) !important; border-radius: 22px !important; overflow: hidden; background: #fff; box-shadow: var(--qx-sh-1);
    transition: box-shadow .4s var(--qx-ease-out), border-color .3s, opacity .3s;
}
html.qx #orderManager > .accordion-item:has(> .accordion-collapse.show), html.qx #orderManager > .accordion-item:has(> .accordion-collapse.collapsing) { border-color: rgba(10, 70, 180, .3) !important; box-shadow: var(--qx-sh-2); }
html.qx #orderManager > .accordion-item:not(:has(> .accordion-collapse.show)) { opacity: .88; }
html.qx #orderManager .accordion-header { margin: 0; }
html.qx #orderManager .accordion-button {
    font: 700 1.05rem/1.2 var(--qx-font); color: var(--qx-navy); background: #fff; padding: 1.1rem 1.35rem; gap: .5rem; box-shadow: none !important;
}
html.qx #orderManager .accordion-button:not(.collapsed) { background: linear-gradient(90deg, rgba(98, 228, 255, .12), transparent 60%); color: var(--qx-navy); }
html.qx #orderManager .accordion-button .svg-icon { width: 34px; height: 34px; padding: 7px; border-radius: 11px; fill: var(--qx-cyan); background: linear-gradient(145deg, var(--qx-night-3), var(--qx-night)); flex: none; margin-right: .6rem !important; box-shadow: inset 0 0 0 1px rgba(98, 228, 255, .25); }
html.qx #orderManager .accordion-button::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032C6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-size: 18px; width: 30px; height: 30px; border-radius: 10px; background-color: var(--qx-paper); background-position: center; }
html.qx #orderManager .accordion-button .badge { margin-left: .5rem; }
html.qx #orderManager .accordion-body { padding: .4rem 1.35rem 1.5rem; }
html.qx #orderManager .accordion-collapse { border-top: 1px solid var(--qx-line); }

/* product chooser cards (inline styles in the module are overridden here) */
html.qx #orderManager .accordion-body > .row.row-cols-1 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0; }
html.qx #orderManager .accordion-body > .row.row-cols-1 > .col { width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
html.qx #orderManager .qcoret-cat-card .cat-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.qx #orderManager .qcoret-plan-card .plan-subtitle, html.qx #orderManager .qcoret-plan-card .plan-desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
html.qx #orderManager .accordion-body > .text-muted.mb-3 { font-size: .95rem; margin-top: .6rem; }
html.qx #orderManager .qcoret-cat-card { border-radius: 20px !important; border: 1px solid var(--qx-line) !important; box-shadow: var(--qx-sh-1) !important; transition: transform .4s var(--qx-ease-out), box-shadow .4s var(--qx-ease-out), border-color .3s !important; background: #fff; }
html.qx #orderManager .qcoret-cat-card:hover { transform: translateY(-5px) !important; box-shadow: var(--qx-sh-2) !important; border-color: rgba(10, 70, 180, .3) !important; }
html.qx #orderManager .qcoret-cat-card .cat-head { background: linear-gradient(145deg, var(--qx-night-3), var(--qx-night)) !important; padding: 1.1rem 1.2rem !important; position: relative; overflow: hidden; }
html.qx #orderManager .qcoret-cat-card .cat-head::after { content: ""; position: absolute; right: -40px; top: -60px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(98, 228, 255, .25); }
html.qx #orderManager .qcoret-cat-card .cat-title { font-weight: 800 !important; font-size: 1.2rem !important; }
html.qx #orderManager .qcoret-cat-card .badge { background: rgba(98, 228, 255, .16) !important; color: var(--qx-cyan) !important; }
html.qx #orderManager .qcoret-cat-card .cat-desc { color: var(--qx-ink-2) !important; font-size: .92rem !important; }
html.qx #orderManager .qcoret-cat-card .cat-cta { color: var(--qx-royal-2) !important; font-weight: 700 !important; }
html.qx #orderManager .qcoret-plan-card { border-radius: 20px !important; border: 1px solid var(--qx-line) !important; box-shadow: var(--qx-sh-1) !important; transition: transform .4s var(--qx-ease-out), box-shadow .4s var(--qx-ease-out), border-color .3s !important; }
html.qx #orderManager .qcoret-plan-card:hover { transform: translateY(-5px) !important; box-shadow: var(--qx-sh-2) !important; border-color: rgba(10, 70, 180, .3) !important; }
html.qx #orderManager .qcoret-plan-card .plan-top { background: linear-gradient(145deg, var(--qx-night-3), var(--qx-night)) !important; padding: 1rem 1.1rem !important; }
html.qx #orderManager .qcoret-plan-card .plan-vcpu { font-weight: 800 !important; }
html.qx #orderManager .qcoret-plan-card .plan-badge { background: rgba(98, 228, 255, .16) !important; color: var(--qx-cyan) !important; }
html.qx #orderManager .qcoret-plan-card .plan-spec-row svg { color: var(--qx-royal-2) !important; }
html.qx #orderManager .qcoret-plan-card .plan-price strong { font-family: var(--qx-mono) !important; color: var(--qx-navy) !important; font-size: 1.3rem !important; font-weight: 600 !important; }
html.qx #orderManager .qcoret-plan-card .plan-cta { background: var(--qx-paper) !important; color: var(--qx-navy) !important; border: 1px solid var(--qx-line); border-radius: 12px !important; font-weight: 700 !important; transition: background .3s, color .3s !important; }
html.qx #orderManager .qcoret-plan-card:hover .plan-cta { background: var(--qx-royal) !important; color: #fff !important; }
html.qx #orderManager .qcoret-vcpu-tab { border-color: var(--qx-line-2) !important; color: var(--qx-navy) !important; font-weight: 600 !important; }
html.qx #orderManager .qcoret-vcpu-tab.active { background: var(--qx-navy) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(3, 44, 106, .7) !important; }
html.qx #orderManager .qcoret-selected-plan-bar, html.qx #orderManager .qcoret-filter-summary { background: linear-gradient(90deg, rgba(98, 228, 255, .14), rgba(98, 228, 255, .03)) !important; border-color: rgba(10, 70, 180, .2) !important; border-radius: 16px !important; }
html.qx #orderManager .qcoret-selected-plan-bar .plan-name, html.qx #orderManager .qcoret-filter-summary .filter-label { color: var(--qx-navy) !important; }
html.qx #orderManager h4 { font-weight: 800; color: var(--qx-navy); }

/* configuration step */
html.qx .qcoret-product-config { background: transparent; border: 0; padding: 0; font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--qx-ink); letter-spacing: 0; }
html.qx .qcoret-product-config .qcoret-product-desc--modern { background: #fff; border-color: var(--qx-line); border-radius: 16px; color: var(--qx-ink-2); font-size: .96rem; }
html.qx .qcoret-product-config .qcoret-product-desc--modern strong { color: var(--qx-navy); font-weight: 700; }
html.qx .qcoret-product-config .qcoret-product-desc--modern blockquote { border-left: 3px solid var(--qx-cyan); background: var(--qx-paper); border-radius: 0 12px 12px 0; padding: .7rem 1rem; color: var(--qx-ink); }
html.qx .qcoret-config-title { font-weight: 800; color: var(--qx-navy); font-size: 1.4rem; }
html.qx .qcoret-config-sub { color: var(--qx-steel); }
html.qx .qcoret-annual-deal { border-radius: 18px !important; border: 1px solid rgba(98, 228, 255, .35) !important; background: linear-gradient(120deg, rgba(98, 228, 255, .14), rgba(1, 51, 136, .05)) !important; box-shadow: none !important; }
html.qx .qcoret-annual-deal__badge { background: var(--qx-night) !important; color: var(--qx-cyan) !important; border-radius: 999px !important; }
html.qx .qcoret-annual-deal__now { font-family: var(--qx-mono) !important; color: var(--qx-navy) !important; }
html.qx .qcoret-annual-deal__save { background: var(--qx-ok-bg) !important; color: var(--qx-ok) !important; }
html.qx .qcoret-product-desc--modern { color: var(--qx-ink-2); }
html.qx #period-selector { max-width: 420px; }
html.qx #config-next, html.qx #checkoutButton { min-width: 180px; }

/* checkout */
html.qx #checkout .table { border-radius: 14px; overflow: hidden; }
html.qx #checkout .invoice-gateway { border: 1.5px solid var(--qx-line-2) !important; border-radius: 14px !important; padding: .8rem 1rem !important; transition: border-color .2s, box-shadow .2s; cursor: pointer; }
html.qx #checkout .btn-check:checked + .invoice-gateway, html.qx #checkout .btn-check:checked + label .invoice-gateway { border-color: var(--qx-royal) !important; box-shadow: 0 0 0 4px rgba(98, 228, 255, .25); }
html.qx #checkout .btn-check + label { border-radius: 14px; }
html.qx #checkout .btn-check:checked + label { border-color: var(--qx-royal) !important; box-shadow: 0 0 0 4px rgba(98, 228, 255, .25); }

/* legacy hero classes used by templates this theme does not override */
html.qx .qcoret-hero.qcoret-hero-home-bleed, html.qx .qcoret-hero {
    margin: 0 0 32px !important; width: auto !important; left: auto !important; right: auto !important; position: relative; overflow: hidden;
    border-radius: 26px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) !important; color: #fff;
    background: radial-gradient(700px 400px at 85% 10%, rgba(1, 51, 136, .9), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(98, 228, 255, .14), transparent 70%), var(--qx-night) !important;
    box-shadow: var(--qx-sh-3);
}
html.qx .qcoret-hero::after { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
    background-image: linear-gradient(rgba(98, 228, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(98, 228, 255, .06) 1px, transparent 1px); background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); }
html.qx .qcoret-hero-inner { position: relative; z-index: 1; }
html.qx .qcoret-hero-brand { color: var(--qx-cyan) !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem !important; }
html.qx .qcoret-hero-title { color: #fff !important; font-family: var(--qx-font) !important; font-weight: 800 !important; letter-spacing: -.03em; }
html.qx .qcoret-hero-lead { color: rgba(255, 255, 255, .76) !important; font-family: var(--qx-font) !important; }
html.qx .qcoret-home-section-head h2, html.qx .qcoret-order-wrap-head h2 { font-family: var(--qx-font) !important; color: var(--qx-navy) !important; font-weight: 800 !important; }
html.qx .qcoret-cat, html.qx .qcoret-family, html.qx .qcoret-product-card, html.qx .qcoret-install-card, html.qx .qcoret-partner-card, html.qx .qcoret-app-card {
    border-radius: 20px !important; border: 1px solid var(--qx-line) !important; background: #fff !important; box-shadow: var(--qx-sh-1) !important;
    transition: transform .4s var(--qx-ease-out), box-shadow .4s var(--qx-ease-out), border-color .3s !important; font-family: var(--qx-font) !important; }
html.qx a.qcoret-cat:hover, html.qx a.qcoret-family:hover, html.qx a.qcoret-product-card:hover, html.qx a.qcoret-install-card:hover, html.qx .qcoret-partner-card:hover { transform: translateY(-5px) !important; box-shadow: var(--qx-sh-2) !important; border-color: rgba(10, 70, 180, .3) !important; }
html.qx .qcoret-home-cta-band { border-radius: 24px !important; background: linear-gradient(120deg, var(--qx-royal), var(--qx-navy)) !important; color: #fff !important; border: 0 !important; }
html.qx .qcoret-home-cta-band h2 { color: #fff !important; }
html.qx .qcoret-home-cta-band p { color: rgba(255, 255, 255, .75) !important; }
html.qx .qcoret-home-cta-band .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .35); background: transparent; }
html.qx .qcoret-faq-item { border-radius: 16px !important; border: 1px solid var(--qx-line) !important; background: #fff !important; }

/* =====================================================================
   DASHBOARD (theme template)
   ===================================================================== */
html.qx .qx-welcome { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 30px; margin-bottom: 22px; color: rgba(255, 255, 255, .78);
    background: radial-gradient(500px 260px at 100% 0%, rgba(98, 228, 255, .22), transparent 70%), linear-gradient(120deg, var(--qx-royal), var(--qx-navy) 55%, var(--qx-night)); box-shadow: var(--qx-sh-2); isolation: isolate; }
html.qx .qx-welcome::after { content: ""; position: absolute; right: -60px; top: -90px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(98, 228, 255, .25); box-shadow: 0 0 0 36px rgba(98, 228, 255, .04), 0 0 0 80px rgba(98, 228, 255, .03); z-index: -1; }
html.qx .qx-welcome h1 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; margin: 0 0 .35rem; }
html.qx .qx-welcome p { margin: 0; }
html.qx .qx-welcome__row { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
html.qx .qx-welcome__actions { display: flex; gap: .6rem; flex-wrap: wrap; }
html.qx .qx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
html.qx .qx-kpi { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--qx-line); box-shadow: var(--qx-sh-1); text-decoration: none; color: var(--qx-ink); overflow: hidden; transition: transform .35s var(--qx-ease-out), box-shadow .35s, border-color .3s; }
html.qx a.qx-kpi:hover { transform: translateY(-4px); box-shadow: var(--qx-sh-2); border-color: rgba(10, 70, 180, .3); color: var(--qx-ink); }
html.qx .qx-kpi__ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--qx-royal); background: #e4ecfa; margin-bottom: .4rem; }
html.qx .qx-kpi__ico .qx-ico { width: 22px; height: 22px; }
html.qx .qx-kpi__label { font-size: .8rem; color: var(--qx-steel); font-weight: 600; letter-spacing: .02em; }
html.qx .qx-kpi__value { font: 600 1.75rem/1.1 var(--qx-mono); color: var(--qx-navy); letter-spacing: -.03em; }
html.qx .qx-kpi__sub { font-size: .8rem; color: var(--qx-steel); }
html.qx .qx-kpi--alert .qx-kpi__ico { background: var(--qx-warn-bg); color: var(--qx-warn); }
html.qx .qx-kpi--alert .qx-kpi__value { color: var(--qx-warn); }
html.qx .qx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html.qx .qx-list { list-style: none; margin: 0; padding: 0; }
html.qx .qx-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.2rem; text-decoration: none; color: var(--qx-ink); border-bottom: 1px solid var(--qx-line); transition: background .2s; }
html.qx .qx-list li:last-child a { border-bottom: 0; }
html.qx .qx-list a:hover { background: var(--qx-paper); }
html.qx .qx-list__t { font-weight: 600; color: var(--qx-navy); display: block; font-size: .95rem; }
html.qx .qx-list__s { font-size: .8rem; color: var(--qx-steel); }
html.qx .qx-empty { padding: 2rem 1.2rem; text-align: center; color: var(--qx-steel); }
html.qx .qx-empty .qx-ico { width: 34px; height: 34px; color: #b6c3d8; display: block; margin: 0 auto .6rem; }
html.qx .qx-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
html.qx .qx-quick a { display: flex; gap: .7rem; align-items: center; padding: .95rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--qx-line); text-decoration: none; color: var(--qx-navy); font-weight: 600; font-size: .93rem; transition: transform .3s var(--qx-ease-out), border-color .3s, box-shadow .3s; }
html.qx .qx-quick a:hover { transform: translateY(-3px); border-color: rgba(10, 70, 180, .3); box-shadow: var(--qx-sh-1); }
html.qx .qx-quick .qx-ico { color: var(--qx-royal-2); width: 22px; height: 22px; }

/* =====================================================================
   MOTION
   ===================================================================== */
html.qx.qx-motion .qx-reveal { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); transition: opacity .9s var(--qx-ease-out), transform 1s var(--qx-ease-out), filter .9s var(--qx-ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
html.qx.qx-motion .qx-reveal.is-in { opacity: 1; transform: none; filter: none; }
html.qx.qx-motion .qx-reveal--left { transform: translate3d(-34px, 0, 0); }
html.qx.qx-motion .qx-reveal--right { transform: translate3d(34px, 0, 0); }
html.qx.qx-motion .qx-reveal--zoom { transform: scale(.94); }
html.qx.qx-motion .qx-hero .qx-hero__copy > * { animation: qx-rise 1s var(--qx-ease-out) both; }
html.qx.qx-motion .qx-hero .qx-hero__copy > *:nth-child(2) { animation-delay: .08s; }
html.qx.qx-motion .qx-hero .qx-hero__copy > *:nth-child(3) { animation-delay: .16s; }
html.qx.qx-motion .qx-hero .qx-hero__copy > *:nth-child(4) { animation-delay: .24s; }
html.qx.qx-motion .qx-hero .qx-hero__copy > *:nth-child(5) { animation-delay: .32s; }
html.qx.qx-motion .qx-hero .qx-stage, html.qx.qx-motion .qx-hero .qx-cat-visual { animation: qx-zoomin 1.4s var(--qx-ease-out) .15s both; }
@keyframes qx-rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qx-zoomin { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
html.qx.qx-motion .qx-shell-app .qx-content > .content-block > * { animation: qx-rise .7s var(--qx-ease-out) both; }
html.qx.qx-motion .qx-shell-app .qx-content > .content-block > *:nth-child(2) { animation-delay: .05s; }
html.qx.qx-motion .qx-shell-app .qx-content > .content-block > *:nth-child(3) { animation-delay: .1s; }
html.qx.qx-motion .qx-shell-app .qx-content > .content-block > *:nth-child(4) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
    html.qx *, html.qx *::before, html.qx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199.98px) {
    html.qx .qx-nav__links > a.qx-nav__link:nth-child(4) { display: none; }
    html.qx .qx-order__layout { grid-template-columns: 1fr; }
    html.qx .qx-order__aside { position: static; grid-template-columns: 1fr 1fr; }
    html.qx .qx-kpis { grid-template-columns: repeat(2, 1fr); }
    html.qx .qx-quick { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
    html.qx { --qx-nav-h: 68px; }
    html.qx .qx-nav__links, html.qx .qx-nav__login { display: none; }
    html.qx .qx-nav__burger { display: inline-grid; }
    html.qx .qx-nav__cta span { display: none; }
    html.qx .qx-nav__cta { padding: .55rem .7rem; }
    html.qx .qx-hero { min-height: 0; }
    html.qx .qx-hero__inner, html.qx .qx-split { grid-template-columns: minmax(0, 1fr); }
    html.qx .qx-stage { max-width: 460px; margin: 10px auto 0; }
    html.qx .qx-cat-visual { max-width: 340px; margin: 10px auto 0; }
    html.qx .qx-tile, html.qx .qx-tile--wide, html.qx .qx-tile--half { grid-column: span 6; }
    html.qx .qx-tile--tall { grid-row: auto; }
    html.qx .qx-mock { display: none; }
    html.qx .qx-cards3, html.qx .qx-catgrid { grid-template-columns: repeat(2, 1fr); }
    html.qx .qx-footer__grid { grid-template-columns: 1fr 1fr; }
    html.qx .qx-panel { transform: none; }
    html.qx .qx-app { grid-template-columns: 1fr; }
    html.qx .qx-side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-105%); transition: transform .4s var(--qx-ease-out); box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .5); }
    html.qx .qx-app.is-side-open .qx-side { transform: none; }
    html.qx .qx-side__close { display: inline-grid; }
    html.qx .qx-side__scrim { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(6, 18, 40, .55); opacity: 0; pointer-events: none; transition: opacity .3s; backdrop-filter: blur(3px); }
    html.qx .qx-app.is-side-open .qx-side__scrim { opacity: 1; pointer-events: auto; }
    html.qx .qx-top { padding: 12px 18px; }
    html.qx .qx-top__menu { display: inline-grid; }
    html.qx .qx-content { padding: 22px 18px 40px; }
    html.qx .qx-app-foot { padding: 16px 18px 24px; }
    html.qx .qx-auth { grid-template-columns: 1fr; }
    html.qx .qx-auth__brand { min-height: 230px; }
    html.qx .qx-auth__brand-in { padding: 26px 24px; }
    html.qx .qx-auth__pitch { padding-top: 0; margin-top: 1.2rem; }
    html.qx .qx-auth__pitch h2 { font-size: 1.5rem; }
    html.qx .qx-auth__list, html.qx .qx-auth__foot { display: none; }
    html.qx .qx-auth__top { padding: 16px 20px; }
    html.qx .qx-auth__body { padding: 10px 20px 40px; align-items: flex-start; }
}
@media (max-width: 767.98px) {
    html.qx .qx-wrap { padding-inline: 16px; }
    html.qx .qx-tile, html.qx .qx-tile--wide, html.qx .qx-tile--half { grid-column: span 12; min-height: 0; }
    html.qx .qx-steps { grid-template-columns: 1fr; gap: 34px; }
    html.qx .qx-steps::before, html.qx .qx-steps::after { display: none; }
    html.qx .qx-cards3, html.qx .qx-catgrid, html.qx .qx-grid2 { grid-template-columns: 1fr; }
    html.qx .qx-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 110px; }
    html.qx .qx-footer__cta { padding: 30px 24px; top: 56px; }
    html.qx .qx-mega { display: none; }
    html.qx .qx-hero__trust { gap: .8rem 1.2rem; }
    html.qx .qx-top__cta span, html.qx .qx-user__name, html.qx .qx-user__caret { display: none; }
    html.qx .qx-kpi__value { font-size: 1.45rem; }
    html.qx .qx-order__aside { grid-template-columns: 1fr; }
    html.qx .qx-stepper li { min-width: 0; flex: 0 0 auto; }
    html.qx .qx-stepper li span { display: none; }
    html.qx #orderManager .accordion-button { font-size: .98rem; padding: 1rem; }
    html.qx #orderManager .accordion-body { padding: .3rem 1rem 1.2rem; }
    html.qx .qx-panel-wrap .qx-panel__float { display: none; }
}
@media (max-width: 420px) {
    html.qx .qx-kpis, html.qx .qx-quick { grid-template-columns: 1fr 1fr; gap: 10px; }
    html.qx .qx-kpi { padding: 16px; }
}