/*
 * NyanHosting client theme - visual layer for WHMCS Six.
 * Only presentation lives here; WHMCS functional selectors and markup hooks are untouched.
 *
 * 1. Tokens          5. Cards & lists      9. Feedback & overlays
 * 2. Base            6. Forms              10. Pages
 * 3. App shell       7. Buttons            11. Auth
 * 4. Page header     8. Tables & status    12. Responsive
 */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --nyan-font: "Plus Jakarta Sans", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --nyan-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --nyan-bg: #faf9f7;
    --nyan-surface: #ffffff;
    --nyan-surface-2: #f7f5f2;
    --nyan-surface-3: #f0ede9;
    --nyan-sidebar-bg: #fcfbfa;
    --nyan-border: #ebe6e0;
    --nyan-border-soft: #f2eee9;
    --nyan-border-strong: #ddd6ce;

    --nyan-ink: #1c1917;
    --nyan-ink-2: #44403c;
    --nyan-muted: #78716c;
    --nyan-subtle: #a8a29e;

    --nyan-accent: #f0443a;
    --nyan-accent-hover: #d9362e;
    --nyan-accent-text: #c9372e;
    --nyan-accent-soft: #fef2f0;
    --nyan-accent-border: #fbd5d0;
    --nyan-accent-ring: rgba(240, 68, 58, .18);

    --nyan-success: #15803d;
    --nyan-success-soft: #edfaf2;
    --nyan-success-border: #bfe6cd;
    --nyan-warning: #b45309;
    --nyan-warning-soft: #fff7ea;
    --nyan-warning-border: #f5d8a6;
    --nyan-danger: #b91c1c;
    --nyan-danger-soft: #fef2f2;
    --nyan-danger-border: #f6c7c7;
    --nyan-info: #1d4ed8;
    --nyan-info-soft: #eff4ff;
    --nyan-info-border: #c8d7fb;

    --nyan-radius-sm: 8px;
    --nyan-radius: 12px;
    --nyan-radius-lg: 16px;
    --nyan-shadow-xs: 0 1px 2px rgba(28, 25, 23, .04);
    --nyan-shadow-sm: 0 1px 3px rgba(28, 25, 23, .06), 0 1px 2px rgba(28, 25, 23, .03);
    --nyan-shadow-pop: 0 16px 40px rgba(28, 25, 23, .14), 0 2px 6px rgba(28, 25, 23, .06);

    --nyan-sidebar-width: 264px;
    --nyan-header-height: 64px;
    --nyan-gutter: 32px;

    /* Surfaces that are literal colours in light mode but must flip in dark mode. */
    --nyan-topbar-bg: rgba(250, 249, 247, .82);
    --nyan-glass-bg: rgba(250, 249, 247, .92);
    --nyan-row-stripe: #fcfbfa;
    --nyan-hover-border: var(--nyan-hover-border);
    --nyan-neutral-text: #57534e;
    --nyan-selection: #fde0dc;
    --nyan-dot: rgba(28, 25, 23, .09);
    --nyan-inverse-bg: #1c1917;
    --nyan-inverse-bg-hover: #44403c;
    --nyan-inverse-text: #ffffff;
    --nyan-logo-filter: none;
    color-scheme: light;

    /* Legacy aliases kept for inline markup and modules that reference them. */
    --nyan-primary: var(--nyan-ink-2);
    --nyan-primary-dark: var(--nyan-ink);
    --nyan-accent-dark: var(--nyan-accent-hover);
    --nyan-radius-md: var(--nyan-radius);
}

/* Dark theme: chosen in the top bar (data-theme on <html>) or inherited from the OS. */
:root[data-theme="dark"] {
    --nyan-bg: #141210;
    --nyan-surface: #1c1a17;
    --nyan-surface-2: #23201d;
    --nyan-surface-3: #2c2925;
    --nyan-sidebar-bg: #171513;
    --nyan-border: #34302b;
    --nyan-border-soft: #2a2724;
    --nyan-border-strong: #45403a;
    --nyan-ink: #f5f3f0;
    --nyan-ink-2: #d6d1cb;
    --nyan-muted: #a39b93;
    --nyan-subtle: #7d766f;
    --nyan-accent-hover: #f75d53;
    --nyan-accent-text: #ff8a80;
    --nyan-accent-soft: rgba(240, 68, 58, .14);
    --nyan-accent-border: rgba(240, 68, 58, .38);
    --nyan-accent-ring: rgba(240, 68, 58, .3);
    --nyan-success: #4ade80;
    --nyan-success-soft: rgba(34, 197, 94, .12);
    --nyan-success-border: rgba(34, 197, 94, .32);
    --nyan-warning: #fbbf24;
    --nyan-warning-soft: rgba(245, 158, 11, .12);
    --nyan-warning-border: rgba(245, 158, 11, .32);
    --nyan-danger: #f87171;
    --nyan-danger-soft: rgba(239, 68, 68, .12);
    --nyan-danger-border: rgba(239, 68, 68, .34);
    --nyan-info: #93b4ff;
    --nyan-info-soft: rgba(59, 130, 246, .14);
    --nyan-info-border: rgba(59, 130, 246, .34);
    --nyan-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --nyan-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --nyan-shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
    --nyan-topbar-bg: rgba(20, 18, 16, .82);
    --nyan-glass-bg: rgba(20, 18, 16, .92);
    --nyan-row-stripe: #201d1a;
    --nyan-hover-border: #5a544d;
    --nyan-neutral-text: #c9c2ba;
    --nyan-selection: rgba(240, 68, 58, .35);
    --nyan-dot: rgba(255, 255, 255, .06);
    --nyan-inverse-bg: #f5f3f0;
    --nyan-inverse-bg-hover: #d6d1cb;
    --nyan-inverse-text: #1c1917;
    --nyan-logo-filter: invert(1) hue-rotate(180deg) brightness(1.08);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nyan-bg: #141210;
        --nyan-surface: #1c1a17;
        --nyan-surface-2: #23201d;
        --nyan-surface-3: #2c2925;
        --nyan-sidebar-bg: #171513;
        --nyan-border: #34302b;
        --nyan-border-soft: #2a2724;
        --nyan-border-strong: #45403a;
        --nyan-ink: #f5f3f0;
        --nyan-ink-2: #d6d1cb;
        --nyan-muted: #a39b93;
        --nyan-subtle: #7d766f;
        --nyan-accent-hover: #f75d53;
        --nyan-accent-text: #ff8a80;
        --nyan-accent-soft: rgba(240, 68, 58, .14);
        --nyan-accent-border: rgba(240, 68, 58, .38);
        --nyan-accent-ring: rgba(240, 68, 58, .3);
        --nyan-success: #4ade80;
        --nyan-success-soft: rgba(34, 197, 94, .12);
        --nyan-success-border: rgba(34, 197, 94, .32);
        --nyan-warning: #fbbf24;
        --nyan-warning-soft: rgba(245, 158, 11, .12);
        --nyan-warning-border: rgba(245, 158, 11, .32);
        --nyan-danger: #f87171;
        --nyan-danger-soft: rgba(239, 68, 68, .12);
        --nyan-danger-border: rgba(239, 68, 68, .34);
        --nyan-info: #93b4ff;
        --nyan-info-soft: rgba(59, 130, 246, .14);
        --nyan-info-border: rgba(59, 130, 246, .34);
        --nyan-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
        --nyan-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
        --nyan-shadow-pop: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
        --nyan-topbar-bg: rgba(20, 18, 16, .82);
        --nyan-glass-bg: rgba(20, 18, 16, .92);
        --nyan-row-stripe: #201d1a;
        --nyan-hover-border: #5a544d;
        --nyan-neutral-text: #c9c2ba;
        --nyan-selection: rgba(240, 68, 58, .35);
        --nyan-dot: rgba(255, 255, 255, .06);
        --nyan-inverse-bg: #f5f3f0;
        --nyan-inverse-bg-hover: #d6d1cb;
        --nyan-inverse-text: #1c1917;
        --nyan-logo-filter: invert(1) hue-rotate(180deg) brightness(1.08);
        color-scheme: dark;
    }
}

/* 2. Base ------------------------------------------------------------------ */
html {
    background: var(--nyan-bg);
}

body {
    color: var(--nyan-ink);
    background: var(--nyan-bg);
    font-family: var(--nyan-font);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.logo-text,
.navbar-main,
.panel-sidebar .panel-title {
    font-family: var(--nyan-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--nyan-ink);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p {
    margin-bottom: 12px;
}

a {
    color: var(--nyan-accent-text);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

a:hover,
a:focus {
    color: var(--nyan-accent-hover);
    text-decoration: none;
}

a:focus {
    outline: 0;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--nyan-accent);
    outline-offset: 2px;
}

::selection {
    color: var(--nyan-ink);
    background: var(--nyan-selection);
}

hr {
    border-top-color: var(--nyan-border);
}

small,
.small,
.text-muted {
    color: var(--nyan-muted);
}

strong,
b {
    font-weight: 700;
}

code,
kbd,
pre,
samp,
.nyan-mono {
    font-family: var(--nyan-mono);
}

code {
    padding: 2px 6px;
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border-radius: 6px;
    font-size: 12.5px;
}

pre {
    padding: 14px 16px;
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
}

blockquote {
    border-left-color: var(--nyan-border-strong);
    color: var(--nyan-ink-2);
}

.text-primary { color: var(--nyan-accent-text); }
.text-success { color: var(--nyan-success); }
.text-warning { color: var(--nyan-warning); }
.text-danger { color: var(--nyan-danger); }
.text-info { color: var(--nyan-info); }
.text-grey { color: var(--nyan-subtle); }

.bg-primary { color: #fff; background: var(--nyan-accent); }

.ti {
    line-height: 1;
    vertical-align: -.125em;
}

.container {
    width: auto;
    max-width: 1200px;
}

/* 3. App shell ------------------------------------------------------------- */
body.nyan-client-shell {
    position: relative;
    min-height: 100vh;
    padding-left: var(--nyan-sidebar-width);
}

body.nyan-client-shell:before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: var(--nyan-sidebar-width);
    height: 460px;
    content: "";
    background:
        radial-gradient(55% 90% at 88% 0%, rgba(240, 68, 58, .075), transparent 70%),
        radial-gradient(40% 70% at 100% 0%, rgba(124, 92, 246, .06), transparent 70%);
    pointer-events: none;
}

.nyan-client-shell section#header,
.nyan-client-shell section#main-body,
.nyan-client-shell section#footer,
.nyan-client-shell .footer-legal,
.nyan-client-shell .verification-banner {
    position: relative;
    z-index: 1;
}

/* Sidebar */
.nyan-client-shell #main-menu {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--nyan-sidebar-width);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--nyan-sidebar-bg);
    border: 0;
    border-right: 1px solid var(--nyan-border);
}

.nyan-client-shell #main-menu .nyan-sidebar-brand {
    display: flex;
    height: var(--nyan-header-height);
    padding: 0 20px;
    flex: 0 0 var(--nyan-header-height);
    align-items: center;
    border-bottom: 1px solid var(--nyan-border);
}

.nyan-client-shell #main-menu .nyan-sidebar-brand a {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
}

.nyan-client-shell #main-menu .nyan-sidebar-brand img {
    display: block;
    max-width: 170px;
    max-height: 34px;
    object-fit: contain;
}

.nyan-sidebar-brand-text {
    color: var(--nyan-ink);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.nyan-client-shell #main-menu .navbar-main {
    display: flex;
    min-height: 0;
    margin: 0;
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.nyan-client-shell #main-menu .navbar-main > .container {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0;
    flex-direction: column;
}

.nyan-client-shell #main-menu .navbar-header {
    display: none;
}

.nyan-client-shell #main-menu .navbar-collapse {
    display: block !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin: 0;
    padding: 16px 12px 20px;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    overscroll-behavior: contain;
    scrollbar-color: var(--nyan-border-strong) transparent;
    scrollbar-width: thin;
}

.nyan-client-shell #main-menu .navbar-collapse::-webkit-scrollbar {
    width: 6px;
}

.nyan-client-shell #main-menu .navbar-collapse::-webkit-scrollbar-thumb {
    background: var(--nyan-border-strong);
    border-radius: 99px;
}

.nyan-sidebar-group-title {
    margin: 2px 10px 8px;
    color: var(--nyan-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nyan-sidebar-group-title-secondary {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--nyan-border);
}

.nyan-client-shell #main-menu .navbar-nav,
.nyan-client-shell #main-menu .navbar-nav.navbar-right {
    display: flex;
    float: none !important;
    width: 100%;
    margin: 0;
    flex-direction: column;
    gap: 2px;
}

.nyan-client-shell #main-menu .navbar-nav > li {
    float: none;
    width: 100%;
    margin: 0;
    background: transparent;
}

