/* NyanHosting visual layer. Functional WHMCS selectors remain unchanged. */
:root {
    --nyan-ink: #172033;
    --nyan-primary: #3d5872;
    --nyan-primary-dark: #293f57;
    --nyan-accent: #f0443a;
    --nyan-accent-dark: #d9362e;
    --nyan-accent-soft: #fff0ee;
    --nyan-bg: #f5f8fb;
    --nyan-surface: #ffffff;
    --nyan-surface-soft: #eef4f8;
    --nyan-border: #dce5ed;
    --nyan-muted: #68778a;
    --nyan-success: #2f9d67;
    --nyan-warning: #d98b24;
    --nyan-danger: #d94949;
    --nyan-radius-sm: 10px;
    --nyan-radius-md: 16px;
    --nyan-radius-lg: 22px;
    --nyan-shadow-sm: 0 8px 24px rgba(31, 53, 75, .07);
    --nyan-shadow-md: 0 20px 55px rgba(31, 53, 75, .11);
}

html {
    background: var(--nyan-bg);
}

body {
    background: var(--nyan-bg);
    color: var(--nyan-ink);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
.logo-text {
    font-family: "Manrope", sans-serif !important;
}

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

a {
    color: var(--nyan-primary);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

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

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(240, 68, 58, .2) !important;
    outline-offset: 2px;
}

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

/* Header */
section#header {
    min-height: 82px;
    padding: 16px 0;
    background: rgba(255, 255, 255, .97);
    border: 0;
    border-radius: 0;
}

section#header .container {
    display: flex;
    min-height: 50px;
    align-items: center;
}

section#header .logo {
    display: inline-flex;
    align-items: center;
}

section#header .logo img {
    max-width: 175px;
    max-height: 44px;
}

section#header .logo-text {
    color: var(--nyan-primary-dark);
    font-size: 24px;
    font-weight: 800;
}

ul.top-nav {
    display: flex;
    float: none;
    order: 2;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 0;
}

ul.top-nav > li,
ul.top-nav > li > a {
    height: auto;
    line-height: 1.3;
}

ul.top-nav > li > a {
    padding: 10px 13px;
    color: var(--nyan-ink);
    border-radius: 999px;
    font-weight: 600;
}

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

ul.top-nav > li.primary-action {
    margin-left: 5px;
    padding-left: 0;
    border-left: 0;
}

ul.top-nav > li.primary-action > a.btn,
ul.top-nav > li > a.btn-logged-in-admin {
    padding: 11px 18px;
    color: #fff;
    background: var(--nyan-accent);
    border: 1px solid var(--nyan-accent);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(240, 68, 58, .2);
}

ul.top-nav > li.primary-action > a.btn:hover {
    color: #fff;
    background: var(--nyan-accent-dark);
    border-color: var(--nyan-accent-dark);
    transform: translateY(-1px);
}

section#main-menu {
    position: relative;
    z-index: 100;
    min-height: 0;
    background: var(--nyan-surface);
    border-bottom: 1px solid var(--nyan-border);
}

.navbar-main {
    min-height: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.navbar-main .navbar-nav > li > a {
    padding: 13px 16px;
    color: var(--nyan-ink);
    font-size: 13px;
    font-weight: 600;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: var(--nyan-accent);
    background: transparent;
}

.navbar-main .dropdown-menu,
.dropdown-menu {
    padding: 8px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 14px;
    box-shadow: var(--nyan-shadow-md);
}

.navbar-main .dropdown-menu > li > a,
.dropdown-menu > li > a {
    padding: 9px 12px;
    color: var(--nyan-ink);
    border-radius: 8px;
}

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

/* Homepage hero */
section#home-banner {
    position: relative;
    overflow: hidden;
    padding: 86px 0 94px;
    color: var(--nyan-ink);
    background:
        radial-gradient(circle at 82% 25%, rgba(240, 68, 58, .09), transparent 26%),
        radial-gradient(circle at 8% 70%, rgba(61, 88, 114, .1), transparent 27%),
        #fff;
}

section#home-banner:after {
    position: absolute;
    right: 7%;
    bottom: 15%;
    width: 130px;
    height: 130px;
    content: "";
    opacity: .35;
    background-image: radial-gradient(var(--nyan-border) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

section#home-banner .container {
    position: relative;
    z-index: 1;
}

section#home-banner h2 {
    margin: 0 0 30px;
    color: var(--nyan-ink);
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 800;
    letter-spacing: -.055em;
}

section#home-banner form {
    max-width: 820px;
    margin: 0 auto;
}

section#home-banner .input-group {
    padding: 7px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 18px;
    box-shadow: var(--nyan-shadow-md);
}

section#home-banner .form-control {
    height: 54px;
    padding: 12px 19px;
    color: var(--nyan-ink);
    background: transparent;
    border: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: none;
    font-size: 16px;
}

section#home-banner .btn {
    height: 54px;
    padding: 0 22px;
    border: 0;
    font-weight: 700;
}

section#home-banner .btn.search {
    color: #fff;
    background: var(--nyan-accent);
    border-radius: 12px 0 0 12px;
}

section#home-banner .btn.search:hover {
    background: var(--nyan-accent-dark);
}

section#home-banner .btn.transfer {
    color: #fff;
    background: var(--nyan-primary);
    border-radius: 0 12px 12px 0;
}

.home-shortcuts {
    padding: 24px 0;
    color: var(--nyan-ink);
    background: var(--nyan-bg);
    border: 0;
}

.home-shortcuts .row {
    display: flex;
    align-items: center;
}

.home-shortcuts .lead {
    margin: 0;
    color: var(--nyan-primary-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.home-shortcuts ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}

.home-shortcuts li,
.home-shortcuts li:first-child,
.home-shortcuts li:last-child {
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    white-space: normal;
}

.home-shortcuts li a {
    display: flex;
    min-height: 86px;
    padding: 15px 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--nyan-ink);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 14px;
}

.home-shortcuts li a:hover {
    color: var(--nyan-accent);
    border-color: rgba(240, 68, 58, .35);
    box-shadow: var(--nyan-shadow-sm);
    transform: translateY(-2px);
}

.home-shortcuts li i {
    margin-bottom: 7px;
    color: var(--nyan-primary);
    font-size: 20px;
}

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

.home-shortcuts li span {
    display: inline-block;
    color: var(--nyan-accent);
}

/* Main content */
section#main-body {
    min-height: 520px;
    padding: 44px 0 72px;
    background: var(--nyan-bg);
}

.main-content {
    min-height: 350px;
    margin-bottom: 30px;
}

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

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

div.header-lined h1:after {
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 13px;
    content: "";
    background: var(--nyan-accent);
    border-radius: 99px;
}

