@import url("tokens.css");
@import url("layout.css");
/* Own presentation only. Corporate component subtrees are scope boundaries. */
@scope (:root) to (#site-header, #site-footer) {


/* Original CSS. Keep official header/footer, menu IDs and JS behavior intact. */
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) { font-family: var(--th-font); color: var(--th-ink); background-color: var(--th-bg); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .primary-bg-color { background-color: var(--th-surface); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) a { color: var(--th-blue); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) a:hover { color: var(--th-blue-hover); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary { background-color: var(--th-blue); border-color: var(--th-blue); border-radius: 7px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary:hover, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary:focus { background-color: var(--th-blue-hover); border-color: var(--th-blue-hover); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card { border: 1px solid var(--th-line); border-radius: 10px; box-shadow: 0 4px 16px #15243b04; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card-header { background-color: var(--th-surface); border-bottom-color: var(--th-line); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control { border-color: #2a4269; border-radius: 6px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control:focus { border-color: var(--th-blue); box-shadow: 0 0 0 3px #135ce526; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .tiles .tile { background: var(--th-surface); border: 1px solid var(--th-line); border-radius: 10px; margin: 4px; padding: 20px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .tiles .tile:hover { background: var(--th-soft-blue); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .list-group-item { border-color: var(--th-line); }
.th-welcome, .th-quick-links, .th-action-card { box-sizing: border-box; }
.th-welcome { display: flex; justify-content: space-between; align-items: center; padding: 30px; gap: 24px; background: #102956; border: 1px solid #254370; border-radius: var(--th-radius); margin: 0 0 22px; }
.th-eyebrow { font-size: 10px; font-weight: 750; letter-spacing: 1.6px; color: var(--th-blue); margin: 0 0 8px; }
.th-welcome h2 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.8px; margin: 0 0 10px; }
.th-welcome p:last-child { color: var(--th-muted); font-size: 13px; margin: 0; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-button { border-radius: 7px; padding: 13px 18px; background: var(--th-blue); color: white; font-size: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 18px; align-items: center; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-button:hover { color: white; background: var(--th-blue-hover); }
.th-quick-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-action-card { background: var(--th-panel-gradient, linear-gradient(145deg, #11264b, #071226)); color: var(--th-ink); padding: 18px 14px; border: 1px solid var(--th-line); border-radius: 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 12px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-action-card:hover { border-color: var(--th-blue); background: #132b55; }
.th-action-icon { color: var(--th-blue); font-size: 21px; }
.th-action-card>span:last-child { margin-left: auto; color: var(--th-muted); }
.th-order-notice { margin-bottom: 22px; padding: 18px; border: 1px solid var(--th-line); border-left: 3px solid var(--th-blue); border-radius: 8px; background: var(--th-bg); }
.th-order-notice p { margin: 6px 0 0; font-size: 13px; color: var(--th-muted); }
.th-welcome :focus-visible, .th-quick-links :focus-visible { outline: 3px solid #4384f8; outline-offset: 4px; }
@media(max-width:991px) { .th-quick-links { grid-template-columns: repeat(2,minmax(0,1fr)); }.th-welcome { flex-wrap: wrap; padding: 23px; } }
@media(max-width:480px) { .th-quick-links { grid-template-columns: 1fr; gap: 9px; }.th-welcome h2 { font-size: 25px; } }
@media(prefers-reduced-motion:reduce) { .th-welcome *, .th-quick-links * { animation: none !important; transition: none !important; } }

/* TURBOHOST navy design, approved visual reference 2026-10-23. */
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) { background: var(--th-page-gradient); background-attachment: fixed; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) a { color: var(--th-link); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) a:hover { color: #c5daff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-button { color: #fff; border-radius: 999px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary:hover, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-button:hover { color: #fff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-default, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-secondary { color: #d3e3ff; background: #102346; border-color: #344d74; border-radius: 999px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card { background: var(--th-panel-gradient); color: var(--th-ink); border-radius: var(--th-radius); box-shadow: 0 14px 35px #00000024; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card-header { color: var(--th-ink); background: #0d1e3c; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card-footer { background: #08162e; border-top-color: var(--th-line); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .custom-select { color: var(--th-ink); background-color: var(--th-input); border-radius: 999px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control::placeholder { color: #8fa5c8; opacity: 1; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control:focus { color: var(--th-ink); background: #071630; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control:disabled, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control[readonly] { color: var(--th-muted); background: #0c1b35; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .tiles .tile { color: var(--th-ink); background: var(--th-panel-gradient); border-radius: 18px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .list-group-item { color: #d7e3f8; background: transparent; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .list-group-item-action:hover, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .list-group-item.active { color: #fff; background: #12316a; border-color: #294f8c; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table { color: #d9e5fa; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table td, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table th { border-color: var(--th-line); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table thead th, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table thead td { background: #102449; color: #a6bedf; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table-striped tbody tr:nth-of-type(odd) { background: #0c1b37; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table-hover tbody tr:hover { background: #132d57; color: #fff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .dropdown-menu, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .modal-content { color: var(--th-ink); background: #11274e; border: 1px solid #304c76; border-radius: 18px; box-shadow: 0 20px 45px #00000045; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .dropdown-item { color: #e2ecff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .dropdown-item:hover, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .dropdown-item:focus { color: #fff; background: #1b3f79; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .modal-header, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .modal-footer { border-color: var(--th-line); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .text-muted { color: var(--th-muted) !important; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .breadcrumb { background: transparent; color: var(--th-muted); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .breadcrumb-item.active { color: #d0def4; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .alert-info { color: #bdd6ff; background: #0d2855; border-color: #234d88; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .alert-success { color: #9cf2c3; background: #0e302d; border-color: #27574d; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .alert-danger { color: var(--th-danger); background: #351627; border-color: #694054; }
.th-welcome { background: radial-gradient(ellipse at 100% 0%, #174a9b55, transparent 65%), linear-gradient(125deg, #0d2857, #08162e); box-shadow: 0 16px 40px #00000020; }
.th-welcome h2 { color: #f5f8ff; font-size: 30px; }
.th-eyebrow { color: #9ec3ff; }
.th-action-icon { color: #83b8ff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-action-card { border-radius: 16px; padding: 20px 16px; }
.th-welcome :focus-visible, .th-quick-links :focus-visible { outline-color: #79aaff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) #header, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .navbar-main { background: #06142b; border-color: #233959; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .navbar-nav .nav-link { color: #d9e8ff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .navbar-nav .nav-link:hover { color: #fff; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .panel { color: var(--th-ink); background: var(--th-panel-gradient); border-color: var(--th-line); border-radius: 18px; }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .panel-heading { color: var(--th-ink); background: #0d1e3c; border-color: var(--th-line); }
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) #footer, :is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) footer.footer { color: var(--th-muted); background: #030b19; border-color: #233959; }
/* Shared Studio tokens override the earlier presentation defaults. */
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .btn-primary,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-button{border-radius:var(--th-button-radius)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .form-control,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .custom-select{border-radius:var(--th-input-radius)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .card,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .panel{border-radius:var(--th-radius);box-shadow:var(--th-shadow)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table td,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .table th{padding:var(--th-table-density)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .badge{border-radius:var(--th-badge-radius)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .alert-warning{color:var(--th-warning);background:var(--th-surface);border-color:var(--th-line)}
:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .th-action-icon,:is(body:where(:not(:has(#site-header, #site-footer))), :where(.th-whmcs-surface)) .service-icon{color:var(--th-icon)}

}

/* Dashboard content only: native panel headings keep legible text on navy. */
body.th-layout-client #main-body .client-home-cards .card-header,
body.th-layout-client #main-body .client-home-cards .panel-heading { color: #f1f5ff; background: #0d1e3c; }
body.th-layout-client #main-body .client-home-cards .card-header a,
body.th-layout-client #main-body .client-home-cards .panel-heading a { color: #c5daff; }