/* ==========================================================================
   Luno — bespoke HeyLuno WHMCS client area theme
   Design system: Comfortaa (UI) + Ultra (display, always lowercase)
   Brand: Purple Munsell #B118C8 · Light Sky Blue #93D6FF · Yellow #FFE576 · Jet #333333
   Semantic (alerts/statuses) stay universal: green / red / amber / blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* brand */
    --lu-purple: #B118C8;
    --lu-purple-strong: #9412A8;
    --lu-purple-soft: #F7E7FA;
    --lu-purple-tint: #FBF3FC;
    --lu-sky: #93D6FF;
    --lu-sky-soft: #EAF6FF;
    --lu-yellow: #FFE576;
    --lu-yellow-soft: #FFF8DC;
    --lu-jet: #333333;
    --lu-jet-deep: #2A2A2E;

    /* semantic — universal, never brand */
    --lu-success: #16803C;
    --lu-success-bg: #ECFDF3;
    --lu-success-border: #BBF0CE;
    --lu-danger: #C22030;
    --lu-danger-bg: #FEF2F2;
    --lu-danger-border: #FBD5D5;
    --lu-warning: #A05A00;
    --lu-warning-bg: #FFF8E6;
    --lu-warning-border: #FBE3A2;
    --lu-info: #0B6296;
    --lu-info-bg: #F0F9FF;
    --lu-info-border: #BDE3F7;

    /* surfaces */
    --lu-bg: #F6F5F8;
    --lu-surface: #FFFFFF;
    --lu-surface-2: #F4F2F7;
    --lu-border: #ECE9F1;
    --lu-border-strong: #DDD8E4;

    /* text */
    --lu-text: #333333;
    --lu-text-soft: #5D5966;
    --lu-text-muted: #8B8794;
    --lu-text-invert: #F5F3F7;

    /* shape & depth */
    --lu-radius-sm: 10px;
    --lu-radius: 16px;
    --lu-radius-lg: 22px;
    --lu-shadow: 0 1px 2px rgba(51, 51, 51, .04), 0 10px 28px -16px rgba(51, 51, 51, .16);
    --lu-shadow-pop: 0 24px 48px -16px rgba(38, 24, 42, .28);
    --lu-ring: 0 0 0 4px rgba(177, 24, 200, .14);

    /* type */
    --lu-font: 'Comfortaa', 'Trebuchet MS', 'Segoe UI', sans-serif;
    --lu-font-display: 'Ultra', 'Rockwell', serif;
    --lu-tracking: 0.32px;

    /* layout */
    --lu-sidebar-w: 268px;
    --lu-topbar-h: 72px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.lu-body {
    margin: 0;
    background: var(--lu-bg);
    color: var(--lu-text);
    font-family: var(--lu-font);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: var(--lu-tracking);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 700; line-height: 1.3; color: var(--lu-text); }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
p { margin: 0 0 1em; }
a { color: var(--lu-purple); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--lu-purple-strong); }
img { max-width: 100%; height: auto; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { border: 0; padding: 0; margin-bottom: 10px; font-weight: 700; }
hr { border: 0; border-top: 1px dotted var(--lu-border-strong); margin: 24px 0; }
::selection { background: var(--lu-yellow); color: var(--lu-jet); }

/* display type — Ultra is ALWAYS lowercase (brand rule) */
.lu-display, .lu-pagetitle, .lu-error-code {
    font-family: var(--lu-font-display);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0;
    line-height: 1.15;
}

.lu-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -4px;
}
.lu-icon-lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   3. Utilities (incl. functional classes core JS relies on)
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-muted { color: var(--lu-text-muted) !important; }
.text-success { color: var(--lu-success) !important; }
.text-danger { color: var(--lu-danger) !important; }
.text-warning { color: var(--lu-warning) !important; }
.text-info { color: var(--lu-info) !important; }
.small, small { font-size: 85%; }
.lead { font-size: 17px; color: var(--lu-text-soft); }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }
.top-margin-10 { margin-top: 10px; }

.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }
.collapse { display: none; }
.collapse.in { display: block; }
.collapsing { position: relative; height: 0; overflow: hidden; transition: height .3s ease; }

/* minimal 12-col grid — WHMCS core-generated markup uses these */
.row { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.row > [class*="col-"] { padding-left: 10px; padding-right: 10px; width: 100%; min-height: 1px; }
.col-xs-1{width:8.3333%}.col-xs-2{width:16.6667%}.col-xs-3{width:25%}.col-xs-4{width:33.3333%}.col-xs-5{width:41.6667%}.col-xs-6{width:50%}.col-xs-7{width:58.3333%}.col-xs-8{width:66.6667%}.col-xs-9{width:75%}.col-xs-10{width:83.3333%}.col-xs-11{width:91.6667%}.col-xs-12{width:100%}
@media (min-width: 768px) {
    .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}.col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}.col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}.col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}
@media (min-width: 992px) {
    .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
}
@media (min-width: 1200px) {
    .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}.col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
}

.lu-hide-mobile { display: block; }
.lu-only-mobile { display: none; }

/* spinner */
.lu-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2.5px solid var(--lu-border-strong);
    border-top-color: var(--lu-purple);
    border-radius: 50%;
    animation: lu-spin .7s linear infinite;
    vertical-align: -3px;
}
@keyframes lu-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   4. App shell
   -------------------------------------------------------------------------- */
.lu-app { min-height: 100vh; }

.lu-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--lu-sidebar-w);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--lu-jet) 0%, var(--lu-jet-deep) 100%);
    color: var(--lu-text-invert);
    z-index: 200;
    transition: transform .25s ease;
}

.lu-main {
    margin-left: var(--lu-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lu-scrim {
    position: fixed;
    inset: 0;
    background: rgba(29, 27, 34, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 190;
}

/* sidebar: brand */
.lu-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
}
.lu-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.lu-logo img { max-height: 38px; width: auto; }
.lu-brandmark { width: 34px; height: 34px; flex: none; }
.lu-logo-text {
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .4px;
    color: #fff;
    text-transform: lowercase;
}
.lu-sidebar-close {
    display: none;
    background: none; border: 0; color: var(--lu-text-invert);
    cursor: pointer; padding: 6px;
}

/* sidebar: nav */
.lu-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.lu-nav { list-style: none; margin: 0; padding: 0; }
.lu-nav-item { margin: 3px 14px; }

.lu-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #C6C3CC;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--lu-tracking);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lu-nav-link:hover, .lu-nav-link:focus { background: rgba(255, 255, 255, .08); color: #fff; }
.lu-nav-link.lu-active,
.lu-nav-item.lu-active > .lu-nav-link {
    background: var(--lu-purple);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgba(177, 24, 200, .55);
}
.lu-nav-icon { width: 20px; height: 20px; }
.lu-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-nav-caret { width: 16px; height: 16px; transition: transform .2s ease; opacity: .7; }
.lu-nav-item.open > .lu-nav-link .lu-nav-caret { transform: rotate(180deg); }

.lu-subnav {
    list-style: none;
    margin: 2px 0 4px;
    padding: 0 0 0 30px;
    display: none;
}
.lu-nav-item.open > .lu-subnav { display: block; }
.lu-subnav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #A8A5B1;
    font-size: 13.5px;
}
.lu-subnav-link:hover, .lu-subnav-link:focus { color: #fff; background: rgba(255,255,255,.06); }
.lu-subnav-link.lu-active { color: #fff; font-weight: 700; }
.lu-subnav-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .6; flex: none;
}
.lu-subnav-link.lu-active .lu-subnav-dot { background: var(--lu-yellow); opacity: 1; }

/* badges inside dark sidebar pop in yellow */
.lu-sidebar .badge {
    background: var(--lu-yellow);
    color: var(--lu-jet);
}

/* sidebar: foot */
.lu-sidebar-foot {
    padding: 16px 24px 20px;
    border-top: 1px dotted rgba(255, 255, 255, .14);
    font-size: 12px;
    color: #8B8894;
}
.lu-sidebar-foot-link { display: inline-block; color: #C6C3CC; margin-bottom: 6px; font-size: 13px; }
.lu-sidebar-foot-link:hover { color: #fff; }
.lu-sidebar-copy { display: block; line-height: 1.5; }

/* --------------------------------------------------------------------------
   5. Topbar
   -------------------------------------------------------------------------- */
.lu-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--lu-topbar-h);
    padding: 0 28px;
    background: var(--lu-surface);
    border-bottom: 1px solid var(--lu-border);
}
.lu-topbar-spacer { flex: 1; }

.lu-topbar-menu {
    display: none;
    background: none; border: 0; cursor: pointer;
    color: var(--lu-text);
    padding: 8px;
    margin-left: -8px;
}

.lu-topbar-search {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lu-surface-2);
    border-radius: 999px;
    padding: 10px 18px;
    color: var(--lu-text-muted);
    transition: box-shadow .15s ease;
}
.lu-topbar-search:focus-within { box-shadow: var(--lu-ring); }
.lu-topbar-search .lu-icon { width: 18px; height: 18px; }
.lu-topbar-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
    letter-spacing: var(--lu-tracking);
    color: var(--lu-text);
}
.lu-topbar-search input::placeholder { color: var(--lu-text-muted); }

.lu-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.lu-topbar-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--lu-surface-2);
    color: var(--lu-text-soft);
    transition: background .15s ease, color .15s ease;
}
.lu-topbar-iconbtn:hover, .lu-topbar-iconbtn:focus {
    background: var(--lu-purple-soft);
    color: var(--lu-purple);
}
.lu-notify-dot {
    position: absolute;
    top: 9px; right: 10px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--lu-danger);
    border: 2px solid var(--lu-surface);
}
.lu-admin-exit { background: var(--lu-yellow-soft); color: var(--lu-warning); }

.lu-topbar-item { position: relative; }
.lu-topbar-link { color: var(--lu-text-soft); font-size: 14px; font-weight: 500; padding: 8px 6px; }
.lu-topbar-link:hover { color: var(--lu-purple); }

.lu-account-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    background: var(--lu-surface-2);
    color: var(--lu-text);
    font-size: 14px;
    font-weight: 700;
}
.lu-account-chip:hover, .open > .lu-account-chip { background: var(--lu-purple-soft); color: var(--lu-purple); }
.lu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lu-purple);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex: none;
}
.lu-account-chip .lu-nav-caret { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: var(--lu-surface-2);
    color: var(--lu-text);
    font-family: var(--lu-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--lu-tracking);
    line-height: 1.4;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--lu-ring); }
.btn .lu-icon { width: 17px; height: 17px; }

.btn-default {
    background: var(--lu-surface);
    border-color: var(--lu-border-strong);
    color: var(--lu-text);
}
.btn-default:hover, .btn-default:focus { border-color: var(--lu-purple); color: var(--lu-purple); }

.btn-primary { background: var(--lu-purple); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--lu-purple-strong); color: #fff; }