div.header-lined small {
    color: var(--nyan-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

div.header-lined .breadcrumb {
    margin: 4px 0 0;
    padding: 0;
    color: var(--nyan-muted);
    background: transparent;
}

/* Buttons and fields */
.btn {
    min-height: 40px;
    padding: 9px 17px;
    border-radius: 10px;
    font-weight: 700;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
}

.btn-primary,
.btn-success {
    color: #fff;
    background: var(--nyan-accent);
    border-color: var(--nyan-accent);
    box-shadow: 0 8px 20px rgba(240, 68, 58, .16);
}

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

.btn-default,
.btn-info {
    color: var(--nyan-primary-dark);
    background: #fff;
    border-color: var(--nyan-border);
}

.btn-default:hover,
.btn-default:focus,
.btn-info:hover,
.btn-info:focus {
    color: var(--nyan-primary-dark);
    background: var(--nyan-surface-soft);
    border-color: #c3d2df;
}

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

.form-control {
    min-height: 44px;
    padding: 10px 13px;
    color: var(--nyan-ink);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 10px;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--nyan-accent);
    box-shadow: 0 0 0 3px rgba(240, 68, 58, .12);
}

textarea.form-control {
    min-height: 120px;
}

label {
    margin-bottom: 7px;
    color: var(--nyan-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.input-group-addon {
    color: var(--nyan-muted);
    background: var(--nyan-surface-soft);
    border-color: var(--nyan-border);
}

/* Cards, panels, lists */
.panel,
.well,
.modal-content {
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

.panel-heading,
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading {
    padding: 16px 18px;
    color: var(--nyan-ink);
    background: #fff;
    border-color: var(--nyan-border);
    border-radius: var(--nyan-radius-md) var(--nyan-radius-md) 0 0;
}

.panel-title {
    color: var(--nyan-ink);
    font-size: 15px;
    font-weight: 800;
}

.panel-body {
    padding: 20px;
}

.panel-footer {
    padding: 13px 18px;
    background: var(--nyan-surface-soft);
    border-color: var(--nyan-border);
    border-radius: 0 0 var(--nyan-radius-md) var(--nyan-radius-md);
}

.panel-sidebar {
    overflow: hidden;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

.panel-sidebar > .panel-heading {
    color: #fff;
    background: var(--nyan-primary);
    border: 0;
}

.panel-sidebar > .panel-heading .panel-title,
.panel-sidebar > .panel-heading i {
    color: #fff;
}

.panel-sidebar .list-group-item {
    padding: 12px 16px;
    color: var(--nyan-muted);
    background: #fff;
    border-color: #e9eff4;
    font-size: 13px;
    font-weight: 600;
}

.panel-sidebar a.list-group-item:hover,
.panel-sidebar a.list-group-item:focus,
.panel-sidebar a.list-group-item.active,
.panel-sidebar a.list-group-item.active:focus,
.panel-sidebar a.list-group-item.active:hover {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-color: #f8d8d4;
}

.panel-sidebar a.list-group-item.active {
    box-shadow: inset 3px 0 0 var(--nyan-accent);
}

.panel-sidebar a.list-group-item.active i,
.panel-sidebar a.list-group-item.active:focus i,
.panel-sidebar a.list-group-item.active:hover i {
    color: var(--nyan-accent);
}

.list-group-item:first-child {
    border-radius: var(--nyan-radius-sm) var(--nyan-radius-sm) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--nyan-radius-sm) var(--nyan-radius-sm);
}

/* Standard cart domain results */
#order-standard_cart .spotlight-tlds {
    border-radius: var(--nyan-radius-md);
}

#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 .price {
    min-height: 32px;
    padding: 5px 2px;
    line-height: 1.35;
}

#order-standard_cart .spotlight-tld .btn {
    min-height: 40px;
    margin: 0;
    white-space: normal;
}

#order-standard_cart .suggested-domains {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

#order-standard_cart .suggested-domains .domain-suggestion:not(.w-hidden) {
    display: flex;
    width: 100%;
    min-height: 64px;
    padding: 11px 18px;
    align-items: center;
    color: var(--nyan-ink);
    background: #fff;
    border-color: #e9eff4;
}

#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;
    flex: 0 0 340px;
    grid-template-columns: minmax(130px, auto) auto minmax(86px, auto);
    align-items: center;
    justify-items: end;
    justify-self: end;
    column-gap: 12px;
    float: none;
}

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

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

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

#order-standard_cart .suggested-domains .more-suggestions {
    margin: 0;
}

#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: rgba(245, 248, 251, .92);
    border: 1px solid rgba(220, 229, 237, .92);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(31, 53, 75, .13);
    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;
}

@media (max-width: 767px) {
    #order-standard_cart .suggested-domains .domain-suggestion:not(.w-hidden) {
        align-items: flex-start;
        flex-wrap: wrap;
        text-align: left;
    }

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

    #order-standard_cart .suggested-domains .actions .btn {
        width: auto;
        min-width: 100px;
    }

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

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

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

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

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

.nyan-whatsapp-link {
    position: relative;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #2bd477, #16a85a);
    border: 3px solid #fff;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(22, 168, 90, .3), 0 3px 8px rgba(23, 32, 51, .14);
    font-size: 28px;
    line-height: 1;
    isolation: isolate;
}

.nyan-whatsapp-link:before {
    position: absolute;
    z-index: -1;
    inset: -7px;
    content: "";
    background: rgba(37, 211, 102, .2);
    border-radius: 23px;
    animation: nyan-whatsapp-pulse 2.4s ease-out infinite;
}

.nyan-whatsapp-link:hover,
.nyan-whatsapp-link:focus {
    color: #fff;
    background: linear-gradient(145deg, #31dc80, #128d4c);
    box-shadow: 0 17px 34px rgba(22, 168, 90, .36), 0 4px 10px rgba(23, 32, 51, .16);
    transform: translateY(-2px);
}

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

.nyan-whatsapp-label {
    position: absolute;
    right: 68px;
    width: max-content;
    max-width: 190px;
    padding: 8px 11px;
    color: #fff;
    background: var(--nyan-primary-dark);
    border-radius: 9px;
    box-shadow: var(--nyan-shadow-sm);
    font-size: 11px;
    font-weight: 700;
    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)));
}

@keyframes nyan-whatsapp-pulse {
    0% {
        opacity: .8;
        transform: scale(.88);
    }
    70%,
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@media (max-width: 767px) {
    .wh-api {
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .nyan-whatsapp-link {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 25px;
    }

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

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

@media (prefers-reduced-motion: reduce) {
    .nyan-whatsapp-link:before {
        animation: none;
    }
}

/* Client dashboard */
.tiles {
    margin: 0 0 28px;
}

.tiles .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -7px;
    margin-left: -7px;
}

.tiles .tile {
    margin: 0;
    padding: 0 7px;
    background: transparent;
    border: 0;
}

.tiles .tile a {
    position: relative;
    display: grid;
    min-height: 138px;
    padding: 20px;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    color: var(--nyan-ink);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

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

.tiles .tile a:hover {
    border-color: #c6d5e1;
    box-shadow: var(--nyan-shadow-md);
    transform: translateY(-3px);
}

.tile .icon {
    position: static;
    display: flex;
    width: 46px;
    height: 46px;
    grid-row: 1 / 3;
    align-items: center;
    justify-content: center;
    color: var(--nyan-primary);
    background: var(--nyan-surface-soft);
    border-radius: 13px;
    font-size: 20px;
}

.tile .stat {
    margin-top: 0;
    align-self: end;
    color: var(--nyan-ink);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.tile .title {
    align-self: start;
    color: var(--nyan-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
}

.tiles .tile .highlight {
    position: absolute;
    top: auto;
    right: 18px;
    bottom: 14px;
    left: 18px;
    width: auto;
    height: 3px;
    background: var(--nyan-accent);
    border-radius: 99px;
    opacity: .75;
}

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

.home-kb-search .form-control {
    height: 58px;
    padding-right: 55px;
    padding-left: 20px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 15px;
    box-shadow: var(--nyan-shadow-sm);
}

.home-kb-search i {
    position: absolute;
    top: 18px;
    right: 32px;
    float: none;
    margin: 0;
    color: var(--nyan-accent);
    font-size: 20px;
}

.client-home-panels .panel {
    overflow: hidden;
    margin-bottom: 20px;
}

.client-home-panels .panel[class*="panel-accent-"] {
    border-top: 1px solid var(--nyan-border);
}

.client-home-panels .panel > .list-group .list-group-item {
    padding: 10px 14px;
}

.client-home-panels .panel[class*="panel-accent-"]:before {
    display: block;
    width: 100%;
    height: 4px;
    content: "";
    background: var(--nyan-primary);
}

/* Login and registration */
.logincontainer {
    width: auto;
    max-width: 570px;
    margin: 28px auto;
    padding: 34px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: var(--nyan-shadow-md);
}

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

.logincontainer .header-lined {
    text-align: center;
}

.logincontainer .header-lined h1:after {
    margin-right: auto;
    margin-left: auto;
}

.logincontainer .btn-primary {
    min-width: 130px;
}

#registration,
.using-password-strength {
    color: var(--nyan-ink);
}

/* Split authentication shell */
body.nyan-auth-page {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #fff;
}

.nyan-auth-page .nyan-auth-shell {
    display: grid;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(420px, 54%) minmax(480px, 46%);
    overflow: hidden;
}

.nyan-auth-visual {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: clamp(36px, 5vw, 76px);
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(circle at 82% 18%, rgba(240, 68, 58, .2), transparent 25%),
        linear-gradient(145deg, #1c2d40 0%, #29445e 58%, #20364c 100%);
    background-size: 42px 42px, 42px 42px, auto, auto;
}

.nyan-auth-visual:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    content: "";
    background: rgba(255, 255, 255, .12);
}

.nyan-auth-brand {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    max-width: 210px;
    min-height: 54px;
    padding: 10px 16px;
    align-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(10, 20, 31, .2);
}

.nyan-auth-brand:hover,
.nyan-auth-brand:focus {
    color: #fff;
    transform: translateY(-2px);
}

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

.nyan-auth-brand span {
    color: var(--nyan-primary-dark);
    font-size: 18px;
    font-weight: 800;
}

.nyan-auth-message {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: auto 0;
}

.nyan-auth-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: #ff8e86;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.nyan-auth-message h1 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font-size: clamp(40px, 4.5vw, 72px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .98;
}

.nyan-auth-message p {
    max-width: 500px;
    margin: 27px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.75;
}

.nyan-auth-orbit {
    position: absolute;
    right: clamp(34px, 7vw, 120px);
    bottom: clamp(75px, 12vh, 150px);
    width: 132px;
    height: 132px;
    opacity: .72;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.nyan-auth-orbit:before,
.nyan-auth-orbit:after {
    position: absolute;
    content: "";
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.nyan-auth-orbit:before {
    inset: -28px;
}

.nyan-auth-orbit:after {
    inset: 25px;
}

.nyan-auth-orbit span {
    position: absolute;
    top: -5px;
    left: 61px;
    width: 10px;
    height: 10px;
    background: var(--nyan-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(240, 68, 58, .12);
}

.nyan-auth-orbit i {
    position: absolute;
    top: 49px;
    left: 48px;
    color: rgba(255, 255, 255, .55);
    font-size: 34px;
}

.nyan-auth-copyright {
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
}

.nyan-auth-content {
    display: flex;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: clamp(28px, 4.5vw, 72px);
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-color: #bdcbd7 transparent;
    scrollbar-width: thin;
    background:
        radial-gradient(circle at 100% 0, rgba(61, 88, 114, .07), transparent 30%),
        #fff;
}

.nyan-auth-content::-webkit-scrollbar {
    width: 8px;
}

.nyan-auth-content::-webkit-scrollbar-track {
    background: transparent;
}

.nyan-auth-content::-webkit-scrollbar-thumb {
    background: #bdcbd7;
    border: 2px solid #fff;
    border-radius: 99px;
}

.nyan-auth-page section#main-body {
    width: 100%;
    min-height: 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,
.nyan-auth-page section#main-body > .container-fluid > .row {
    margin: 0;
}

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

.nyan-auth-page .logincontainer,
.nyan-auth-page .logincontainer.with-social,
.nyan-auth-page #registration,
.nyan-auth-page > .alert,
.nyan-auth-page .main-content > .alert {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
}

.nyan-auth-page .logincontainer,
.nyan-auth-page #registration {
    padding: clamp(25px, 3vw, 42px);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(31, 53, 75, .13);
}

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

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

.nyan-auth-page .logincontainer .header-lined h1 {
    font-size: clamp(27px, 3vw, 36px);
    letter-spacing: -.045em;
}

.nyan-auth-page .logincontainer .header-lined h1:after {
    margin-right: 0;
    margin-left: 0;
}

.nyan-auth-page .logincontainer .header-lined p,
.nyan-auth-page .logincontainer .header-lined small {
    color: var(--nyan-muted);
}

.nyan-auth-page .logincontainer .form-control {
    height: 50px;
}

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

.nyan-auth-page .logincontainer form > div[align="center"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.nyan-auth-page .logincontainer form > div[align="center"] .btn {
    width: 100%;
    min-height: 48px;
    margin: 0;
}

.nyan-auth-page #registration {
    max-width: 760px;
}

.nyan-auth-clientregister .nyan-auth-content {
    align-items: flex-start;
}

.nyan-auth-clientregister section#main-body {
    flex: 0 0 auto;
}

.nyan-auth-clientregister .main-content > .header-lined {
    max-width: 760px;
    margin: 0 auto 22px;
}

.nyan-auth-page #registration .sub-heading {
    margin-top: 28px;
    margin-bottom: 28px;
    border-color: var(--nyan-border);
}

.nyan-auth-page #registration .sub-heading:first-of-type {
    margin-top: 12px;
}

.nyan-auth-page #registration .sub-heading span {
    color: var(--nyan-primary-dark);
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}

.nyan-auth-page #registration .field,
.nyan-auth-page #registration .form-control {
    width: 100%;
    min-height: 48px;
    border-color: var(--nyan-border);
    border-radius: 10px;
}

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