.nyan-client-shell #main-menu .nyan-nav-link,
.nyan-client-shell #main-menu .nyan-subnav-link {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    color: var(--nyan-ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--nyan-radius-sm);
    box-shadow: none;
    text-decoration: none;
    white-space: normal;
}

.nyan-client-shell #main-menu .nyan-nav-link {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.35;
}

.nyan-client-shell #main-menu .nyan-nav-link:hover,
.nyan-client-shell #main-menu .nyan-nav-link:focus,
.nyan-client-shell #main-menu .nyan-nav-item.open > .nyan-nav-link {
    color: var(--nyan-ink);
    background: var(--nyan-surface-3);
}

.nyan-client-shell #main-menu .nyan-nav-item.active > .nyan-nav-link {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    font-weight: 600;
}

.nyan-client-shell #main-menu .nyan-nav-item.active > .nyan-nav-link:before {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -12px;
    width: 3px;
    content: "";
    background: var(--nyan-accent);
    border-radius: 0 3px 3px 0;
}

.nyan-nav-icon,
.nyan-context-icon {
    display: inline-flex;
    width: 20px;
    min-width: 20px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-muted);
    line-height: 1;
}

.nyan-nav-icon i,
.nyan-context-icon i {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    line-height: 1 !important;
}

.nyan-nav-icon .ti,
.nyan-context-icon .ti {
    font-size: 18px !important;
}

.nyan-nav-icon .fas,
.nyan-nav-icon .far,
.nyan-nav-icon .fab,
.nyan-nav-icon .fal,
.nyan-nav-icon .fa,
.nyan-context-icon .fas,
.nyan-context-icon .far,
.nyan-context-icon .fab,
.nyan-context-icon .fal,
.nyan-context-icon .fa {
    font-size: 14px !important;
}

.nyan-nav-icon i:not(.ti):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not(.glyphicon),
.nyan-context-icon i:not(.ti):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fa):not(.glyphicon) {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 14px !important;
    font-style: normal;
    font-weight: 900;
}

.nyan-client-shell #main-menu .nyan-nav-link:hover .nyan-nav-icon,
.nyan-client-shell #main-menu .nyan-nav-item.open > .nyan-nav-link .nyan-nav-icon {
    color: var(--nyan-ink-2);
}

.nyan-client-shell #main-menu .nyan-nav-item.active > .nyan-nav-link .nyan-nav-icon,
.nyan-client-shell #main-menu .nyan-nav-item.active > .nyan-nav-link .nyan-nav-caret {
    color: var(--nyan-accent);
}

.nyan-nav-label,
.nyan-context-label-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.nyan-nav-end,
.nyan-context-end {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.nyan-nav-end .badge,
.nyan-context-end .badge {
    float: none;
    margin: 0;
}

.nyan-client-shell #main-menu .nyan-nav-badge {
    padding: 2px 8px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    border: 0;
    font-size: 11px;
    font-weight: 600;
}

.nyan-nav-caret {
    color: var(--nyan-subtle);
    font-size: 15px !important;
    transition: transform .2s ease;
}

.nyan-nav-item.open > .nyan-nav-link .nyan-nav-caret {
    transform: rotate(180deg);
}

.nyan-client-shell #main-menu .nyan-subnav {
    position: static;
    float: none;
    width: auto;
    min-width: 0;
    margin: 2px 0 6px 19px;
    padding: 2px 0 2px 12px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--nyan-border);
    border-radius: 0;
    box-shadow: none;
}

.nyan-client-shell #main-menu .nyan-subnav > li {
    margin: 1px 0;
}

.nyan-client-shell #main-menu .nyan-subnav-link {
    min-height: 34px;
    padding: 6px 10px;
    color: var(--nyan-muted);
    font-size: 13px;
    font-weight: 500;
}

.nyan-client-shell #main-menu .nyan-subnav-link .nyan-nav-icon .ti {
    font-size: 16px !important;
}

.nyan-client-shell #main-menu .nyan-subnav-link:hover,
.nyan-client-shell #main-menu .nyan-subnav-link:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-3);
}

.nyan-client-shell #main-menu .nyan-subnav-item.active > .nyan-subnav-link {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    font-weight: 600;
}

.nyan-client-shell #main-menu .nyan-subnav-item.active > .nyan-subnav-link .nyan-nav-icon,
.nyan-client-shell #main-menu .nyan-subnav-link:hover .nyan-nav-icon {
    color: inherit;
}

.nyan-client-shell #main-menu .nyan-subnav .nav-divider {
    height: 1px;
    min-height: 1px;
    margin: 6px 8px;
    overflow: hidden;
    background: var(--nyan-border);
}

.nyan-client-shell #main-menu .nyan-subnav .nav-divider > a {
    display: none;
}

.nyan-client-shell #main-menu li[menuItemName="Logout"] > .nyan-subnav-link {
    color: var(--nyan-danger);
}

.nyan-client-shell #main-menu li[menuItemName="Logout"] > .nyan-subnav-link:hover {
    color: var(--nyan-danger);
    background: var(--nyan-danger-soft);
}

.nyan-sidebar-cta {
    margin: 18px 0 0;
}

.nyan-sidebar-cta .btn {
    min-height: 40px;
}

.nyan-client-shell #main-menu .nyan-sidebar-profile {
    display: flex;
    padding: 14px 16px max(14px, env(safe-area-inset-bottom));
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    background: var(--nyan-sidebar-bg);
    border-top: 1px solid var(--nyan-border);
}

.nyan-sidebar-mobile-profile {
    display: none;
}

.nyan-profile-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.nyan-profile-avatar {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border: 1px solid var(--nyan-accent-border);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.nyan-profile-copy {
    display: block;
    min-width: 0;
    flex: 1;
    line-height: 1.35;
}

.nyan-profile-copy strong,
.nyan-profile-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nyan-profile-copy strong {
    color: var(--nyan-ink);
    font-size: 13px;
    font-weight: 700;
}

.nyan-profile-copy small {
    color: var(--nyan-muted);
    font-size: 12px;
}

.nyan-client-shell #main-menu .nyan-sidebar-profile .btn,
.nyan-sidebar-mobile-profile .btn {
    min-height: 36px;
    margin: 0;
    padding: 7px 12px;
    font-size: 13px;
}

/* Top bar */
.nyan-client-shell section#header {
    position: sticky;
    z-index: 900;
    top: 0;
    min-height: 0;
    height: var(--nyan-header-height);
    margin: 0;
    padding: 0;
    background: var(--nyan-topbar-bg);
    border: 0;
    border-bottom: 1px solid var(--nyan-border);
    border-radius: 0;
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
}

.nyan-client-shell section#header > .container {
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 0 var(--nyan-gutter);
    align-items: center;
    gap: 10px;
}

.nyan-sidebar-toggle,
.nyan-mobile-brand {
    display: none;
}

.nyan-topbar-search {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0;
}

.nyan-topbar-search i {
    position: absolute;
    top: 50%;
    left: 12px;
    color: var(--nyan-subtle);
    font-size: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.nyan-topbar-search input {
    width: 100%;
    height: 38px;
    padding: 8px 14px 8px 38px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
    outline: 0;
    font-size: 13.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.nyan-topbar-search input::placeholder {
    color: var(--nyan-subtle);
}

.nyan-topbar-search input:focus {
    border-color: var(--nyan-accent);
    box-shadow: 0 0 0 3px var(--nyan-accent-ring);
}

.nyan-client-shell ul.top-nav {
    display: flex;
    float: none;
    margin: 0 0 0 auto;
    padding: 0;
    align-items: center;
    gap: 8px;
    list-style: none;
    white-space: nowrap;
}

.nyan-client-shell ul.top-nav > li {
    position: relative;
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.nyan-client-shell ul.top-nav > li > a {
    position: relative;
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}

.nyan-client-shell ul.top-nav > li > a .ti {
    font-size: 18px;
}

.nyan-client-shell ul.top-nav > li > a:hover,
.nyan-client-shell ul.top-nav > li > a:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border-color: var(--nyan-border-strong);
}

.nyan-client-shell ul.top-nav .nyan-notification-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nyan-client-shell ul.top-nav #accountNotifications .label {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 5px;
    color: #fff;
    background: var(--nyan-accent);
    border: 2px solid var(--nyan-bg);
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
}

.nyan-client-shell ul.top-nav #accountNotifications .label:before {
    display: none;
}

.nyan-client-shell ul.top-nav > li > a.btn-logged-in-admin {
    min-height: 38px;
    color: var(--nyan-inverse-text);
    background: var(--nyan-inverse-bg);
    border-color: var(--nyan-inverse-bg);
    font-size: 13px;
}

.nyan-client-shell ul.top-nav > li > a.btn-logged-in-admin:hover,
.nyan-client-shell ul.top-nav > li > a.btn-logged-in-admin:focus {
    color: var(--nyan-inverse-text);
    background: var(--nyan-inverse-bg-hover);
    border-color: var(--nyan-inverse-bg-hover);
}

.nyan-client-shell ul.top-nav .tooltip-inner {
    margin-left: 0;
}

/* Main column */
.nyan-client-shell section#main-body {
    min-height: calc(100vh - var(--nyan-header-height) - 70px);
    margin: 0;
    padding: 28px 0 48px;
    background: transparent;
}

.nyan-client-shell section#main-body > .container {
    width: 100%;
    max-width: 1440px;
    margin: 0;
    padding: 0 var(--nyan-gutter);
}

.nyan-client-shell section#main-body > .container > .row {
    margin: 0;
}

.nyan-client-shell section#main-body > .container-fluid.without-padding > .row {
    margin: 0;
}