.btn-success { background: var(--lu-success); color: #fff; }
.btn-success:hover { background: #126A32; color: #fff; }
.btn-danger { background: var(--lu-danger); color: #fff; }
.btn-danger:hover { background: #A81B29; color: #fff; }
.btn-warning { background: var(--lu-warning); color: #fff; }
.btn-warning:hover { background: #8A4D00; color: #fff; }
.btn-info { background: var(--lu-info); color: #fff; }
.btn-info:hover { background: #095380; color: #fff; }

.btn-link { background: none; border: 0; color: var(--lu-purple); padding-left: 8px; padding-right: 8px; }
.btn-link:hover { color: var(--lu-purple-strong); text-decoration: underline; }

.lu-btn-ghost {
    background: transparent;
    border-color: var(--lu-border-strong);
    color: var(--lu-text-soft);
}
.lu-btn-ghost:hover, .lu-btn-ghost:focus { border-color: var(--lu-purple); color: var(--lu-purple); }

/* the standout call-to-action — brand yellow on jet */
.lu-btn-cta { background: var(--lu-yellow); color: var(--lu-jet); }
.lu-btn-cta:hover, .lu-btn-cta:focus { background: #FFDD4D; color: var(--lu-jet); box-shadow: 0 8px 20px -10px rgba(255, 229, 118, .9); }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
label, .control-label { display: inline-block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; color: var(--lu-text-soft); }

.form-control {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: var(--lu-surface);
    border: 1.5px solid var(--lu-border-strong);
    border-radius: 12px;
    font-family: var(--lu-font);
    font-size: 14px;
    letter-spacing: var(--lu-tracking);
    color: var(--lu-text);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.form-control:focus {
    outline: none;
    border-color: var(--lu-purple);
    box-shadow: var(--lu-ring);
}
.form-control::placeholder { color: var(--lu-text-muted); }
.form-control[disabled], .form-control[readonly] { background: var(--lu-surface-2); opacity: .8; }
textarea.form-control { min-height: 110px; resize: vertical; }

select.form-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.form-group { margin-bottom: 18px; }
.help-block { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lu-text-muted); }
.input-inline { display: inline-block; width: auto; }
.input-inline-100 { width: 100px; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--lu-purple); width: 16px; height: 16px; }
.checkbox, .radio { position: relative; display: block; margin: 8px 0; }
.checkbox label, .radio label { font-weight: 500; display: inline-flex; gap: 8px; align-items: center; }

/* validation states */
.has-error .form-control { border-color: var(--lu-danger); }
.has-error .control-label, .has-error .help-block { color: var(--lu-danger); }
.has-warning .form-control { border-color: var(--lu-warning); }
.has-success .form-control { border-color: var(--lu-success); }
.form-control-feedback { display: none; }

/* input groups (search + button combos) */
.input-group { display: flex; width: 100%; }
.input-group .form-control { flex: 1; min-width: 0; border-radius: 12px 0 0 12px; }
.input-group-btn { display: flex; }
.input-group-btn .btn { border-radius: 0 12px 12px 0; }
.input-group-addon {
    display: inline-flex; align-items: center;
    padding: 0 14px;
    background: var(--lu-surface-2);
    border: 1.5px solid var(--lu-border-strong);
    border-left: 0;
    font-size: 13px; color: var(--lu-text-muted);
}

/* iCheck (whmcs.js applies it) — pure CSS replacement, no sprite images */
.icheckbox_square-blue, .iradio_square-blue {
    display: inline-block;
    position: relative;
    width: 19px; height: 19px;
    border: 2px solid var(--lu-border-strong);
    border-radius: 6px;
    background: var(--lu-surface);
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, border-color .15s ease;
}
.iradio_square-blue { border-radius: 50%; }
.icheckbox_square-blue input, .iradio_square-blue input { opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; }
.icheckbox_square-blue.hover, .iradio_square-blue.hover { border-color: var(--lu-purple); }
.icheckbox_square-blue.checked, .iradio_square-blue.checked { background: var(--lu-purple); border-color: var(--lu-purple); }
.icheckbox_square-blue.checked::after {
    content: "";
    position: absolute; inset: 1px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.iradio_square-blue.checked::after {
    content: "";
    position: absolute; inset: 4px;
    border-radius: 50%;
    background: #fff;
}
.icheckbox_square-blue.disabled, .iradio_square-blue.disabled { opacity: .5; cursor: not-allowed; }

/* progress (password strength etc.) */
.progress {
    height: 10px;
    background: var(--lu-surface-2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}
.progress-bar {
    height: 100%;
    width: 0;
    background: var(--lu-purple);
    border-radius: 999px;
    transition: width .25s ease, background .25s ease;
}
.progress-bar-danger { background: var(--lu-danger); }
.progress-bar-warning { background: #E3A008; }
.progress-bar-success { background: var(--lu-success); }

.lu-form-row { margin-bottom: 16px; }
.lu-form-row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Cards / panels
   -------------------------------------------------------------------------- */
.panel, .lu-card {
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.panel-heading, .lu-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: none;
    border-bottom: 1px dotted var(--lu-border-strong);
}
.panel-title, .lu-card-title {
    margin: 0;
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
}
.lu-card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--lu-yellow);
    color: var(--lu-jet);
    flex: none;
}
.lu-card-chip .lu-icon { width: 19px; height: 19px; }
.panel-body { padding: 20px 22px; }
.panel-footer {
    padding: 14px 22px;
    background: #FBFAFD;
    border-top: 1px solid var(--lu-border);
    font-size: 13.5px;
}

/* semantic panel accents */
.panel-success .lu-card-chip, .panel-success .panel-heading { color: var(--lu-success); }
.panel-danger .lu-card-chip, .panel-danger .panel-heading { color: var(--lu-danger); }
.panel-warning .lu-card-chip, .panel-warning .panel-heading { color: var(--lu-warning); }
.panel-info .lu-card-chip, .panel-info .panel-heading { color: var(--lu-info); }

.lu-card-minimise {
    background: none; border: 0; cursor: pointer;
    color: var(--lu-text-muted);
    padding: 4px;
    transition: transform .2s ease, color .15s ease;
}
.lu-card-minimise:hover { color: var(--lu-text); }
.panel-minimise.minimised { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   9. Page structure: header, breadcrumb, grid, aside, footer
   -------------------------------------------------------------------------- */
.lu-content {
    flex: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 26px 32px 20px;
}
.lu-content-fluid { max-width: none; padding: 0; }

.lu-pageheader { margin-bottom: 24px; }
.lu-pagetitle { font-size: 30px; margin: 4px 0 0; }
.lu-tagline {
    display: block;
    margin-top: 6px;
    font-family: var(--lu-font);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: var(--lu-text-muted);
}

.breadcrumb, .lu-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    background: none;
    font-size: 13px;
    color: var(--lu-text-muted);
}
.lu-breadcrumb li { display: inline-flex; align-items: center; gap: 2px; }
.lu-breadcrumb a { color: var(--lu-text-muted); }
.lu-breadcrumb a:hover { color: var(--lu-purple); }
.lu-breadcrumb .active { color: var(--lu-text-soft); font-weight: 500; }
.lu-breadcrumb-sep { width: 14px; height: 14px; opacity: .6; margin: 0 2px; }

.lu-subheader {
    font-size: 16px;
    padding-bottom: 8px;
    margin: 26px 0 16px;
    border-bottom: 1px dotted var(--lu-border-strong);
}

.lu-page { display: block; }
.lu-page.has-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 24px;
    align-items: start;
}
.lu-page-main { min-width: 0; }

/* contextual aside cards */
.lu-aside-card .panel-body { padding: 16px 18px; font-size: 14px; }
.lu-aside-list { padding: 8px; }
.list-group { margin: 0; }
.list-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    color: var(--lu-text-soft);
    font-size: 14px;
    background: none;
    transition: background .15s ease, color .15s ease;
}
a.list-group-item:hover, a.list-group-item:focus {
    background: var(--lu-surface-2);
    color: var(--lu-text);
}
.list-group-item.active {
    background: var(--lu-purple-soft);
    color: var(--lu-purple);
    font-weight: 700;
}
.list-group-item.disabled { opacity: .5; pointer-events: none; }
.lu-aside-item-icon { width: 18px; height: 18px; color: var(--lu-text-muted); flex: none; }
.list-group-item.active .lu-aside-item-icon { color: var(--lu-purple); }
.lu-aside-item-label { flex: 1; min-width: 0; }
.lu-aside-item-go { width: 15px; height: 15px; opacity: 0; transition: opacity .15s ease; }
a.list-group-item:hover .lu-aside-item-go { opacity: .8; }
.lu-aside-static { color: var(--lu-text-muted); font-size: 13px; }

.lu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 20px 4px 8px;
    border-top: 1px dotted var(--lu-border-strong);
    font-size: 12.5px;
    color: var(--lu-text-muted);
}
.lu-footer p { margin: 0; }
.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    color: var(--lu-text-soft);
}
.back-to-top:hover { color: var(--lu-purple); border-color: var(--lu-purple); }

/* --------------------------------------------------------------------------
   10. Alerts & banners
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
}
.alert h2, .lu-alert-title { font-size: 15px; margin: 0 0 4px; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert p:last-child { margin-bottom: 0; }
.lu-alert-body { flex: 1; min-width: 0; }
.lu-alert-ico { flex: none; display: inline-flex; margin-top: 1px; }
.lu-alert-ico .lu-icon { width: 19px; height: 19px; }

.alert-success { background: var(--lu-success-bg); border-color: var(--lu-success-border); color: var(--lu-success); }
.alert-danger, .alert-error { background: var(--lu-danger-bg); border-color: var(--lu-danger-border); color: var(--lu-danger); }
.alert-warning { background: var(--lu-warning-bg); border-color: var(--lu-warning-border); color: var(--lu-warning); }
.alert-info { background: var(--lu-info-bg); border-color: var(--lu-info-border); color: var(--lu-info); }
.alert a { color: inherit; text-decoration: underline; }

/* top verification banners */
.lu-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 28px;
    font-size: 14px;
}
.lu-banner-warning { background: var(--lu-yellow-soft); color: var(--lu-warning); border-bottom: 1px solid var(--lu-warning-border); }
.lu-banner-info { background: var(--lu-sky-soft); color: var(--lu-info); border-bottom: 1px solid var(--lu-info-border); }
.lu-banner .text { flex: 1; min-width: 200px; }
.lu-banner-icon { display: inline-flex; }
.lu-banner-close { margin-left: 4px; }

.close {
    background: none;
    border: 0;
    padding: 2px 6px;
    font-size: 22px;
    line-height: 1;
    color: var(--lu-text-muted);
    cursor: pointer;
}
.close:hover { color: var(--lu-text); }

/* --------------------------------------------------------------------------
   11. Badges, labels & statuses
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    min-width: 20px;
    justify-content: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--lu-purple-soft);
    color: var(--lu-purple);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

.label {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    background: var(--lu-surface-2);
    color: var(--lu-text-soft);
}
.label-success { background: var(--lu-success-bg); color: var(--lu-success); }
.label-danger { background: var(--lu-danger-bg); color: var(--lu-danger); }
.label-warning { background: var(--lu-warning-bg); color: var(--lu-warning); }
.label-info { background: var(--lu-info-bg); color: var(--lu-info); }
.label-default { background: var(--lu-surface-2); color: var(--lu-text-soft); }
.label-primary { background: var(--lu-purple-soft); color: var(--lu-purple); }

/* --------------------------------------------------------------------------
   12. Tables & DataTables
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 16px;
    font-size: 14px;
}
.table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--lu-text-muted);
    border-bottom: 1.5px solid var(--lu-border);
    white-space: nowrap;
}
.table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--lu-border);
    vertical-align: middle;
}
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: #FBFAFD; }
.table tbody tr:last-child td { border-bottom: 0; }

.table-container { overflow-x: auto; }

/* DataTables chrome */
.dataTables_wrapper { font-size: 14px; }
.dataTables_filter { float: right; margin-bottom: 14px; }
.dataTables_filter label { font-weight: 500; color: var(--lu-text-muted); }
.dataTables_filter input {
    margin-left: 8px;
    padding: 8px 16px;
    border: 1.5px solid var(--lu-border-strong);
    border-radius: 999px;
    font: inherit;
    font-size: 13.5px;
    background: var(--lu-surface);
}
.dataTables_filter input:focus { outline: none; border-color: var(--lu-purple); box-shadow: var(--lu-ring); }
.dataTables_info { color: var(--lu-text-muted); font-size: 12.5px; padding-top: 12px; }
.dataTables_length { float: right; color: var(--lu-text-muted); font-size: 12.5px; padding-top: 8px; }
.dataTables_length select {
    margin: 0 6px;
    padding: 4px 8px;
    border: 1.5px solid var(--lu-border-strong);
    border-radius: 8px;
    background: var(--lu-surface);
    font: inherit;
    font-size: 12.5px;
}
.dataTables_paginate { display: inline-block; padding-top: 8px; }

.pagination {
    display: inline-flex;
    gap: 6px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.pagination > li > a, .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--lu-border);
    border-radius: 10px;
    background: var(--lu-surface);
    color: var(--lu-text-soft);
    font-size: 13.5px;
    font-weight: 500;
}
.pagination > li > a:hover { border-color: var(--lu-purple); color: var(--lu-purple); }
.pagination > .active > a, .pagination > .active > span {
    background: var(--lu-purple);
    border-color: var(--lu-purple);
    color: #fff;
}
.pagination > .disabled > a, .pagination > .disabled > span { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   13. Dropdowns, popovers, tooltips (Bootstrap JS-driven)
   -------------------------------------------------------------------------- */
.dropdown, .btn-group { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 230px;
    margin: 8px 0 0;
    padding: 8px;
    list-style: none;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius);
    box-shadow: var(--lu-shadow-pop);
}
.open > .dropdown-menu { display: block; }
.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--lu-text);
    font-size: 14px;
    white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: var(--lu-surface-2);
    color: var(--lu-purple);
}
.dropdown-menu .divider { height: 1px; margin: 6px 8px; background: var(--lu-border); }
.lu-dropdown-icon { width: 17px; height: 17px; color: var(--lu-text-muted); }
.dropdown-menu > li > a:hover .lu-dropdown-icon { color: var(--lu-purple); }
.lu-topbar-actions .dropdown-menu { left: auto; right: 0; }

/* popovers (language chooser, notifications — whmcs.js drives these) */
.popover {
    position: absolute;
    top: 0; left: 0;
    z-index: 1060;
    display: none;
    max-width: 340px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius);
    box-shadow: var(--lu-shadow-pop);
    font-family: var(--lu-font);
    font-size: 14px;
    letter-spacing: var(--lu-tracking);
}
.popover.in { display: block; }
.popover .arrow { display: none; }
.popover-title {
    margin: 0;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px dotted var(--lu-border-strong);
    background: none;
    border-radius: var(--lu-radius) var(--lu-radius) 0 0;
}
.popover-content { padding: 8px; }