.nyan-auth-page #registration .field-icon {
    height: 48px;
    color: #8a97a7;
    line-height: 48px;
}

.nyan-auth-page #registration p[align="center"] .btn-primary {
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
}

.nyan-auth-password-reset-container .logincontainer {
    max-width: 590px;
}

.nyan-auth-password-reset-container .logincontainer > p {
    margin-bottom: 23px;
    color: var(--nyan-muted);
}

.nyan-auth-password-reset-container .logincontainer form .form-control {
    height: 50px;
}

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

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

.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 {
        min-height: 230px;
        padding: 27px 28px 32px;
    }

    .nyan-auth-brand {
        max-width: 175px;
        min-height: 46px;
        padding: 8px 13px;
        border-radius: 12px;
    }

    .nyan-auth-brand img {
        max-height: 30px;
    }

    .nyan-auth-message {
        margin: 35px 0 0;
    }

    .nyan-auth-eyebrow {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .nyan-auth-message h1 {
        font-size: clamp(29px, 8vw, 42px);
        line-height: 1.03;
    }

    .nyan-auth-message p,
    .nyan-auth-copyright,
    .nyan-auth-orbit {
        display: none;
    }

    .nyan-auth-content {
        height: auto;
        min-height: 0;
        padding: 28px 18px 44px;
        overflow: visible;
    }

    .nyan-auth-page .logincontainer,
    .nyan-auth-page #registration {
        border-radius: 19px;
    }
}

@media (max-width: 520px) {
    .nyan-auth-visual {
        min-height: 200px;
        padding: 22px 20px 27px;
    }

    .nyan-auth-message {
        margin-top: 28px;
    }

    .nyan-auth-message h1 br {
        display: none;
    }

    .nyan-auth-content {
        padding: 20px 12px 34px;
    }

    .nyan-auth-page .logincontainer,
    .nyan-auth-page #registration {
        padding: 23px 17px;
        border-radius: 16px;
    }

    .nyan-auth-page .logincontainer form > div[align="center"] {
        grid-template-columns: 1fr;
    }

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

    .nyan-auth-password-reset-container .logincontainer form > .form-group.text-center:last-child .btn,
    .nyan-auth-password-reset-container .logincontainer form > .form-group:last-child .text-center .btn {
        width: 100%;
    }

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

/* Tables and status */
.table-container {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

.table {
    margin-bottom: 0;
    background: #fff;
}

.table > thead > tr > th,
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    padding: 13px 12px;
    color: var(--nyan-primary-dark);
    background: var(--nyan-surface-soft);
    border-color: var(--nyan-border);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
table.table-list tbody td {
    padding: 13px 12px;
    color: var(--nyan-ink);
    background: #fff;
    border-color: #e9eff4;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-list > tbody > tr:nth-child(even) > td {
    background: #fbfcfd;
}

.table-hover > tbody > tr:hover > td,
.table-list > tbody > tr:hover > td {
    background: var(--nyan-accent-soft);
}

.status,
.label,
.badge {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
}

.badge {
    color: var(--nyan-primary-dark);
    background: var(--nyan-surface-soft);
}

.status-active,
.status-open,
.status-completed,
.status-paid,
.label-success {
    color: #24764f;
    background: #e7f6ee;
    border-color: #9dd8bc;
}

.status-pending,
.status-inprogress,
.label-warning {
    color: #925d18;
    background: #fff5e4;
    border-color: #edc98e;
}

.status-unpaid,
.status-overdue,
.status-fraud,
.label-danger {
    color: #ad3535;
    background: #fff0f0;
    border-color: #efb4b4;
}

.pagination > li > a,
.pagination > li > span {
    margin: 0 3px;
    color: var(--nyan-primary);
    background: #fff;
    border-color: var(--nyan-border);
    border-radius: 8px;
}

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

/* Feedback and modals */
.alert {
    padding: 14px 17px;
    border-width: 1px;
    border-radius: 12px;
}

.alert-success {
    color: #24764f;
    background: #e7f6ee;
    border-color: #b8e2cc;
}

.alert-info {
    color: var(--nyan-primary-dark);
    background: var(--nyan-surface-soft);
    border-color: #cbdbe7;
}

.alert-warning {
    color: #81541b;
    background: #fff5e4;
    border-color: #f0d4a8;
}

.alert-danger {
    color: #a53333;
    background: #fff0f0;
    border-color: #efbaba;
}

.modal-backdrop.in {
    opacity: .55;
}

.modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--nyan-radius-lg);
    box-shadow: 0 28px 80px rgba(23, 32, 51, .25);
}

.modal-header,
.modal-footer {
    border-color: var(--nyan-border);
}