.nyan-client-shell .main-content {
    float: none;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.nyan-client-shell .main-content > *,
.nyan-client-shell .tab-content,
.nyan-client-shell .tab-pane {
    min-width: 0;
}

/* Contextual rail: page-specific WHMCS sidebars live beside the content. */
.nyan-page-layout {
    display: grid;
    grid-template-areas: "main rail";
    grid-template-columns: minmax(0, 1fr) 288px;
    align-items: start;
    gap: 24px;
}

.nyan-page-main {
    min-width: 0;
    grid-area: main;
}

.nyan-page-rail {
    display: flex;
    min-width: 0;
    grid-area: rail;
    flex-direction: column;
    gap: 16px;
}

.nyan-page-rail > .panel {
    margin: 0;
}

/* Drawer backdrop (mobile) */
body.nyan-drawer-open {
    overflow: hidden;
}

.nyan-drawer-backdrop {
    position: fixed;
    z-index: 990;
    top: var(--nyan-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    padding: 0;
    background: rgba(28, 25, 23, .36);
    border: 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

body.nyan-drawer-open .nyan-drawer-backdrop {
    display: block;
}

/* Verification banners */
.nyan-client-shell .verification-banner {
    margin: 16px var(--nyan-gutter) 0;
    padding: 12px 6px;
    color: var(--nyan-warning);
    background: var(--nyan-warning-soft);
    border: 1px solid var(--nyan-warning-border);
    border-radius: var(--nyan-radius);
    font-weight: 500;
}

.nyan-client-shell .verification-banner > .container {
    width: 100%;
    max-width: none;
}

.verification-banner .btn.close {
    min-height: 0;
    color: currentColor;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Footer */
.nyan-client-shell section#footer {
    padding: 0 var(--nyan-gutter);
    color: var(--nyan-muted);
    background: transparent;
    border: 0;
    line-height: 1;
}

.nyan-client-shell section#footer > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

section#footer .back-to-top {
    float: right;
}

section#footer .back-to-top i {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
    opacity: 1;
    font-size: 16px;
}

.footer-legal {
    margin: 0;
    padding: 20px 16px 28px;
    color: var(--nyan-muted);
    background: transparent;
    border: 0;
    font-size: 12px;
    text-align: center;
}

.nyan-client-shell .footer-legal {
    display: flex;
    margin: 0 var(--nyan-gutter);
    padding: 18px 0 26px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    border-top: 1px solid var(--nyan-border);
    text-align: left;
}

.footer-legal p {
    margin: 0;
}

.nyan-client-shell .footer-legal:before,
.nyan-client-shell .footer-legal:after {
    display: none;
}

/* 4. Page header ----------------------------------------------------------- */
div.header-lined {
    margin: 0 0 24px;
    padding: 0;
}

div.header-lined h1 {
    margin: 0;
    padding: 0;
    color: var(--nyan-ink);
    border: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

div.header-lined h1:after {
    display: none;
}

div.header-lined h1 small {
    display: block;
    margin-top: 6px;
    color: var(--nyan-muted);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: normal;
}

.nyan-page-desc {
    max-width: 720px;
    margin: 6px 0 0;
    color: var(--nyan-muted);
    font-size: 14px;
}

div.header-lined .breadcrumb {
    display: flex;
    margin: 0 0 6px;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    color: var(--nyan-muted);
    background: transparent;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
}

div.header-lined .breadcrumb > li {
    display: inline-flex;
    align-items: center;
}

div.header-lined .breadcrumb > li + li:before {
    padding: 0 7px;
    color: var(--nyan-subtle);
    content: "/";
}

div.header-lined .breadcrumb li a {
    color: var(--nyan-muted);
}

div.header-lined .breadcrumb li a:hover {
    color: var(--nyan-ink);
}

div.header-lined .breadcrumb > .active {
    color: var(--nyan-ink-2);
}

.sub-heading {
    margin: 26px 0 18px;
    height: auto;
    border-bottom: 1px solid var(--nyan-border);
    text-align: left;
}

.sub-heading span {
    display: inline-block;
    position: relative;
    top: 10px;
    padding: 0 12px 0 0;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    font-size: 13px;
    font-weight: 700;
}

.nyan-section-label {
    margin: 0 0 10px;
    color: var(--nyan-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* 5. Cards & lists --------------------------------------------------------- */
.panel,
.well {
    margin-bottom: 20px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.well {
    padding: 18px;
}

.panel > .panel-heading,
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading {
    padding: 14px 18px;
    color: var(--nyan-ink);
    background: transparent;
    border-bottom: 1px solid var(--nyan-border);
    border-radius: calc(var(--nyan-radius) - 1px) calc(var(--nyan-radius) - 1px) 0 0;
}

.panel-title,
.panel > .panel-heading .panel-title {
    color: var(--nyan-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.4;
}

.panel-title > a {
    color: inherit;
}

.panel-heading i.fas,
.panel-heading i.far,
.panel-heading i.fal,
.panel-heading i.fab,
.panel-heading .ti {
    color: var(--nyan-muted);
    font-size: 15px;
}

.panel-body {
    padding: 18px;
}

.panel > .panel-footer {
    padding: 12px 18px;
    color: var(--nyan-muted);
    background: var(--nyan-surface);
    border-top: 1px solid var(--nyan-border);
    border-radius: 0 0 calc(var(--nyan-radius) - 1px) calc(var(--nyan-radius) - 1px);
}

.panel-success > .panel-heading {
    color: var(--nyan-success);
    background: var(--nyan-success-soft);
    border-color: var(--nyan-success-border);
}

.panel-warning > .panel-heading {
    color: var(--nyan-warning);
    background: var(--nyan-warning-soft);
    border-color: var(--nyan-warning-border);
}

.panel-danger > .panel-heading {
    color: var(--nyan-danger);
    background: var(--nyan-danger-soft);
    border-color: var(--nyan-danger-border);
}

.panel-success > .panel-heading .panel-title,
.panel-warning > .panel-heading .panel-title,
.panel-danger > .panel-heading .panel-title {
    color: inherit;
}

.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger,
.panel-default {
    border-color: var(--nyan-border);
}

.panel > .list-group .list-group-item,
.panel > .panel-collapse > .list-group .list-group-item {
    border-right: 0;
    border-left: 0;
}

.panel > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: calc(var(--nyan-radius) - 1px);
    border-top-right-radius: calc(var(--nyan-radius) - 1px);
}

.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: calc(var(--nyan-radius) - 1px);
    border-bottom-left-radius: calc(var(--nyan-radius) - 1px);
}

.panel > .table-responsive:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child > th:first-child {
    border-top-left-radius: calc(var(--nyan-radius) - 1px);
}

.panel > .table-responsive:last-child {
    border-bottom-right-radius: calc(var(--nyan-radius) - 1px);
    border-bottom-left-radius: calc(var(--nyan-radius) - 1px);
}

.panel > .table:last-child > tbody:last-child > tr:last-child > td:first-child {
    border-bottom-left-radius: calc(var(--nyan-radius) - 1px);
}

.panel > .table:last-child > tbody:last-child > tr:last-child > td:last-child {
    border-bottom-right-radius: calc(var(--nyan-radius) - 1px);
}

.list-group {
    margin-bottom: 20px;
}

.list-group-item {
    padding: 11px 16px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border-color: var(--nyan-border-soft);
}

.list-group-item:first-child {
    border-top-left-radius: var(--nyan-radius);
    border-top-right-radius: var(--nyan-radius);
}

.list-group-item:last-child {
    border-bottom-right-radius: var(--nyan-radius);
    border-bottom-left-radius: var(--nyan-radius);
}

a.list-group-item,
button.list-group-item {
    color: var(--nyan-ink-2);
}

a.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:hover,
button.list-group-item:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 1;
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border-color: var(--nyan-border-soft);
    box-shadow: inset 3px 0 0 var(--nyan-accent);
}

.list-group-item.active .list-group-item-text,
.list-group-item.active > .badge,
.list-group-item.active .badge {
    color: var(--nyan-accent-text);
    background: var(--nyan-surface);
}

.list-group-item.disabled,
.list-group-item.disabled:hover {
    color: var(--nyan-subtle);
    background: var(--nyan-surface);
    opacity: .65;
}

/* Rail panels (WHMCS primary/secondary sidebars) */
.panel-sidebar,
.nyan-context-panel {
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.panel-sidebar > .panel-heading,
.nyan-context-panel > .panel-heading {
    padding: 12px 14px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 0;
    border-bottom: 1px solid var(--nyan-border);
    border-radius: 0;
}

.panel-sidebar .panel-title,
.nyan-context-panel .panel-title {
    color: var(--nyan-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.nyan-context-heading-row,
.nyan-context-item {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
}

.panel-sidebar > .panel-heading .nyan-context-icon,
.nyan-context-panel > .panel-heading .nyan-context-icon {
    color: var(--nyan-ink-2);
}

.nyan-context-toggle,
.panel-sidebar .panel-minimise {
    display: inline-flex;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--nyan-subtle);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.nyan-context-toggle:hover,
.nyan-context-toggle:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-3);
}

.nyan-context-toggle i {
    font-size: 16px;
    transition: transform .2s ease;
}

.nyan-context-toggle.minimised i,
.panel-minimise.minimised i {
    transform: rotate(180deg);
}

.panel-sidebar .panel-minimise.minimised {
    margin-top: 0;
}

.panel-sidebar .list-group,
.nyan-context-panel .list-group {
    margin: 0;
}

.panel-sidebar .list-group-item,
.nyan-context-panel .list-group-item {
    min-height: 40px;
    padding: 9px 14px;
    color: var(--nyan-ink-2);
    border-right: 0;
    border-left: 0;
    border-color: var(--nyan-border-soft);
    border-radius: 0 !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

/* Filter labels from WHMCS arrive as a bare <span> (see includes/sidebar.tpl). */
.nyan-context-item > span:not(.badge) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.panel-sidebar .list-group-item:first-child {
    border-top: 0;
}

.panel-sidebar .list-group-item:last-child {
    border-bottom: 0;
}

.panel-sidebar .list-group-item .nyan-context-icon {
    color: var(--nyan-muted);
}

.panel-sidebar .list-group-item .nyan-context-icon .ti {
    font-size: 17px !important;
}

.panel-sidebar .nyan-context-icon .fa-circle,
.panel-sidebar .nyan-context-icon .fa-dot-circle {
    font-size: 13px !important;
}

.panel-sidebar a.list-group-item:hover,
.panel-sidebar a.list-group-item:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.panel-sidebar a.list-group-item:hover i.fas,
.panel-sidebar a.list-group-item:hover i.far {
    color: inherit !important;
}

.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover,
.panel-sidebar.view-filter-btns .list-group-item.active,
.panel-sidebar.view-filter-btns .list-group-item.active:focus,
.panel-sidebar.view-filter-btns .list-group-item.active:hover {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border-color: var(--nyan-border-soft);
    box-shadow: inset 3px 0 0 var(--nyan-accent);
    font-weight: 600;
}

.panel-sidebar a.list-group-item.active .nyan-context-icon,
.panel-sidebar a.list-group-item.active i {
    color: var(--nyan-accent) !important;
}

.panel-sidebar .list-group-item .badge {
    padding: 2px 8px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    font-size: 11px;
}

.panel-sidebar .panel-body {
    padding: 14px;
    color: var(--nyan-ink-2);
    font-size: 13px;
}

/* Footer actions (e.g. "Pay All" + "Add Funds") stack full width in the narrow rail. */
.panel-sidebar > .panel-footer {
    display: flex;
    padding: 12px 14px;
    flex-direction: column;
    gap: 8px;
    color: var(--nyan-muted);
    background: var(--nyan-surface);
    border-top: 1px solid var(--nyan-border);
}

.panel-sidebar > .panel-heading + .panel-footer {
    border-top: 0;
}

.panel-sidebar > .panel-footer:before,
.panel-sidebar > .panel-footer:after {
    display: none;
}

.panel-sidebar > .panel-footer > *,
.panel-sidebar > .panel-footer form,
.panel-sidebar > .panel-footer .pull-left,
.panel-sidebar > .panel-footer .pull-right,
.panel-sidebar > .panel-footer [class*="col-"] {
    float: none !important;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.panel-sidebar > .panel-footer .btn {
    display: flex;
    width: 100%;
    min-height: 38px;
    margin: 0;
    justify-content: center;
    white-space: normal;
}

.panel-sidebar > .panel-footer .btn + .btn {
    margin-top: 8px;
}

.panel-sidebar .panel-body .form-control {
    min-height: 36px;
    height: 36px;
    font-size: 13px;
}

/* 6. Forms ----------------------------------------------------------------- */
label,
.control-label {
    margin-bottom: 6px;
    color: var(--nyan-ink-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.checkbox label,
.radio label,
label.checkbox-inline,
label.radio-inline,
label.btn,
.btn-group label,
.dataTables_wrapper label,
.panel-sidebar label,
.table label,
.nyan-plain-label {
    color: var(--nyan-ink-2);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.form-group {
    margin-bottom: 18px;
}

.form-control {
    height: 40px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--nyan-ink);
    background-color: var(--nyan-surface);
    border: 1px solid var(--nyan-border-strong);
    border-radius: var(--nyan-radius-sm);
    box-shadow: none;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form-control::placeholder {
    color: var(--nyan-subtle);
}

.form-control:hover {
    border-color: var(--nyan-hover-border);
}

.form-control:focus {
    border-color: var(--nyan-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--nyan-accent-ring);
}

.form-control[readonly],
.form-control[disabled],
fieldset[disabled] .form-control {
    color: var(--nyan-ink-2);
    background-color: var(--nyan-surface-2);
    border-color: var(--nyan-border);
    opacity: 1;
}

textarea.form-control {
    height: auto;
    min-height: 110px;
    line-height: 1.55;
}

select.form-control[multiple] {
    height: auto;
}

input[type="file"].form-control {
    padding: 7px 10px;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nyan-accent);
}

.input-lg,
.form-group-lg .form-control {
    height: 46px;
    min-height: 46px;
    border-radius: var(--nyan-radius-sm);
}

.input-sm,
.form-group-sm .form-control {
    height: 32px;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
}

.help-block {
    color: var(--nyan-muted);
    font-size: 12.5px;
}

.input-group-addon {
    min-width: 40px;
    color: var(--nyan-muted);
    background: var(--nyan-surface-2);
    border-color: var(--nyan-border-strong);
    font-size: 13px;
}

.input-group-addon:first-child,
.input-group .form-control:first-child,
.input-group-btn:first-child > .btn {
    border-top-left-radius: var(--nyan-radius-sm);
    border-bottom-left-radius: var(--nyan-radius-sm);
}

.input-group-addon:last-child,
.input-group .form-control:last-child,
.input-group-btn:last-child > .btn {
    border-top-right-radius: var(--nyan-radius-sm);
    border-bottom-right-radius: var(--nyan-radius-sm);
}

.input-group-btn > .btn {
    height: 40px;
    min-height: 40px;
}

.has-error .form-control,
.has-error .form-control:focus {
    border-color: var(--nyan-danger);
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .14);
}

.has-error .help-block,
.has-error .control-label {
    color: var(--nyan-danger);
}

.has-success .form-control {
    border-color: var(--nyan-success);
}

.has-success .help-block,
.has-success .control-label {
    color: var(--nyan-success);
}

.prepend-icon .field-icon {
    color: var(--nyan-subtle);
    text-transform: none;
}

.field-help-text {
    color: var(--nyan-muted);
}

fieldset legend,
legend {
    margin-bottom: 14px;
    color: var(--nyan-ink);
    border-bottom-color: var(--nyan-border);
    font-size: 15px;
    font-weight: 700;
}

/* Bootstrap switch used by WHMCS toggles */
.bootstrap-switch {
    border-color: var(--nyan-border-strong);
    border-radius: 99px;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    color: #fff;
    background: var(--nyan-accent);
}

/* 7. Buttons --------------------------------------------------------------- */
.btn {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 16px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--nyan-radius-sm);
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-block {
    display: flex;
    width: 100%;
}

input.btn,
button.btn {
    display: inline-block;
}

input.btn-block,
button.btn-block {
    display: block;
}

.btn .ti {
    font-size: 17px;
}

.btn:hover,
.btn:focus,
.btn.focus {
    outline: 0;
}

.btn:active,
.btn.active {
    box-shadow: none;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: .55;
    box-shadow: none;
}

.btn-lg,
.btn-group-lg > .btn {
    min-height: 46px;
    padding: 10px 20px;
    border-radius: var(--nyan-radius-sm);
    font-size: 15px;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: 32px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 12.5px;
}

.btn-xs,
.btn-group-xs > .btn {
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
}

.btn-primary,
.btn-success,
.btn-primary:visited,
.btn-success:visited {
    color: #fff;
    background: var(--nyan-accent);
    border-color: var(--nyan-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary,
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.btn-success:active:hover,
.btn-success:active:focus,
.open > .dropdown-toggle.btn-success {
    color: #fff;
    background: var(--nyan-accent-hover);
    border-color: var(--nyan-accent-hover);
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-success.disabled:hover,
.btn-success[disabled]:hover {
    background: var(--nyan-accent);
    border-color: var(--nyan-accent);
}

.btn-default,
.btn-info {
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border-color: var(--nyan-border-strong);
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover,
.btn-default:active:focus,
.open > .dropdown-toggle.btn-default,
.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border-color: var(--nyan-hover-border);
}

.btn-danger {
    color: var(--nyan-danger);
    background: var(--nyan-surface);
    border-color: var(--nyan-danger-border);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger {
    color: #fff;
    background: #dc2626;
    border-color: #dc2626;
}

.btn-warning {
    color: #fff;
    background: #d97706;
    border-color: #d97706;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: #fff;
    background: var(--nyan-warning);
    border-color: var(--nyan-warning);
}

.btn-link {
    color: var(--nyan-accent-text);
    background: transparent;
    border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--nyan-accent-hover);
    text-decoration: none;
}

.btn-group > .btn {
    display: inline-block;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-radius: var(--nyan-radius-sm) 0 0 var(--nyan-radius-sm);
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-radius: 0 var(--nyan-radius-sm) var(--nyan-radius-sm) 0;
}

.caret {
    color: currentColor;
}

/* 8. Tables & status ------------------------------------------------------- */
.table {
    margin-bottom: 0;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
}

.table > thead > tr > th,
.table > thead > tr > td,
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    padding: 11px 14px;
    color: var(--nyan-muted);
    background: var(--nyan-surface-2);
    border-top: 0;
    border-bottom: 1px solid var(--nyan-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.dataTables_wrapper table.table-list thead th:nth-child(even) {
    border-bottom: 1px solid var(--nyan-border);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
table.table-list tbody td {
    padding: 12px 14px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border-top: 1px solid var(--nyan-border-soft);
    font-size: 13.5px;
    vertical-align: middle;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td {
    padding: 8px 12px;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-list > tbody > tr:nth-child(even) > td {
    background: var(--nyan-row-stripe);
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.table-list > tbody > tr:hover > td {
    background: var(--nyan-surface-2);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--nyan-border);
}

.table > tbody > tr.active > td,
.table > tbody > tr > td.active {
    background: var(--nyan-surface-2);
}

.table > tbody > tr.success > td { background: var(--nyan-success-soft); }
.table > tbody > tr.warning > td { background: var(--nyan-warning-soft); }
.table > tbody > tr.danger > td { background: var(--nyan-danger-soft); }
.table > tbody > tr.info > td { background: var(--nyan-info-soft); }

.table-container,
.table-responsive {
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    overflow-x: auto;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
    -webkit-overflow-scrolling: touch;
}

.panel .table-responsive,
.well .table-responsive,
.modal .table-responsive,
.table-container .table-responsive,
.client-home-panels .table-responsive,
.nyan-product-detail .product-details-tab-container .table-responsive,
.invoice-summary-table .table-responsive {
    margin-bottom: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.table-responsive > .table > tbody:first-child > tr:first-child > td,
.table-responsive > .table > tbody:first-child > tr:first-child > th {
    border-top: 0;
}

.table-responsive > .table td .form-control {
    min-width: 110px;
}

.table-container:has(.btn-group.open),
.table-responsive:has(.btn-group.open) {
    overflow: visible;
}

.nyan-client-shell .table-container .table-list {
    width: 100% !important;
}

.invoice-summary-table {
    max-width: 100%;
    overflow-x: auto;
}

/* DataTables */
.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
    margin: 0;
    padding: 14px 16px !important;
    color: var(--nyan-muted);
    background: var(--nyan-surface);
    border: 0;
    border-bottom: 1px solid var(--nyan-border);
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 38px;
    text-align: left !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
}

.dataTables_wrapper .dataTables_filter label {
    margin: 0;
    padding: 12px 14px;
}

.dataTables_wrapper .dataTables_filter label .form-control {
    width: 260px;
    height: 38px;
    min-height: 38px;
    margin: 0;
    padding: 7px 12px 7px 36px !important;
    color: var(--nyan-ink);
    background-color: var(--nyan-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='m21 21-6-6'/%3E%3C/svg%3E");
    background-position: 12px 50%;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    border: 1px solid var(--nyan-border-strong);
    border-radius: var(--nyan-radius-sm);
    font-size: 13.5px;
}

.dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: var(--nyan-accent);
}

.dataTables_wrapper table.table-list {
    margin: 0 !important;
}

.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    color: var(--nyan-ink);
    background: var(--nyan-surface-3);
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--nyan-subtle);
}

.dataTables_wrapper .dataTables_length {
    padding: 12px 16px;
    color: var(--nyan-muted);
    background: transparent;
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_length label {
    margin: 0;
    padding: 0;
    color: var(--nyan-muted);
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_length label .form-control {
    display: inline-block;
    width: auto;
    height: 32px;
    min-height: 32px;
    margin: 0 4px;
    padding: 4px 8px;
    border: 1px solid var(--nyan-border-strong);
    border-radius: 7px;
    font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    padding: 12px 16px;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    top: 50% !important;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    border: 1px solid var(--nyan-border-strong);
    border-radius: 6px;
    box-shadow: none !important;
    box-sizing: border-box;
    font-weight: 700;
    line-height: 16px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    color: #fff;
    background: var(--nyan-accent);
    border-color: var(--nyan-accent);
}

table.table-list > tbody > tr.child > td,
table.table-list > tbody > tr.child:hover > td {
    background: var(--nyan-surface-2);
}

table.dataTable > tbody > tr.child ul.dtr-details {
    display: block;
    width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    display: flex;
    padding: 9px 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    border-bottom-color: var(--nyan-border);
    text-align: left;
}

table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 0;
    color: var(--nyan-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table-list > tbody > tr > td a.border-left {
    border-left-color: var(--nyan-border);
}

/* Status, labels and badges */
.label,
.status {
    display: inline-flex;
    position: static;
    top: 0;
    margin: 0;
    padding: 3px 9px;
    align-items: center;
    gap: 6px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}

.label.status:before,
span.status:before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    content: "";
    background: currentColor;
    border-radius: 50%;
}

.label-default,
.status-cancelled,
.status-closed,
.status-terminated,
.status-expired,
.status-transferred-away,
.status-draft,
.status-lost,
.status-dead {
    color: var(--nyan-neutral-text);
    background: var(--nyan-surface-3);
    border-color: var(--nyan-border);
}

.label-primary {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border-color: var(--nyan-accent-border);
}

.label-info,
.status-answered,
.status-refunded,
.status-delivered,
.status-onhold {
    color: var(--nyan-info);
    background: var(--nyan-info-soft);
    border-color: var(--nyan-info-border);
}

.label-success,
.status-active,
.status-open,
.status-completed,
.status-paid,
.status-accepted {
    color: var(--nyan-success);
    background: var(--nyan-success-soft);
    border-color: var(--nyan-success-border);
}

.label-warning,
.status-pending,
.status-pending-transfer,
.status-pending-registration,
.status-payment-pending,
.status-suspended,
.status-customer-reply,
.status-inprogress,
.status-grace,
.status-redemption {
    color: var(--nyan-warning);
    background: var(--nyan-warning-soft);
    border-color: var(--nyan-warning-border);
}

.label-danger,
.status-unpaid,
.status-overdue,
.status-fraud,
.status-collections {
    color: var(--nyan-danger);
    background: var(--nyan-danger-soft);
    border-color: var(--nyan-danger-border);
}

.status-custom {
    background: var(--nyan-surface);
}

.badge {
    padding: 3px 8px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

/* 9. Feedback & overlays --------------------------------------------------- */
.alert {
    padding: 12px 16px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
    font-size: 13.5px;
}

.alert h2,
.alert h4 {
    margin-top: 0;
    color: inherit;
    font-size: 15px;
}

.alert-link,
.alert a:not(.btn) {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alert-success {
    color: var(--nyan-success);
    background: var(--nyan-success-soft);
    border-color: var(--nyan-success-border);
}

.alert-info {
    color: var(--nyan-info);
    background: var(--nyan-info-soft);
    border-color: var(--nyan-info-border);
}

.alert-warning {
    color: var(--nyan-warning);
    background: var(--nyan-warning-soft);
    border-color: var(--nyan-warning-border);
}

.alert-danger {
    color: var(--nyan-danger);
    background: var(--nyan-danger-soft);
    border-color: var(--nyan-danger-border);
}

.alert .btn {
    vertical-align: middle;
}

.modal-backdrop.in {
    background: #000;
    opacity: .4;
}

.modal-content {
    overflow: hidden;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: var(--nyan-shadow-pop);
}

.modal-header,
.modal-content > .modal-header.panel-heading {
    padding: 16px 20px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border-bottom: 1px solid var(--nyan-border);
    border-radius: 0;
}

.modal-title {
    color: var(--nyan-ink);
    font-size: 16px;
    font-weight: 700;
}

.modal-header .close {
    margin-top: 0;
    color: var(--nyan-muted);
    opacity: 1;
    text-shadow: none;
}

.modal-body {
    padding: 20px;
}

.modal-footer,
.modal-content > .modal-footer.panel-footer {
    padding: 14px 20px;
    background: var(--nyan-surface-2);
    border-top: 1px solid var(--nyan-border);
    border-radius: 0;
}

.modal-footer .btn {
    display: inline-flex;
}

.dropdown-menu {
    padding: 6px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 10px;
    box-shadow: var(--nyan-shadow-pop);
    font-size: 13.5px;
}

.dropdown-menu > li > a {
    padding: 8px 10px;
    color: var(--nyan-ink-2);
    border-radius: 6px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
}

.dropdown-menu .divider {
    margin: 6px 0;
    background: var(--nyan-border);
}

.dropdown-header {
    color: var(--nyan-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.popover {
    padding: 0;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-pop);
    font-family: var(--nyan-font);
}

.popover-title {
    background: var(--nyan-surface-2);
    border-bottom-color: var(--nyan-border);
}

.popover.bottom > .arrow {
    border-bottom-color: var(--nyan-border);
}

.popover-user-notifications {
    min-width: 320px;
    padding: 6px;
    border-radius: var(--nyan-radius);
}

.popover-user-notifications ul li {
    min-height: 0;
    padding: 0;
    border-bottom-color: var(--nyan-border-soft);
}

.popover-user-notifications ul li a {
    display: flex;
    padding: 10px 12px;
    align-items: flex-start;
    gap: 10px;
    color: var(--nyan-ink-2);
    border-radius: 8px;
    font-size: 13px;
}

.popover-user-notifications ul li a:hover {
    background: var(--nyan-surface-2);
}

.popover-user-notifications ul li i.fas,
.popover-user-notifications ul li i.far {
    float: none;
    padding-top: 2px;
    font-size: 16px;
}

.popover-user-notifications ul li .message {
    margin-left: 0;
}

.popover-user-notifications ul li.none {
    padding: 14px;
    color: var(--nyan-muted);
    font-size: 13px;
    font-weight: 500;
}

.language-popover {
    max-width: 420px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    background-image: none;
    font-size: 13px;
}

.language-popover.popover.bottom > .arrow:after {
    border-bottom-color: var(--nyan-surface);
}

.language-popover .popover-content ul {
    margin: 4px 0;
}

.language-popover .popover-content li {
    padding: 0 10px;
    line-height: 2.1em;
}

.language-popover .popover-content li a {
    color: var(--nyan-ink-2);
}

.language-popover .popover-content li a:hover {
    color: var(--nyan-accent-text);
}

.tooltip-inner {
    padding: 6px 10px;
    color: var(--nyan-inverse-text);
    background: var(--nyan-inverse-bg);
    border-radius: 6px;
    font-size: 12px;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--nyan-inverse-bg); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--nyan-inverse-bg); }
.tooltip.left .tooltip-arrow { border-left-color: var(--nyan-inverse-bg); }
.tooltip.right .tooltip-arrow { border-right-color: var(--nyan-inverse-bg); }

.nav-tabs {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--nyan-border);
}

.nav-tabs > li {
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    margin: 0 4px 0 0;
    padding: 10px 14px;
    color: var(--nyan-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13.5px;
    font-weight: 600;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: var(--nyan-ink);
    background: transparent;
    border-bottom-color: var(--nyan-border-strong);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--nyan-ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--nyan-accent);
}

.nav-tabs > li > a .ti,
.nav-tabs > li > a .fas,
.nav-tabs > li > a .far {
    margin-right: 4px;
    color: var(--nyan-subtle);
}

.nav-tabs > li.active > a .ti,
.nav-tabs > li.active > a .fas,
.nav-tabs > li.active > a .far {
    color: var(--nyan-accent);
}

.nav-pills > li > a {
    color: var(--nyan-ink-2);
    border-radius: var(--nyan-radius-sm);
    font-weight: 600;
}

.nav-pills > li > a:hover {
    background: var(--nyan-surface-3);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
}

.pagination {
    display: inline-flex;
    margin: 0;
    flex-wrap: wrap;
    gap: 4px;
}

.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:last-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > span {
    min-width: 32px;
    margin: 0;
    padding: 6px 10px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border-color: var(--nyan-border-strong);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover {
    color: #fff;
    background: var(--nyan-accent);
    border-color: var(--nyan-accent);
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > span {
    color: var(--nyan-subtle);
    background: var(--nyan-surface);
    border-color: var(--nyan-border);
}

.pager li > a,
.pager li > span {
    color: var(--nyan-ink-2);
    border-color: var(--nyan-border);
}

.progress {
    height: 8px;
    overflow: hidden;
    background: var(--nyan-surface-3);
    border-radius: 99px;
    box-shadow: none;
}

.progress-bar {
    background: var(--nyan-accent);
    box-shadow: none;
    font-size: 10px;
    line-height: 8px;
}

.progress-bar-success { background: #16a34a; }
.progress-bar-warning { background: #d97706; }
.progress-bar-danger { background: #dc2626; }
.progress-bar-info { background: #2563eb; }

#fullpage-overlay {
    background: rgba(28, 25, 23, .72);
}

/* 10. Pages ---------------------------------------------------------------- */

/* Dashboard */
.nyan-dashboard-intro {
    display: flex;
    margin: 0 0 24px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.nyan-dashboard-heading {
    min-width: 0;
}

.nyan-dashboard-email {
    display: block;
    margin-bottom: 4px;
    color: var(--nyan-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.nyan-dashboard-intro h1 {
    margin: 0;
    color: var(--nyan-ink);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.nyan-dashboard-intro p {
    margin: 6px 0 0;
    color: var(--nyan-muted);
}

.nyan-dashboard-cta {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.tiles,
.nyan-client-shell .tiles {
    margin: 0 0 28px;
}

.tiles .row {
    display: grid;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.tiles .row:before,
.tiles .row:after {
    display: none;
}

.tiles .row > .tile,
.tiles .row > .tile:nth-child(1),
.tiles .row > .tile:nth-child(2),
.tiles .row > .tile:last-child {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.tiles .tile:hover {
    background: transparent;
}

.tiles .tile a {
    display: flex;
    height: 100%;
    min-height: 0;
    padding: 16px 18px;
    flex-direction: column;
    gap: 14px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.tiles .tile a:hover {
    border-color: var(--nyan-border-strong);
    box-shadow: var(--nyan-shadow-sm);
}

.nyan-stat-head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.tile .icon,
.nyan-client-shell .tile .icon {
    position: static;
    display: inline-flex;
    width: 34px;
    height: 34px;
    margin: 0;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-radius: var(--nyan-radius-sm);
    font-size: 18px;
    line-height: 1;
}

.tile .icon.nyan-tone-green { color: var(--nyan-success); background: var(--nyan-success-soft); }
.tile .icon.nyan-tone-blue { color: var(--nyan-info); background: var(--nyan-info-soft); }
.tile .icon.nyan-tone-amber { color: var(--nyan-warning); background: var(--nyan-warning-soft); }

.tile .title,
.nyan-client-shell .tile .title {
    min-width: 0;
    color: var(--nyan-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.tile .stat,
.nyan-client-shell .tile .stat {
    margin: 0;
    color: var(--nyan-ink);
    font-family: var(--nyan-font);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.nyan-tile-state {
    display: flex;
    margin-top: auto;
    padding-top: 12px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--nyan-muted);
    border-top: 1px solid var(--nyan-border-soft);
    font-size: 12.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nyan-tile-state .ti {
    flex: 0 0 auto;
    font-size: 15px;
}

.nyan-tile-state.is-ok .ti { color: var(--nyan-success); }
.nyan-tile-state.is-warn { color: var(--nyan-warning); }

.nyan-quick-actions {
    display: grid;
    margin: 0 0 28px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.nyan-quick-actions a {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    align-items: center;
    gap: 10px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.nyan-quick-actions a:hover {
    color: var(--nyan-ink);
    border-color: var(--nyan-border-strong);
    box-shadow: var(--nyan-shadow-sm);
}

.nyan-quick-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border-soft);
    border-radius: var(--nyan-radius-sm);
    font-size: 17px;
}

.nyan-quick-actions a:hover .nyan-quick-icon {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-color: var(--nyan-accent-border);
}

.nyan-dashboard-addons,
.nyan-dashboard-addon,
.nyan-dashboard-addon > * {
    min-width: 0;
    max-width: 100%;
}

.nyan-dashboard-addon {
    margin-bottom: 20px;
}

.nyan-dashboard-addon img,
.nyan-dashboard-addon iframe {
    max-width: 100%;
}

.nyan-dashboard-addon img {
    height: auto;
}

.home-kb-search {
    position: relative;
    margin-bottom: 24px;
}

.home-kb-search .form-control {
    height: 46px;
    padding-right: 44px;
}

.home-kb-search i {
    position: absolute;
    top: 14px;
    right: 16px;
    color: var(--nyan-subtle);
}

/* Dashboard panels */
.nyan-home-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.nyan-home-panel-cell {
    min-width: 0;
}

.client-home-panels .nyan-home-panel-cell > .panel,
.client-home-panels .panel[class*="panel-accent-"] {
    height: 100%;
    margin: 0;
    border: 1px solid var(--nyan-border);
}

.client-home-panels .panel[class*="panel-accent-"]:before {
    display: none;
}

.client-home-panels .panel > .panel-heading {
    padding: 14px 18px;
    background: transparent;
    border-bottom: 1px solid var(--nyan-border);
    font-weight: 700;
}

.nyan-home-panel-title {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nyan-home-panel-title-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.nyan-home-panel-title-copy > i {
    flex: 0 0 auto;
    color: var(--nyan-muted);
}

.nyan-home-panel-title-action {
    display: inline-flex;
    flex: 0 0 auto;
}

.client-home-panels .panel > .panel-heading .panel-title .btn,
.client-home-panels .panel > .panel-heading .panel-title .btn[class*="bg-color-"] {
    min-height: 30px;
    padding: 4px 10px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border-strong);
    border-radius: 7px;
    box-shadow: none;
    font-size: 12px;
    white-space: nowrap;
}

.client-home-panels .panel > .panel-heading .panel-title .btn:hover,
.client-home-panels .panel > .panel-heading .panel-title .btn:focus {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.client-home-panels .panel > .panel-heading .panel-title .btn i {
    color: inherit;
}

.client-home-panels .panel > .panel-body {
    max-height: none;
    padding: 16px 18px;
    overflow: visible;
}

.client-home-panels .panel > .panel-body p {
    padding: 0;
}

.client-home-panels .panel > .panel-body > :first-child {
    margin-top: 0;
}

.client-home-panels .panel > .panel-body > :last-child {
    margin-bottom: 0;
}

.client-home-panels .panel > .panel-body img,
.client-home-panels .panel > .panel-body iframe {
    max-width: 100%;
}

.client-home-panels .panel > .list-group {
    max-height: none;
    margin: 0;
    overflow: visible;
    border: 0;
}

.client-home-panels .panel > .list-group .list-group-item {
    padding: 11px 18px;
    border-color: var(--nyan-border-soft);
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.client-home-panels .panel > .list-group .list-group-item:first-child {
    border-top: 0;
}

.client-home-panels .panel > .list-group .list-group-item i {
    color: var(--nyan-muted);
}

.client-home-panels .panel > .list-group + .panel-footer {
    border-top: 1px solid var(--nyan-border);
}

.client-home-panels .panel small {
    color: var(--nyan-muted);
}

/* Product details */
.nyan-product-detail,
.nyan-product-detail .tab-content,
.nyan-product-detail .tab-pane,
.nyan-product-detail .module-client-area,
.nyan-product-detail .nyan-product-output {
    min-width: 0;
    max-width: 100%;
}

.nyan-product-detail .product-details,
.nyan-product-detail .nyan-product-output,
.nyan-product-detail .product-details-tab-container,
.nyan-product-detail #tabDownloads,
.nyan-product-detail #tabAddons,
.nyan-product-detail #tabChangepw {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.nyan-product-detail .product-details > .row {
    display: flex;
    margin: 0 -10px;
    align-items: stretch;
}

.nyan-product-detail .product-details > .row > [class*="col-"] {
    min-width: 0;
    padding: 0 10px;
}

.nyan-product-detail .product-status {
    display: flex;
    height: auto;
    margin-bottom: 14px;
    flex-direction: column;
    overflow: hidden;
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
}

.nyan-product-detail .product-icon {
    padding: 24px 20px 18px;
    color: var(--nyan-ink);
    background: transparent;
}

.nyan-product-glyph {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-accent);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 14px;
    box-shadow: var(--nyan-shadow-xs);
    font-size: 28px;
}

.nyan-product-detail .product-icon h3 {
    margin: 14px 0 2px;
    color: var(--nyan-ink);
    font-size: 20px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.nyan-product-detail .product-icon h4 {
    margin: 0;
    color: var(--nyan-muted);
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.nyan-product-detail .product-status-text {
    padding: 9px 16px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface-3);
    border-top: 1px solid var(--nyan-border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.nyan-product-detail .product-status-active .product-status-text {
    color: var(--nyan-success);
    background: var(--nyan-success-soft);
    border-top-color: var(--nyan-success-border);
}

.nyan-product-detail .product-status-pending .product-status-text {
    color: var(--nyan-warning);
    background: var(--nyan-warning-soft);
    border-top-color: var(--nyan-warning-border);
}

.nyan-product-detail .product-status-suspended .product-status-text,
.nyan-product-detail .product-status-terminated .product-status-text,
.nyan-product-detail .product-status-cancelled .product-status-text,
.nyan-product-detail .product-status-fraud .product-status-text {
    color: var(--nyan-danger);
    background: var(--nyan-danger-soft);
    border-top-color: var(--nyan-danger-border);
}

.nyan-product-detail .product-status + .row {
    margin: 0 -5px;
}

.nyan-product-detail .product-status + .row > [class*="col-"] {
    padding: 0 5px;
}

.nyan-product-detail .product-details > .row > .col-md-6.text-center {
    display: grid;
    padding: 4px 10px 4px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    column-gap: 24px;
    color: var(--nyan-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.nyan-product-detail .product-details > .row > .col-md-6.text-center h4 {
    margin: 14px 0 3px;
    color: var(--nyan-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nyan-product-detail .nav-tabs-overflow {
    display: flex;
    margin: 4px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--nyan-border);
    scrollbar-width: thin;
}

.nyan-product-detail .nav-tabs-overflow > li {
    float: none;
    flex: 0 0 auto;
}

.nyan-product-detail .product-details-tab-container {
    margin-top: 16px;
    border-radius: var(--nyan-radius);
}

.nyan-product-detail .product-details-tab-container .tab-pane > .row {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--nyan-border-soft);
}

.nyan-product-detail .product-details-tab-container .tab-pane > .row:last-child {
    border-bottom: 0;
}

.nyan-product-detail .product-details-tab-container .col-sm-5 {
    color: var(--nyan-muted);
    font-weight: 600;
}

.nyan-product-detail .module-client-area,
.nyan-product-detail .nyan-module-output,
.nyan-product-detail .nyan-product-output {
    text-align: left;
    overflow-wrap: anywhere;
}

.nyan-product-detail .module-client-area img,
.nyan-product-detail .nyan-product-output img,
.ticket-reply .message img,
.markdown-content img {
    max-width: 100%;
    height: auto;
}

.nyan-product-detail .module-client-area iframe,
.nyan-product-detail .nyan-product-output iframe {
    max-width: 100%;
}

.nyan-product-detail .nyan-addon-card,
.nyan-product-detail .nyan-download-item {
    margin-bottom: 14px;
}

.nyan-product-detail .nyan-addon-card .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
}

.nyan-product-detail .nyan-addon-card .panel-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nyan-responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nyan-product-detail pre,
.ticket-reply pre,
.markdown-content pre {
    max-width: 100%;
    overflow-x: auto;
}

/* Tickets */
.ticket-reply {
    margin: 0 0 16px;
    padding: 0;
    overflow: hidden;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.ticket-reply.staff {
    border-color: var(--nyan-accent-border);
}

.ticket-reply .date {
    float: right;
    padding: 14px 18px;
    color: var(--nyan-muted);
    font-size: 12.5px;
}

.ticket-reply .user {
    padding: 12px 18px;
    background: var(--nyan-surface-2);
    border-bottom: 1px solid var(--nyan-border);
}

.ticket-reply.staff .user {
    background: var(--nyan-accent-soft);
    border-bottom-color: var(--nyan-accent-border);
}

.ticket-reply .user i {
    float: left;
    margin-right: 12px;
    padding: 0;
    width: 34px;
    height: 34px;
    color: var(--nyan-muted);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 50%;
    font-size: 15px;
    line-height: 32px;
    text-align: center;
}

.ticket-reply .user .name {
    display: block;
    color: var(--nyan-ink);
    font-size: 13.5px;
    font-weight: 700;
}

.ticket-reply .user .type {
    display: block;
    color: var(--nyan-muted);
    font-size: 12px;
    font-weight: 500;
}

.ticket-reply .message {
    padding: 16px 18px;
    color: var(--nyan-ink);
    font-size: 14px;
    line-height: 1.7;
}

.ticket-reply .message,
.ticket-reply .message a,
.ticket-reply .attachment,
.markdown-content {
    overflow-wrap: anywhere;
}

.ticket-reply .attachment {
    padding: 12px 18px;
    background: var(--nyan-surface-2);
    border-top: 1px solid var(--nyan-border);
}

.label.requestor-type-operator { color: var(--nyan-info); background: var(--nyan-info-soft); border-color: var(--nyan-info-border); }
.label.requestor-type-owner { color: var(--nyan-success); background: var(--nyan-success-soft); border-color: var(--nyan-success-border); }
.label.requestor-type-registereduser { color: var(--nyan-warning); background: var(--nyan-warning-soft); border-color: var(--nyan-warning-border); }
.label.requestor-type-authorizeduser,
.label.requestor-type-subaccount,
.label.requestor-type-guest { color: var(--nyan-neutral-text); background: var(--nyan-surface-3); border-color: var(--nyan-border); }

.panel-collapsable .panel-heading {
    cursor: pointer;
}

.panel-collapsable .collapse-icon {
    color: var(--nyan-muted);
}

/* Knowledgebase, announcements, downloads */
.announcement-single,
.kb-article-title,
.kbarticles > a,
.kb-category {
    color: var(--nyan-ink);
}

.announcement-single {
    margin-bottom: 16px;
    padding: 20px 22px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-xs);
}

.announcement-single h3 {
    margin-top: 0;
    font-size: 17px;
}

.announcement-single h3 a {
    color: var(--nyan-ink);
}

.announcement-single h3 a:hover {
    color: var(--nyan-accent-text);
}

.announcement-single .label {
    margin-right: 8px;
}

.announcement-single blockquote {
    margin: 12px 0 0;
    padding: 0;
    color: var(--nyan-muted);
    border: 0;
    font-size: 14px;
}

.kbcategories,
.kbarticles {
    margin-bottom: 24px;
}

.kbcategories a,
.kbarticles a {
    color: var(--nyan-ink);
    font-weight: 600;
}

.kbcategories a:hover,
.kbarticles a:hover {
    color: var(--nyan-accent-text);
}

.kbarticles p,
.kbcategories p {
    color: var(--nyan-muted);
}

/* Home banner (guest landing) */
section#home-banner {
    margin: 0 var(--nyan-gutter);
    padding: 64px 24px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
}

.nyan-client-shell section#home-banner {
    margin-top: 28px;
}

section#home-banner h2 {
    margin: 0 0 24px;
    color: var(--nyan-ink);
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -.035em;
}

section#home-banner .input-group {
    padding: 6px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border-strong);
    border-radius: var(--nyan-radius);
    box-shadow: var(--nyan-shadow-sm);
}

section#home-banner .form-control {
    height: 48px;
    border: 0;
    box-shadow: none;
    font-size: 15px;
}

section#home-banner .btn {
    height: 48px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--nyan-radius-sm);
}

section#home-banner .btn.search {
    margin-right: 6px;
    color: #fff;
    background: var(--nyan-accent);
}

section#home-banner .btn.transfer {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
}

.home-shortcuts {
    margin: 16px var(--nyan-gutter) 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.home-shortcuts .lead {
    margin: 0;
    color: var(--nyan-ink);
    font-size: 16px;
    font-weight: 700;
}

.home-shortcuts ul {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.home-shortcuts li,
.home-shortcuts li:first-child,
.home-shortcuts li:last-child {
    float: none;
    width: auto;
    padding: 0;
    border: 0;
    list-style: none;
}

.home-shortcuts li a {
    display: flex;
    min-height: 80px;
    padding: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
}

.home-shortcuts li a:hover {
    border-color: var(--nyan-border-strong);
}

.home-shortcuts li i {
    color: var(--nyan-accent);
    font-size: 22px;
}

.home-shortcuts li p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

/* Standard cart: domain results */
#order-standard_cart .spotlight-tlds-container {
    display: flex;
    flex-wrap: wrap;
}

#order-standard_cart .spotlight-tld {
    display: flex;
    height: auto;
    min-height: 150px;
    padding: 18px 8px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#order-standard_cart .spotlight-tld .domain-lookup-result {
    display: flex;
    width: 100%;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

#order-standard_cart .spotlight-tld .btn {
    margin: 0;
}

#order-standard_cart .suggested-domains {
    overflow: hidden;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
}

#order-standard_cart .suggested-domains .domain-suggestion:not(.w-hidden) {
    display: flex;
    width: 100%;
    min-height: 60px;
    padding: 10px 16px;
    align-items: center;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border-color: var(--nyan-border-soft);
}

#order-standard_cart .suggested-domains .domain,
#order-standard_cart .suggested-domains .extension {
    flex: 0 1 auto;
    overflow-wrap: anywhere;
}

#order-standard_cart .suggested-domains .actions {
    display: grid;
    width: 340px;
    min-width: 340px;
    margin-left: auto;
    float: none;
    flex: 0 0 340px;
    grid-template-columns: minmax(130px, auto) auto minmax(86px, auto);
    align-items: center;
    justify-items: end;
    column-gap: 12px;
}

#order-standard_cart .suggested-domains .actions .btn {
    grid-row: 1;
    grid-column: 3;
    min-width: 86px;
    margin: 0;
}

#order-standard_cart .suggested-domains .actions .price {
    grid-row: 1;
    grid-column: 1;
    min-width: 130px;
    padding: 0;
    color: var(--nyan-ink);
    text-align: right;
}

#order-standard_cart .suggested-domains .actions .promo {
    grid-row: 1;
    grid-column: 2;
}

#order-standard_cart.nyan-has-sticky-domain-continue {
    padding-bottom: 110px;
}

#order-standard_cart .nyan-domain-continue-sticky {
    position: fixed;
    z-index: 80;
    right: auto;
    bottom: 0;
    left: var(--nyan-domain-continue-left, 0);
    display: flex;
    width: var(--nyan-domain-continue-width, 100%);
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    align-items: center;
    justify-content: center;
    background: var(--nyan-glass-bg);
    border: 1px solid var(--nyan-border);
    border-bottom: 0;
    border-radius: var(--nyan-radius) var(--nyan-radius) 0 0;
    box-shadow: 0 -8px 24px rgba(28, 25, 23, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

#order-standard_cart .nyan-domain-continue-sticky.nyan-domain-continue-hidden {
    display: none;
}

#order-standard_cart .nyan-domain-continue-sticky #btnDomainContinue {
    min-width: 190px;
    margin: 0;
    pointer-events: auto;
}

/* Floating WhatsApp */
.wh-api {
    position: fixed;
    z-index: 90;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    transition: bottom .24s ease, opacity .18s ease, visibility .18s ease;
}

.nyan-whatsapp-link {
    position: relative;
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1faa59;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(31, 170, 89, .28), 0 2px 6px rgba(28, 25, 23, .12);
    font-size: 26px;
    line-height: 1;
}

.nyan-whatsapp-link:hover,
.nyan-whatsapp-link:focus {
    color: #fff;
    background: #198f4b;
}

.nyan-whatsapp-link .fab {
    line-height: 1;
}

.nyan-whatsapp-label {
    position: absolute;
    right: 62px;
    width: max-content;
    max-width: 190px;
    padding: 7px 10px;
    color: var(--nyan-inverse-text);
    background: var(--nyan-inverse-bg);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.nyan-whatsapp-link:hover .nyan-whatsapp-label,
.nyan-whatsapp-link:focus .nyan-whatsapp-label {
    opacity: 1;
    transform: translateX(0);
}

body.nyan-domain-continue-visible .wh-api {
    bottom: calc(82px + max(14px, env(safe-area-inset-bottom)));
}

button.wh-ap-btn,
.whatsapp-pulse {
    width: 52px;
    height: 52px;
}

/* Promo and event modals */
.nyan-promo-modal,
.nyan-event-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: 16px;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 23, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.nyan-promo-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 26px 26px 22px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: var(--nyan-shadow-pop);
    animation: nyan-dialog-in .24s ease both;
}

.nyan-promo-close,
.nyan-event-close {
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.nyan-promo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    color: var(--nyan-muted);
    border-radius: var(--nyan-radius-sm);
    line-height: 30px;
}

.nyan-promo-close:hover {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.nyan-promo-dialog h2 {
    margin: 0 0 8px;
    color: var(--nyan-ink);
    font-size: 20px;
    font-weight: 800;
}

.nyan-promo-dialog p {
    color: var(--nyan-muted);
    line-height: 1.65;
}

.nyan-promo-dialog a {
    color: var(--nyan-accent-text);
    font-weight: 700;
}

#okBtn {
    min-height: 40px;
    margin-top: 8px;
    padding: 9px 18px;
    color: #fff;
    background: var(--nyan-accent);
    border: 0;
    border-radius: var(--nyan-radius-sm);
    font-weight: 600;
}

#okBtn:hover {
    background: var(--nyan-accent-hover);
}

.nyan-event-dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
}

.nyan-event-dialog img {
    display: block;
    width: 100%;
    border-radius: var(--nyan-radius-lg);
    box-shadow: var(--nyan-shadow-pop);
    cursor: pointer;
}

.nyan-event-close {
    position: absolute;
    z-index: 1;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    color: var(--nyan-ink);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 50%;
    box-shadow: var(--nyan-shadow-sm);
    line-height: 32px;
}

@keyframes nyan-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Generic login container (also used outside the split auth shell) */
.logincontainer {
    width: auto;
    max-width: 520px;
    margin: 24px auto;
    padding: 28px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: var(--nyan-shadow-sm);
}

.logincontainer.with-social {
    max-width: 820px;
}

/* 11. Auth ----------------------------------------------------------------- */
body.nyan-auth-page {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--nyan-surface);
}

.nyan-auth-page .nyan-auth-shell {
    display: grid;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    grid-template-columns: minmax(400px, 44%) minmax(0, 1fr);
    overflow: hidden;
}

/* Brand panel */
.nyan-auth-visual {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: clamp(32px, 4vw, 56px);
    flex-direction: column;
    overflow: hidden;
    color: var(--nyan-ink);
    background:
        radial-gradient(70% 55% at 100% 0%, rgba(240, 68, 58, .12), transparent 70%),
        radial-gradient(60% 50% at 0% 100%, rgba(124, 92, 246, .09), transparent 70%),
        var(--nyan-bg);
    border-right: 1px solid var(--nyan-border);
}

.nyan-auth-visual:before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: radial-gradient(var(--nyan-dot) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000 20%, transparent 75%);
    mask-image: radial-gradient(80% 70% at 70% 30%, #000 20%, transparent 75%);
    pointer-events: none;
}

.nyan-auth-brand,
.nyan-auth-mobile-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    align-items: center;
}

.nyan-auth-brand img {
    display: block;
    width: auto;
    height: 42px;
    object-fit: contain;
}

.nyan-auth-message {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: auto 0;
    padding: 40px 0;
}

.nyan-auth-eyebrow {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 6px 12px 6px 10px;
    align-items: center;
    gap: 8px;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 999px;
    box-shadow: var(--nyan-shadow-xs);
    font-size: 12.5px;
    font-weight: 600;
}

.nyan-auth-eyebrow-dot {
    width: 8px;
    height: 8px;
    background: var(--nyan-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--nyan-accent-soft);
}

.nyan-auth-message h1 {
    margin: 0;
    color: var(--nyan-ink);
    font-size: clamp(32px, 3.2vw, 46px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.nyan-auth-message h1 span {
    color: var(--nyan-accent);
}

.nyan-auth-message p {
    max-width: 420px;
    margin: 16px 0 0;
    color: var(--nyan-muted);
    font-size: 16px;
    line-height: 1.65;
}

.nyan-auth-points {
    display: grid;
    margin: 32px 0 0;
    padding: 0;
    gap: 18px;
    list-style: none;
}

.nyan-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.nyan-auth-point-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-accent);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 10px;
    box-shadow: var(--nyan-shadow-xs);
    font-size: 19px;
}

.nyan-auth-points strong {
    display: block;
    color: var(--nyan-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.nyan-auth-points small {
    display: block;
    margin-top: 2px;
    color: var(--nyan-muted);
    font-size: 13px;
    line-height: 1.5;
}

.nyan-auth-foot {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    color: var(--nyan-muted);
    font-size: 12.5px;
}

.nyan-auth-foot a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--nyan-ink-2);
    font-weight: 600;
}

.nyan-auth-foot a:hover {
    color: var(--nyan-accent-text);
}

/* Form panel */
.nyan-auth-content {
    display: flex;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--nyan-surface);
    overscroll-behavior-y: contain;
    scrollbar-color: var(--nyan-border-strong) transparent;
    scrollbar-width: thin;
}

.nyan-auth-topbar {
    display: flex;
    min-height: 72px;
    padding: 20px clamp(20px, 4vw, 48px) 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.nyan-auth-mobile-brand {
    display: none;
}

.nyan-auth-mobile-brand img {
    display: block;
    width: auto;
    height: 34px;
}

.nyan-auth-switch {
    color: var(--nyan-muted);
    font-size: 13.5px;
    text-align: right;
}

.nyan-auth-switch a {
    margin-left: 4px;
    padding: 7px 12px;
    color: var(--nyan-ink);
    border: 1px solid var(--nyan-border-strong);
    border-radius: var(--nyan-radius-sm);
    font-weight: 600;
}

.nyan-auth-switch a:hover {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.nyan-auth-body {
    display: flex;
    min-height: 0;
    padding: 32px clamp(20px, 4vw, 48px) 56px;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
}

.nyan-auth-page section#main-body {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

.nyan-auth-page section#main-body > .container,
.nyan-auth-page section#main-body > .container-fluid {
    width: 100%;
    max-width: none;
    padding: 0;
}

.nyan-auth-page section#main-body > .container > .row {
    margin: 0;
}

.nyan-auth-page .main-content {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.nyan-auth-page .logincontainer,
.nyan-auth-page .main-content > .alert,
.nyan-auth-page .main-content > .header-lined {
    width: 100%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.nyan-auth-page .logincontainer {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.nyan-auth-page .logincontainer.with-social {
    max-width: 760px;
}

.nyan-auth-page .logincontainer:not(.with-social) > .row {
    margin: 0;
}

.nyan-auth-page .logincontainer:not(.with-social) > .row > [class*="col-"] {
    padding: 0;
}

.nyan-auth-page div.header-lined {
    margin-bottom: 28px;
    text-align: left;
}

.nyan-auth-page div.header-lined h1 {
    font-size: 30px;
}

.nyan-auth-page .nyan-page-desc {
    font-size: 14.5px;
}

.nyan-auth-page .logincontainer .form-control,
.nyan-auth-password-reset-container .logincontainer form .form-control {
    height: 44px;
    min-height: 44px;
}

.nyan-input-icon {
    position: relative;
}

.nyan-input-icon > .ti {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 13px;
    color: var(--nyan-subtle);
    font-size: 18px;
    transform: translateY(-50%);
    transition: color .15s ease;
    pointer-events: none;
}

.nyan-input-icon > .form-control {
    padding-left: 40px;
}

.nyan-input-icon:focus-within > .ti {
    color: var(--nyan-accent);
}

.nyan-label-row {
    display: flex;
    margin-bottom: 6px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.nyan-label-row label {
    margin: 0;
}

.nyan-forgot-link {
    color: var(--nyan-accent-text);
    font-size: 13px;
    font-weight: 600;
}

.nyan-auth-page .logincontainer .checkbox {
    margin: 4px 0 22px;
}

.nyan-auth-actions .btn,
.nyan-auth-page .logincontainer .btn-primary {
    min-height: 46px;
    font-size: 14.5px;
}

.nyan-auth-secure {
    display: flex;
    margin: 24px 0 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--nyan-muted);
    font-size: 12.5px;
}

.nyan-auth-secure .ti {
    color: var(--nyan-success);
    font-size: 15px;
}

.nyan-auth-page .providerLinkingFeedback:empty {
    display: none;
}

/* Password reset */
.nyan-auth-password-reset-container .logincontainer > p,
.nyan-auth-password-reset-container .logincontainer form > p {
    margin-bottom: 20px;
    color: var(--nyan-muted);
}

.nyan-auth-password-reset-container .logincontainer form .form-group.text-center,
.nyan-auth-password-reset-container .logincontainer form > .form-group:last-child .text-center {
    display: flex;
    margin-top: 6px;
    gap: 10px;
}

.nyan-auth-password-reset-container .logincontainer form .form-group.text-center .btn,
.nyan-auth-password-reset-container .logincontainer form > .form-group:last-child .text-center .btn {
    min-height: 46px;
    margin: 0;
    flex: 1;
}

.nyan-auth-password-reset-container .form-control-feedback {
    display: none;
}

/* Registration */
.nyan-auth-clientregister .nyan-auth-body {
    align-items: flex-start;
}

.nyan-auth-clientregister .main-content > .header-lined,
.nyan-auth-clientregister .main-content > .alert,
.nyan-auth-page #registration {
    width: 100%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
}

.nyan-auth-page #registration {
    padding: 0;
    counter-reset: nyan-step;
}

.nyan-auth-page #registration .sub-heading {
    display: flex;
    height: auto;
    margin: 18px 0 16px;
    padding: 22px 0 0;
    align-items: center;
    border: 0;
    border-top: 1px solid var(--nyan-border);
    text-align: left;
}

.nyan-auth-page #registration #containerNewUserSignup > .sub-heading:first-of-type,
.nyan-auth-page #registration #containerNewUserSignup > .sub-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.nyan-auth-page #registration .sub-heading span {
    position: static;
    display: inline-flex;
    padding: 0;
    align-items: center;
    gap: 10px;
    color: var(--nyan-ink);
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.nyan-auth-page #registration .sub-heading span:before {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    content: counter(nyan-step);
    counter-increment: nyan-step;
    color: var(--nyan-accent-text);
    background: var(--nyan-accent-soft);
    border: 1px solid var(--nyan-accent-border);
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 700;
}

.nyan-auth-page #registration .sub-heading span br {
    display: none;
}

.nyan-auth-page #registration .sub-heading span i,
.nyan-auth-page #registration .sub-heading span small {
    margin-left: 4px;
    color: var(--nyan-muted);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 500;
}

.nyan-auth-page #registration .row {
    margin-right: -8px;
    margin-left: -8px;
}

.nyan-auth-page #registration .row > [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.nyan-auth-page #registration .form-group {
    margin-bottom: 14px;
}

.nyan-auth-page #registration .prepend-icon {
    display: block;
}

.nyan-auth-page #registration .field,
.nyan-auth-page #registration .form-control {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--nyan-ink);
    background-color: var(--nyan-surface);
    border: 1px solid var(--nyan-border-strong);
    border-radius: var(--nyan-radius-sm);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.4;
}

.nyan-auth-page #registration .prepend-icon .field {
    padding-left: 40px;
}

.nyan-auth-page #registration .field::placeholder,
.nyan-auth-page #registration .form-control::placeholder {
    color: var(--nyan-subtle);
}

.nyan-auth-page #registration .field:hover,
.nyan-auth-page #registration .form-control:hover {
    border-color: var(--nyan-hover-border);
}