.lu-popover-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.lu-popover-list a {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--lu-text);
}
.lu-popover-list a:hover { background: var(--lu-surface-2); color: var(--lu-purple); }

/* notifications list */
.client-alerts { list-style: none; margin: 0; padding: 0; min-width: 280px; }
.client-alerts li.none { padding: 14px; color: var(--lu-text-muted); text-align: center; }
.client-alerts a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--lu-text);
}
.client-alerts a:hover { background: var(--lu-surface-2); }
.client-alerts .message { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.5; }
.lu-alert-ico-danger { color: var(--lu-danger); }
.lu-alert-ico-warning { color: var(--lu-warning); }
.lu-alert-ico-info { color: var(--lu-info); }
.lu-alert-ico-success { color: var(--lu-success); }

/* tooltips */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: var(--lu-font);
    font-size: 12.5px;
    letter-spacing: .2px;
    opacity: 0;
    transition: opacity .15s ease;
}
.tooltip.in { opacity: 1; }
.tooltip-inner {
    max-width: 260px;
    padding: 7px 13px;
    background: var(--lu-jet);
    color: #fff;
    border-radius: 9px;
    text-align: center;
}
.tooltip-arrow { display: none; }

/* --------------------------------------------------------------------------
   14. Modals (Bootstrap JS-driven; #modalAjax is WHMCS core)
   -------------------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
}
.modal.fade .modal-dialog { transform: translateY(-24px); transition: transform .25s ease; }
.modal.in .modal-dialog { transform: none; }
.modal-dialog {
    position: relative;
    width: auto;
    max-width: 560px;
    margin: 40px auto;
    padding: 0 16px;
}
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 400px; }
.modal-content {
    background: var(--lu-surface);
    border: 0;
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow-pop);
    overflow: hidden;
}
.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px dotted var(--lu-border-strong);
    background: none;
}
.modal-title { order: 1; flex: 1; margin: 0; font-size: 16px; font-weight: 700; }
.modal-header .close { order: 2; margin-left: auto; }
.modal-body { padding: 20px 22px; }
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px dotted var(--lu-border-strong);
    background: #FBFAFD;
}
.modal-footer .loader { margin-right: auto; color: var(--lu-text-muted); font-size: 13.5px; float: none; }
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: #1D1B22;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .55; }

/* fullpage overlay (WHMCS core) */
#fullpage-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(29, 27, 34, .7);
}
#fullpage-overlay .outer-wrapper { display: table; width: 100%; height: 100%; }
#fullpage-overlay .inner-wrapper { display: table-cell; vertical-align: middle; text-align: center; color: #fff; font-size: 15px; }
#fullpage-overlay .msg { display: inline-block; margin-top: 12px; }

/* --------------------------------------------------------------------------
   15. Homepage hero
   -------------------------------------------------------------------------- */
.lu-hero {
    background: var(--lu-jet);
    color: #fff;
    padding: 56px 32px 84px;
    border-radius: 0 0 44% 44% / 0 0 56px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lu-hero::before {
    content: "";
    position: absolute;
    top: -120px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(177, 24, 200, .5), transparent 70%);
    pointer-events: none;
}
.lu-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.lu-hero .lu-display { color: #fff; font-size: 40px; margin-bottom: 26px; }

.lu-domain-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 8px 8px 8px 26px;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .5);
}
.lu-domain-search-box input[type="text"],
.lu-domain-search-box textarea {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    letter-spacing: var(--lu-tracking);
    color: var(--lu-text);
    background: none;
    resize: none;
}
.lu-domain-search-box textarea { height: 26px; padding-top: 2px; }
.lu-domain-search-btns { display: flex; gap: 8px; }

.lu-captcha { margin-top: 20px; }
.lu-captcha-fields { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.lu-captcha-fields .form-control { max-width: 180px; }
.captchaimage img { border-radius: 10px; }

/* --------------------------------------------------------------------------
   16. Error pages
   -------------------------------------------------------------------------- */
.lu-error {
    max-width: 560px;
    margin: 40px auto;
    padding: 48px 32px;
    text-align: center;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
}
.lu-error-art { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.lu-error-mark { width: 56px; height: 56px; }
.lu-error-code { font-size: 72px; color: var(--lu-purple-soft); -webkit-text-stroke: 2px var(--lu-purple); }
.lu-error .lu-display { font-size: 30px; }
.lu-error-subtitle { font-size: 16px; color: var(--lu-text-soft); }
.lu-error-desc { color: var(--lu-text-muted); }
.lu-error-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .lu-page.has-aside { grid-template-columns: 1fr; }
    .lu-page-aside { order: 2; }
}

@media (max-width: 1024px) {
    .lu-sidebar { transform: translateX(-105%); box-shadow: none; }
    body.lu-sidebar-open .lu-sidebar { transform: translateX(0); box-shadow: var(--lu-shadow-pop); }
    body.lu-sidebar-open .lu-scrim { opacity: 1; pointer-events: auto; }
    body.lu-sidebar-open { overflow: hidden; }
    .lu-sidebar-close { display: inline-flex; }
    .lu-main { margin-left: 0; }
    .lu-topbar-menu { display: inline-flex; }
    .lu-hide-mobile { display: none; }
    .lu-only-mobile { display: block; }
}

@media (max-width: 720px) {
    .lu-topbar { padding: 0 16px; gap: 10px; }
    .lu-topbar-search { display: none; }
    .lu-btn-cta span { display: none; }
    .lu-btn-cta { width: 42px; height: 42px; padding: 0; }
    .lu-account-label { display: none; }
    .lu-content { padding: 20px 16px 16px; }
    .lu-pagetitle { font-size: 24px; }
    .lu-hero { padding: 40px 20px 64px; }
    .lu-hero .lu-display { font-size: 28px; }
    .lu-domain-search-box { flex-direction: column; border-radius: 24px; padding: 14px; }
    .lu-domain-search-box input[type="text"], .lu-domain-search-box textarea { width: 100%; padding: 6px 8px; }
    .lu-domain-search-btns { width: 100%; }
    .lu-domain-search-btns .btn { flex: 1; }
    .lu-banner { padding: 12px 16px; }
    .lu-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
    .dataTables_filter { float: none; }
    .dataTables_filter input { width: 100%; margin: 6px 0 0; }
    .modal-dialog { margin: 16px auto; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
    .lu-sidebar, .lu-topbar, .lu-scrim, .lu-footer, .lu-banner, .back-to-top { display: none !important; }
    .lu-main { margin: 0; }
    body.lu-body { background: #fff; }
    .lu-card, .panel { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   19. Auth & entry pages (Phase 2)
   -------------------------------------------------------------------------- */
.margin-bottom { margin-bottom: 18px; }
.input-lg { padding: 13px 18px; font-size: 16px; }
.lu-optional { font-weight: 500; color: var(--lu-text-muted); }
.field-help-text { display: block; margin-top: 6px; font-size: 12.5px; color: var(--lu-text-muted); }

.lu-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lu-text-soft);
    cursor: pointer;
}
.lu-check input { margin-top: 3px; flex: none; }

/* centered auth card */
.lu-auth {
    display: flex;
    justify-content: center;
    padding: 24px 0 40px;
}
.lu-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    padding: 36px 36px 30px;
}
.lu-auth-card-wide { max-width: 620px; }
.lu-auth-head { text-align: center; margin-bottom: 24px; }
.lu-auth-head .lu-brandmark { width: 46px; height: 46px; margin-bottom: 10px; }
.lu-auth-head .lu-display { font-size: 28px; margin-bottom: 6px; }
.lu-auth-sub { color: var(--lu-text-muted); font-size: 14px; margin-bottom: 18px; }
.lu-auth-head .lu-auth-sub { margin-bottom: 0; }

.lu-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.lu-auth-forgot { font-size: 13.5px; font-weight: 500; }
.lu-auth-alt {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px dotted var(--lu-border-strong);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
.lu-auth-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lu-auth-continue { margin-top: 20px; }

/* sub-heading divider (also emitted by WHMCS core includes) */
.sub-heading, .sub-heading-borderless {
    position: relative;
    text-align: center;
    margin: 26px 0 20px;
}
.sub-heading::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px dotted var(--lu-border-strong);
}
.sub-heading span, .sub-heading-borderless span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: var(--lu-surface);
    font-size: 13px;
    font-weight: 700;
    color: var(--lu-text-muted);
    text-transform: lowercase;
}
.lu-register .sub-heading span { background: var(--lu-bg); }

/* social sign-in buttons */
.lu-auth-social { text-align: center; }
.social-signin-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}
.providerLinkingFeedback { text-align: center; }