.modal-header {
    padding: 20px 22px;
}

.modal-body {
    padding: 22px;
}

.modal-footer {
    padding: 15px 22px;
    background: var(--nyan-bg);
}

.nyan-promo-modal,
.nyan-event-modal {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(23, 32, 51, .65);
    backdrop-filter: blur(5px);
}

.nyan-promo-dialog {
    position: relative;
    width: 90%;
    max-width: 420px;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: 0 28px 80px rgba(23, 32, 51, .28);
    animation: nyan-dialog-in .28s ease both;
}

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

.nyan-promo-close {
    position: absolute;
    top: 13px;
    right: 17px;
    color: var(--nyan-muted);
}

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

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

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

#okBtn {
    margin-top: 10px;
    padding: 10px 18px;
    color: #fff;
    background: var(--nyan-accent);
    border: 0;
    border-radius: 10px;
    font-weight: 700;
}

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

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

.nyan-event-dialog img {
    display: block;
    width: 100%;
    border: 3px solid #fff;
    border-radius: var(--nyan-radius-md);
    box-shadow: 0 28px 80px rgba(23, 32, 51, .32);
    cursor: pointer;
}

.nyan-event-close {
    position: absolute;
    z-index: 1;
    top: -15px;
    right: -15px;
    width: 36px;
    height: 36px;
    color: var(--nyan-ink);
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--nyan-shadow-sm);
    line-height: 36px;
}

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

/* Announcements and footer */
.announcement-single {
    margin-bottom: 18px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-md);
    box-shadow: var(--nyan-shadow-sm);
}

.announcement-single h3 {
    margin-top: 0;
}

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

section#footer {
    padding: 18px 0;
    color: var(--nyan-muted);
    background: #fff;
    border-top: 1px solid var(--nyan-border);
}

section#footer .back-to-top i {
    color: var(--nyan-primary);
    background: var(--nyan-surface-soft);
    border-radius: 50%;
}

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

.footer-legal p {
    margin: 2px 0;
}

@media (max-width: 767px) {
    .footer-legal {
        padding-right: 18px;
        padding-bottom: 92px;
        padding-left: 18px;
        line-height: 1.55;
    }

    .footer-legal p {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

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

button.wh-ap-btn {
    box-shadow: 0 12px 28px rgba(16, 180, 24, .24);
}

.whatsapp-pulse {
    line-height: 59px;
}

.whatsapp-pulse:before {
    right: -13px;
    bottom: -13px;
    width: 80px;
    height: 80px;
}

@media (max-width: 991px) {
    section#header {
        min-height: 72px;
        padding: 11px 0;
    }

    section#header .logo img {
        max-width: 145px;
        max-height: 40px;
    }

    .navbar-main .navbar-header {
        min-height: 48px;
    }

    .navbar-main .navbar-toggle {
        margin-right: 15px;
        padding: 10px;
        border: 1px solid var(--nyan-border);
        border-radius: 10px;
    }

    .navbar-main .navbar-toggle .icon-bar {
        background: var(--nyan-primary);
    }

    .navbar-main .navbar-collapse {
        padding-bottom: 12px;
        background: #fff;
        border-color: var(--nyan-border);
        box-shadow: none;
    }

    .navbar-main .navbar-nav > li > a {
        padding: 9px 15px;
        border-radius: 8px;
    }

    .navbar-main .navbar-nav .open .dropdown-menu > li > a,
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--nyan-ink);
    }

    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--nyan-accent);
        background: var(--nyan-accent-soft);
    }

    .home-shortcuts .row {
        display: block;
    }

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

    .tiles .tile {
        margin-bottom: 14px;
    }
}

/* Shell 8: account menu and icon normalization. */
.nyan-client-shell .navbar-main li.account,
.nyan-client-shell #Secondary_Navbar-Account,
.nyan-client-shell #Secondary_Navbar-Account.open {
    background: transparent;
}

.nyan-client-shell #Secondary_Navbar-Account > .nyan-nav-link {
    color: var(--nyan-ink);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.nyan-client-shell #Secondary_Navbar-Account > .nyan-nav-link:hover,
.nyan-client-shell #Secondary_Navbar-Account > .nyan-nav-link:focus,
.nyan-client-shell #Secondary_Navbar-Account.open > .nyan-nav-link {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-color: rgba(240, 68, 58, .16);
    box-shadow: none;
}

.nyan-client-shell #Secondary_Navbar-Account > .nyan-subnav {
    margin: 5px 0 0 18px;
    padding: 3px 0 3px 10px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--nyan-border);
    border-radius: 0;
    box-shadow: none;
}

.nyan-client-shell #Secondary_Navbar-Account .nyan-subnav-item,
.nyan-client-shell #Secondary_Navbar-Account .nyan-subnav-link {
    color: #596276;
    background: transparent;
}

.nyan-client-shell #Secondary_Navbar-Account .nyan-subnav-link:hover,
.nyan-client-shell #Secondary_Navbar-Account .nyan-subnav-link:focus,
.nyan-client-shell #Secondary_Navbar-Account .nyan-subnav-item.active > .nyan-subnav-link {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
}

.nyan-client-shell #Secondary_Navbar-Account .nav-divider {
    min-height: 1px;
    margin: 7px 8px;
    background: var(--nyan-border);
}

.nyan-client-shell #Secondary_Navbar-Account .nav-divider > a {
    display: none;
}

.nyan-client-shell #Secondary_Navbar-Account li[menuItemName="Logout"] > a {
    color: var(--nyan-danger);
}

.nyan-client-shell #Secondary_Navbar-Account li[menuItemName="Logout"] > a:hover,
.nyan-client-shell #Secondary_Navbar-Account li[menuItemName="Logout"] > a:focus {
    color: #fff;
    background: var(--nyan-danger);
}

.nyan-client-shell .nyan-nav-icon .fa-circle,
.nyan-client-shell .nyan-context-icon .fa-circle {
    font-size: 6px !important;
}

.nyan-client-shell .nyan-subnav-link .nyan-nav-icon,
.nyan-client-shell .nyan-context-item .nyan-context-icon {
    color: #70798c;
}

.nyan-client-shell .nyan-subnav-link:hover .nyan-nav-icon,
.nyan-client-shell .nyan-subnav-link:focus .nyan-nav-icon,
.nyan-client-shell .nyan-subnav-item.active > .nyan-subnav-link .nyan-nav-icon,
.nyan-client-shell .nyan-context-item:hover .nyan-context-icon,
.nyan-client-shell .nyan-context-item:focus .nyan-context-icon,
.nyan-client-shell .nyan-context-item.active .nyan-context-icon {
    color: var(--nyan-accent);
}

/* Shell 9: unified mobile drawer. */
@media (max-width: 991px) {
    .nyan-client-shell section#main-menu {
        z-index: 1000;
        top: var(--nyan-header-height);
        bottom: 0;
        display: block;
        width: min(88vw, 340px);
        height: calc(100vh - var(--nyan-header-height));
        height: calc(100dvh - var(--nyan-header-height));
        overflow: hidden;
        background: #fff;
        border: 0;
        border-right: 1px solid var(--nyan-border);
        border-radius: 0 0 18px 0;
        box-shadow: 20px 12px 48px rgba(20, 29, 43, .2);
    }

    .nyan-client-shell .navbar-main,
    .nyan-client-shell .navbar-main .container {
        width: 100%;
        height: 100% !important;
        min-height: 0;
    }

    .nyan-client-shell .navbar-main .navbar-collapse,
    .nyan-client-shell .navbar-main .navbar-collapse.in {
        position: static;
        display: flex !important;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        margin: 0;
        padding: 18px 15px max(12px, env(safe-area-inset-bottom));
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto !important;
        background: #fff;
        border: 0;
        box-shadow: none;
        transform: none;
    }

    .nyan-client-shell .nyan-sidebar-mobile-head {
        display: none !important;
    }

    .nyan-client-shell .nyan-sidebar-group-title {
        margin-top: 0;
    }

    .nyan-client-shell .nyan-sidebar-mobile-profile {
        display: grid;
        width: 100%;
        min-height: 72px;
        margin-top: auto;
        padding: 14px 8px 4px;
        grid-template-columns: 42px minmax(0, 1fr) 38px;
        align-items: center;
        column-gap: 10px;
        background: #fff;
        border-top: 1px solid var(--nyan-border);
    }

    .nyan-client-shell .nyan-sidebar-mobile-profile > a {
        display: inline-flex;
        width: 38px;
        height: 38px;
        padding: 0;
        align-items: center;
        justify-content: center;
        color: var(--nyan-muted);
        background: var(--nyan-surface-soft);
        border-radius: 10px;
    }

    .nyan-client-shell .nyan-sidebar-toggle {
        position: relative;
        z-index: 1002;
    }

    body.nyan-drawer-open .nyan-sidebar-toggle {
        color: var(--nyan-accent);
        background: var(--nyan-accent-soft);
        border-color: rgba(240, 68, 58, .25);
    }

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

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

    .nyan-client-shell .wh-api {
        transition: opacity .18s ease, visibility .18s ease;
    }
}