.nyan-auth-page #registration .field:focus,
.nyan-auth-page #registration .form-control:focus {
    border-color: var(--nyan-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--nyan-accent-ring);
}

.nyan-auth-page #registration select.field,
.nyan-auth-page #registration select.form-control {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.nyan-auth-page #registration .prepend-icon .field-icon {
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
    margin: 0;
    color: var(--nyan-subtle);
    font-size: 17px;
    line-height: 44px;
    text-transform: none;
}

.nyan-auth-page #registration .prepend-icon .field-icon i {
    color: inherit;
    font-size: 17px;
    vertical-align: -3px;
}

.nyan-auth-page #registration .prepend-icon:focus-within .field-icon {
    color: var(--nyan-accent);
}

/* Phone input (intl-tel-input: legacy .intl-tel-input and current .iti markup).
   The flag and dial code sit beside the field like an input-group addon, so the
   text never runs under them whatever the dial-code length. */
body .iti,
body .intl-tel-input {
    position: relative;
    display: flex;
    width: 100%;
    align-items: stretch;
}

body .iti__flag-container,
body .intl-tel-input .flag-container {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    order: 0;
    flex: 0 0 auto;
    padding: 0;
}

body .iti__selected-flag,
body .intl-tel-input .selected-flag {
    display: flex;
    width: auto;
    height: 100%;
    padding: 0 10px 0 12px;
    align-items: center;
    gap: 6px;
    background: var(--nyan-surface-2) !important;
    border: 1px solid var(--nyan-border-strong);
    border-right: 0;
    border-radius: var(--nyan-radius-sm) 0 0 var(--nyan-radius-sm);
    outline: 0;
}