/* result icons (verify email, invites, 2fa) */
.lu-result-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.lu-result-ico .lu-icon { width: 26px; height: 26px; }
.lu-result-success { background: var(--lu-success-bg); color: var(--lu-success); }
.lu-result-danger { background: var(--lu-danger-bg); color: var(--lu-danger); }
.lu-result-warning { background: var(--lu-warning-bg); color: var(--lu-warning); }
.lu-result-brand { background: var(--lu-purple-soft); color: var(--lu-purple); }

/* backup code display */
.lu-backup-code {
    display: inline-block;
    margin: 6px 0 14px;
    padding: 14px 26px;
    background: var(--lu-yellow-soft);
    border: 1.5px dashed var(--lu-warning-border);
    border-radius: var(--lu-radius);
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--lu-jet);
}

/* register form */
.lu-register { max-width: 860px; margin: 0 auto; }
.lu-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 18px;
}
.lu-form-grid .form-group { margin-bottom: 14px; }
.lu-span-2 { grid-column: span 2; }
.password-strength-meter { align-self: end; margin-bottom: 14px; }
.password-strength-meter .progress { margin-bottom: 6px; }
.tospanel .lu-check { font-size: 14.5px; }
.marketing-email-optin h4 { margin-bottom: 6px; }

/* invite */
.lu-invite { max-width: 900px; margin: 0 auto; }
.lu-invite-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 26px;
}

/* account chooser */
.select-account { display: flex; flex-direction: column; gap: 10px; }
.select-account a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1.5px solid var(--lu-border);
    border-radius: var(--lu-radius);
    color: var(--lu-text);
    font-weight: 700;
    transition: border-color .15s ease, background .15s ease;
}
.select-account a:hover { border-color: var(--lu-purple); background: var(--lu-purple-tint); }
.select-account a.disabled { opacity: .55; pointer-events: none; }
.select-account .lu-account-name { flex: 1; min-width: 0; }
.select-account .lu-account-go { color: var(--lu-text-muted); }

/* access denied helpers */
.lu-permission-list {
    max-width: 380px;
    margin: 0 auto 16px;
    padding: 14px 20px;
    background: var(--lu-surface-2);
    border-radius: var(--lu-radius);
    text-align: left;
    font-size: 14px;
}
.lu-permission-list ul { margin: 0; padding-left: 20px; }

/* --------------------------------------------------------------------------
   20. Homepage (Phase 2)
   -------------------------------------------------------------------------- */
.lu-home-help {
    font-size: 14px;
    font-weight: 700;
    color: var(--lu-text-muted);
    margin: 4px 0 14px;
    text-transform: lowercase;
}
.lu-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.lu-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    color: var(--lu-text);
    font-weight: 700;
    font-size: 14.5px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lu-tile:hover {
    transform: translateY(-2px);
    border-color: var(--lu-purple);
    color: var(--lu-text);
}
.lu-tile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--lu-yellow);
    color: var(--lu-jet);
    flex: none;
}
.lu-tile:nth-child(2n) .lu-tile-chip { background: var(--lu-sky); }
.lu-tile:nth-child(3n) .lu-tile-chip { background: var(--lu-purple-soft); color: var(--lu-purple); }
.lu-tile-label { flex: 1; min-width: 0; }
.lu-tile-go { color: var(--lu-text-muted); opacity: 0; transition: opacity .15s ease; }
.lu-tile:hover .lu-tile-go { opacity: 1; color: var(--lu-purple); }

/* announcements on homepage */
.lu-announcement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.lu-announcement { display: block; color: var(--lu-text); margin-bottom: 0; }
.lu-announcement:hover { border-color: var(--lu-purple); color: var(--lu-text); }
.lu-announcement-date { margin-bottom: 10px; }
.lu-announcement-title { font-size: 16px; margin: 8px 0; }
.lu-announcement-text {
    font-size: 14px;
    color: var(--lu-text-soft);
    max-height: 130px;
    overflow: hidden;
}
.lu-announcement-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lu-purple);
}
.lu-announcement-more .lu-icon { width: 15px; height: 15px; }

@media (max-width: 720px) {
    .lu-auth-card { padding: 26px 20px 22px; }
    .lu-form-grid { grid-template-columns: 1fr; }
    .lu-span-2 { grid-column: span 1; }
    .lu-invite-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. Dashboard & core pages (Phase 3)
   -------------------------------------------------------------------------- */

/* dashboard stat cards */
.lu-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.lu-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    color: var(--lu-text);
    transition: transform .15s ease, border-color .15s ease;
}
.lu-stat:hover { transform: translateY(-2px); border-color: var(--lu-purple); color: var(--lu-text); }
.lu-stat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    flex: none;
}
.lu-stat-chip-purple { background: var(--lu-purple-soft); color: var(--lu-purple); }
.lu-stat-chip-sky { background: var(--lu-sky-soft); color: var(--lu-info); }
.lu-stat-chip-yellow { background: var(--lu-yellow-soft); color: var(--lu-warning); }
.lu-stat-chip-jet { background: var(--lu-surface-2); color: var(--lu-jet); }
.lu-stat-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lu-stat-num { font-size: 26px; font-weight: 700; line-height: 1.2; }
.lu-stat-label { font-size: 13px; color: var(--lu-text-muted); font-weight: 500; }
.lu-stat-go { color: var(--lu-text-muted); opacity: 0; transition: opacity .15s ease; }
.lu-stat:hover .lu-stat-go { opacity: 1; color: var(--lu-purple); }
.lu-stat-attention .lu-stat-num { color: var(--lu-danger); }

/* dashboard KB search */
.lu-kb-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    margin-bottom: 22px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: 999px;
    box-shadow: var(--lu-shadow);
    color: var(--lu-text-muted);
}
.lu-kb-search:focus-within { box-shadow: var(--lu-ring); }
.lu-kb-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 14.5px;
    letter-spacing: var(--lu-tracking);
    color: var(--lu-text);
}

/* home panels */
.lu-home-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-items: start;
}
.lu-home-panel-col { min-width: 0; }
@media (max-width: 900px) {
    .lu-home-panel-grid { grid-template-columns: 1fr; }
}