@media (max-width: 520px) {
    .nyan-client-shell section#main-menu {
        width: min(90vw, 330px);
    }

    .nyan-mobile-brand {
        max-width: 140px;
    }
}

/* Shell 11: responsive dashboard panels. */
.nyan-home-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

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

.nyan-client-shell .client-home-panels .nyan-home-panel-cell > .panel,
.nyan-client-shell .client-home-panels .nyan-home-panel-cell > .panel[class*="panel-accent-"] {
    height: 100%;
    margin: 0;
    overflow: visible;
}

.nyan-client-shell .client-home-panels .panel > .panel-body,
.nyan-client-shell .client-home-panels .panel > .list-group {
    width: 100%;
    max-height: none;
    overflow: visible;
}

.nyan-client-shell .client-home-panels .panel > .panel-body {
    padding: 18px;
}

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

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

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

.nyan-client-shell .client-home-panels .panel > .panel-body img {
    height: auto;
}

.nyan-client-shell .client-home-panels .panel > .panel-body .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.nyan-client-shell .client-home-panels .panel > .list-group .list-group-item {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    overflow-wrap: anywhere;
}

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

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

.nyan-home-panel-title-copy > i {
    flex: 0 0 auto;
    margin-top: 2px;
}

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

.nyan-client-shell .client-home-panels .panel-heading .btn.btn-xs {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

.nyan-client-shell .client-home-panels .panel-footer {
    padding: 12px 16px;
}

.nyan-client-shell .client-home-panels .panel-footer form,
.nyan-client-shell .client-home-panels .panel-footer .btn-group {
    max-width: 100%;
}

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

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

.nyan-dashboard-addon img {
    max-width: 100%;
    height: auto;
}

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

.nyan-client-shell .client-home-panels .input-group {
    width: 100%;
}

.nyan-client-shell .client-home-panels .input-group .form-control {
    min-width: 0;
    height: 44px;
}

.nyan-client-shell .client-home-panels .input-group-btn > .btn {
    height: 44px;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
}

@media (max-width: 991px) {
    .nyan-home-panel-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .nyan-client-shell .client-home-panels .panel-heading {
        padding: 15px 17px;
    }

    .nyan-home-panel-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .nyan-home-panel-title-action,
    .nyan-home-panel-title-action .btn {
        width: 100%;
    }

    .nyan-home-panel-title-action .btn {
        text-align: center;
    }

    .nyan-client-shell .client-home-panels .panel > .panel-body {
        padding: 16px;
    }

    .nyan-client-shell .client-home-panels .input-group {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 9px;
    }

    .nyan-client-shell .client-home-panels .input-group .form-control,
    .nyan-client-shell .client-home-panels .input-group-btn {
        display: block;
        width: 100%;
    }

    .nyan-client-shell .client-home-panels .input-group .form-control {
        margin: 0;
        border: 1px solid var(--nyan-border);
        border-radius: 10px;
    }

    .nyan-client-shell .client-home-panels .input-group-btn > .btn {
        width: 100%;
        margin: 0;
        border-radius: 10px;
    }
}

/* Product details */
.nyan-product-detail,
.nyan-product-detail *,
.nyan-product-detail *:before,
.nyan-product-detail *:after {
    box-sizing: border-box;
}

.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 > .tab-content {
    margin-bottom: 0;
}

.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: 18px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: var(--nyan-radius-lg);
    box-shadow: 0 12px 34px rgba(31, 53, 75, .05);
}

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

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

.nyan-product-detail .product-status {
    height: 100%;
    overflow: hidden;
    color: var(--nyan-ink);
    background: var(--nyan-surface-soft);
    border: 1px solid var(--nyan-border);
    border-radius: 18px;
}

.nyan-product-detail .product-icon {
    padding: 26px 20px;
    color: var(--nyan-primary);
    background: transparent;
}

.nyan-product-detail .product-icon h3,
.nyan-product-detail .product-icon h4 {
    overflow-wrap: anywhere;
}

.nyan-product-detail .product-icon h3 {
    margin: 15px 0 4px;
    font-size: 24px;
    font-weight: 800;
}

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

.nyan-product-detail .product-status-text {
    padding: 10px 16px;
    color: #fff;
    background: var(--nyan-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

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

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

.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 {
    background: var(--nyan-danger);
}

.nyan-product-detail .product-details > .row > .col-md-6.text-center {
    display: grid;
    padding: 10px 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    column-gap: 24px;
    text-align: left;
}

.nyan-product-detail .product-details > .row > .col-md-6.text-center h4 {
    margin: 13px 0 2px;
    color: var(--nyan-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.nyan-product-detail .nav-tabs-overflow {
    display: flex;
    margin: 24px 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 0;
    scrollbar-width: thin;
}

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

.nyan-product-detail .nav-tabs-overflow > li > a {
    margin: 0 5px 0 0;
    padding: 11px 15px;
    color: var(--nyan-muted);
    background: var(--nyan-surface-soft);
    border: 1px solid var(--nyan-border);
    border-radius: 11px 11px 0 0;
    font-size: 11px;
    font-weight: 700;
}

.nyan-product-detail .nav-tabs-overflow > li.active > a,
.nyan-product-detail .nav-tabs-overflow > li.active > a:hover,
.nyan-product-detail .nav-tabs-overflow > li.active > a:focus {
    color: var(--nyan-accent);
    background: #fff;
    border-color: var(--nyan-border);
    border-bottom-color: #fff;
}

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

.nyan-product-detail .product-details-tab-container .tab-pane > .row {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f5;
}

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

.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: 800;
}

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

.nyan-product-detail .nyan-addon-card .panel-footer form,
.nyan-product-detail .nyan-addon-card .panel-footer .btn-group {
    max-width: 100%;
}

.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;
}

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

@media (max-width: 767px) {
    .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: 17px;
        border-radius: 16px;
    }

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

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

    .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;
        margin-top: 4px;
    }
}

@media (max-width: 520px) {
    .nyan-product-detail .product-details > .row > .col-md-6.text-center {
        grid-template-columns: 1fr;
    }

    .nyan-product-detail .product-details .col-xs-6 {
        width: 100%;
        margin-top: 8px;
    }

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

@media (max-width: 767px) {
    body {
        font-size: 13px;
    }

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

    section#header .container {
        min-height: 48px;
    }

    ul.top-nav > li:not(.primary-action) {
        display: none;
    }

    ul.top-nav > li.primary-action > a.btn {
        padding: 9px 13px;
        font-size: 11px;
    }

    section#home-banner {
        padding: 58px 0 66px;
    }

    section#home-banner h2 {
        margin-bottom: 24px;
        font-size: 32px;
    }

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

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

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

    section#home-banner .btn {
        width: 100%;
        padding: 0 12px;
    }

    section#home-banner .btn.search {
        border-radius: 10px 0 0 10px;
    }

    section#home-banner .btn.transfer {
        border-radius: 0 10px 10px 0;
    }

    section#main-body {
        padding: 30px 0 50px;
    }

    div.header-lined h1 {
        font-size: 25px;
    }

    .logincontainer,
    .logincontainer.with-social {
        margin: 8px auto;
        padding: 24px 18px;
        border-radius: var(--nyan-radius-md);
    }

    .logincontainer .btn {
        width: 100%;
        margin: 4px 0;
    }

    .tiles .tile a {
        min-height: 122px;
        padding: 16px;
        grid-template-columns: 40px 1fr;
        column-gap: 10px;
    }

    .tile .icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .tile .stat {
        font-size: 27px;
    }

    .table-container {
        overflow-x: auto;
        border-radius: 12px;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 479px) {
    section#header .logo img {
        max-width: 120px;
    }

    .home-shortcuts ul {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .home-shortcuts li a {
        min-height: 78px;
    }

    .tiles .tile {
        width: 100%;
    }

    .client-home-panels > .row > [class*="col-"] {
        width: 100%;
    }
}

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