body .iti__selected-flag:hover,
body .iti__selected-flag:focus,
body .intl-tel-input .selected-flag:hover {
    background: var(--nyan-surface-3) !important;
}

body .iti__selected-dial-code,
body .intl-tel-input .selected-dial-code {
    margin: 0;
    padding: 0;
    color: var(--nyan-ink);
    font-size: 14px;
    font-weight: 600;
}

body .intl-tel-input .selected-flag .iti-flag,
body .intl-tel-input .selected-flag .iti-arrow {
    position: static;
    margin: 0;
}

body .iti__arrow,
body .intl-tel-input .iti-arrow {
    margin-left: 2px;
    border-top-color: var(--nyan-muted);
}

body .iti input,
body .iti input[type="tel"],
body .iti input[type="text"],
body .intl-tel-input input,
body .intl-tel-input input[type="tel"],
.nyan-auth-page #registration .iti .field,
.nyan-auth-page #registration .intl-tel-input .field {
    order: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    flex: 1 1 auto;
    padding-left: 12px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body .iti__country-list,
body .intl-tel-input .country-list {
    z-index: 30;
    max-width: min(360px, calc(100vw - 32px));
    margin-top: 4px;
    padding: 4px;
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: 10px;
    box-shadow: var(--nyan-shadow-pop);
    font-size: 13.5px;
    white-space: normal;
}