/* panel color accents (WHMCS home panels declare a color via getExtra) */
.panel[class*="panel-accent-"] { border-top: 3px solid var(--lu-border-strong); }
.panel-accent-blue, .panel-accent-light-blue { border-top-color: var(--lu-sky) !important; }
.panel-accent-green, .panel-accent-emerald { border-top-color: #34C273 !important; }
.panel-accent-red { border-top-color: var(--lu-danger) !important; }
.panel-accent-gold, .panel-accent-yellow, .panel-accent-orange { border-top-color: var(--lu-yellow) !important; }
.panel-accent-purple, .panel-accent-pink { border-top-color: var(--lu-purple) !important; }
.panel-accent-asbestos, .panel-accent-gray { border-top-color: var(--lu-border-strong) !important; }
[class*="bg-color-"] { background: var(--lu-surface); }

/* status labels — semantic, universal colors */
.label.status { font-size: 12px; padding: 4px 12px; white-space: nowrap; }
.status-active, .status-paid, .status-accepted, .status-completed, .status-open, .status-success {
    background: var(--lu-success-bg); color: var(--lu-success);
}
.status-pending, .status-pendingtransfer, .status-pending-transfer, .status-unpaid, .status-delivered,
.status-onhold, .status-on-hold, .status-inprogress, .status-draft, .status-expiring, .status-grace {
    background: var(--lu-warning-bg); color: var(--lu-warning);
}
.status-suspended, .status-overdue, .status-terminated, .status-cancelled, .status-fraud,
.status-expired, .status-lost, .status-dead, .status-collections, .status-transferredaway, .status-closed {
    background: var(--lu-danger-bg); color: var(--lu-danger);
}
.status-refunded, .status-transferred, .status-redemption {
    background: var(--lu-info-bg); color: var(--lu-info);
}
.label-placeholder { display: none; }

/* tables inside cards */
.lu-table-card > .panel-body { padding: 16px 20px 20px; }
.lu-table-sub { font-size: 12.5px; color: var(--lu-text-muted); }
.table-list tbody tr { cursor: pointer; }
.lu-yesno { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; }
.lu-yesno .lu-icon { width: 15px; height: 15px; }
.lu-yes { color: var(--lu-success); }
.lu-no { color: var(--lu-danger); }

/* row action button groups + BS3 caret */
.btn-group { display: inline-flex; vertical-align: middle; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 999px 0 0 999px; }
.btn-group > .btn:last-child, .btn-group > .btn.dropdown-toggle:last-child { border-radius: 0 999px 999px 0; }
.btn-group > .btn:only-child { border-radius: 999px; }
.btn-group .btn + .btn { margin-left: -1.5px; }
.caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 5px dashed currentColor;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu > li.dropdown-item { padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.dropdown-menu > li.dropdown-item:hover { background: var(--lu-surface-2); color: var(--lu-purple); }
.dropdown-menu > li.disabled { opacity: .5; pointer-events: none; }
.lu-row-actions .btn { padding: 6px 10px; }
.lu-row-actions .lu-icon { width: 15px; height: 15px; }

/* nav tabs (product details etc.) */
.lu-tabs-card { overflow: visible; }
.nav-tabs {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 14px 16px 0;
    border-bottom: 1px dotted var(--lu-border-strong);
    overflow-x: auto;
}
.nav-tabs > li { flex: none; }
.nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px 999px 0 0;
    color: var(--lu-text-soft);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.nav-tabs > li > a .lu-icon { width: 16px; height: 16px; }
.nav-tabs > li > a:hover { color: var(--lu-purple); }
.nav-tabs > li.active > a {
    color: var(--lu-purple);
    background: var(--lu-purple-soft);
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* product overview */
.lu-product-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    margin-bottom: 22px;
}
.lu-product-overview .lu-card { margin-bottom: 0; }
.lu-product-name { font-size: 22px; font-weight: 700; margin: 6px 0 2px; }
.lu-product-domain { display: inline-block; font-size: 14px; margin-bottom: 6px; }
.lu-product-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.lu-btn-ghost-danger { color: var(--lu-danger); border-color: var(--lu-danger-border); }
.lu-btn-ghost-danger:hover { color: #fff; background: var(--lu-danger); border-color: var(--lu-danger); }

/* facts grid (dt/dd pairs) */
.lu-facts { margin: 0; }
.lu-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--lu-border);
    font-size: 14px;
}
.lu-fact:last-child { border-bottom: 0; }
.lu-fact dt { font-weight: 700; color: var(--lu-text-soft); flex: none; }
.lu-fact dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* resource usage dials */
.lu-usage-grid {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin: 10px 0;
}
.lu-usage h4 { margin-bottom: 10px; }
.lu-usage-detail { color: var(--lu-text-muted); font-size: 13.5px; margin-top: 8px; }

/* active products/services home panel items */
.lu-service-item, .div-service-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 4px;
    border-bottom: 1px dotted var(--lu-border);
    cursor: pointer;
}
.lu-service-item:last-child { border-bottom: 0; }
.lu-service-name { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.lu-service-title { font-weight: 700; font-size: 14px; }
.lu-service-domain { font-size: 12.5px; color: var(--lu-text-muted); }
.lu-service-buttons { display: flex; align-items: center; gap: 8px; }
.lu-service-buttons .btn-view-details .lu-icon { width: 14px; height: 14px; }

/* downloads / addons inside product details */
.lu-download-list .lu-card, .lu-addon-list .lu-card { margin-bottom: 16px; }

/* metrics table */
.lu-metrics-table th { white-space: nowrap; }

@media (max-width: 900px) {
    .lu-product-overview { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   22. Account & billing (Phase 4)
   -------------------------------------------------------------------------- */

/* horizontal forms (payment method manage keeps WHMCS core structure) */
.form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: flex-start; }
.form-horizontal .form-group > .control-label { padding-top: 10px; }

.radio-inline, .checkbox-inline, .icheck-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    font-weight: 500;
    font-size: 14px;
    color: var(--lu-text-soft);
    cursor: pointer;
}

.well {
    padding: 16px 20px;
    background: var(--lu-surface-2);
    border-radius: var(--lu-radius);
    margin-bottom: 16px;
}

/* permissions checklists */
.lu-permissions { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.lu-permission {
    align-items: flex-start;
    padding: 10px 14px;
    border: 1.5px solid var(--lu-border);
    border-radius: var(--lu-radius-sm);
    transition: border-color .15s ease, background .15s ease;
}
.lu-permission:hover { border-color: var(--lu-purple); background: var(--lu-purple-tint); }
.lu-radio-row { display: flex; gap: 8px; flex-wrap: wrap; }

.lu-check-list { display: flex; flex-direction: column; gap: 8px; }

/* contact chooser bar */
.lu-contact-chooser .panel-body { padding: 14px 20px; }
.lu-chooser-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lu-chooser-row .control-label { margin: 0; flex: none; }
.lu-chooser-row .form-control { flex: 1; min-width: 220px; width: auto; }

/* add funds */
.lu-addfunds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    max-width: 860px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 900px) {
    .lu-addfunds { grid-template-columns: 1fr; }
}

/* payment methods */
.lu-paymethod-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--lu-surface-2);
    color: var(--lu-text-soft);
}
.cc-details .field-error-msg, .fieldgroup-bankaccount .field-error-msg {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--lu-danger);
}
.auth3d-area { border: 1px solid var(--lu-border); border-radius: var(--lu-radius); background: #fff; }
.gateway-errors { margin-top: 8px; }

/* email popup window (viewemail.php) */
body.lu-popup-body { padding: 16px; }
.lu-popup-card { max-width: 640px; margin: 0 auto; }
.lu-popup-title { font-size: 15px; overflow-wrap: anywhere; }
.lu-popup-attachments {
    padding: 10px 22px;
    border-bottom: 1px dotted var(--lu-border-strong);
    font-size: 13px;
    color: var(--lu-text-soft);
}
.lu-attach { display: inline-flex; align-items: center; gap: 5px; color: var(--lu-text-muted); }
.lu-attach .lu-icon { width: 14px; height: 14px; }
.lu-popup-card iframe { border: 0; width: 100%; }

/* --------------------------------------------------------------------------
   23. Support & content (Phase 5)
   -------------------------------------------------------------------------- */

/* tiles with descriptions (departments, KB/download categories) */
.lu-dept-tiles, .lu-kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.lu-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lu-tile-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--lu-text-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lu-dept-tile, .lu-kb-tile { align-items: flex-start; }
.lu-dept-tile .lu-tile-chip, .lu-kb-tile .lu-tile-chip { margin-top: 2px; }

/* attachments row (ticket forms) */
.lu-attach-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.lu-attach-fields { flex: 1; min-width: 220px; }
.lu-attach-fields input[type="file"] { padding: 8px 12px; }
#fileUploadsContainer input[type="file"] { margin-top: 8px; }

/* ticket reply composer collapse (whmcs.js toggles these) */
.lu-clickable { cursor: pointer; }
.panel-body-collapsed { display: none; }
.collapse-icon { margin-left: auto; color: var(--lu-text-muted); }
.collapse-icon i { font-style: normal; font-weight: 700; font-size: 18px; line-height: 1; }
.collapse-icon i.fa-plus::before { content: "+"; }
.collapse-icon i.fa-minus::before { content: "\2212"; }

/* ticket conversation thread */
.lu-ticket-reply {
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.lu-ticket-reply.staff { border-left: 4px solid var(--lu-purple); }
.lu-reply-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px dotted var(--lu-border-strong);
}
.lu-reply-avatar { background: var(--lu-jet); }
.lu-reply-avatar-staff { background: var(--lu-purple); }
.lu-reply-user { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lu-reply-user .name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lu-reply-type { font-size: 12.5px; color: var(--lu-text-muted); }
.lu-reply-date { font-size: 12.5px; color: var(--lu-text-muted); white-space: nowrap; }
.lu-reply-message { padding: 18px 22px; font-size: 14.5px; overflow-wrap: anywhere; }
.lu-reply-message img { max-width: 100%; }
.lu-reply-attachments {
    padding: 12px 22px;
    border-top: 1px dotted var(--lu-border-strong);
    font-size: 13.5px;
}
.lu-reply-attachments ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lu-reply-attachments li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.lu-reply-attachments .lu-icon { width: 15px; height: 15px; color: var(--lu-text-muted); }

/* requestor type labels */
[class*="requestor-type-"] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--lu-surface-2);
    color: var(--lu-text-soft);
}
.requestor-type-operator { background: var(--lu-purple-soft); color: var(--lu-purple); }
.requestor-type-owner { background: var(--lu-sky-soft); color: var(--lu-info); }

/* staff reply star ratings (whmcs.js binds .rating span.star clicks) */
.rating, .rating-done { display: inline-flex; flex-direction: row-reverse; gap: 2px; float: right; align-items: center; }
.rating .star, .rating-done .star { cursor: pointer; font-size: 18px; line-height: 1; color: var(--lu-border-strong); }
.rating .star::before, .rating-done .star::before { content: "\2605"; }
.rating .star:hover, .rating .star:hover ~ .star { color: var(--lu-yellow); }
.rating-done .star { cursor: default; }
.rating-done .star.active { color: #E3A008; }
.rating-done .rated { font-size: 12px; color: var(--lu-text-muted); margin-right: 8px; }

/* custom ticket status colors (admin-defined) */
.label.status-custom { background: transparent; border: 1.5px solid; }
.ticket-subject.unread { font-weight: 700; }

/* feedback 1–10 scale */
.lu-rating-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 18px;
}
.lu-rating-end { font-size: 12px; color: var(--lu-text-muted); }
.lu-rating-option input { position: absolute; opacity: 0; }
.lu-rating-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--lu-border-strong);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.lu-rating-option input:checked + span {
    background: var(--lu-purple);
    border-color: var(--lu-purple);
    color: #fff;
}
.lu-rating-option:hover span { border-color: var(--lu-purple); color: var(--lu-purple); }
.lu-rating-option input:checked:hover + span { color: #fff; }

/* knowledgebase */
.lu-kbarticles { display: flex; flex-direction: column; gap: 4px; }
.lu-kbarticle {
    padding: 12px 16px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius);
    margin-bottom: 8px;
}
.lu-kbarticle > a { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.lu-kbarticle > a .lu-icon { width: 16px; height: 16px; }
.lu-kbarticle p { margin: 4px 0 0; font-size: 13.5px; color: var(--lu-text-muted); }
.kb-article-content { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.kb-article-content img { max-width: 100%; border-radius: var(--lu-radius-sm); }
.lu-kb-details {
    list-style: none;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 0;
    font-size: 13px;
    color: var(--lu-text-muted);
}
.lu-kb-details li { display: inline-flex; align-items: center; gap: 6px; }
.lu-kb-details .lu-icon { width: 14px; height: 14px; }
.lu-kb-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-inline-edit { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.admin-inline-edit .lu-icon { width: 13px; height: 13px; }

/* downloads */
.lu-download-group { padding: 8px; }
.lu-download-item { align-items: flex-start; }
.lu-download-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lu-download-lock { width: 14px; height: 14px; color: var(--lu-text-muted); vertical-align: -2px; }

/* announcements */
.lu-announcement-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lu-announcement-meta .label { display: inline-flex; align-items: center; gap: 6px; }
.lu-announcement-meta .lu-icon { width: 13px; height: 13px; }
a.lu-announcement-title { display: block; font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--lu-text); }
a.lu-announcement-title:hover { color: var(--lu-purple); }
.lu-announcement-body { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }

/* server status */
.lu-issue-desc { margin: 14px 0 0; padding-top: 12px; border-top: 1px dotted var(--lu-border); font-size: 14px; }

/* domain pricing */
.lu-featured-tlds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.lu-featured-tld {
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius);
    box-shadow: var(--lu-shadow);
    padding: 18px;
    text-align: center;
}
.lu-featured-tld img { max-height: 40px; width: auto; }
.lu-featured-tld .price { margin-top: 10px; font-weight: 700; color: var(--lu-purple); }
.tld-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tld-filters a.label { cursor: pointer; transition: all .15s ease; }
.tld-filters a.label:hover { background: var(--lu-purple-soft); color: var(--lu-purple); }
.tld-filters a.label-success { background: var(--lu-success-bg); color: var(--lu-success); }
.lu-currency-form { margin-bottom: 12px; }
.lu-currency-form .form-control { width: auto; }

/* contact */
.lu-contact-card { max-width: 720px; margin: 0 auto 22px; }

/* print visibility helpers */
.visible-print-block { display: none; }
@media print {
    .hidden-print { display: none !important; }
    .visible-print-block { display: block !important; }
}

/* --------------------------------------------------------------------------
   24. Long tail: domains suite, upgrades, affiliates, payments (Phase 6)
   -------------------------------------------------------------------------- */
.w-hidden { display: none; }

/* domain contact / bulk cards */
.lu-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    align-items: start;
    margin-bottom: 22px;
}
.lu-contact-grid .lu-card { margin-bottom: 0; }
.lu-indent { margin: 8px 0 14px 26px; }
.lu-domain-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }

/* registered nameserver field with domain suffix */
.lu-ns-field { display: flex; align-items: center; gap: 8px; }
.lu-ns-field .form-control { flex: 1; min-width: 0; }
.lu-ns-suffix { color: var(--lu-text-muted); font-size: 13.5px; white-space: nowrap; }

/* upgrades */
.lu-upgrade-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.lu-upgrade-info { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.lu-upgrade-form { width: 240px; flex: none; }
.lu-upgrade-list .lu-card { margin-bottom: 14px; }

/* plan comparison cards (upgrade-configure) */
.lu-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.lu-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lu-surface);
    border: 1.5px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow);
    overflow: hidden;
}
.lu-plan-recommended { border-color: var(--lu-purple); }
.lu-plan-flag {
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    background: var(--lu-surface-2);
    color: var(--lu-text-soft);
    text-transform: lowercase;
}
.lu-plan-flag-accent { background: var(--lu-purple); color: #fff; }
.lu-plan-head { padding: 18px 20px 10px; text-align: center; }
.lu-plan-head h4 { margin-bottom: 4px; }
.lu-plan-head p { font-size: 13px; color: var(--lu-text-muted); margin: 0; }
.lu-plan-features {
    list-style: none;
    margin: 0;
    padding: 8px 20px;
    flex: 1;
    font-size: 13.5px;
}
.lu-plan-features li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px dotted var(--lu-border);
}
.lu-plan-features li:last-child { border-bottom: 0; }
.lu-plan-foot { padding: 14px 20px 20px; }
.lu-plan-foot .form-control { margin-bottom: 10px; }