/* Logged-in application shell */
body.nyan-client-shell {
    padding-left: 284px;
    background: #f8f8fc;
}

.nyan-client-shell section#header {
    position: sticky;
    z-index: 900;
    top: 0;
    min-height: 82px;
    padding: 0;
    border-bottom: 1px solid var(--nyan-border);
}

.nyan-client-shell section#header .container {
    width: 100%;
    max-width: none;
    min-height: 82px;
    padding-right: 28px;
    padding-left: 28px;
}

.nyan-client-shell section#header .logo {
    position: fixed;
    z-index: 1002;
    top: 0;
    left: 0;
    display: flex;
    width: 284px;
    height: 82px;
    padding: 18px 26px;
    background: #fff;
    border-right: 1px solid var(--nyan-border);
    border-bottom: 1px solid var(--nyan-border);
}

.nyan-client-shell .nyan-sidebar-toggle {
    order: 0;
}

.nyan-client-shell section#header .logo {
    order: 1;
}

.nyan-client-shell .nyan-topbar-context {
    order: 2;
}

.nyan-client-shell .nyan-topbar-search {
    order: 3;
}

.nyan-client-shell .nyan-topbar-cart {
    order: 4;
}

.nyan-client-shell ul.top-nav {
    order: 5;
}

.nyan-client-shell section#header .logo img {
    max-width: 178px;
    max-height: 44px;
}

.nyan-client-shell section#main-menu {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    width: 284px;
    overflow: hidden;
    background: #fff;
    border-right: 1px solid var(--nyan-border);
    border-bottom: 0;
}

.nyan-client-shell section#main-menu:before {
    position: absolute;
    z-index: 1;
    top: 82px;
    right: 0;
    left: 0;
    height: 54px;
    padding: 20px 22px 0;
    content: "NAVIGASI";
    color: #636b80;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.nyan-client-shell .navbar-main,
.nyan-client-shell .navbar-main .container {
    width: 100%;
    height: 100%;
}

.nyan-client-shell .navbar-main .container {
    padding: 0;
}

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

.nyan-client-shell .navbar-main .navbar-collapse {
    position: absolute;
    top: 136px;
    right: 0;
    bottom: 86px;
    left: 0;
    display: block !important;
    width: 100%;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    padding: 0 15px 28px;
    border: 0;
    overscroll-behavior: contain;
    scrollbar-color: #cbd5df transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

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

.nyan-client-shell .navbar-main .navbar-collapse::-webkit-scrollbar-thumb {
    background: #cbd5df;
    border-radius: 99px;
}

.nyan-client-shell #main-menu .navbar-nav,
.nyan-client-shell #main-menu .navbar-nav.navbar-right {
    float: none !important;
    width: 100%;
    margin: 0;
}

.nyan-sidebar-group-title {
    margin: 0 10px 10px;
    color: #636b80;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.nyan-client-shell #main-menu .navbar-nav.navbar-right {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--nyan-border);
}

.nyan-client-shell .navbar-main .navbar-nav > li {
    float: none;
    width: 100%;
    margin-bottom: 4px;
}

.nyan-client-shell .navbar-main .navbar-nav > li > a {
    display: flex;
    min-height: 46px;
    padding: 12px 14px;
    align-items: center;
    color: #25293a;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
}

.nyan-client-shell .navbar-main .navbar-nav > li > a > i {
    width: 24px;
    color: #343849;
    text-align: center;
}

.nyan-client-shell .navbar-main .navbar-nav > li > a .caret {
    margin-left: auto;
}

.nyan-client-shell .navbar-main .navbar-nav > li > a:hover,
.nyan-client-shell .navbar-main .navbar-nav > li > a:focus,
.nyan-client-shell .navbar-main .navbar-nav > .active > a,
.nyan-client-shell .navbar-main .navbar-nav > .open > a {
    color: #fff;
    background: var(--nyan-accent);
    box-shadow: 0 10px 24px rgba(240, 68, 58, .2);
}

.nyan-client-shell .navbar-main .navbar-nav > li > a:hover i,
.nyan-client-shell .navbar-main .navbar-nav > li > a:focus i,
.nyan-client-shell .navbar-main .navbar-nav > .active > a i,
.nyan-client-shell .navbar-main .navbar-nav > .open > a i {
    color: #fff;
}

.nyan-client-shell .navbar-main .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin: 4px 0 8px 12px;
    padding: 4px 0 4px 12px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--nyan-border);
    border-radius: 0;
    box-shadow: none;
}

.nyan-client-shell .navbar-main .dropdown-menu > li > a {
    padding: 9px 11px;
    color: var(--nyan-muted);
    border-radius: 8px;
    white-space: normal;
    font-size: 12px;
    font-weight: 600;
}

.nyan-client-shell .navbar-main .dropdown-menu > li > a:hover {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
}

.nyan-sidebar-profile {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 86px;
    padding: 15px 18px;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-top: 1px solid var(--nyan-border);
}

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

.nyan-context-nav {
    margin: 0 0 18px;
    padding: 0 0 18px;
    border-bottom: 1px dashed var(--nyan-border);
}

.nyan-context-label {
    margin: 0 10px 9px;
    color: #636b80;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.nyan-context-nav .panel-sidebar {
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6edf3;
    border-radius: 12px;
    box-shadow: none;
}

.nyan-context-nav .panel-sidebar > .panel-heading {
    padding: 11px 12px;
    color: var(--nyan-primary-dark);
    background: var(--nyan-surface-soft);
    border: 0;
    border-radius: 0;
}

.nyan-context-nav .panel-sidebar > .panel-heading .panel-title,
.nyan-context-nav .panel-sidebar > .panel-heading i {
    color: var(--nyan-primary-dark);
}

.nyan-context-nav .panel-sidebar > .panel-heading .panel-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 20px;
}

.nyan-context-nav .panel-sidebar .panel-minimise {
    margin-top: 2px;
    color: var(--nyan-muted);
}

.nyan-context-nav .panel-sidebar .list-group-item {
    min-height: 39px;
    padding: 9px 11px;
    color: #505a6d;
    border-color: #edf1f5;
    font-size: 10px;
    line-height: 20px;
}

.nyan-context-nav .panel-sidebar .list-group-item .badge {
    margin-top: 1px;
    padding: 4px 7px;
    font-size: 8px;
}

.nyan-context-nav .panel-sidebar a.list-group-item:hover,
.nyan-context-nav .panel-sidebar a.list-group-item:focus,
.nyan-context-nav .panel-sidebar a.list-group-item.active,
.nyan-context-nav .panel-sidebar a.list-group-item.active:focus,
.nyan-context-nav .panel-sidebar a.list-group-item.active:hover {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-color: #f8d8d4;
}

.nyan-context-nav .panel-sidebar .panel-body {
    padding: 12px;
    color: var(--nyan-muted);
    font-size: 10px;
    line-height: 1.55;
}

.nyan-context-nav .panel-sidebar .panel-footer {
    padding: 9px 11px;
    background: #fff;
    border-color: var(--nyan-border);
}

.nyan-context-nav .panel-sidebar .panel-footer .btn {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    font-size: 9px;
}

.nyan-context-nav .panel-sidebar:last-child {
    margin-bottom: 0;
}

.nyan-context-nav > .panel:not(.panel-sidebar) {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid #e6edf3;
    border-radius: 12px;
    box-shadow: none;
}

.nyan-context-nav > .panel:not(.panel-sidebar) > .panel-heading {
    padding: 10px 12px;
    background: var(--nyan-surface-soft);
}

.nyan-context-nav > .panel:not(.panel-sidebar) > .panel-heading .panel-title {
    font-size: 11px;
    line-height: 20px;
}

.nyan-context-nav > .panel:not(.panel-sidebar) > .panel-body {
    padding: 10px;
}

.nyan-context-nav > .panel:not(.panel-sidebar) .form-control {
    min-height: 40px;
    font-size: 11px;
}

.nyan-context-nav + .navbar-nav {
    position: relative;
    padding-top: 34px;
}

.nyan-context-nav + .navbar-nav:before {
    position: absolute;
    top: 7px;
    left: 10px;
    content: "MENU UTAMA";
    color: #636b80;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.nyan-profile-avatar {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--nyan-accent);
    border-radius: 50%;
    font-weight: 800;
    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: 12px;
}

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

.nyan-sidebar-profile > a {
    padding: 7px;
    color: var(--nyan-muted);
}

.nyan-topbar-context {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nyan-muted);
    font-size: 12px;
}