body .iti__country,
body .intl-tel-input .country-list .country {
    padding: 7px 10px;
    border-radius: 6px;
}

body .iti__country.iti__highlight,
body .intl-tel-input .country-list .country.highlight {
    background: var(--nyan-surface-2);
}

body .iti__divider,
body .intl-tel-input .country-list .divider {
    border-bottom-color: var(--nyan-border);
}

.prepend-icon:has(.iti) > .field-icon,
.prepend-icon:has(.intl-tel-input) > .field-icon {
    display: none !important;
}

.nyan-auth-page #registration .form-group > label:not(.field-icon) {
    color: var(--nyan-ink-2);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.nyan-auth-page #registration .field-help-text {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
}

.nyan-auth-page #registration .generate-password {
    min-height: 40px;
}

.nyan-auth-page #registration .password-strength-meter {
    padding-top: 4px;
}

.nyan-auth-page #registration .password-strength-meter .progress {
    margin-bottom: 6px;
}

.nyan-auth-page #registration #passwordStrengthTextLabel {
    text-align: left !important;
}

.nyan-auth-page #registration #passwdFeedback {
    margin: 0 8px 14px;
    width: calc(100% - 16px);
}

.nyan-auth-page #registration .marketing-email-optin {
    margin: 24px 0 0;
    padding: 16px 18px;
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
}