/* affiliates */
.lu-referral-link {
    padding: 12px 18px;
    background: var(--lu-surface-2);
    border-radius: var(--lu-radius);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.lu-feature-list { list-style: none; margin: 0 0 18px; padding: 0; }
.lu-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
}
.lu-feature-list .lu-icon { width: 17px; height: 17px; color: var(--lu-success); flex: none; margin-top: 3px; }

/* masspay */
.lu-masspay-invoice { background: var(--lu-surface-2); }

/* payment pages */
.lu-payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.lu-payment-aside .panel, .lu-payment-aside .lu-card { margin-bottom: 0; }
.lu-forward-page { padding: 32px 0; }
@media (max-width: 900px) {
    .lu-payment-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   25. Guest shell — full-screen layout with top navigation (logged out)
   -------------------------------------------------------------------------- */
body.lu-guest .lu-main { margin-left: 0; }

.lu-navbar {
    position: sticky;
    top: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 76px;
    padding: 0 32px;
    background: var(--lu-surface);
    border-bottom: 1px solid var(--lu-border);
}
.lu-navbar-logo { flex: none; }
.lu-navbar-logo img { max-height: 44px; width: auto; display: block; }
.lu-logo-text-dark { color: var(--lu-text); }
.lu-navbar-menu { flex: none; }
body.lu-guestnav-open .lu-navbar-menu {
    background: var(--lu-purple-soft);
    color: var(--lu-purple);
}

/* the guest nav is a slide-down panel at every screen size — the navbar itself
   stays slim (logo + actions + menu button) so it can never overflow */
.lu-navbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    margin-top: 10px;
    width: min(340px, calc(100vw - 40px));
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius-lg);
    box-shadow: var(--lu-shadow-pop);
    padding: 10px;
    z-index: 300;
}
body.lu-guestnav-open .lu-navbar-nav { display: flex; }
.lu-topnav-item { position: relative; }
.lu-topnav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--lu-text-soft);
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.lu-topnav-link > span:first-of-type { flex: 1; min-width: 0; }
/* dropdown children render inline, indented, inside the panel */
.lu-topnav-item .dropdown-menu {
    position: static;
    display: block;
    border: 0;
    box-shadow: none;
    padding: 0 0 4px 32px;
    min-width: 0;
    margin: 0;
    background: none;
}
.lu-topnav-item .dropdown-menu > li > a { padding: 8px 10px; }
.lu-topnav-item > .lu-topnav-link .lu-nav-caret { display: none; }
.lu-topnav-link:hover, .lu-topnav-link:focus {
    background: var(--lu-surface-2);
    color: var(--lu-text);
}
.lu-topnav-link.lu-active,
.lu-topnav-item.active > .lu-topnav-link {
    background: var(--lu-purple);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgba(177, 24, 200, .45);
}
.lu-topnav-icon { width: 17px; height: 17px; }
.lu-topnav-link.lu-active .lu-topnav-icon { color: #fff; }

.lu-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: none;
}

/* guest hero — bolder curved horizon, brand-style */
body.lu-guest .lu-hero {
    padding: 72px 32px 110px;
    border-radius: 0 0 50% 50% / 0 0 90px 90px;
    margin: 0 -1px;
}
body.lu-guest .lu-hero .lu-display { font-size: 46px; }
body.lu-guest .lu-hero::before {
    top: -100px; right: -60px;
    width: 420px; height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(177, 24, 200, .55), transparent 70%);
}
body.lu-guest .lu-hero-inner { max-width: 860px; }

/* guest content breathes a little more */
body.lu-guest .lu-content { padding-top: 34px; }

/* guest auth pages: give the centered card room */
body.lu-guest .lu-auth { padding: 40px 0 64px; min-height: 52vh; align-items: flex-start; }

/* responsive guest navbar */
@media (max-width: 1024px) {
    .lu-navbar { gap: 12px; padding: 0 20px; }
    .lu-navbar-nav { left: 12px; }
}
@media (max-width: 900px) {
    body.lu-guest .lu-navbar .lu-btn-cta span { display: none; }
    body.lu-guest .lu-navbar .lu-btn-cta { width: 42px; height: 42px; padding: 0; }
}
@media (max-width: 720px) {
    .lu-navbar { min-height: 64px; }
    .lu-navbar-logo img { max-height: 36px; }
    .lu-navbar-login, .lu-navbar-register { padding: 8px 14px; font-size: 13px; }
    body.lu-guest .lu-hero { padding: 44px 20px 72px; border-radius: 0 0 50% 50% / 0 0 48px 48px; }
    body.lu-guest .lu-hero .lu-display { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   26. Bare auth shell (login / register / password reset — no nav chrome)
   -------------------------------------------------------------------------- */
body.lu-bare {
    background-color: var(--lu-bg);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(177, 24, 200, .07), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(147, 214, 255, .12), transparent 38%),
        radial-gradient(circle at 82% 8%, rgba(255, 229, 118, .10), transparent 30%);
    background-attachment: fixed;
}

.lu-bareheader {
    display: flex;
    justify-content: center;
    padding: 44px 16px 0;
}
.lu-bareheader img { max-height: 52px; width: auto; }
.lu-bareheader .lu-brandmark { width: 44px; height: 44px; }

/* vertically center the auth card in the viewport */
body.lu-bare .lu-content { display: flex; flex-direction: column; padding-top: 0; }
body.lu-bare .lu-page { flex: 1; display: flex; }
body.lu-bare .lu-page-main { margin: auto; width: 100%; }
body.lu-bare .lu-auth { padding: 24px 0 32px; min-height: 0; align-items: center; }
body.lu-bare .lu-auth-card { box-shadow: var(--lu-shadow-pop); border: 0; }

/* the auth card already carries the brandmark — avoid doubling it when the
   bare header shows the fallback mark (real logo uploads show the wordmark) */
body.lu-bare .lu-auth-head .lu-brandmark { display: none; }

/* register page (wider, multi-card) still reads well top-aligned */
body.lu-bare.page-clientregister .lu-page-main { margin: 24px auto; }

/* minimal footer: centered copyright, no chrome */
body.lu-bare .lu-footer {
    border-top: 0;
    justify-content: center;
    text-align: center;
    padding-top: 8px;
}
body.lu-bare .lu-footer .back-to-top { display: none; }

@media (max-width: 720px) {
    .lu-bareheader { padding-top: 28px; }
    .lu-bareheader img { max-height: 40px; }
}

/* menu divider items (WHMCS injects "-----" children, e.g. in the Store menu) */
.lu-menu-divider {
    list-style: none;
    border-top: 1px dotted var(--lu-border-strong);
    margin: 6px 12px;
    padding: 0;
    height: 0;
}
.lu-subnav .lu-menu-divider { border-top-color: rgba(255, 255, 255, .18); margin: 6px 14px; }

/* --------------------------------------------------------------------------
   27. Home panel core-generated forms (domain register/transfer, etc.)
   WHMCS builds these panel bodies with Bootstrap input-group markup —
   restyle and let them wrap instead of cramming onto one row.
   -------------------------------------------------------------------------- */
.lu-home-panel .panel-body form { margin: 0; }

.lu-home-panel .input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.lu-home-panel .input-group input[type="text"],
.lu-home-panel .input-group .form-control {
    flex: 1 1 220px;
    min-width: 0;
    width: auto;
    padding: 10px 16px;
    background: var(--lu-surface);
    border: 1.5px solid var(--lu-border-strong);
    border-radius: 12px !important;
    font-family: var(--lu-font);
    font-size: 14px;
    letter-spacing: var(--lu-tracking);
    color: var(--lu-text);
}
.lu-home-panel .input-group input[type="text"]:focus,
.lu-home-panel .input-group .form-control:focus {
    outline: none;
    border-color: var(--lu-purple);
    box-shadow: var(--lu-ring);
}
.lu-home-panel .input-group .input-group-btn {
    display: flex;
    gap: 8px;
    flex: none;
    width: auto;
    align-items: stretch;
}
.lu-home-panel .input-group .input-group-btn .btn {
    border-radius: 999px !important;
    position: static;
    margin: 0;
}

/* captcha widgets inside panels: always on their own line, never overflowing */
.lu-home-panel .g-recaptcha,
.lu-home-panel .recaptcha-container,
.lu-home-panel [id*="recaptcha"],
.lu-home-panel .captcha-container,
.lu-home-panel #default-captcha-domainchecker {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 12px;
}
.lu-home-panel .panel-body { overflow-x: hidden; }
.lu-home-panel .panel-body iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   28. Active services panel rows — refined action cluster
   -------------------------------------------------------------------------- */
.lu-service-item, .div-service-item {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 4px;
}
.lu-service-name { flex: 1 1 240px; min-width: 0; }
.lu-service-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lu-service-domain { overflow-wrap: anywhere; }

.lu-service-end {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}
.lu-service-status { flex: none; }
.lu-service-status .label { display: inline-block; max-width: none; }

.lu-service-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.lu-service-buttons .btn { white-space: nowrap; }
.lu-service-buttons .btn-view-details .lu-icon { width: 14px; height: 14px; }