.nyan-topbar-context i {
    font-size: 8px;
}

.nyan-topbar-context strong {
    color: var(--nyan-ink);
}

.nyan-topbar-search {
    position: relative;
    width: min(400px, 34vw);
    margin-left: auto;
}

.nyan-topbar-search i {
    position: absolute;
    top: 15px;
    left: 16px;
    color: var(--nyan-accent);
}

.nyan-topbar-search input {
    width: 100%;
    height: 48px;
    padding: 10px 18px 10px 42px;
    color: var(--nyan-ink);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 999px;
    outline: 0;
}

.nyan-client-shell ul.top-nav {
    margin-left: 10px;
}

.nyan-client-shell .nyan-topbar-language {
    display: none;
}

.nyan-topbar-cart {
    display: flex;
    width: 46px;
    height: 46px;
    margin-left: 10px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-radius: 50%;
}

.nyan-topbar-cart:hover,
.nyan-topbar-cart:focus {
    color: #fff;
    background: var(--nyan-accent);
}

.nyan-client-shell ul.top-nav > li > a {
    display: flex;
    min-width: 46px;
    min-height: 46px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background: var(--nyan-accent-soft);
}

.nyan-client-shell ul.top-nav #accountNotifications {
    font-size: 14px;
}

.nyan-client-shell ul.top-nav #accountNotifications .nyan-notification-icon {
    display: inline-block;
    width: 16px;
    color: currentColor;
    text-align: center;
    line-height: 1;
}

.nyan-client-shell ul.top-nav #accountNotifications .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 .caret {
    display: none;
}

.nyan-client-shell ul.top-nav #accountNotifications .label {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    padding: 3px;
    color: #fff;
    background: var(--nyan-accent);
    font-size: 8px;
}

.nyan-client-shell ul.top-nav > li.primary-action {
    display: none;
}

.nyan-client-shell section#main-body {
    min-height: calc(100vh - 82px);
    padding: 30px 0 56px;
    background: #f8f8fc;
}

.nyan-client-shell section#main-body > .container {
    width: 100%;
    max-width: 1600px;
    padding-right: 34px;
    padding-left: 34px;
}

.nyan-client-shell .main-content {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.nyan-client-shell .main-content > .header-lined {
    margin-bottom: 30px;
}

.nyan-client-shell .dataTables_wrapper,
.nyan-client-shell .table-container {
    width: 100%;
}

.nyan-client-shell .table-container {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.nyan-client-shell .table-container .table-list {
    min-width: 720px;
}

.nyan-client-shell .table-container .dropdown-menu {
    z-index: 50;
}

.nyan-client-shell .dataTables_wrapper .dataTables_info,
.nyan-client-shell .dataTables_wrapper .dataTables_filter,
.nyan-client-shell .dataTables_wrapper .dataTables_length,
.nyan-client-shell .dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
}

.nyan-client-shell .dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
}

.nyan-client-shell section#footer,
.nyan-client-shell .footer-legal {
    background: #f8f8fc;
}

.nyan-sidebar-toggle {
    display: none;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    color: var(--nyan-primary);
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 11px;
}

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

.nyan-dashboard-email {
    display: block;
    margin-bottom: 3px;
    color: var(--nyan-muted);
    font-size: 11px;
    font-weight: 700;
}

.nyan-dashboard-intro h1 {
    margin: 0 0 4px;
    color: #101526;
    font-family: Georgia, serif !important;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.04em;
}

.nyan-dashboard-intro p {
    margin: 0;
    color: #4d5365;
}

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

.nyan-dashboard-cta .btn {
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 999px;
}

.nyan-client-shell .tiles {
    margin-bottom: 22px;
}

.nyan-client-shell .tiles .row {
    margin-right: -7px;
    margin-left: -7px;
}

.nyan-client-shell .tiles .tile a {
    display: flex;
    min-height: 220px;
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 26px;
    box-shadow: none;
}

.nyan-client-shell .tile .icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    flex: 0 0 56px;
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    border-radius: 17px;
}

.nyan-client-shell .tiles .tile:nth-child(2) .icon {
    color: #16875c;
    background: #e7f4ee;
}

.nyan-client-shell .tiles .tile:nth-child(3) .icon {
    color: #159bb5;
    background: #e4f6f8;
}

.nyan-client-shell .tiles .tile:nth-child(4) .icon {
    color: #c66b18;
    background: #fdf0e4;
}

.nyan-client-shell .tile .stat {
    margin-bottom: 2px;
    color: #060b18;
    font-family: Georgia, serif;
    font-size: 34px;
}

.nyan-client-shell .tile .title {
    color: #42485b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.nyan-client-shell .tiles .tile .highlight {
    position: static;
    width: 100%;
    height: 1px;
    margin: auto 0 36px;
    background: var(--nyan-border);
    border-radius: 0;
    opacity: 1;
}

.nyan-tile-state {
    position: absolute;
    right: 20px;
    bottom: 16px;
    left: 20px;
    overflow: hidden;
    color: #505669;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nyan-tile-state i {
    margin-right: 4px;
    color: var(--nyan-success);
}

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

.nyan-quick-actions a {
    display: flex;
    min-height: 74px;
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #121827;
    background: #fff;
    border: 1px solid var(--nyan-border);
    border-radius: 18px;
    font-size: 11px;
    font-weight: 700;
}

.nyan-quick-actions a i {
    color: var(--nyan-accent);
    font-size: 17px;
}

.nyan-quick-actions a:hover {
    color: var(--nyan-accent);
    border-color: rgba(240, 68, 58, .35);
    transform: translateY(-2px);
}

.nyan-client-shell .client-home-panels .panel,
.nyan-client-shell .client-home-panels .panel[class*="panel-accent-"] {
    border-top: 1px solid var(--nyan-border);
    border-radius: 24px;
    box-shadow: 0 12px 34px rgba(31, 53, 75, .05);
}

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

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

    .nyan-client-shell section#main-menu,
    .nyan-client-shell section#header .logo {
        width: 250px;
    }

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

    .nyan-topbar-search {
        margin-left: 0;
    }
}

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

    .nyan-client-shell section#header .logo {
        position: static;
        width: auto;
        height: auto;
        margin-right: auto;
        padding: 0;
        border: 0;
    }

    .nyan-client-shell section#header .logo img {
        max-width: 135px;
    }

    .nyan-client-shell section#main-menu {
        top: 82px;
        bottom: auto;
        width: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }

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

    .nyan-client-shell .navbar-main,
    .nyan-client-shell .navbar-main .container {
        width: 0;
        height: 0;
    }

    .nyan-client-shell .navbar-main .navbar-collapse {
        position: fixed;
        top: 82px;
        right: auto;
        bottom: 0;
        left: 0;
        display: none !important;
        width: min(88vw, 340px);
        height: auto;
        padding: 66px 15px 24px;
        background: #fff;
        box-shadow: 18px 0 50px rgba(23, 32, 51, .16);
        transform: translateX(-102%);
    }

    .nyan-client-shell .navbar-main .navbar-collapse.in {
        display: block !important;
        margin: 0;
        transform: translateX(0);
    }

    .nyan-client-shell .nyan-sidebar-mobile-head {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        height: 58px;
        padding: 10px 16px;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-bottom: 1px solid var(--nyan-border);
    }

    .nyan-sidebar-mobile-head strong {
        color: var(--nyan-ink);
        font-size: 13px;
    }

    .nyan-sidebar-mobile-head button {
        display: flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        color: var(--nyan-muted);
        background: var(--nyan-surface-soft);
        border: 0;
        border-radius: 10px;
    }

    .nyan-client-shell .nyan-sidebar-mobile-profile {
        display: flex;
        margin-top: 18px;
        padding: 14px 10px 4px;
        align-items: center;
        gap: 10px;
        border-top: 1px dashed var(--nyan-border);
    }

    .nyan-context-nav {
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .nyan-sidebar-mobile-profile > a {
        padding: 10px;
        color: var(--nyan-muted);
    }

    .nyan-client-shell .navbar-main .navbar-nav > li > a {
        min-height: 48px;
        padding: 13px 14px;
    }

    .nyan-context-nav .panel-sidebar .list-group-item {
        min-height: 44px;
        padding: 11px 12px;
        font-size: 11px;
    }

    .nyan-sidebar-toggle {
        display: inline-flex;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
    }

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

    .nyan-client-shell ul.top-nav {
        margin-left: 8px;
    }

    .nyan-client-shell .nyan-topbar-cart {
        margin-left: auto;
    }

    .nyan-client-shell section#main-body > .container {
        padding-right: 22px;
        padding-left: 22px;
    }

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

    .nyan-client-shell .dataTables_wrapper .dataTables_info,
    .nyan-client-shell .dataTables_wrapper .dataTables_filter,
    .nyan-client-shell .dataTables_wrapper .dataTables_length,
    .nyan-client-shell .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        margin: 8px 0;
        text-align: left;
    }

    .nyan-client-shell .dataTables_wrapper .dataTables_filter label,
    .nyan-client-shell .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .nyan-client-shell section#header .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .nyan-client-shell ul.top-nav > li:not(:first-child) {
        display: none;
    }

    .nyan-dashboard-intro {
        align-items: flex-start;
        flex-direction: column;
    }

    .nyan-dashboard-intro h1 {
        font-size: 31px;
    }

    .nyan-dashboard-cta {
        width: 100%;
    }

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

    .nyan-client-shell .tiles .tile {
        width: 50%;
    }

    .nyan-client-shell .tiles .tile a {
        min-height: 210px;
    }
}