.nyan-auth-page #registration .marketing-email-optin h4 {
    margin: 0 0 4px;
    font-size: 14px;
}

.nyan-auth-page #registration .marketing-email-optin p {
    color: var(--nyan-muted);
    font-size: 13px;
}

.nyan-auth-page #registration > form > br {
    display: none;
}

.nyan-auth-page #registration .tospanel {
    margin: 20px 0 0;
    background: var(--nyan-surface-2);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius);
    box-shadow: none;
}

.nyan-auth-page #registration .tospanel > .panel-heading {
    padding: 14px 16px 0;
    color: var(--nyan-ink);
    background: transparent;
    border: 0;
}

.nyan-auth-page #registration .tospanel .panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--nyan-ink);
    font-size: 14px;
}

.nyan-auth-page #registration .tospanel .tosicon {
    color: var(--nyan-accent);
    font-size: 18px;
}

.nyan-auth-page #registration .tospanel .panel-body {
    padding: 10px 16px 14px;
}

.nyan-auth-page #registration .tospanel .panel-body > .col-md-12 {
    padding: 0;
}

.nyan-auth-page #registration .tospanel label.checkbox {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 0 26px;
    color: var(--nyan-ink-2);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
}

.nyan-auth-page #registration .tospanel label.checkbox input {
    position: absolute;
    top: 2px;
    left: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