/* round "more actions" trigger */
.lu-svc-more-group { position: relative; }
.lu-svc-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--lu-border-strong);
    background: var(--lu-surface);
    color: var(--lu-text-muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lu-svc-more:hover, .open > .lu-svc-more {
    border-color: var(--lu-purple);
    color: var(--lu-purple);
    background: var(--lu-purple-tint);
}
.lu-svc-more .lu-icon { width: 16px; height: 16px; }
.lu-svc-more-group .dropdown-menu { min-width: 200px; }

@media (max-width: 720px) {
    .lu-service-end { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   29. Phone input (intl-tel-input) — Luno skin over the stock widget CSS
   -------------------------------------------------------------------------- */
.intl-tel-input { display: block; width: 100%; }
.intl-tel-input .country-list {
    max-height: 260px;
    overflow-y: auto;
    background: var(--lu-surface);
    border: 1px solid var(--lu-border);
    border-radius: var(--lu-radius);
    box-shadow: var(--lu-shadow-pop);
    padding: 6px;
    z-index: 1055;
    white-space: normal;
}
.intl-tel-input .country-list .country {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    letter-spacing: var(--lu-tracking);
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
    background: var(--lu-surface-2);
}
.intl-tel-input .country-list .country .dial-code { color: var(--lu-text-muted); }
.intl-tel-input .country-list .divider { border-bottom: 1px dotted var(--lu-border-strong); }
.intl-tel-input .selected-flag { border-radius: 12px 0 0 12px; }
.intl-tel-input .selected-flag:hover, .intl-tel-input .selected-flag:focus { background: var(--lu-surface-2); }

/* --------------------------------------------------------------------------
   30. Home panel domain form — corrections (captcha injects INSIDE the
   input-group, so stop the row stretching and force it onto its own line)
   -------------------------------------------------------------------------- */
.lu-home-panel .input-group { align-items: center; }
.lu-home-panel .input-group input[type="text"],
.lu-home-panel .input-group .form-control {
    align-self: center;
    height: auto;
}
.lu-home-panel .input-group > .input-group-btn {
    align-self: center;
    height: auto;
}
.lu-home-panel .input-group .input-group-btn .btn {
    height: auto;
    padding: 10px 20px;
    line-height: 1.4;
}

/* any non-field child of the row (captcha widget, help text) drops to its own line */
.lu-home-panel .input-group > div,
.lu-home-panel .input-group > .g-recaptcha,
.lu-home-panel .input-group > table {
    flex: 1 1 100%;
    width: 100%;
    order: 10;
    margin-top: 10px;
    align-self: flex-start;
}

/* brand the panel's action buttons: primary action purple, secondary ghost */
.lu-home-panel .input-group-btn .btn-success,
.lu-home-panel .input-group-btn .btn-primary {
    background: var(--lu-purple);
    border: 1.5px solid var(--lu-purple);
    color: #fff;
}
.lu-home-panel .input-group-btn .btn-success:hover,
.lu-home-panel .input-group-btn .btn-primary:hover {
    background: var(--lu-purple-strong);
    border-color: var(--lu-purple-strong);
}
.lu-home-panel .input-group-btn .btn-info,
.lu-home-panel .input-group-btn .btn-default {
    background: var(--lu-surface);
    border: 1.5px solid var(--lu-border-strong);
    color: var(--lu-text);
}
.lu-home-panel .input-group-btn .btn-info:hover,
.lu-home-panel .input-group-btn .btn-default:hover {
    border-color: var(--lu-purple);
    color: var(--lu-purple);
    background: var(--lu-surface);
}

/* --------------------------------------------------------------------------
   31. Core-generated action buttons — theme purple, not semantic green/blue.
   WHMCS emits btn-success/btn-info for plain actions inside contextual
   sidebar panels, home panels, and module output; semantic colors stay
   reserved for statuses, alerts, and enable/disable toggles.
   -------------------------------------------------------------------------- */
.lu-aside-card .btn-success, .lu-aside-card .btn-info,
.lu-home-panel .btn-success, .lu-home-panel .btn-info,
.module-client-area .btn-success, .module-client-area .btn-info,
.moduleoutput .btn-success, .moduleoutput .btn-info,
.lu-addon-list .panel-footer .btn-success, .lu-addon-list .panel-footer .btn-info {
    background: var(--lu-purple);
    border-color: var(--lu-purple);
    color: #fff;
}
.lu-aside-card .btn-success:hover, .lu-aside-card .btn-info:hover,
.lu-home-panel .btn-success:hover, .lu-home-panel .btn-info:hover,
.module-client-area .btn-success:hover, .module-client-area .btn-info:hover,
.moduleoutput .btn-success:hover, .moduleoutput .btn-info:hover,
.lu-addon-list .panel-footer .btn-success:hover, .lu-addon-list .panel-footer .btn-info:hover {
    background: var(--lu-purple-strong);
    border-color: var(--lu-purple-strong);
    color: #fff;
}
/* btn-danger stays red everywhere — destructive is real semantics */

/* --------------------------------------------------------------------------
   32. Markdown editor (bootstrap-markdown — ticket compose/reply)
   -------------------------------------------------------------------------- */
.md-editor {
    display: block;
    border: 1.5px solid var(--lu-border-strong);
    border-radius: var(--lu-radius);
    background: var(--lu-surface);
    overflow: hidden;
}
.md-editor:focus-within { border-color: var(--lu-purple); box-shadow: var(--lu-ring); }
.md-editor > .md-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--lu-surface-2);
    border-bottom: 1px dotted var(--lu-border-strong);
}
.md-editor > .md-header .btn-group { display: inline-flex; gap: 2px; }
.md-editor > .md-header .btn {
    padding: 6px 11px;
    font-size: 13px;
    border-radius: 9px !important;
    background: none;
    border: 0;
    color: var(--lu-text-soft);
    box-shadow: none;
}
.md-editor > .md-header .btn:hover,
.md-editor > .md-header .btn.active {
    background: var(--lu-surface);
    color: var(--lu-purple);
}
.md-editor > .md-header .btn .glyphicon { top: 1px; }
.md-editor textarea,
.md-editor > .md-input {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px;
    background: var(--lu-surface);
    width: 100%;
    display: block;
}
.md-editor > .md-preview {
    background: var(--lu-surface);
    border: 0;
    min-height: 120px;
    padding: 14px 16px;
}
.md-editor.md-fullscreen-mode { padding: 40px; }
.markdown-editor-status {
    padding: 6px 4px;
    font-size: 12.5px;
    color: var(--lu-text-muted);
}
.markdown-editor-status .markdown-save { color: var(--lu-success); }

/* --------------------------------------------------------------------------
   33. Service/domain detail overview — stack the cards, let labels breathe
   -------------------------------------------------------------------------- */
.lu-product-overview { grid-template-columns: 1fr; }
.lu-product-actions .btn {
    white-space: normal;
    line-height: 1.4;
    text-align: center;
}
.lu-product-actions .btn .lu-icon { flex: none; }
/* facts get more air now that the card is full width */
.lu-fact { padding: 11px 0; }
.lu-fact dd { text-align: right; }
@media (max-width: 560px) {
    .lu-fact { flex-direction: column; align-items: flex-start; gap: 2px; }
    .lu-fact dd { text-align: left; }
}

/* whmcs.js sets an inline width on .div-service-status measured from a
   .label-placeholder we intentionally don't render — with jQuery 1.12 that
   computes to 5px and the buttons overlap the pill. Neutralize it. */
.lu-service-item .div-service-status,
.div-service-item .div-service-status {
    width: auto !important;
    min-width: 0 !important;
    flex: none;
}
.div-service-status .label { position: static !important; }

/* --------------------------------------------------------------------------
   34. Module overview output (cPanel/Plesk product overview: usage stats,
   quick shortcuts, quick-create forms). Module markup relies on grid
   classes that stack at dashboard column widths — make columns flexible.
   -------------------------------------------------------------------------- */
.lu-module-overview .row,
.module-client-area .row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 0;
    align-items: stretch;
}
.lu-module-overview .row > [class*="col-"],
.module-client-area .row > [class*="col-"] {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
}
/* full-width columns stay full width */
.lu-module-overview .row > .col-xs-12,
.lu-module-overview .row > .col-sm-12,
.lu-module-overview .row > .col-md-12,
.module-client-area .row > .col-xs-12,
.module-client-area .row > .col-sm-12,
.module-client-area .row > .col-md-12 { flex: 1 1 100%; }

.lu-module-overview .panel-heading,
.module-client-area .panel-heading { font-weight: 700; }
.lu-module-overview .panel-body p { margin-bottom: 10px; }
.lu-module-overview a { overflow-wrap: anywhere; }
.lu-module-overview .text-info,
.lu-module-overview small a { color: var(--lu-text-muted) !important; font-size: 12.5px; }

/* quick-create forms etc: space stacked fields and buttons */
.lu-module-overview form .form-control,
.module-client-area form .form-control { margin-bottom: 12px; }
.lu-module-overview form .btn,
.module-client-area form .btn { margin-top: 4px; }
.lu-module-overview .form-group,
.module-client-area .form-group { margin-bottom: 14px; }

/* action buttons inside module output: theme purple, never green/blue */
.lu-module-overview .btn-success, .lu-module-overview .btn-info {
    background: var(--lu-purple);
    border-color: var(--lu-purple);
    color: #fff;
}
.lu-module-overview .btn-success:hover, .lu-module-overview .btn-info:hover {
    background: var(--lu-purple-strong);
    border-color: var(--lu-purple-strong);
    color: #fff;
}

/* shortcuts restyled by luno.js into chip tiles */
.lu-mod-shortcut {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: var(--lu-radius);
    color: var(--lu-text) !important;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    transition: background .15s ease, color .15s ease;
}
.lu-mod-shortcut:hover { background: var(--lu-surface-2); color: var(--lu-purple) !important; }
.lu-mod-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--lu-purple-soft);
    color: var(--lu-purple);
    flex: none;
}
.lu-mod-chip .lu-icon { width: 20px; height: 20px; }
.lu-mod-shortcut:nth-of-type(2n) .lu-mod-chip,
[class*="col-"]:nth-child(2n) .lu-mod-chip { background: var(--lu-sky-soft); color: var(--lu-info); }
[class*="col-"]:nth-child(3n) .lu-mod-chip { background: var(--lu-yellow-soft); color: var(--lu-warning); }

/* --------------------------------------------------------------------------
   35. Small-screen header: drop the logo so actions never force x-overflow
   -------------------------------------------------------------------------- */
body.lu-body { overflow-x: hidden; } /* safety net: the shell must never scroll sideways */

@media (max-width: 640px) {
    .lu-navbar-logo { display: none; }
    .lu-navbar { gap: 8px; padding: 0 12px; }
    .lu-navbar-actions { gap: 6px; }
    .lu-navbar-actions .btn { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 400px) {
    /* tightest phones: language chooser folds away too, menu keeps everything reachable */
    .lu-navbar #languageChooser { display: none; }
}

/* whmcs.js row-click handlers inspect event.target and only exempt
   .dropdown-toggle/.dropdown-menu/.caret — make icons inside toggles
   click-transparent so the button itself is always the target. */
.dropdown-toggle .lu-icon,
.dropdown-toggle svg,
.btn-custom-action .lu-icon,
.btn-custom-action .lu-spinner,
.btn-view-details .lu-icon,
.btn-view-details span {
    pointer-events: none;
}

/* label wrapper is a <b> (not <span>) so whmcs.js filter-value extraction
   finds core's own label span — keep it visually identical */
b.lu-aside-item-label { font-weight: inherit; }

/* --------------------------------------------------------------------------
   36. DataTables sort indicators (dropped with dataTables.bootstrap.css)
   -------------------------------------------------------------------------- */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 28px;
    user-select: none;
}
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    letter-spacing: -1px;
}
table.dataTable thead > tr > th.sorting::after {
    content: "\2191\2193";           /* ↑↓ both, unsorted */
    color: var(--lu-border-strong);
}
table.dataTable thead > tr > th.sorting:hover::after { color: var(--lu-text-muted); }
table.dataTable thead > tr > th.sorting_asc::after {
    content: "\2191";                /* ↑ */
    color: var(--lu-purple);
    font-weight: 700;
    font-size: 13px;
}
table.dataTable thead > tr > th.sorting_desc::after {
    content: "\2193";                /* ↓ */
    color: var(--lu-purple);
    font-weight: 700;
    font-size: 13px;
}
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc { color: var(--lu-purple); }
table.dataTable thead > tr > th.sorting_disabled::after { content: none; }

/* --------------------------------------------------------------------------
   37. Domain list: merged domain cell (SSL badge + name + status) and
   explicit sizing for SSL state images everywhere
   -------------------------------------------------------------------------- */