@media (max-width: 520px) {
    .nyan-client-shell section#header .logo img {
        max-width: 105px;
    }

    .nyan-client-shell section#main-body > .container {
        padding-right: 15px;
        padding-left: 15px;
    }

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

    .nyan-client-shell .tiles .tile {
        width: 100%;
    }

    .nyan-client-shell .tiles .tile a {
        min-height: 200px;
    }

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

/* Shell 7: symmetric navigation and resilient client-area layout. */
.nyan-client-shell {
    --nyan-sidebar-width: 284px;
    --nyan-header-height: 82px;
    --nyan-nav-icon-size: 24px;
    --nyan-nav-row-height: 46px;
}

.nyan-client-shell section#main-menu {
    display: flex;
    width: var(--nyan-sidebar-width);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
}

.nyan-client-shell section#main-menu:before {
    display: none;
}

.nyan-sidebar-brand {
    display: flex;
    min-height: var(--nyan-header-height);
    padding: 16px 26px;
    flex: 0 0 var(--nyan-header-height);
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--nyan-border);
}

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

.nyan-sidebar-brand img {
    display: block;
    max-width: 178px;
    max-height: 46px;
    object-fit: contain;
}

.nyan-sidebar-brand-text {
    color: var(--nyan-ink);
    font-size: 20px;
    font-weight: 800;
}

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

.nyan-client-shell section#header .logo {
    display: none;
}

.nyan-client-shell .navbar-main,
.nyan-client-shell .navbar-main .container {
    min-height: 0;
    flex: 1 1 auto;
}

.nyan-client-shell .navbar-main .container {
    position: relative;
    height: 100%;
}

.nyan-client-shell .navbar-main .navbar-collapse {
    position: static;
    display: block !important;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    padding: 20px 15px 28px;
    overflow-x: hidden;
    overflow-y: auto !important;
}

.nyan-client-shell .nyan-sidebar-profile {
    position: static;
    min-height: 86px;
    height: auto;
    flex: 0 0 auto;
    padding-bottom: max(15px, env(safe-area-inset-bottom));
}

.nyan-client-shell .navbar-main .navbar-nav > li > .nyan-nav-link,
.nyan-client-shell .nyan-subnav-link,
.nyan-client-shell .nyan-context-item,
.nyan-client-shell .nyan-context-heading-row {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: var(--nyan-nav-icon-size) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
}

.nyan-client-shell .navbar-main .navbar-nav > li > .nyan-nav-link {
    min-height: var(--nyan-nav-row-height);
    padding: 10px 12px;
}

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

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

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

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

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

.nyan-nav-caret {
    color: #8a93a5;
    font-size: 9px;
    transition: transform .2s ease;
}

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

.nyan-client-shell .navbar-main .navbar-nav > li > .nyan-nav-link:hover,
.nyan-client-shell .navbar-main .navbar-nav > li > .nyan-nav-link:focus,
.nyan-client-shell .navbar-main .navbar-nav > li.open > .nyan-nav-link {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
    box-shadow: none;
}

.nyan-client-shell .navbar-main .navbar-nav > li.active > .nyan-nav-link {
    color: #fff;
    background: var(--nyan-accent);
    box-shadow: 0 9px 22px rgba(240, 68, 58, .18);
}

.nyan-client-shell .navbar-main .navbar-nav > li.active > .nyan-nav-link .nyan-nav-icon,
.nyan-client-shell .navbar-main .navbar-nav > li.active > .nyan-nav-link .nyan-nav-caret {
    color: #fff;
}

.nyan-client-shell .nyan-subnav {
    margin: 4px 0 8px 18px;
    padding: 4px 0 4px 10px;
}

.nyan-client-shell .nyan-subnav-link {
    min-height: 40px;
    padding: 8px 10px;
    color: #626b7e;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

.nyan-client-shell .nyan-subnav-item.active > .nyan-subnav-link,
.nyan-client-shell .nyan-subnav-link:hover,
.nyan-client-shell .nyan-subnav-link:focus {
    color: var(--nyan-accent);
    background: var(--nyan-accent-soft);
}

.nyan-client-shell .nyan-subnav-item.active > .nyan-subnav-link {
    box-shadow: inset 3px 0 0 var(--nyan-accent);
}

.nyan-context-nav {
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px dashed var(--nyan-border);
    border-bottom: 0;
}

.nyan-context-nav .nyan-context-panel {
    overflow: visible;
}

.nyan-context-nav .nyan-context-heading-row {
    margin: 0;
}

.nyan-context-toggle {
    display: inline-flex;
    width: 28px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #7e8798;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.nyan-context-toggle:hover,
.nyan-context-toggle:focus {
    color: var(--nyan-accent);
    background: #fff;
}

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

.nyan-context-nav .nyan-context-item {
    min-height: 42px;
    padding: 9px 11px;
}

.nyan-context-nav .nyan-context-item.active {
    box-shadow: inset 3px 0 0 var(--nyan-accent);
}

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

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;
    background: rgba(20, 29, 43, .48);
    backdrop-filter: blur(2px);
}

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

@media (max-width: 1199px) and (min-width: 992px) {
    .nyan-client-shell {
        --nyan-sidebar-width: 250px;
    }
}

@media (max-width: 991px) {
    .nyan-client-shell section#main-menu {
        position: fixed;
        top: var(--nyan-header-height);
        bottom: 0;
        width: min(88vw, 340px);
        height: calc(100vh - var(--nyan-header-height));
        height: calc(100dvh - var(--nyan-header-height));
        background: #fff;
        box-shadow: 20px 0 50px rgba(20, 29, 43, .18);
        transform: translateX(-105%);
        transition: transform .24s ease;
    }

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

    .nyan-sidebar-brand {
        display: none;
    }

    .nyan-mobile-brand {
        display: inline-flex;
        max-width: 145px;
        margin-right: auto;
        align-items: center;
    }

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

    .nyan-sidebar-mobile-head img {
        display: block;
        max-width: 145px;
        max-height: 38px;
        object-fit: contain;
    }

    .nyan-client-shell .navbar-main,
    .nyan-client-shell .navbar-main .container,
    .nyan-client-shell .navbar-main .navbar-collapse {
        width: 100%;
        height: 100% !important;
    }

    .nyan-client-shell .navbar-main .navbar-collapse,
    .nyan-client-shell .navbar-main .navbar-collapse.in {
        position: static;
        display: block !important;
        padding: 66px 15px 18px;
        overflow-x: hidden !important;
        transform: none;
        box-shadow: none;
    }

    .nyan-client-shell .nyan-context-nav,
    .nyan-client-shell .nyan-context-nav .nyan-context-panel,
    .nyan-client-shell .nyan-context-nav .panel-body,
    .nyan-client-shell .nyan-context-nav .list-group {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .nyan-client-shell .nyan-context-nav .list-group {
        display: block;
    }

    .nyan-client-shell .nyan-context-nav .nyan-context-item {
        display: grid;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal;
    }

    .nyan-client-shell .nyan-context-nav .panel-body > *,
    .nyan-client-shell .nyan-context-nav .panel-footer > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .nyan-client-shell .nyan-context-nav .btn,
    .nyan-client-shell .nyan-context-nav button,
    .nyan-client-shell .nyan-context-nav input,
    .nyan-client-shell .nyan-context-nav select {
        max-width: 100%;
        white-space: normal;
    }

    .nyan-client-shell .nyan-sidebar-mobile-profile {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}