.nyan-auth-page #registration p[align="center"] {
    margin: 24px 0 0;
}

.nyan-auth-page #registration p[align="center"] .btn-primary {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
}

.nyan-auth-page #registration .linked-accounts,
.nyan-auth-page #registration .providerPreLinking {
    margin-bottom: 20px;
}

.nyan-auth-page section#footer,
.nyan-auth-page .footer-legal,
.nyan-auth-page .wh-api,
.nyan-auth-page .nyan-promo-modal,
.nyan-auth-page .nyan-event-modal {
    display: none !important;
}

@media (max-width: 991px) {
    body.nyan-auth-page {
        height: auto;
        overflow: auto;
    }

    .nyan-auth-page .nyan-auth-shell {
        display: block;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .nyan-auth-visual {
        display: none;
    }

    .nyan-auth-content {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
        background:
            radial-gradient(90% 260px at 100% 0%, rgba(240, 68, 58, .07), transparent 70%),
            var(--nyan-surface);
    }

    .nyan-auth-topbar {
        min-height: 64px;
        padding: 14px 20px;
        justify-content: space-between;
        border-bottom: 1px solid var(--nyan-border);
    }

    .nyan-auth-mobile-brand {
        display: inline-flex;
    }

    .nyan-auth-body {
        padding: 28px 20px 48px;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .nyan-auth-mobile-brand img {
        height: 30px;
    }

    .nyan-auth-switch {
        font-size: 12.5px;
    }

    .nyan-auth-switch a {
        padding: 6px 10px;
    }

    .nyan-auth-page div.header-lined h1 {
        font-size: 26px;
    }

    .nyan-auth-page #registration .row > [class*="col-"] {
        width: 100%;
    }

    .nyan-auth-password-reset-container .logincontainer form .form-group.text-center,
    .nyan-auth-password-reset-container .logincontainer form > .form-group:last-child .text-center {
        flex-direction: column;
    }
}

/* Client detail validation (js/nyan-shell.js) */
.form-control.nyan-field-invalid,
.field.nyan-field-invalid,
.nyan-auth-page #registration .nyan-field-invalid {
    border-color: var(--nyan-danger);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .12);
}

.nyan-group-invalid .field-icon,
.nyan-group-invalid > label {
    color: var(--nyan-danger) !important;
}

/* Theme toggle, logo and small shared helpers */
.nyan-theme-toggle .nyan-theme-sun {
    display: none;
}

:root[data-theme="dark"] .nyan-theme-toggle .nyan-theme-sun {
    display: inline-block;
}

:root[data-theme="dark"] .nyan-theme-toggle .nyan-theme-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nyan-theme-toggle .nyan-theme-sun {
        display: inline-block;
    }

    :root:not([data-theme="light"]) .nyan-theme-toggle .nyan-theme-moon {
        display: none;
    }
}

.nyan-auth-topbar .nyan-theme-toggle {
    display: inline-flex;
    width: 36px;
    height: 36px;
    margin-right: auto;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-ink-2);
    background: var(--nyan-surface);
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-sm);
    font-size: 18px;
}

.nyan-auth-topbar .nyan-theme-toggle:hover {
    color: var(--nyan-ink);
    background: var(--nyan-surface-2);
}

.nyan-sidebar-brand img,
.nyan-mobile-brand img,
.nyan-auth-brand img,
.nyan-auth-mobile-brand img {
    filter: var(--nyan-logo-filter);
}

.popover.top > .arrow:after { border-top-color: var(--nyan-surface); }
.popover.bottom > .arrow:after { border-bottom-color: var(--nyan-surface); }
.popover.left > .arrow:after { border-left-color: var(--nyan-surface); }
.popover.right > .arrow:after { border-right-color: var(--nyan-surface); }

.close {
    color: var(--nyan-ink);
    text-shadow: none;
}

.nyan-icon-2x {
    font-size: 2em;
    vertical-align: middle;
}

.nyan-domain-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.nyan-domain-actions > .btn {
    float: none;
}

/* Horizontal forms (product, domain, contacts, SSL...): label above the field on phones. */
@media (max-width: 767px) {
    .form-horizontal .form-group {
        margin-right: 0;
        margin-left: 0;
    }

    .form-horizontal .form-group > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

    .form-horizontal .control-label {
        padding-top: 0;
        text-align: left;
    }

    .form-horizontal [class*="col-sm-offset-"],
    .form-horizontal [class*="col-md-offset-"] {
        margin-left: 0;
    }

    .form-horizontal .form-group .btn:not(.btn-xs):not(.btn-sm) {
        width: 100%;
    }

    .form-horizontal .form-group .input-group .btn {
        width: auto;
    }
}

/* 12. Responsive ----------------------------------------------------------- */
@media (max-width: 1399px) {
    .nyan-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    :root {
        --nyan-sidebar-width: 240px;
        --nyan-gutter: 24px;
    }

    .nyan-page-layout {
        grid-template-areas:
            "rail"
            "main";
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .nyan-page-rail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        align-items: start;
        gap: 16px;
    }

    .tiles .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nyan-home-panel-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nyan-topbar-language-label {
        display: none;
    }
}

@media (max-width: 991px) {
    body.nyan-client-shell {
        padding-left: 0;
    }

    body.nyan-client-shell:before {
        left: 0;
    }

    .nyan-client-shell #main-menu {
        top: var(--nyan-header-height);
        width: min(86vw, 320px);
        height: auto;
        box-shadow: var(--nyan-shadow-pop);
        transform: translateX(-105%);
        transition: transform .24s ease;
    }

    .nyan-client-shell #main-menu.nyan-drawer-visible {
        transform: translateX(0);
    }

    .nyan-client-shell #main-menu .nyan-sidebar-brand,
    .nyan-client-shell #main-menu .nyan-sidebar-profile {
        display: none;
    }

    .nyan-client-shell #main-menu .navbar-collapse,
    .nyan-client-shell #main-menu .navbar-collapse.in,
    .nyan-client-shell #main-menu .navbar-collapse.collapsing {
        display: flex !important;
        height: 100% !important;
        padding: 16px 12px max(14px, env(safe-area-inset-bottom));
        flex-direction: column;
        transition: none;
    }

    .nyan-sidebar-mobile-profile {
        display: flex;
        margin-top: auto;
        padding: 16px 4px 0;
        flex-direction: column;
        gap: 10px;
        border-top: 1px solid var(--nyan-border);
    }

    .nyan-sidebar-cta {
        margin-bottom: 16px;
    }

    .nyan-sidebar-toggle {
        display: inline-flex;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        padding: 0;
        align-items: center;
        justify-content: center;
        color: var(--nyan-ink);
        background: var(--nyan-surface);
        border: 1px solid var(--nyan-border);
        border-radius: var(--nyan-radius-sm);
        font-size: 19px;
    }

    body.nyan-drawer-open .nyan-sidebar-toggle {
        color: var(--nyan-accent);
        background: var(--nyan-accent-soft);
        border-color: var(--nyan-accent-border);
    }

    body.nyan-drawer-open .nyan-sidebar-toggle .ti:before {
        content: "\eb55";
    }

    body.nyan-drawer-open .wh-api {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .nyan-mobile-brand {
        display: inline-flex;
        min-width: 0;
        max-width: 140px;
        align-items: center;
    }

    .nyan-mobile-brand img {
        display: block;
        max-width: 100%;
        max-height: 30px;
        object-fit: contain;
    }

    .nyan-mobile-brand strong {
        color: var(--nyan-ink);
        font-size: 16px;
    }

    .nyan-topbar-search {
        display: none;
    }

    .nyan-client-shell .verification-banner {
        margin-right: var(--nyan-gutter);
        margin-left: var(--nyan-gutter);
    }

    .nyan-product-detail .product-details > .row {
        display: block;
    }

    .nyan-product-detail .product-details > .row > .col-md-6.text-center {
        padding: 6px 10px 0;
    }

    .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
        margin: 0 !important;
    }

    .dataTables_wrapper .dataTables_filter label {
        display: block;
        margin: 0;
        padding: 12px 14px 0;
    }

    .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100%;
    }

    .dataTables_wrapper .dataTables_info,
    div.dataTables_wrapper div.dataTables_info {
        padding: 10px 14px !important;
        line-height: 1.5;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        margin: 0;
        padding: 12px 14px;
        text-align: left;
    }

    #order-standard_cart .suggested-domains .domain-suggestion:not(.w-hidden) {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #order-standard_cart .suggested-domains .actions {
        width: 100%;
        min-width: 0;
        margin: 9px 0 0;
        flex: 0 0 100%;
        grid-template-columns: minmax(0, 1fr) auto minmax(100px, auto);
    }

    #order-standard_cart .suggested-domains .actions .price {
        min-width: 0;
        text-align: left;
    }
}

@media (max-width: 767px) {
    :root {
        --nyan-gutter: 16px;
        --nyan-header-height: 60px;
    }

    body {
        font-size: 14px;
    }

    .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .nyan-client-shell section#main-body {
        padding: 20px 0 36px;
    }

    div.header-lined {
        margin-bottom: 18px;
    }

    div.header-lined h1,
    .nyan-dashboard-intro h1 {
        font-size: 24px;
    }

    .nyan-client-shell ul.top-nav {
        gap: 6px;
    }

    .nyan-dashboard-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .nyan-dashboard-cta .btn {
        flex: 1;
    }

    .nyan-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .tiles .row {
        gap: 12px;
    }

    .tiles .tile a {
        padding: 14px;
    }

    .tile .stat,
    .nyan-client-shell .tile .stat {
        font-size: 26px;
    }

    .nyan-tile-state {
        align-items: flex-start;
        white-space: normal;
    }

    .nyan-page-rail {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-body {
        padding: 16px;
    }

    .nyan-product-detail .product-details,
    .nyan-product-detail .nyan-product-output,
    .nyan-product-detail .product-details-tab-container,
    .nyan-product-detail #tabDownloads,
    .nyan-product-detail #tabAddons,
    .nyan-product-detail #tabChangepw {
        padding: 16px;
    }

    .nyan-product-detail .product-details-tab-container .text-right,
    .nyan-product-detail .product-details-tab-container .text-left {
        text-align: left;
    }

    .nyan-product-detail .product-details-tab-container .tab-pane > .row > [class*="col-"] {
        padding: 2px 0;
    }

    .ticket-reply .date {
        float: none;
        display: block;
        padding: 10px 16px 0;
    }

    .footer-legal,
    .nyan-client-shell .footer-legal {
        padding-bottom: 92px;
        flex-direction: column;
        overflow-wrap: anywhere;
    }

    section#home-banner {
        padding: 40px 16px;
    }

    section#home-banner .input-group {
        display: block;
    }

    section#home-banner .form-control {
        display: block;
        width: 100%;
        margin-bottom: 6px;
    }

    section#home-banner .input-group-btn {
        display: flex;
        width: 100%;
        gap: 6px;
    }

    section#home-banner .btn {
        flex: 1;
        margin: 0;
    }

    .home-shortcuts ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logincontainer,
    .logincontainer.with-social {
        padding: 22px 18px;
    }

    #order-standard_cart.nyan-has-sticky-domain-continue {
        padding-bottom: 100px;
    }

    #order-standard_cart .nyan-domain-continue-sticky {
        padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    }

    #order-standard_cart .nyan-domain-continue-sticky #btnDomainContinue {
        width: 100%;
        min-width: 0;
    }

    .wh-api {
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    .nyan-whatsapp-label {
        display: none;
    }

    body.nyan-domain-continue-visible .wh-api {
        bottom: calc(76px + max(10px, env(safe-area-inset-bottom)));
    }
}

@media (max-width: 520px) {
    .nyan-client-shell ul.top-nav > li.nyan-topbar-language {
        display: none;
    }

    .nyan-dashboard-cta {
        flex-direction: column;
    }

    .nyan-home-panel-title {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nyan-product-detail .product-details > .row > .col-md-6.text-center {
        grid-template-columns: 1fr;
    }

    .nyan-product-detail .nyan-addon-card .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 340px) {
    .tiles .row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    body.nyan-client-shell {
        padding-left: 0;
    }

    body.nyan-client-shell:before,
    .nyan-client-shell #main-menu,
    .nyan-client-shell section#header,
    .nyan-page-rail,
    .wh-api,
    .footer-legal {
        display: none !important;
    }

    .nyan-page-layout {
        display: block;
    }
}