img.ssl-state,
.ssl-info img {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-block;
    object-fit: contain;
    vertical-align: -3px;
}
.lu-domain-cell { min-width: 200px; }
.lu-domain-cell-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lu-domain-cell-name a { overflow-wrap: anywhere; }
.lu-domain-cell-status {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.lu-domain-cell-status .label.status { font-size: 11px; padding: 3px 10px; }

/* --------------------------------------------------------------------------
   38. Active Products/Services panel: progressive reveal ("View More")
   whmcs.js shows 8 more items per click and disables the button when done —
   the hiding rule below is what makes that behaviour work.
   -------------------------------------------------------------------------- */
div[menuitemname="Active Products/Services"] .list-group .list-group-item {
    display: block;
    border-radius: 0;
}
div[menuitemname="Active Products/Services"] .list-group .list-group-item:hover { background: none; }
div[menuitemname="Active Products/Services"] .list-group .list-group-item:nth-child(n+5) {
    display: none;
}
div[menuitemname="Active Products/Services"] .panel-footer { text-align: center; }
div[menuitemname="Active Products/Services"] .btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--lu-border-strong);
    background: var(--lu-surface);
    color: var(--lu-text-soft);
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}
div[menuitemname="Active Products/Services"] .btn-view-more:hover {
    border-color: var(--lu-purple);
    color: var(--lu-purple);
}
div[menuitemname="Active Products/Services"] .btn-view-more.disabled {
    opacity: .45;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   39. Markdown editor — corrections over the extracted bootstrap-markdown css
   -------------------------------------------------------------------------- */
/* toolbar/footer links never render link-purple; icons inherit button color */
.md-editor a { color: inherit; }
.md-editor .md-header .btn .glyphicon,
.md-editor .md-header .btn { color: var(--lu-text-soft); }
.md-editor .md-header .btn:hover,
.md-editor .md-header .btn:hover .glyphicon,
.md-editor .md-header .btn.active,
.md-editor .md-header .btn.active .glyphicon { color: var(--lu-purple); }

/* fullscreen exit controls: only visible in fullscreen mode, top-right */
.md-editor .md-fullscreen-controls { display: none; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls {
    display: block;
    position: absolute;
    top: 16px;
    right: 20px;
}
.md-editor.md-fullscreen-mode {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: var(--lu-surface);
    border: 0;
    border-radius: 0;
    padding: 64px 24px 16px;
    overflow: auto;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
    max-width: 820px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   40. Phone input country dropdown must escape rounded-card clipping
   -------------------------------------------------------------------------- */
.lu-card:has(.intl-tel-input),
.panel:has(.intl-tel-input),
.card:has(.intl-tel-input),
.tab-content:has(.intl-tel-input),
.tab-pane:has(.intl-tel-input),
.lu-allow-overflow {
    overflow: visible !important;
}
/* keep the rounded corners intact once overflow is released */
.lu-card:has(.intl-tel-input) > .lu-card-head,
.panel:has(.intl-tel-input) > .panel-heading,
.lu-allow-overflow > .lu-card-head,
.lu-allow-overflow > .panel-heading {
    border-radius: var(--lu-radius-lg) var(--lu-radius-lg) 0 0;
}
.lu-card:has(.intl-tel-input) > .panel-footer,
.panel:has(.intl-tel-input) > .panel-footer,
.lu-allow-overflow > .panel-footer,
.lu-allow-overflow > .card-footer {
    border-radius: 0 0 var(--lu-radius-lg) var(--lu-radius-lg);
}
.intl-tel-input .country-list { z-index: 1200; }

/* --------------------------------------------------------------------------
   41. Dashboard domain quick-search: same pill, register/transfer actions
   -------------------------------------------------------------------------- */
.lu-domain-quick { padding: 8px 8px 8px 22px; }
.lu-domain-quick-btns { display: flex; gap: 8px; flex: none; }
.lu-domain-quick .btn { padding: 9px 22px; }
@media (max-width: 640px) {
    .lu-domain-quick { flex-wrap: wrap; padding: 12px 16px; border-radius: 24px; }
    .lu-domain-quick input[type="text"] { flex: 1 1 100%; }
    .lu-domain-quick-btns { width: 100%; }
    .lu-domain-quick-btns .btn { flex: 1; }
}

/* the pill's bare-input rule was stripping the submit buttons too —
   re-assert full button styling for them */
.lu-kb-search input[type="submit"] {
    flex: none;
    width: auto;
    min-width: 0;
    outline: 0;
    cursor: pointer;
}
.lu-domain-quick input[type="submit"].btn {
    padding: 9px 22px;
    border-radius: 999px;
    font-family: var(--lu-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--lu-tracking);
    line-height: 1.4;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lu-domain-quick input[type="submit"].btn-primary {
    background: var(--lu-purple);
    border: 1.5px solid var(--lu-purple);
    color: #fff;
}
.lu-domain-quick input[type="submit"].btn-primary:hover {
    background: var(--lu-purple-strong);
    border-color: var(--lu-purple-strong);
    color: #fff;
}
.lu-domain-quick input[type="submit"].lu-btn-ghost {
    background: var(--lu-surface);
    border: 1.5px solid var(--lu-border-strong);
    color: var(--lu-text-soft);
}
.lu-domain-quick input[type="submit"].lu-btn-ghost:hover {
    border-color: var(--lu-purple);
    color: var(--lu-purple);
    background: var(--lu-surface);
}

/* module overview shortcuts: two per row on small screens */
@media (max-width: 720px) {
    .lu-module-overview .row > [class*="col-"],
    .module-client-area .row > [class*="col-"] {
        flex: 1 1 40%;
        max-width: 50%;
    }
    .lu-module-overview .row > .col-xs-12,
    .lu-module-overview .row > .col-sm-12,
    .module-client-area .row > .col-xs-12,
    .module-client-area .row > .col-sm-12 {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   42. Module quick-create forms (cPanel "Quick Create Email Account"):
   joined input+@domain pill, aligned heights across the row
   -------------------------------------------------------------------------- */
.lu-module-overview .input-group,
.module-client-area .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.lu-module-overview .input-group .form-control,
.module-client-area .input-group .form-control {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 12px;
}
.lu-module-overview .input-group .form-control:not(:last-child),
.module-client-area .input-group .form-control:not(:last-child) {
    border-radius: 12px 0 0 12px;
    border-right: 0;
}
.lu-module-overview .input-group-addon,
.lu-module-overview .input-group-append,
.lu-module-overview .input-group-text,
.module-client-area .input-group-addon,
.module-client-area .input-group-append,
.module-client-area .input-group-text {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 0 14px;
    background: var(--lu-surface-2);
    border: 1.5px solid var(--lu-border-strong);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    font-size: 13.5px;
    color: var(--lu-text-muted);
    white-space: nowrap;
}
.lu-module-overview .input-group-append,
.module-client-area .input-group-append { padding: 0; border: 0; background: none; }
.lu-module-overview .input-group-append .input-group-text,
.module-client-area .input-group-append .input-group-text {
    border: 1.5px solid var(--lu-border-strong);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    padding: 0 14px;
    height: 100%;
}
/* align the field columns and the Create button on one baseline */
.lu-module-overview form .row,
.module-client-area form .row { align-items: center; }
.lu-module-overview form .row [class*="col-"] .btn,
.module-client-area form .row [class*="col-"] .btn { margin-top: 0; width: 100%; }

/* quick-create form: both inputs share one wider line, button on its own line */
.lu-module-overview form .row > [class*="col-"],
.module-client-area form .row > [class*="col-"] {
    flex: 1 1 45%;
    min-width: 220px;
}
.lu-module-overview form .row > [class*="col-"]:has(.btn):not(:has(.form-control)),
.module-client-area form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) {
    flex: 1 1 100%;
    min-width: 0;
}
.lu-module-overview form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) .btn,
.module-client-area form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) .btn {
    width: auto;
    min-width: 220px;
    margin-top: 8px;
}

/* quick-create form: equal field heights on desktop, full width on mobile */
.lu-module-overview form .row > [class*="col-"] .form-control,
.module-client-area form .row > [class*="col-"] .form-control {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}
.lu-module-overview form .row > [class*="col-"] .input-group,
.module-client-area form .row > [class*="col-"] .input-group {
    height: 48px;
}
.lu-module-overview form .input-group .form-control,
.module-client-area form .input-group .form-control {
    flex: 1 1 90px;
    min-width: 70px;
}
.lu-module-overview form .input-group-addon,
.lu-module-overview form .input-group-text,
.module-client-area form .input-group-addon,
.module-client-area form .input-group-text {
    max-width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 720px) {
    .lu-module-overview form .row > [class*="col-"],
    .module-client-area form .row > [class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
    }
    .lu-module-overview form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) .btn,
    .module-client-area form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) .btn {
        width: 100%;
    }
}

/* simplification: desktop quick-create row = plain flex + gap, equal fields */
.lu-module-overview form .row,
.module-client-area form .row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}
.lu-module-overview form .row > [class*="col-"],
.module-client-area form .row > [class*="col-"] {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 0;
}
.lu-module-overview form .input-group-addon,
.lu-module-overview form .input-group-text,
.module-client-area form .input-group-addon,
.module-client-area form .input-group-text {
    max-width: none;
}
/* button column keeps its own full line */
.lu-module-overview form .row > [class*="col-"]:has(.btn):not(:has(.form-control)),
.module-client-area form .row > [class*="col-"]:has(.btn):not(:has(.form-control)) {
    flex: 1 1 100%;
}
@media (max-width: 720px) {
    .lu-module-overview form .row > [class*="col-"],
    .module-client-area form .row > [class*="col-"] {
        flex: 1 1 100%;
    }
}

/* the standalone password field kept the generic 12px form margin — kill it
   inside quick-create rows so both fields sit level */
.lu-module-overview form .row .form-control,
.module-client-area form .row .form-control {
    margin-bottom: 0;
}

/* mobile: module overview CARDS stack full width — only shortcut tiles
   keep the two-per-row treatment */
@media (max-width: 720px) {
    .lu-module-overview .row > [class*="col-"]:has(.panel),
    .lu-module-overview .row > [class*="col-"]:has(.card),
    .lu-module-overview .row > [class*="col-"]:has(.dial-usage),
    .module-client-area .row > [class*="col-"]:has(.panel),
    .module-client-area .row > [class*="col-"]:has(.card),
    .module-client-area .row > [class*="col-"]:has(.dial-usage) {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* mobile: label/value pairs inside module cards (Billing Overview etc.)
   stack full width and left-align; shortcut tiles keep two-per-row */
@media (max-width: 720px) {
    .lu-module-overview .panel .row > [class*="col-"],
    .lu-module-overview .card .row > [class*="col-"],
    .module-client-area .panel .row > [class*="col-"],
    .module-client-area .card .row > [class*="col-"] {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left !important;
    }
    .lu-module-overview .panel .row > [class*="col-"]:has(.lu-mod-shortcut),
    .lu-module-overview .card .row > [class*="col-"]:has(.lu-mod-shortcut),
    .module-client-area .panel .row > [class*="col-"]:has(.lu-mod-shortcut),
    .module-client-area .card .row > [class*="col-"]:has(.lu-mod-shortcut) {
        flex: 1 1 40%;
        max-width: 50%;
    }
    /* stacked label directly above its value: tighten the pair */
    .lu-module-overview .panel .row > [class*="col-"].text-right + [class*="col-"],
    .module-client-area .panel .row > [class*="col-"].text-right + [class*="col-"] {
        margin-bottom: 8px;
    }
}

/* usage gauges stay side-by-side on mobile (they fit fine two-up) */
@media (max-width: 720px) {
    .lu-module-overview .row > [class*="col-"]:has(.dial-usage),
    .lu-module-overview .panel .row > [class*="col-"]:has(.dial-usage),
    .lu-module-overview .card .row > [class*="col-"]:has(.dial-usage),
    .module-client-area .row > [class*="col-"]:has(.dial-usage),
    .module-client-area .panel .row > [class*="col-"]:has(.dial-usage),
    .module-client-area .card .row > [class*="col-"]:has(.dial-usage) {
        flex: 1 1 40%;
        max-width: 50%;
        text-align: center !important;
    }
}