/*
 * SIEUTHICODE - Soft Mint Customer Theme
 * Scope: customer storefront, payment, error and maintenance pages.
 * The stylesheet is intentionally loaded last so legacy page styles keep their
 * layout while the visual system is normalised here.
 */

html.stc-theme-frontend,
html.stc-theme-payment,
html.stc-theme-error,
html.stc-theme-maintenance {
    --stc-green-950: #173c33;
    --stc-green-900: #1b4d40;
    --stc-green-800: #1e5e4b;
    --stc-green-700: #1f6d53;
    --stc-green-600: #217a59;
    --stc-green-500: #2d956d;
    --stc-green-400: #59b98b;
    --stc-green-300: #9bd8ba;
    --stc-green-200: #c7e7d6;
    --stc-green-100: #e4f3eb;
    --stc-green-50: #f3f9f5;
    --stc-teal-600: #247665;
    --stc-teal-500: #369581;
    --stc-peach-700: #a94f45;
    --stc-peach-500: #ed806f;
    --stc-peach-200: #f7cbc3;
    --stc-peach-100: #fde7e2;
    --stc-peach-50: #fff4f1;
    --stc-ink: #29473f;
    --stc-text: #50665f;
    --stc-muted: #63756e;
    --stc-line: #d9e3dc;
    --stc-line-strong: #c5d5ca;
    --stc-page: #f3f6f5;
    --stc-surface: #ffffff;
    --stc-surface-soft: #f7faf7;
    --stc-ring: rgba(45, 149, 109, .18);
    --stc-shadow-xs: 0 2px 8px rgba(42, 68, 58, .035);
    --stc-shadow-sm: 0 8px 24px rgba(42, 68, 58, .055);
    --stc-shadow-md: 0 14px 36px rgba(42, 68, 58, .075);
    --stc-shadow-lg: 0 22px 54px rgba(35, 61, 51, .11);
    --stc-gradient: linear-gradient(135deg, #1e5e4b 0%, #1f6d53 55%, #217a59 100%);
    --stc-gradient-deep: linear-gradient(135deg, #173c33 0%, #1b4d40 52%, #1f6d53 100%);
    --stc-accent-gradient: linear-gradient(90deg, var(--stc-green-700), var(--stc-peach-500));
    --stc-nav-gradient: linear-gradient(115deg, #173c33 0%, #1b4d40 55%, #1f6d53 100%);
    --stc-radius-sm: 10px;
    --stc-radius: 16px;
    --stc-radius-lg: 22px;
    color-scheme: light;
}

/* -------------------------------------------------------------------------- */
/* Customer application shell                                                  */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend {
    background: var(--stc-page);
    scroll-behavior: auto;
    --mnv-green: var(--stc-green-600);
    --mnv-green-dark: var(--stc-green-700);
    --mnv-green-soft: var(--stc-green-50);
    --mnv-cyan: var(--stc-teal-500);
    --mnv-cyan-soft: var(--stc-green-50);
    --mnv-text: var(--stc-ink);
    --mnv-muted: var(--stc-muted);
    --mnv-line: var(--stc-line);
    --mnv-sheet-bg: var(--stc-surface-soft);
}

html.stc-theme-frontend body.main {
    min-height: 100vh;
    color: var(--stc-text);
    background: linear-gradient(180deg, #f6f9f7 0%, var(--stc-page) 100%) !important;
    background-attachment: scroll !important;
    cursor: default !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html.stc-theme-frontend body.main a,
html.stc-theme-frontend body.main button,
html.stc-theme-frontend body.main input,
html.stc-theme-frontend body.main select,
html.stc-theme-frontend body.main textarea {
    cursor: auto;
}

html.stc-theme-frontend body.main a,
html.stc-theme-frontend body.main button,
html.stc-theme-frontend body.main select,
html.stc-theme-frontend body.main [role="button"] {
    cursor: pointer;
}

/* Keep the decorative green backing above the page background, behind content. */
html.stc-theme-frontend .wrapper {
    isolation: isolate;
}

html.stc-theme-frontend .wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    width: 95%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1rem;
    border: 0;
    border-radius: 1.3rem;
    background: rgb(253 232 232) !important;
    box-shadow: none;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transform: translateY(35px);
    -webkit-animation: intro-wrapper-animation .4s ease-in-out .1s forwards !important;
    animation: intro-wrapper-animation .4s ease-in-out .1s forwards !important;
}

html.stc-theme-frontend .wrapper .wrapper-box {
    --tw-bg-opacity: 1;
    display: flex;
    border: 1px solid rgba(13, 184, 33, .3);
    border-radius: 1.3rem !important;
    background: #fff !important;
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 16px 40px rgba(8, 94, 5, .12);
    opacity: .8;
    transform: translateY(35px);
    -webkit-animation: intro-wrapper-animation .4s ease-in-out .2s forwards !important;
    animation: intro-wrapper-animation .4s ease-in-out .2s forwards !important;
}

html.stc-theme-frontend .content {
    border: 1px solid var(--stc-line-strong);
    background: linear-gradient(180deg, #fffdfa 0%, #f7faf7 100%) !important;
    box-shadow: 0 16px 40px rgba(42, 68, 58, .065) !important;
}

html.stc-theme-frontend .box {
    border: 1px solid var(--stc-line);
    background: linear-gradient(180deg, var(--stc-surface) 0%, #f8faf7 100%) !important;
    box-shadow: var(--stc-shadow-sm) !important;
}

/* Authentication pages: unmistakable green brand area without a fixed image. */
html.stc-theme-frontend body.login {
    min-height: 100vh;
    color: var(--stc-text);
    background: linear-gradient(145deg, #faf7f2 0%, #eff6f0 55%, #e2eee5 100%) !important;
    background-attachment: scroll !important;
}

html.stc-theme-frontend body.login::before {
    background:
        radial-gradient(circle at 24% 18%, rgba(247, 203, 195, .20), transparent 28%),
        linear-gradient(145deg, #173c33 0%, #1b4d40 48%, #217a59 100%) !important;
}

html.stc-theme-frontend body.login .login__input,
html.stc-theme-frontend body.login .password-container {
    border-color: var(--stc-line-strong) !important;
    background: #fff !important;
    color: var(--stc-ink) !important;
    box-shadow: 0 3px 12px rgba(30, 65, 42, .055) !important;
}

html.stc-theme-frontend body.login .login__input:focus,
html.stc-theme-frontend body.login .password-container:focus-within {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend body.login :is(#btnotp, #btnLogin, #btnreg) {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend body.login :is(#btnotp, #btnLogin, #btnreg):hover {
    border-color: var(--stc-green-800) !important;
    background: linear-gradient(135deg, var(--stc-green-800), var(--stc-green-600)) !important;
    color: #fff !important;
}

html.stc-theme-frontend body.login .toggle-password {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend body.login :is(.btn-social-facebook, .btn-social-google, .btn-social-github) {
    transition: opacity .14s ease !important;
}

html.stc-theme-frontend body.login :is(.btn-social-facebook, .btn-social-google, .btn-social-github):hover {
    transform: none !important;
}

/* -------------------------------------------------------------------------- */
/* Brand utility colours                                                       */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend .bg-theme-1,
html.stc-theme-frontend .bg-theme-11,
html.stc-theme-frontend .bg-theme-14,
html.stc-theme-frontend .bg-theme-16,
html.stc-theme-frontend .bg-theme-17,
html.stc-theme-frontend .bg-theme-26 {
    background-color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(
    .text-theme-1,
    .text-theme-11,
    .text-theme-12,
    .text-theme-13,
    .text-theme-14,
    .text-theme-16,
    .text-theme-17,
    .text-theme-21,
    .text-theme-26,
    .text-theme-33
) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(
    .border-theme-1,
    .border-theme-2,
    .border-theme-11,
    .border-theme-12,
    .border-theme-14,
    .border-theme-16,
    .border-theme-17,
    .border-theme-21,
    .border-theme-26,
    .border-theme-33
) {
    border-color: rgba(167, 243, 208, .42) !important;
}

html.stc-theme-frontend .hover\:bg-theme-1:hover,
html.stc-theme-frontend .hover\:bg-theme-11:hover,
html.stc-theme-frontend .hover\:bg-theme-12:hover {
    background-color: rgba(16, 185, 129, .13) !important;
}

html.stc-theme-frontend a:not([class]) {
    color: var(--stc-green-700);
}

/* -------------------------------------------------------------------------- */
/* Desktop and tablet header                                                    */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend .stc-desktop-navbar {
    border-color: rgba(199, 231, 214, .38) !important;
    border-radius: 0 0 20px 20px;
    background: var(--stc-nav-gradient) !important;
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 14px 34px rgba(23, 60, 51, .20);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.stc-theme-frontend .stc-desktop-navbar .breadcrumb,
html.stc-theme-frontend .stc-desktop-navbar .breadcrumb a,
html.stc-theme-frontend .stc-desktop-navbar .notification {
    color: #fff;
}

html.stc-theme-frontend .stc-desktop-navbar #moneyoke {
    color: var(--stc-green-100) !important;
    text-shadow: none !important;
}

html.stc-theme-frontend .stc-desktop-navbar-logo img {
    filter: none;
}

html.stc-theme-frontend .stc-desktop-navbar .dropdown-toggle.rounded-full {
    border: 2px solid rgba(228, 243, 235, .76);
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 7px 18px rgba(23, 60, 51, .20) !important;
}

html.stc-theme-frontend .stc-desktop-navbar .dropdown-menu__content {
    border: 1px solid var(--stc-line);
    border-radius: 16px;
    background: rgba(255, 253, 250, .98) !important;
    color: var(--stc-text);
    box-shadow: var(--stc-shadow-lg) !important;
    overflow: hidden;
}

html.stc-theme-frontend .stc-desktop-navbar .dropdown-menu__content a:hover {
    background: var(--stc-green-50) !important;
    color: var(--stc-green-800) !important;
}

/* Account control and dropdown: anchored to the trigger instead of Popper's
 * legacy inline margin so the panel always opens neatly below the account. */
html.stc-theme-frontend .stc-account-dropdown {
    position: relative;
    z-index: 80;
    flex: 0 0 auto;
    opacity: 1;
    transform: none;
    -webkit-animation: none;
    animation: none;
}

html.stc-theme-frontend .stc-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 174px;
    height: 48px;
    padding: 5px 10px 5px 6px;
    border: 1px solid rgba(228, 243, 235, .44);
    border-radius: 14px;
    background: rgba(23, 60, 51, .68);
    color: #fff;
    box-shadow: 0 7px 20px rgba(23, 60, 51, .17);
    text-align: left;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

html.stc-theme-frontend .stc-account-trigger:hover,
html.stc-theme-frontend .stc-account-trigger[aria-expanded="true"] {
    border-color: rgba(228, 243, 235, .76);
    background: rgba(23, 60, 51, .88);
    color: #fff;
    box-shadow: 0 10px 26px rgba(23, 60, 51, .23);
}

html.stc-theme-frontend .stc-account-trigger:focus-visible {
    outline: 3px solid rgba(199, 231, 214, .58);
    outline-offset: 2px;
}

html.stc-theme-frontend .stc-account-trigger-avatar,
html.stc-theme-frontend .stc-account-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

html.stc-theme-frontend .stc-account-trigger-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .82);
    box-shadow: 0 4px 12px rgba(5, 46, 31, .17);
}

html.stc-theme-frontend :is(.stc-account-trigger-avatar, .stc-account-avatar) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html.stc-theme-frontend .stc-account-trigger-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

html.stc-theme-frontend .stc-account-trigger-label {
    color: rgba(236, 253, 245, .78);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
}

html.stc-theme-frontend .stc-account-trigger-copy strong {
    max-width: 104px;
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.stc-theme-frontend .stc-account-trigger-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #d1fae5;
    transition: transform .16s ease;
}

html.stc-theme-frontend .stc-account-trigger[aria-expanded="true"] .stc-account-trigger-chevron {
    transform: rotate(180deg);
}

html.stc-theme-frontend .stc-account-portal > .stc-account-menu[hidden] {
    display: none !important;
}

html.stc-theme-frontend body > .stc-account-portal > .stc-account-menu.show {
    display: block !important;
    position: fixed !important;
    top: var(--account-top) !important;
    left: var(--account-left) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--account-width) !important;
    max-height: var(--account-height) !important;
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 9999;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: 0 24px 56px rgba(35, 61, 51, .2);
}

html.stc-theme-frontend .stc-account-dropdown > .stc-account-menu {
    right: 0 !important;
    left: auto !important;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 0 !important;
    border: 0;
    border-radius: 22px !important;
    background: transparent !important;
}

html.stc-theme-frontend .stc-account-dropdown > .stc-account-menu.show {
    top: calc(100% + 12px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
}

html.stc-theme-frontend .stc-account-dropdown > .stc-account-menu.show::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--stc-line);
    border-left: 1px solid var(--stc-line);
    background: var(--stc-surface-soft);
    transform: rotate(45deg);
}

html.stc-theme-frontend .stc-account-dropdown .stc-account-panel {
    position: relative;
    border: 1px solid var(--stc-line-strong);
    border-radius: 22px !important;
    padding: 0;
    background: var(--stc-surface) !important;
    color: var(--stc-text);
    box-shadow: 0 24px 56px rgba(35, 61, 51, .16) !important;
    overflow: hidden;
}

html.stc-theme-frontend .stc-account-menu.show > .stc-account-panel {
    margin-top: 0;
}

html.stc-theme-frontend .stc-account-panel > .stc-account-header {
    border-radius: 21px 21px 0 0;
}

html.stc-theme-frontend .stc-account-panel > :last-child {
    border-radius: 0 0 21px 21px;
}

html.stc-theme-frontend .stc-account-header {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 24px 20px;
    border-bottom: 1px solid var(--stc-line);
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 149, 109, .18), transparent 60%),
        linear-gradient(135deg, #f8fcfa 0%, #e7f5ec 100%);
}

html.stc-theme-frontend .stc-account-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--stc-line-strong), 0 7px 16px rgba(42, 68, 58, .10);
}

html.stc-theme-frontend .stc-account-avatar.is-guest {
    background: linear-gradient(135deg, var(--stc-green-100), #fff);
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-account-avatar.is-guest svg {
    width: 23px;
    height: 23px;
}

html.stc-theme-frontend .stc-account-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

html.stc-theme-frontend .stc-account-eyebrow {
    margin-bottom: 2px;
    color: var(--stc-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html.stc-theme-frontend .stc-account-identity > strong {
    overflow: hidden;
    color: var(--stc-green-950);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.stc-theme-frontend .stc-account-status,
html.stc-theme-frontend .stc-account-guest-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: #5f7667;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

html.stc-theme-frontend .stc-account-status-dot {
    width: 7px;
    height: 7px;
    border: 2px solid var(--stc-green-100);
    border-radius: 999px;
    background: var(--stc-green-500);
    box-shadow: 0 0 0 2px rgba(45, 149, 109, .13);
}

html.stc-theme-frontend .stc-account-status {
    align-self: flex-start;
    margin-top: 7px;
    padding: 4px 8px;
    border: 1px solid var(--stc-green-200);
    border-radius: 999px;
    background: var(--stc-green-50);
    color: var(--stc-green-700);
    font-size: 10px;
}

html.stc-theme-frontend .stc-account-actions {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: var(--stc-surface);
}

html.stc-theme-frontend .stc-account-action {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--stc-line);
    border-radius: 14px;
    background: #fff;
    color: var(--stc-text) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

html.stc-theme-frontend .stc-account-action:hover,
html.stc-theme-frontend .stc-account-action:focus-visible {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50) !important;
    color: var(--stc-green-900) !important;
    outline: none;
}

html.stc-theme-frontend .stc-account-action:focus-visible {
    box-shadow: 0 0 0 3px var(--stc-ring);
}

html.stc-theme-frontend .stc-account-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--stc-green-200);
    border-radius: 11px;
    background: var(--stc-green-50);
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-account-action-icon.is-wallet {
    border-color: var(--stc-green-200);
    background: var(--stc-green-100);
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-account-action-icon svg {
    width: 19px;
    height: 19px;
}

html.stc-theme-frontend .stc-account-action-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

html.stc-theme-frontend .stc-account-action-copy strong {
    color: var(--stc-ink);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
}

html.stc-theme-frontend .stc-account-action-copy small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--stc-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.stc-theme-frontend .stc-account-action-arrow {
    width: 15px;
    height: 15px;
    color: #91a199;
}

html.stc-theme-frontend .stc-account-footer {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--stc-line);
    background: #f8faf9;
}

html.stc-theme-frontend .stc-account-footer .stc-account-action {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 52px;
}

html.stc-theme-frontend .stc-account-logout .stc-account-action-icon {
    border-color: #fecaca;
    background: #fff5f5;
    color: #dc2626;
}

html.stc-theme-frontend .stc-account-logout:hover,
html.stc-theme-frontend .stc-account-logout:focus-visible {
    border-color: #fecaca;
    background: #fff7f7 !important;
}

html.stc-theme-frontend .stc-account-logout .stc-account-action-copy strong {
    color: #b91c1c;
}

html.stc-theme-frontend .sqs-root {
    --sqs-green: var(--stc-green-600);
    --sqs-green-dark: var(--stc-green-700);
    --sqs-border: var(--stc-line);
    --sqs-muted: var(--stc-muted);
}

html.stc-theme-frontend .sqs-desktop-field {
    border-color: var(--stc-line-strong);
    background: rgba(23, 60, 51, .62);
    box-shadow: 0 7px 20px rgba(37, 75, 70, .07);
}

html.stc-theme-frontend .sqs-desktop.is-focused .sqs-desktop-field {
    border-color: var(--stc-green-200);
    background: var(--stc-surface);
    box-shadow: 0 0 0 4px var(--stc-ring), var(--stc-shadow-md);
}

html.stc-theme-frontend .sqs-desktop-panel,
html.stc-theme-frontend .sqs-mobile-results {
    border-color: var(--stc-line);
    box-shadow: var(--stc-shadow-lg);
}

html.stc-theme-frontend .sqs-item.is-active,
html.stc-theme-frontend .sqs-item:hover {
    background: var(--stc-green-50);
}

html.stc-theme-frontend .sqs-item-title mark {
    color: var(--stc-green-700);
    background: var(--stc-green-100);
}

/* Notifications */
html.stc-theme-frontend .stc-notification-button {
    border-color: rgba(228, 243, 235, .46);
    background: rgba(23, 60, 51, .62);
    color: #fff;
    box-shadow: 0 7px 20px rgba(5, 46, 31, .20);
}

html.stc-theme-frontend .stc-notification-button:hover,
html.stc-theme-frontend .stc-notification-wrap.is-open .stc-notification-button {
    border-color: rgba(228, 243, 235, .76);
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

html.stc-theme-frontend .stc-notification-badge {
    border-color: #fff;
    background: var(--stc-peach-700);
}

html.stc-theme-frontend .stc-notification-panel {
    border-color: var(--stc-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--stc-shadow-lg);
}

html.stc-theme-frontend .stc-navbar-meta .stc-balance-display {
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    line-height: 1.3;
}

html.stc-theme-frontend .stc-balance-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    height: 24px;
    background: transparent;
    color: var(--stc-green-100);
}

html.stc-theme-frontend .stc-balance-wallet svg {
    width: 18px;
    height: 18px;
}

html.stc-theme-frontend .stc-balance-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html.stc-theme-frontend .stc-balance-label {
    color: rgba(255, 255, 255, .75);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html.stc-theme-frontend .stc-desktop-navbar #moneyoke.stc-balance-value {
    color: #fff !important;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: none !important;
    background: none !important;
}

html.stc-theme-frontend .stc-navbar-meta .stc-balance-display > .stc-balance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

html.stc-theme-frontend .stc-balance-toggle:hover {
    background: transparent !important;
    color: var(--stc-green-100);
}

html.stc-theme-frontend .stc-balance-toggle:focus-visible {
    outline: 2px solid var(--stc-green-500);
    outline-offset: 2px;
}

html.stc-theme-frontend .stc-notification-panel::before {
    height: 3px;
    background: var(--stc-gradient);
}

html.stc-theme-frontend .stc-notification-header {
    padding: 20px;
    border-bottom: 1px solid var(--stc-line);
    background: linear-gradient(135deg, #f8fcfa, #e7f5ec);
}

html.stc-theme-frontend .stc-notification-heading h2 {
    color: var(--stc-green-950);
    font-size: 19px;
    font-weight: 800;
}

html.stc-theme-frontend .stc-notification-heading p {
    color: var(--stc-muted);
    font-size: 12px;
    margin-top: 5px;
}

html.stc-theme-frontend .stc-notification-list {
    padding: 12px;
    background: #f8faf9;
    overscroll-behavior: contain;
}

html.stc-theme-frontend .stc-notification-item {
    margin-bottom: 10px;
    padding: 16px;
    border: 1px solid var(--stc-line);
    border-radius: 15px;
    background: #fff;
    gap: 12px;
}

html.stc-theme-frontend .stc-notification-item:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid var(--stc-line);
}

html.stc-theme-frontend .stc-notification-item:hover {
    border-color: var(--stc-green-200);
}

html.stc-theme-frontend .stc-notification-title {
    font-size: 14px;
    line-height: 1.5;
    color: var(--stc-ink);
    overflow-wrap: anywhere;
}

html.stc-theme-frontend .stc-notification-empty {
    border: 1px dashed var(--stc-green-200);
    border-radius: 15px;
    background: #fff;
}

html.stc-theme-frontend .stc-notification-count {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50);
    color: var(--stc-green-700);
    min-width: 36px;
    height: 36px;
    border-radius: 12px;
}

html.stc-theme-frontend .stc-notification-item:hover {
    background: var(--stc-surface-soft);
}

/* -------------------------------------------------------------------------- */
/* Quick-search suggestions: shared desktop and mobile result cards. */
html.stc-theme-frontend .sqs-desktop-panel {
    max-width: calc(100vw - 24px);
    border-radius: 22px;
    border-color: var(--stc-line);
    background: #f8faf9;
    box-shadow: var(--stc-shadow-lg);
    overscroll-behavior: contain;
}

html.stc-theme-frontend .sqs-section-title {
    padding: 18px;
    border-bottom: 1px solid var(--stc-line);
    background: linear-gradient(135deg, #f8fcfa, #e7f5ec);
    color: var(--stc-green-950);
    font-size: 15px;
    letter-spacing: -.01em;
    text-transform: none;
}

html.stc-theme-frontend .sqs-section-title span:last-child {
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid var(--stc-green-200);
    border-radius: 999px;
    background: #fff;
    color: var(--stc-green-700);
    font-size: 11px;
}

html.stc-theme-frontend .sqs-list {
    padding: 12px;
    background: #f8faf9;
}

html.stc-theme-frontend .sqs-item {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    padding: 12px;
    border: 1px solid var(--stc-line);
    border-radius: 15px;
    background: #fff;
    transition: background-color .16s ease, border-color .16s ease;
}

html.stc-theme-frontend .sqs-item + .sqs-item {
    margin-top: 8px;
}

html.stc-theme-frontend .sqs-item:hover,
html.stc-theme-frontend .sqs-item.is-active,
html.stc-theme-frontend .sqs-item:focus-visible {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50);
}

html.stc-theme-frontend .sqs-item:focus-visible,
html.stc-theme-frontend .sqs-footer:focus-visible {
    outline: 2px solid var(--stc-green-500);
    outline-offset: -3px;
}

html.stc-theme-frontend .sqs-thumb {
    width: 72px;
    height: 56px;
    border-radius: 11px;
}

html.stc-theme-frontend .sqs-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.45;
    color: var(--stc-ink);
}

html.stc-theme-frontend .sqs-item-meta {
    gap: 6px 9px;
    margin-top: 7px;
}

html.stc-theme-frontend .sqs-price {
    color: var(--stc-green-700);
    font-size: 14px;
}

html.stc-theme-frontend .sqs-footer {
    padding: 15px 18px;
    border-top-color: var(--stc-line);
    background: #fff;
    color: var(--stc-green-700);
}

/* Desktop sidebar                                                             */
/* -------------------------------------------------------------------------- */

/* Flat mint rail: no separate framed sidebar card. */
html.stc-theme-frontend nav.stc-desktop-sidebar {
    background: #f3f9f5;
    border-radius: 1.3rem;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu {
    min-height: 48px;
    height: auto;
    border: 1px solid var(--stc-line) !important;
    border-radius: 13px;
    background: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 4px 12px rgba(42, 68, 58, .045);
    color: var(--stc-text);
    opacity: 1;
    animation: none !important;
    transform: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu .side-menu__title {
    color: inherit;
    transition: color .14s ease;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu:hover {
    border-color: var(--stc-green-300) !important;
    background: linear-gradient(135deg, #fffdfa, var(--stc-green-100));
    box-shadow: inset 4px 0 0 var(--stc-green-500), 0 7px 16px rgba(42, 68, 58, .07);
    color: var(--stc-green-900);
    transform: none;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu.side-menu--open:not(.side-menu--active) {
    border-color: var(--stc-green-300) !important;
    background: linear-gradient(135deg, #fffdfa, var(--stc-green-100));
    box-shadow: inset 4px 0 0 var(--stc-green-500), 0 7px 16px rgba(42, 68, 58, .065);
    color: var(--stc-green-900);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu.side-menu--active {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-gradient) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 9px 22px rgba(31, 109, 83, .19);
    color: #fff;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu.side-menu--active .side-menu__title {
    color: inherit;
    font-weight: 700;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu__icon {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(45, 149, 109, .14);
    border-radius: 10px;
    background: rgba(228, 243, 235, .82);
    color: var(--stc-green-600);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu:hover .side-menu__icon {
    border-color: rgba(45, 149, 109, .22);
    background: rgba(255, 253, 250, .88);
    color: var(--stc-green-700);
    transform: none;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon {
    border-color: rgba(228, 243, 235, .34);
    background: rgba(255, 255, 255, .16);
    color: var(--stc-green-100);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-menu__sub-icon {
    color: #829187;
    transition: color .14s ease;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu:hover .side-menu__sub-icon,
html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu.side-menu--open .side-menu__sub-icon {
    color: var(--stc-green-600);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul > li > .side-menu.side-menu--active .side-menu__sub-icon {
    color: var(--stc-green-100);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul,
html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul.side-menu__sub-open {
    margin: 6px 0 11px;
    padding: 8px;
    border: 1px solid var(--stc-line-strong);
    border-radius: 15px;
    background: rgba(255, 253, 250, .68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 6px 16px rgba(42, 68, 58, .045);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul.side-menu__sub-open {
    animation: none;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul .side-menu {
    min-height: 42px;
    margin-bottom: 3px;
    padding-left: 14px;
    border: 1px solid var(--stc-line) !important;
    background: rgba(255, 253, 250, .88);
    color: var(--stc-text);
    opacity: 1;
    transform: none !important;
    animation: none !important;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul .side-menu .side-menu__icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul .side-menu:hover {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-50);
    color: var(--stc-green-900);
    transform: none !important;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul .side-menu--active {
    border-color: var(--stc-green-300) !important;
    background: linear-gradient(135deg, var(--stc-green-100), #d9eee2) !important;
    color: var(--stc-green-900);
    box-shadow: inset 4px 0 0 var(--stc-green-600), 0 5px 12px rgba(20, 83, 45, .07);
    transform: none !important;
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav > ul ul .side-menu--active .side-menu__icon {
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-desktop-sidebar.side-nav .side-nav__devider {
    background: linear-gradient(90deg, transparent, var(--stc-peach-200) 14%, var(--stc-green-300) 86%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Shared controls, forms and data                                             */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend :is(.btn, button, [role="button"]) {
    transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

html.stc-theme-frontend :is(.btn-primary, .btn-sc, .btn-action-primary) {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .20);
}

html.stc-theme-frontend :is(.btn-primary, .btn-sc, .btn-action-primary):hover:not(:disabled) {
    border-color: var(--stc-green-700) !important;
    background: linear-gradient(135deg, var(--stc-green-800), var(--stc-green-600)) !important;
    box-shadow: 0 14px 28px rgba(5, 150, 105, .25);
    transform: none;
}

html.stc-theme-frontend :is(.btn-secondary, .btn-outline-secondary) {
    border-color: var(--stc-line-strong) !important;
    background: var(--stc-surface) !important;
    color: var(--stc-text) !important;
}

html.stc-theme-frontend :is(.btn-secondary, .btn-outline-secondary):hover:not(:disabled) {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-800) !important;
}

html.stc-theme-frontend :is(
    .form-control,
    .form-select,
    .form-input,
    .form-control-custom,
    .form-select-custom,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea
) {
    border-color: var(--stc-line-strong);
    border-radius: 11px;
    background-color: var(--stc-surface);
    color: var(--stc-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

html.stc-theme-frontend :is(
    .form-control,
    .form-select,
    .form-input,
    .form-control-custom,
    .form-select-custom,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea
):focus {
    border-color: var(--stc-green-500) !important;
    outline: none !important;
}

html.stc-theme-frontend :is(input, textarea)::placeholder {
    color: #94a3b8;
}

html.stc-theme-frontend :is(input, select, textarea):disabled,
html.stc-theme-frontend :is(input, select, textarea)[readonly] {
    background: #f1f5f3;
    color: var(--stc-muted);
}

html.stc-theme-frontend :is(.form-check-input, input[type="checkbox"], input[type="radio"]):checked {
    border-color: var(--stc-green-600);
    background-color: var(--stc-green-600);
}

html.stc-theme-frontend :is(.form-label, label) {
    color: var(--stc-text);
}

/*
 * Dịu sắc đen mặc định nhưng dùng :where() để component nền đậm vẫn có thể
 * giữ màu chữ trắng của riêng nó mà không cần thêm !important.
 */
:where(html.stc-theme-frontend) :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6
) {
    color: var(--stc-ink);
}

html.stc-theme-frontend :is(
    .home-section-title,
    .home-showcase-title,
    .service-item-title,
    .news-card-title,
    .stc-src-title,
    .api-title,
    .code-card-title,
    .cron-benefit h3,
    .cron-card-title,
    .proxy-benefit h3,
    .cap-section-title,
    .cap-box-title,
    .cap-side-title,
    .vps-title,
    .pf-section-title,
    .bs-seller-name,
    .stc-coupon-box h2
) {
    color: var(--stc-ink);
}

html.stc-theme-frontend :is(
    .service-item-description,
    .news-card-description,
    .cron-benefit p,
    .cron-card-sub,
    .proxy-benefit p
) {
    color: var(--stc-muted);
}

html.stc-theme-frontend :is(table, .table) {
    border-color: var(--stc-line);
}

html.stc-theme-frontend :is(table, .table) thead th {
    border-color: var(--stc-line);
    background: #f0f5f1;
}

html.stc-theme-frontend :is(table, .table) tbody td {
    border-color: #e8f0ec;
}

html.stc-theme-frontend :is(table, .table) tbody tr:hover td {
    background: var(--stc-green-50);
}

html.stc-theme-frontend :is(.pagination .page-link, .page-item .page-link) {
    border-color: var(--stc-line);
    background: var(--stc-surface);
    color: var(--stc-text);
}

html.stc-theme-frontend :is(.pagination .page-item.active .page-link, .page-item.active .page-link) {
    border-color: var(--stc-green-600);
    background: var(--stc-green-600);
    color: #fff;
}

html.stc-theme-frontend :is(.nav-tabs .nav-link.active, .nav-pills .nav-link.active) {
    border-color: var(--stc-green-600);
    background: var(--stc-green-600);
    color: #fff;
}

html.stc-theme-frontend :is(.modal-content, .dropdown-menu, .card) {
    border-color: var(--stc-line);
    box-shadow: var(--stc-shadow-md);
}

html.stc-theme-frontend :is(.modal-content, .dropdown-menu) {
    background-color: var(--stc-surface);
}

html.stc-theme-frontend .card {
    background: linear-gradient(180deg, var(--stc-surface) 0%, #f8faf7 100%);
}

html.stc-theme-frontend :is(.card, .modal-content) {
    border-radius: var(--stc-radius);
}

html.stc-theme-frontend :is(.card-header, .modal-header) {
    border-color: var(--stc-line);
    background: var(--stc-surface-soft);
}

html.stc-theme-frontend .progress-bar,
html.stc-theme-frontend .custom-range::-webkit-slider-thumb {
    background-color: var(--stc-green-600);
}

html.stc-theme-frontend :focus-visible {
    outline: 3px solid rgba(52, 211, 153, .50);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Home dashboard                                                              */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend .home-shell {
    color: var(--stc-text);
}

html.stc-theme-frontend .home-notice-popup-dialog {
    border-color: var(--stc-green-200);
    background: radial-gradient(circle at 100% 0, rgba(247, 203, 195, .28), transparent 34%), var(--stc-surface);
    box-shadow: var(--stc-shadow-lg);
}

html.stc-theme-frontend .home-notice-popup-confirm {
    border-color: var(--stc-green-600);
    background: var(--stc-gradient);
    box-shadow: 0 12px 24px rgba(5, 150, 105, .20);
}

html.stc-theme-frontend .home-notice-popup-message :is(a, strong, b) {
    color: var(--stc-green-700);
}

html.stc-theme-frontend .home-guest-card,
html.stc-theme-frontend .stc-hero,
html.stc-theme-frontend .cron-hero,
html.stc-theme-frontend .proxy-hero {
    border-color: rgba(255, 255, 255, .24) !important;
    background:
        radial-gradient(circle at 92% -10%, rgba(247, 203, 195, .22), transparent 34%),
        radial-gradient(circle at 4% 115%, rgba(155, 216, 186, .16), transparent 30%),
        var(--stc-gradient-deep) !important;
    box-shadow: 0 16px 38px rgba(35, 61, 51, .13) !important;
}

html.stc-theme-frontend .home-guest-title span,
html.stc-theme-frontend .stc-hero-title span,
html.stc-theme-frontend .cron-stat strong,
html.stc-theme-frontend .proxy-stat strong {
    color: var(--stc-green-100) !important;
}

html.stc-theme-frontend .home-btn-primary {
    color: var(--stc-green-900) !important;
    box-shadow: 0 12px 26px rgba(255, 255, 255, .12);
}

html.stc-theme-frontend .home-section-title::before,
html.stc-theme-frontend .api-card::before {
    background: var(--stc-accent-gradient);
}

html.stc-theme-frontend .service-table-container,
html.stc-theme-frontend .api-card,
html.stc-theme-frontend .service-item,
html.stc-theme-frontend .news-card,
html.stc-theme-frontend .stc-src-card,
html.stc-theme-frontend .home-showcase-section {
    border-color: var(--stc-line) !important;
    background: linear-gradient(180deg, var(--stc-surface) 0%, #f7faf7 100%) !important;
    box-shadow: var(--stc-shadow-sm) !important;
}

html.stc-theme-frontend .service-table thead th {
    background: var(--stc-gradient) !important;
}

html.stc-theme-frontend :is(.api-card, .service-item, .news-card, .stc-src-card):hover {
    border-color: var(--stc-green-300) !important;
    box-shadow: var(--stc-shadow-md) !important;
}

html.stc-theme-frontend .api-count,
html.stc-theme-frontend .btn-action,
html.stc-theme-frontend .home-showcase-count,
html.stc-theme-frontend .home-showcase-all,
html.stc-theme-frontend .service-item-button,
html.stc-theme-frontend .news-read-more {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.btn-action, .home-showcase-all, .service-item-button, .news-read-more):hover {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-green-700) !important;
    color: #fff !important;
}

html.stc-theme-frontend .home-showcase-icon,
html.stc-theme-frontend .stc-coupon-title-icon {
    background: var(--stc-gradient) !important;
    box-shadow: 0 12px 26px rgba(5, 150, 105, .20) !important;
}

html.stc-theme-frontend .service-management-row {
    cursor: pointer;
}

html.stc-theme-frontend .service-management-link {
    display: block;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

html.stc-theme-frontend .service-management-row:is(:hover, :focus-within) > td {
    background: var(--stc-green-50);
    color: var(--stc-green-700);
}

/* Home showcases: immediate rendering, compact services and readable articles. */
html.stc-theme-frontend .home-showcase-modern {
    padding: 22px;
    border: 1px solid var(--stc-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--stc-shadow-sm);
    opacity: 1;
    animation: none;
    transform: none;
}

html.stc-theme-frontend .home-showcase-modern .home-showcase-head {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--stc-line);
}

html.stc-theme-frontend .home-showcase-modern :is(.service-grid, .news-grid) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

html.stc-theme-frontend .home-showcase-modern :is(.service-item, .news-card) {
    position: relative;
    overflow: visible;
    border: 1px solid var(--stc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    opacity: 1;
    animation: none;
    transform: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

html.stc-theme-frontend .home-showcase-modern :is(.service-item, .news-card):is(:hover, :focus-within) {
    border-color: var(--stc-green-300);
    box-shadow: var(--stc-shadow-sm);
    transform: none;
}

html.stc-theme-frontend .home-showcase-modern .service-item {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
}

html.stc-theme-frontend .home-showcase-modern .service-item-media {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    aspect-ratio: 1;
    border: 1px solid var(--stc-green-200);
    border-radius: 12px;
    background: var(--stc-green-50);
}

html.stc-theme-frontend .home-showcase-modern .service-item-media img {
    object-fit: contain;
    padding: 6px;
}

html.stc-theme-frontend .home-showcase-modern .service-item-badge {
    display: none;
}

html.stc-theme-frontend .home-showcase-modern .service-item-content {
    min-width: 0;
    padding: 0;
}

html.stc-theme-frontend .home-showcase-modern :is(.service-item-title, .news-card-title) {
    margin: 0;
    min-height: 0;
    font-size: 15px;
    line-height: 1.5;
}

html.stc-theme-frontend .home-showcase-modern :is(.service-item-description, .news-card-description) {
    margin: 8px 0 14px;
    font-size: 12px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

html.stc-theme-frontend .home-showcase-modern :is(.service-item-button, .news-read-more) {
    width: auto;
    min-height: 36px;
    align-self: flex-start;
    margin-top: auto;
}

/* A native stretched link makes the whole card clickable without inline JS. */
html.stc-theme-frontend .home-showcase-modern :is(.service-item-button, .news-read-more)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

html.stc-theme-frontend .home-showcase-modern .news-image-wrapper {
    border-radius: 16px 16px 0 0;
}

html.stc-theme-frontend .home-showcase-modern .news-content {
    padding: 16px;
}

html.stc-theme-frontend .home-showcase-modern .news-card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

@media (max-width: 1400px) {
    html.stc-theme-frontend .home-showcase-modern .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    html.stc-theme-frontend .home-showcase-modern .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    html.stc-theme-frontend .home-showcase-modern { padding: 16px; }
    html.stc-theme-frontend .home-showcase-modern :is(.service-grid, .news-grid) {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
}

/* Coupons and source-code catalogue */
html.stc-theme-frontend .stc-coupon-box {
    border-color: var(--stc-line);
    background: linear-gradient(180deg, var(--stc-surface-soft), var(--stc-surface));
}

html.stc-theme-frontend .stc-coupon-tabs {
    border-color: var(--stc-peach-200);
    background: var(--stc-peach-50);
}

html.stc-theme-frontend .stc-coupon-tab.active,
html.stc-theme-frontend .stc-coupon-copy,
html.stc-theme-frontend .stc-voucher-ok,
html.stc-theme-frontend .stc-voucher-modal-top,
html.stc-theme-frontend .stc-coupon-left,
html.stc-theme-frontend .stc-voucher-ticket-left {
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend .stc-coupon-nav,
html.stc-theme-frontend .stc-coupon-label,
html.stc-theme-frontend .stc-voucher-limit {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50);
    color: var(--stc-green-700);
}

html.stc-theme-frontend .stc-src-page.is-active {
    border-color: var(--stc-green-600);
    background: var(--stc-green-600);
    color: #fff;
}

html.stc-theme-frontend :is(.stc-src-title a, .stc-src-author, .stc-src-more-btn):hover {
    color: var(--stc-green-700);
}

/* -------------------------------------------------------------------------- */
/* Service modules                                                             */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend .dep-shell {
    --dep-primary: var(--stc-green-600);
    --dep-primary-dark: var(--stc-green-700);
    --dep-primary-deep: var(--stc-green-900);
    --dep-primary-soft: var(--stc-green-50);
    --dep-primary-border: var(--stc-green-200);
    --dep-text: var(--stc-ink);
    --dep-text-2: var(--stc-text);
    --dep-muted: var(--stc-muted);
    --dep-line: var(--stc-line);
    --dep-bg-soft: var(--stc-surface-soft);
}

html.stc-theme-frontend .air-shell,
html.stc-theme-frontend .air-modal {
    --air: var(--stc-green-600);
    --air-dark: var(--stc-green-700);
    --air-ink: var(--stc-ink);
    --air-muted: var(--stc-muted);
    --air-line: var(--stc-line);
    --air-soft: var(--stc-surface-soft);
}

html.stc-theme-frontend .api-list-page {
    --primary-color: var(--stc-green-600);
    --secondary-color: var(--stc-teal-600);
    --border-color: var(--stc-line);
    --text-color: var(--stc-ink);
}

html.stc-theme-frontend .bh-page,
html.stc-theme-frontend .bank-history-page {
    --bh-primary: var(--stc-green-600);
    --bh-primary-dark: var(--stc-green-700);
    --bh-primary-soft: var(--stc-green-50);
    --bh-primary-border: var(--stc-green-200);
    --bh-border: var(--stc-line);
    --bh-text: var(--stc-ink);
    --bh-muted: var(--stc-muted);
}

html.stc-theme-frontend .hostpro {
    --hp-green: var(--stc-green-700);
    --hp-green-2: var(--stc-green-600);
    --hp-green-3: var(--stc-green-500);
    --hp-green-soft: var(--stc-green-50);
    --hp-green-border: var(--stc-green-200);
    --hp-ink: var(--stc-ink);
    --hp-text: var(--stc-text);
    --hp-muted: var(--stc-muted);
    --hp-line: var(--stc-line);
    --hp-bg: var(--stc-page);
}

html.stc-theme-frontend .vps-page {
    --green-dark: var(--stc-green-800);
    --green-main: var(--stc-green-600);
    --green-soft: var(--stc-green-50);
    --green-border: var(--stc-green-200);
}

html.stc-theme-frontend :is(
    .api-list-title-icon,
    .bank-history-heading-icon,
    .bank-form-title-icon,
    .hosting-summary-icon,
    .cron-benefit-icon,
    .proxy-benefit-icon,
    .cap-section-icon,
    .stc-primary-icon
) {
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(5, 150, 105, .18) !important;
}

html.stc-theme-frontend :is(
    .api-list-add,
    .proxy-buy-btn,
    .proxy-coupon-btn,
    .cron-btn,
    .hostpro-cta,
    .reseller-order-btn,
    .stc-primary-action,
    .stc-management-btn.is-primary
) {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(5, 150, 105, .20) !important;
}

html.stc-theme-frontend :is(
    .api-list-add,
    .proxy-buy-btn,
    .proxy-coupon-btn,
    .cron-btn,
    .hostpro-cta,
    .reseller-order-btn,
    .stc-primary-action,
    .stc-management-btn.is-primary
):hover {
    background: linear-gradient(135deg, var(--stc-green-800), var(--stc-green-600)) !important;
    transform: none;
}

html.stc-theme-frontend :is(
    .api-list-card,
    .bank-form-card,
    .bank-history-card,
    .air-section,
    .cron-card,
    .proxy-content,
    .proxy-plan-card,
    .hostpro-plan,
    .reseller-card,
    .reseller-order-card,
    .vps-card,
    .cap-section,
    .stc-card,
    .history-card,
    .hosting-summary-card
) {
    border-color: var(--stc-line) !important;
    background: linear-gradient(180deg, var(--stc-surface) 0%, #f7faf7 100%);
    box-shadow: var(--stc-shadow-sm) !important;
}

html.stc-theme-frontend :is(
    .api-list-card,
    .bank-form-card,
    .air-section,
    .cron-card,
    .proxy-plan-card,
    .hostpro-plan,
    .reseller-card,
    .vps-card,
    .cap-section,
    .stc-card
):hover {
    border-color: var(--stc-green-300) !important;
    box-shadow: var(--stc-shadow-md) !important;
}

html.stc-theme-frontend .proxy-plan-header,
html.stc-theme-frontend .history-card-featured .history-header,
html.stc-theme-frontend .vps-card-header.is-featured {
    background: var(--stc-gradient-deep) !important;
    color: #fff !important;
}

html.stc-theme-frontend :is(.proxy-total-box, .cron-price-box, .stc-price-box) {
    border-color: var(--stc-green-200) !important;
    background: linear-gradient(180deg, var(--stc-green-50), var(--stc-surface)) !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile navigation                                                           */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend .mobile-menu.stc-mobile-header {
    border-color: rgba(199, 231, 214, .38) !important;
    border-width: 0 0 1px;
    border-radius: 0 0 20px 20px;
    background: var(--stc-nav-gradient);
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, .12),
        0 10px 26px rgba(23, 60, 51, .20);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.stc-theme-frontend .mobile-menu.stc-mobile-header .mobile-menu-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    height: auto;
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent;
}

html.stc-theme-frontend .stc-mobile-brand {
    display: inline-flex;
    min-width: 0;
    height: 50px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(228, 243, 235, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

html.stc-theme-frontend .stc-mobile-brand:focus-visible {
    outline: 3px solid rgba(199, 231, 214, .54);
    outline-offset: 2px;
}

html.stc-theme-frontend .stc-mobile-brand img {
    display: block;
    width: auto;
    max-width: min(200px, 42vw);
    height: 40px;
    object-fit: contain;
}

html.stc-theme-frontend .stc-mobile-header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

html.stc-theme-frontend .mobile-menu.stc-mobile-header .sqs-mobile-trigger,
html.stc-theme-frontend .mobile-menu.stc-mobile-header #mobile-menu-toggler {
    display: inline-flex !important;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(228, 243, 235, .38);
    border-radius: 13px;
    background: rgba(23, 60, 51, .64);
    color: #fff;
    box-shadow: 0 6px 16px rgba(23, 60, 51, .17);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

html.stc-theme-frontend .mobile-menu.stc-mobile-header .sqs-mobile-trigger:hover,
html.stc-theme-frontend .mobile-menu.stc-mobile-header #mobile-menu-toggler:hover,
html.stc-theme-frontend .mobile-menu.stc-mobile-header #mobile-menu-toggler[aria-expanded="true"] {
    border-color: rgba(228, 243, 235, .78);
    background: rgba(23, 60, 51, .86);
    color: #fff;
    box-shadow: 0 8px 20px rgba(23, 60, 51, .22);
}

html.stc-theme-frontend .mobile-menu.stc-mobile-header .sqs-mobile-trigger:focus-visible,
html.stc-theme-frontend .mobile-menu.stc-mobile-header #mobile-menu-toggler:focus-visible {
    outline: 3px solid rgba(199, 231, 214, .54);
    outline-offset: 2px;
}

html.stc-theme-frontend .mobile-menu.stc-mobile-header :is(.sqs-mobile-trigger, #mobile-menu-toggler) svg {
    width: 21px;
    height: 21px;
    color: currentColor !important;
    stroke-width: 2;
}

@media (max-width: 1180px) {
    html.stc-theme-frontend body.main {
        --stc-mobile-header-gutter: max(
            clamp(12px, 3.125vw, 32px),
            env(safe-area-inset-left, 0px)
        );
        --stc-mobile-header-gutter-right: max(
            clamp(12px, 3.125vw, 32px),
            env(safe-area-inset-right, 0px)
        );
    }

    /*
     * Two-level touch header. Both rows share the same viewport grid so the
     * logo, balance and controls stay aligned on phones and iPads. The first
     * row owns the top corners; the second row owns the bottom corners/shadow.
     */
    html.stc-theme-frontend .mobile-menu.stc-mobile-header {
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: none;
    }

    html.stc-theme-frontend .mobile-menu.stc-mobile-header .mobile-menu-bar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-right: var(--stc-mobile-header-gutter-right);
        padding-left: var(--stc-mobile-header-gutter);
    }

    html.stc-theme-frontend .stc-mobile-brand {
        flex: 0 1 auto;
        max-width: calc(100% - 108px);
        margin-right: auto;
    }

    html.stc-theme-frontend .stc-mobile-brand img {
        max-width: 100%;
    }

    html.stc-theme-frontend .stc-mobile-header-actions {
        min-width: 0;
        margin-left: 12px;
    }

    html.stc-theme-frontend .stc-desktop-navbar {
        height: 64px;
        margin-top: 0 !important;
        padding-right: var(--stc-mobile-header-gutter-right) !important;
        padding-left: var(--stc-mobile-header-gutter) !important;
        border-radius: 0 0 20px 20px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .10),
            inset 0 -1px 0 rgba(255, 255, 255, .12),
            0 14px 34px rgba(23, 60, 51, .20);
    }

    html.stc-theme-frontend .stc-desktop-navbar > .stc-navbar-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    html.stc-theme-frontend .stc-desktop-navbar .stc-navbar-meta {
        display: flex;
        width: auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        overflow: hidden;
    }

    html.stc-theme-frontend .stc-navbar-meta > a,
    html.stc-theme-frontend .stc-navbar-meta > .breadcrumb__icon {
        display: none;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-balance-dropdown {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-balance-display {
        min-width: 0;
        overflow: visible;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
    }

    html.stc-theme-frontend .stc-navbar-meta #moneyoke {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-balance-display > button {
        display: inline-flex;
        flex: 0 0 24px;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 32px;
        margin-left: 4px;
        padding: 0;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-balance-display > button svg {
        width: 20px;
        height: 20px;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-language-switcher {
        display: flex;
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        height: 36px;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
        overflow: hidden;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-language-switcher .gglobe {
        flex: 0 0 28px;
        width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
    }

    html.stc-theme-frontend .stc-desktop-navbar .stc-notification-wrap {
        margin: 0 !important;
    }

    html.stc-theme-frontend .stc-account-trigger {
        min-width: 44px;
        width: 44px;
        height: 44px;
        padding: 4px;
        border-radius: 13px;
    }

    html.stc-theme-frontend .stc-account-trigger-avatar {
        width: 34px;
        height: 34px;
    }

    html.stc-theme-frontend .stc-account-trigger-copy,
    html.stc-theme-frontend .stc-account-trigger-chevron {
        display: none;
    }

    html.stc-theme-frontend .stc-account-dropdown > .stc-account-menu {
        width: 310px;
    }

    html.stc-theme-frontend .mobile-menu.stc-mobile-header {
        margin-top: -1rem;
    }
}

@media (max-width: 767px) {
    html.stc-theme-frontend .mobile-menu.stc-mobile-header {
        margin-top: -.75rem;
        border-radius: 0;
    }

    html.stc-theme-frontend .mobile-menu.stc-mobile-header .mobile-menu-bar {
        min-height: 66px;
        padding-right: var(--stc-mobile-header-gutter-right);
        padding-left: var(--stc-mobile-header-gutter);
    }

    html.stc-theme-frontend .stc-mobile-brand {
        height: 46px;
        padding: 4px 7px;
        border-radius: 12px;
    }

    html.stc-theme-frontend .stc-mobile-brand img {
        max-width: min(168px, 40vw);
        height: 36px;
    }

    html.stc-theme-frontend .mobile-menu.stc-mobile-header .sqs-mobile-trigger,
    html.stc-theme-frontend .mobile-menu.stc-mobile-header #mobile-menu-toggler {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    html.stc-theme-frontend .stc-desktop-navbar {
        height: 58px;
        border-radius: 0 0 18px 18px;
    }

    html.stc-theme-frontend .stc-desktop-navbar > .stc-navbar-row {
        gap: 8px;
    }

    html.stc-theme-frontend .stc-desktop-navbar .stc-notification-button,
    html.stc-theme-frontend .stc-desktop-navbar .stc-account-trigger {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    html.stc-theme-frontend .stc-desktop-navbar .stc-account-trigger {
        padding: 3px;
    }

    html.stc-theme-frontend .stc-desktop-navbar .stc-account-trigger-avatar {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }
}

@media (max-width: 390px) {
    html.stc-theme-frontend .mobile-menu.stc-mobile-header .mobile-menu-bar {
        gap: 8px;
    }

    html.stc-theme-frontend .stc-mobile-brand {
        padding-right: 5px;
        padding-left: 5px;
    }

    html.stc-theme-frontend .stc-mobile-brand img {
        max-width: 142px;
        height: 34px;
    }

    html.stc-theme-frontend .stc-mobile-header-actions {
        gap: 6px;
        margin-left: 8px;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-balance-display {
        font-size: 12px;
    }

    html.stc-theme-frontend .stc-navbar-meta .stc-language-switcher {
        flex-basis: 28px;
        width: 28px;
        min-width: 28px;
        margin-left: 5px;
    }
}

html.stc-theme-frontend .mnv-backdrop {
    background: rgba(27, 48, 41, .42);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.stc-theme-frontend .mnv-sheet {
    border-color: var(--stc-line-strong);
    background: #fff;
    box-shadow: 0 -18px 46px rgba(35, 61, 51, .15);
}

html.stc-theme-frontend .mnv-sheet-handle {
    background: var(--stc-line-strong);
}

html.stc-theme-frontend .mnv-sheet-header {
    border-color: var(--stc-line);
    background: var(--stc-surface);
}

html.stc-theme-frontend .mnv-sheet-header h2,
html.stc-theme-frontend .mnv-panel-heading h3 {
    color: var(--stc-ink);
}

html.stc-theme-frontend .mnv-sheet-header p,
html.stc-theme-frontend .mnv-panel-heading p {
    color: var(--stc-muted);
}

html.stc-theme-frontend .mnv-close {
    border-color: var(--stc-line-strong);
    background: var(--stc-surface-soft);
    color: var(--stc-text);
    box-shadow: 0 4px 12px rgba(37, 75, 70, .07);
}

html.stc-theme-frontend .mnv-close:hover {
    border-color: var(--stc-green-300);
    background: var(--stc-green-50);
    color: var(--stc-green-900);
}

html.stc-theme-frontend .mnv-sheet-layout {
    background: #fff;
}

html.stc-theme-frontend .mnv-tab-rail {
    border-color: var(--stc-line);
    background: #f3f9f5;
}

html.stc-theme-frontend .mnv-tab-button {
    color: var(--stc-text);
    transition: color .14s ease, background-color .14s ease;
}

html.stc-theme-frontend .mnv-tab-button:active {
    transform: scale(.97);
}

html.stc-theme-frontend .mnv-tab-button .mnv-tab-icon {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50);
    color: var(--stc-green-700);
    transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

html.stc-theme-frontend .mnv-tab-button.is-active {
    color: #fff;
    background: var(--stc-gradient);
    box-shadow: 0 7px 18px rgba(20, 83, 45, .16);
    transform: none;
}

html.stc-theme-frontend .mnv-tab-button.is-active .mnv-tab-icon {
    border-color: rgba(255, 255, 255, .30);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transform: none;
}

html.stc-theme-frontend .mnv-tab-button.is-active::after {
    border-color: rgba(255, 255, 255, .92);
    background: var(--stc-peach-200);
}

html.stc-theme-frontend .mnv-count {
    color: var(--stc-peach-700);
    background: var(--stc-peach-100);
}

html.stc-theme-frontend .mnv-tab-panel.is-active,
html.stc-theme-frontend .mnv-tab-panel.is-active .mnv-card {
    animation: none;
}

html.stc-theme-frontend .mnv-card {
    border-color: var(--stc-line);
    background: var(--stc-surface);
    color: var(--stc-text);
    box-shadow: 0 4px 14px rgba(37, 75, 70, .055);
}

html.stc-theme-frontend .mnv-card:hover {
    border-color: var(--stc-green-300);
    background: var(--stc-green-50);
    color: var(--stc-ink);
    box-shadow: 0 10px 22px rgba(37, 75, 70, .09);
}

html.stc-theme-frontend .mnv-card-icon {
    border-color: var(--stc-green-200);
    background: var(--stc-green-50);
    color: var(--stc-green-700);
}

/* Trang hiện tại dùng xanh lá nhạt để nổi bật mà vẫn dễ đọc. */
html.stc-theme-frontend .mnv-root .mnv-card.is-current {
    border-color: var(--stc-green-300) !important;
    background: linear-gradient(145deg, var(--stc-green-50), var(--stc-green-100)) !important;
    color: var(--stc-green-900);
    box-shadow: 0 0 0 1px rgba(21, 128, 61, .08), 0 7px 18px rgba(30, 65, 42, .075) !important;
}

html.stc-theme-frontend .mnv-root .mnv-card.is-current .mnv-card-icon {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-100) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .mnv-root .mnv-card.is-current .mnv-card-label {
    color: var(--stc-green-900) !important;
}

html.stc-theme-frontend .mnv-root .mnv-card-check {
    border-color: #fff;
    background: var(--stc-green-700);
    color: #fff;
    box-shadow: 0 4px 10px rgba(20, 83, 45, .18);
}

html.stc-theme-frontend .mnv-card.is-danger {
    color: #b91c1c;
}

html.stc-theme-frontend .mnv-card.is-danger .mnv-card-icon {
    border-color: #fecaca;
    background: #fef2f2;
    color: #dc2626;
}

html.stc-theme-frontend .mnv-bottom-bar {
    border-color: var(--stc-line);
    background: #fff;
    box-shadow: 0 -7px 24px rgba(42, 68, 58, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.stc-theme-frontend .mnv-bottom-item {
    color: var(--stc-muted);
}

html.stc-theme-frontend .mnv-bottom-item.is-active {
    color: var(--stc-green-700);
}

html.stc-theme-frontend .mnv-bottom-item.is-active .mnv-bottom-icon {
    background: var(--stc-green-50);
    color: var(--stc-green-600);
}

html.stc-theme-frontend .mnv-center-button {
    border-color: #fff;
    background: var(--stc-gradient);
    color: #fff;
    box-shadow: 0 8px 22px rgba(20, 83, 45, .20), 0 0 0 1px rgba(22, 163, 74, .12);
}

/* -------------------------------------------------------------------------- */
/* Standalone payment page                                                     */
/* -------------------------------------------------------------------------- */

html.stc-theme-payment body {
    min-height: 100vh;
    color: var(--stc-text);
    background:
        radial-gradient(circle at 8% 0, rgba(16, 185, 129, .14), transparent 28rem),
        radial-gradient(circle at 100% 100%, rgba(34, 197, 94, .09), transparent 30rem),
        var(--stc-page) !important;
}

html.stc-theme-payment .payment-container {
    border: 1px solid var(--stc-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--stc-shadow-lg) !important;
}

html.stc-theme-payment .payment-header {
    border-color: rgba(167, 243, 208, .22) !important;
    background: var(--stc-gradient-deep) !important;
}

html.stc-theme-payment .payment-info-box {
    border-color: var(--stc-line) !important;
    background: #fff !important;
    box-shadow: var(--stc-shadow-sm) !important;
}

html.stc-theme-payment .qr-section {
    background:
        radial-gradient(circle at 100% 0, rgba(110, 231, 183, .25), transparent 34%),
        var(--stc-gradient-deep) !important;
    box-shadow: 0 20px 48px rgba(3, 47, 38, .20) !important;
}

html.stc-theme-payment .copy-icon-button:hover,
html.stc-theme-payment .download-qr-btn:hover {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-payment .copy-icon-button.is-copied {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

/* -------------------------------------------------------------------------- */
/* Error and maintenance pages                                                 */
/* -------------------------------------------------------------------------- */

html.stc-theme-error {
    --main-color: var(--stc-green-50) !important;
    --stroke-color: var(--stc-green-700) !important;
    min-height: 100%;
    background: var(--stc-page);
}

html.stc-theme-error body {
    min-height: 100vh;
    color: var(--stc-ink);
    background:
        radial-gradient(circle at 50% 15%, rgba(16, 185, 129, .16), transparent 28rem),
        linear-gradient(180deg, #f8fffb, var(--stc-green-50)) !important;
}

html.stc-theme-error h1 {
    color: var(--stc-green-700) !important;
    text-shadow: 0 10px 28px rgba(5, 150, 105, .12);
}

html.stc-theme-maintenance body {
    min-height: 100vh;
    color: var(--stc-text) !important;
    background:
        radial-gradient(circle at 10% 0, rgba(16, 185, 129, .16), transparent 28rem),
        linear-gradient(180deg, #f8fffb, var(--stc-green-50)) !important;
}

html.stc-theme-maintenance .box {
    border: 1px solid var(--stc-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--stc-shadow-lg) !important;
}

html.stc-theme-maintenance :is(h1, a) {
    color: var(--stc-green-700) !important;
}

/* -------------------------------------------------------------------------- */
/* Legacy module compatibility: primary green + subtly tinted secondary UI     */
/* -------------------------------------------------------------------------- */

/* Bootstrap and utility classes used by older customer pages. */
html.stc-theme-frontend :is(.text-primary, .text-info, a.text-primary, a.text-info) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.bg-primary, .bg-info, .badge-primary, .badge-info) {
    background-color: var(--stc-green-600) !important;
    color: #fff !important;
}

html.stc-theme-frontend :is(.border-primary, .border-info) {
    border-color: var(--stc-green-500) !important;
}

html.stc-theme-frontend :is(.btn-info, .btn-outline-primary, .btn-outline-info) {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.btn-info, .btn-outline-primary, .btn-outline-info):hover:not(:disabled) {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-green-700) !important;
    color: #fff !important;
}

html.stc-theme-frontend :is(.alert-info, .callout-info) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-800) !important;
}

html.stc-theme-frontend :is(.custom-control-input, .form-check-input):focus {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 .2rem var(--stc-ring) !important;
}

html.stc-theme-frontend :is(.custom-control-input, .form-check-input):checked ~ .custom-control-label::before {
    border-color: var(--stc-green-600) !important;
    background-color: var(--stc-green-600) !important;
}

/* Customer profile, affiliate, website and hosting modules with legacy tokens. */
html.stc-theme-frontend :is(.pf-page, .pf-wrap) {
    --blue: var(--stc-green-600);
    --line: var(--stc-line);
    --soft: var(--stc-green-50);
}

html.stc-theme-frontend .pf-btn-blue,
html.stc-theme-frontend .pf-sec-icon {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .pf-amount-blue {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .affpro {
    --aff-primary: var(--stc-green-600);
    --aff-primary-dark: var(--stc-green-700);
    --aff-primary-deep: var(--stc-green-800);
    --aff-primary-soft: var(--stc-green-50);
    --aff-primary-pale: var(--stc-surface-soft);
    --aff-text: var(--stc-ink);
    --aff-muted: var(--stc-muted);
    --aff-border: var(--stc-line);
}

html.stc-theme-frontend .affpro :is(.affpro-stat-icon.violet, .affpro-card-icon.violet) {
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .hosting-history-page {
    --hosting-primary: var(--stc-green-600);
    --hosting-primary-dark: var(--stc-green-800);
    --hosting-text: var(--stc-ink);
    --hosting-muted: var(--stc-muted);
    --hosting-border: var(--stc-line);
    --hosting-surface: #fff;
    --hosting-background: var(--stc-surface-soft);
}

html.stc-theme-frontend .hosting-history-page .hosting-hero {
    border-color: var(--stc-green-200) !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(134, 239, 172, .24), transparent 32%),
        linear-gradient(135deg, #fff 0%, var(--stc-green-50) 100%) !important;
}

html.stc-theme-frontend .hosting-history-page :is(
    .hosting-eyebrow-dot,
    .hosting-manage-button
) {
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend .hosting-history-page :is(
    .hosting-domain-icon,
    .hosting-plan,
    .hosting-empty-icon
) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-container {
    --stc-primary: var(--stc-green-600) !important;
    --stc-primary-dark: var(--stc-green-800) !important;
    --stc-text: var(--stc-ink) !important;
    --stc-muted: #65776b !important;
    --stc-border: var(--stc-line) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-btn,
    .stc-btn-cpanel,
    .stc-btn-upgrade,
    .stc-btn-pass,
    .stc-btn-domain,
    .stc-btn-transfer
) {
    --action-color: var(--stc-green-700) !important;
    --action-soft: var(--stc-green-50) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-action-security,
    .stc-action-heading-icon,
    .stc-primary-icon,
    .stc-renewal-intro-icon
) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-copy-icon:hover,
    .stc-btn-refresh:hover,
    .stc-hero-domain-link:hover,
    .stc-hero-domain-link:hover i,
    .stc-plan-summary span,
    .stc-hero-metric-value .copy-trigger
) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-container .stc-donut-fill {
    border-color: var(--stc-green-500) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-plan-summary,
    .stc-expiry-card,
    .stc-renewal-intro,
    .stc-renewal-total,
    .stc-renewal-notice
) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-plan-summary strong,
    .stc-renewal-total span,
    .stc-renewal-total strong,
    .stc-renewal-notice
) {
    color: var(--stc-green-800) !important;
}

html.stc-theme-frontend .stc-container .stc-select-custom:focus,
html.stc-theme-frontend .stc-container .stc-renewal-period:hover .stc-renewal-period-card,
html.stc-theme-frontend .stc-container .stc-renewal-period input:checked + .stc-renewal-period-card {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend .stc-container .stc-renewal-period input:checked + .stc-renewal-period-card {
    background: var(--stc-green-50) !important;
    color: var(--stc-green-800) !important;
}

html.stc-theme-frontend .stc-container :is(
    .stc-renewal-popular,
    .stc-renewal-confirm,
    .stc-primary-action.is-featured
) {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend .stc-container .stc-renewal-modal .stc-modal-header {
    background: linear-gradient(180deg, #fff, var(--stc-green-50)) !important;
}

html.stc-theme-frontend .web-history-page {
    --wm-primary: var(--stc-green-600);
    --wm-primary-soft: var(--stc-green-50);
    --wm-primary-border: var(--stc-green-200);
    --wm-muted: var(--stc-muted);
    --wm-muted-soft: var(--stc-surface-soft);
    --wm-line: var(--stc-line);
    --wm-text: var(--stc-ink);
}

html.stc-theme-frontend .web-history-page :is(.domain-link, .action-btn.primary) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend .plan-pill {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

/* VPS listing/management: primary and informational roles follow brand green. */
html.stc-theme-frontend :is(.history-card, .manage-card) {
    border-color: var(--stc-line) !important;
    background: linear-gradient(180deg, #fff, var(--stc-surface-soft)) !important;
}

html.stc-theme-frontend .history-card .filter-field .form-control:focus,
html.stc-theme-frontend .manage-card .form-group .form-control:focus {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend .history-card :is(.badge-info, .btn-manage),
html.stc-theme-frontend .manage-card :is(.status-info, .action-primary) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend .manage-card .info-item {
    border-color: var(--stc-line) !important;
    background: var(--stc-green-50) !important;
}

/* Website catalogue and order pages. */
html.stc-theme-frontend .catalog-page {
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, .10), transparent 28%),
        radial-gradient(circle at top right, rgba(134, 239, 172, .10), transparent 24%),
        linear-gradient(180deg, #f7fcf8 0%, var(--stc-green-50) 100%) !important;
}

html.stc-theme-frontend .catalog-page .catalog-hero {
    background: var(--stc-gradient-deep) !important;
    box-shadow: 0 20px 50px rgba(20, 83, 45, .16) !important;
}

html.stc-theme-frontend .catalog-page :is(.mobile-category-chip.active, .category-item.active) {
    border-color: var(--stc-green-500) !important;
    background: linear-gradient(135deg, var(--stc-green-50), var(--stc-green-100)) !important;
    box-shadow: 0 12px 26px rgba(20, 83, 45, .10) !important;
}

html.stc-theme-frontend .catalog-page :is(.mobile-category-count, .category-count, .breadcrumb-line a) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .catalog-page :is(.mobile-category-thumb, .category-thumb)[style*="gradient"] {
    background: var(--stc-gradient) !important;
}

html.stc-theme-frontend .catalog-page .category-banner {
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, .11), transparent 24%),
        linear-gradient(180deg, #fff 0%, var(--stc-green-50) 100%) !important;
}

html.stc-theme-frontend .catalog-page .search-input {
    border-color: var(--stc-line-strong) !important;
}

html.stc-theme-frontend .catalog-page .search-input:focus {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend .catalog-page .site-card {
    border-color: var(--stc-line) !important;
    background: linear-gradient(180deg, #fff 0%, var(--stc-surface-soft) 100%) !important;
}

html.stc-theme-frontend .catalog-page .site-card:hover {
    border-color: var(--stc-green-300) !important;
    box-shadow: var(--stc-shadow-md) !important;
}

html.stc-theme-frontend .catalog-page .site-title a:hover {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .catalog-page .site-btn-create,
html.stc-theme-frontend .catalog-page .site-btn-create:hover,
html.stc-theme-frontend :is(.btn-submit-site, .site-coupon-btn) {
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(20, 83, 45, .18) !important;
}

html.stc-theme-frontend .site-coupon-block {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-50) !important;
}

html.stc-theme-frontend .site-coupon-block label {
    color: var(--stc-green-800) !important;
}

/* Source forms are also loaded by admin; keep this recolouring frontend-only. */
html.stc-theme-frontend .stc-lang-picker-item input:focus-visible + .stc-lang-picker-card {
    outline-color: var(--stc-green-600) !important;
}

html.stc-theme-frontend .stc-lang-picker-item input:checked + .stc-lang-picker-card {
    border-color: var(--stc-green-500) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-ink) !important;
}

html.stc-theme-frontend .stc-lang-picker-item input:checked + .stc-lang-picker-card svg {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-keyword-box {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
}

html.stc-theme-frontend :is(.stc-keyword-title, .stc-keyword-chip) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-keyword-chip {
    border-color: var(--stc-green-300) !important;
}

html.stc-theme-frontend .stc-keyword-chip:hover,
html.stc-theme-frontend .stc-keyword-chip.is-active {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-green-600) !important;
    color: #fff !important;
}

html.stc-theme-frontend .stc-ai-btn {
    border-color: var(--stc-green-300) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-ai-btn:hover:not(:disabled) {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-green-700) !important;
    color: #fff !important;
}

html.stc-theme-frontend .stc-voucher-list b {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .stc-panel-icon-blue {
    background: var(--stc-gradient) !important;
    box-shadow: 0 12px 24px rgba(20, 83, 45, .20) !important;
}

/* API list actions and documentation use one primary colour family. */
html.stc-theme-frontend :is(
    .bl-action.history,
    .exim-action-btn.history,
    .exim-action-btn.view,
    .ocb-action-btn.history,
    .ocb-action-btn.view,
    .pgb-action-btn:hover
) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.pgb-action-view .pgb-action-ico, .pgb-action-balance .pgb-action-ico) {
    background: var(--stc-green-100) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .api-container .api-nav-item.active {
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .api-container .api-nav-item.active svg,
html.stc-theme-frontend :is(.api-container, .api-docs-wrapper) .param-name {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.api-container .badge-get, .api-docs-wrapper .method-badge.GET) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .api-docs-wrapper .api-card::before {
    background: linear-gradient(90deg, var(--stc-green-700), var(--stc-green-400)) !important;
}

html.stc-theme-frontend .cron-page :is(.cron-input, .cron-select):focus {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend .cron-page :is(.cron-btn-primary, .cron-btn-primary:hover) {
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(20, 83, 45, .20) !important;
}

html.stc-theme-frontend .custom-content a {
    color: var(--stc-green-700) !important;
}

/* Static service-policy page. */
html.stc-theme-frontend .service-policy-header {
    border: 1px solid var(--stc-green-200) !important;
    background: linear-gradient(135deg, var(--stc-green-50), var(--stc-green-100)) !important;
}

html.stc-theme-frontend .service-policy-title {
    color: var(--stc-green-900) !important;
}

html.stc-theme-frontend .policy-section__header,
html.stc-theme-frontend .contact-cta {
    background: var(--stc-gradient-deep) !important;
}

html.stc-theme-frontend .policy-section__item::before,
html.stc-theme-frontend .contact-cta__button,
html.stc-theme-frontend .contact-cta__button:hover {
    color: var(--stc-green-700) !important;
}

/* Bank connection forms and account-selection dialogs. */
html.stc-theme-frontend .bank-add-page .bank-form-title-icon,
html.stc-theme-frontend :is(.msb-app-note i, .seabank-login-note i, .seabank-modal-icon) {
    background: var(--stc-green-100) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.msb-app-note, .seabank-login-note, .seabank-account-hint) {
    border-color: var(--stc-green-200) !important;
    background: var(--stc-green-50) !important;
    color: var(--stc-green-800) !important;
}

html.stc-theme-frontend :is(.pgb-count, .msb-countdown, .seabank-account-currency) {
    background: var(--stc-green-100) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.pgb-otp, .seabank-account-option):focus,
html.stc-theme-frontend .seabank-account-option.selected {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend :is(
    .seabank-account-number,
    .seabank-account-balance,
    .seabank-account-hint,
    .seabank-account-option.selected .seabank-account-check
) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.seabank-modal-btn-primary, .seabank-modal-btn-primary:hover) {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

/* 2FA tools and both image-upload interfaces. */
html.stc-theme-frontend body.get2fa-page .glass-panel,
html.stc-theme-frontend body.get2fa-page .glass-card,
html.stc-theme-frontend body.image-upload-page :is(.upload-panel, .result-panel) {
    border-color: var(--stc-line) !important;
    background: linear-gradient(180deg, #fff, var(--stc-surface-soft)) !important;
}

html.stc-theme-frontend body.get2fa-page :is(.btn-qr-scan, .qr-icon) {
    border-color: var(--stc-green-200) !important;
    background: linear-gradient(145deg, var(--stc-green-50), var(--stc-green-100)) !important;
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend body.get2fa-page .btn-gradient {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
    box-shadow: 0 12px 25px rgba(20, 83, 45, .22) !important;
}

html.stc-theme-frontend body.get2fa-page .btn-gradient:hover {
    background: linear-gradient(135deg, var(--stc-green-800), var(--stc-green-600)) !important;
    box-shadow: 0 14px 28px rgba(20, 83, 45, .26) !important;
}

html.stc-theme-frontend body.get2fa-page .get2fa-hero h1 .bg-gradient-to-r {
    background-image: none !important;
    color: var(--stc-green-700) !important;
    -webkit-text-fill-color: currentColor;
}

html.stc-theme-frontend body.get2fa-page textarea:focus {
    border-color: var(--stc-green-500) !important;
    box-shadow: 0 0 0 4px var(--stc-ring) !important;
}

html.stc-theme-frontend body.get2fa-page .qr-frame::before {
    border-color: var(--stc-green-300) !important;
}

html.stc-theme-frontend .upload-wrapper .drop-zone {
    border-color: var(--stc-green-500) !important;
    background: var(--stc-green-50) !important;
}

html.stc-theme-frontend .upload-wrapper .drop-zone.dragover {
    border-color: var(--stc-green-700) !important;
    background: var(--stc-green-100) !important;
}

html.stc-theme-frontend .upload-wrapper :is(.progress-bar-fill, .result-link a) {
    color: var(--stc-green-700) !important;
}

html.stc-theme-frontend .upload-wrapper .progress-bar-fill {
    background: var(--stc-gradient) !important;
}

/* Common popups, toasts and loading indicators on customer pages. */
html.stc-theme-frontend .swal2-popup {
    border: 1px solid var(--stc-line) !important;
    background: linear-gradient(180deg, #fff, var(--stc-surface-soft)) !important;
}

html.stc-theme-frontend .swal2-confirm {
    border-color: var(--stc-green-600) !important;
    background: var(--stc-gradient) !important;
    color: #fff !important;
}

html.stc-theme-frontend :is(#toast-container > .toast-success, .toast-success) {
    background-color: var(--stc-green-700) !important;
}

html.stc-theme-frontend :is(.spinner-border.text-primary, .spinner-grow.text-primary, .loading-spinner) {
    color: var(--stc-green-600) !important;
}

html.stc-theme-frontend .loadingoverlay_element :is(circle, path) {
    fill: var(--stc-green-600) !important;
    stroke: var(--stc-green-600) !important;
}

/* -------------------------------------------------------------------------- */
/* Polish, accessibility and responsive rules                                  */
/* -------------------------------------------------------------------------- */

html.stc-theme-frontend ::selection,
html.stc-theme-payment ::selection,
html.stc-theme-error ::selection,
html.stc-theme-maintenance ::selection {
    background: var(--stc-green-200);
    color: var(--stc-green-950);
}

html.stc-theme-frontend ::-webkit-scrollbar,
html.stc-theme-payment ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.stc-theme-frontend ::-webkit-scrollbar-track,
html.stc-theme-payment ::-webkit-scrollbar-track {
    background: #edf5f1;
}

html.stc-theme-frontend ::-webkit-scrollbar-thumb,
html.stc-theme-payment ::-webkit-scrollbar-thumb {
    border: 2px solid #edf5f1;
    border-radius: 999px;
    background: #78b98b;
    box-shadow: none;
}

html.stc-theme-frontend ::-webkit-scrollbar-thumb:hover,
html.stc-theme-payment ::-webkit-scrollbar-thumb:hover {
    background: var(--stc-green-600);
}

@media (max-width: 1180px) {
    html.stc-theme-frontend .mnv-root {
        width: 100dvw;
        max-width: 100dvw;
    }

    html.stc-theme-frontend .mnv-sheet {
        left: 50dvw;
        width: min(100dvw, 620px);
        max-width: 100dvw;
    }

    html.stc-theme-frontend .mnv-bottom-bar {
        width: 100dvw;
        max-width: 100dvw;
    }

    html.stc-theme-frontend body.main {
        padding-top: 1rem;
        background:
            radial-gradient(circle at 4% 2%, rgba(155, 216, 186, .24) 0%, transparent 24rem),
            radial-gradient(circle at 98% 8%, rgba(247, 203, 195, .20) 0%, transparent 26rem),
            linear-gradient(180deg, #f7f4ef 0%, #f0f5ef 100%) !important;
    }

    /* html.stc-theme-frontend .stc-desktop-navbar {
        margin-bottom: 1.25rem !important;
        border: 1px solid rgba(199, 231, 214, .38) !important;
        border-radius: 16px;
    } */

    html.stc-theme-frontend .content {
        border-radius: 20px !important;
    }
}

@media (max-width: 767px) {
    html.stc-theme-frontend body.main {
        padding-top: .75rem;
        background:
            radial-gradient(circle at 100% 2%, rgba(247, 203, 195, .16) 0%, transparent 18rem),
            linear-gradient(180deg, #f7f4ef 0%, #edf4ee 100%) !important;
    }

    html.stc-theme-frontend .home-notice-popup {
        max-width: 100vw;
        box-sizing: border-box;
    }

    html.stc-theme-frontend .home-notice-popup-dialog {
        min-width: 0;
        width: 100%;
        max-width: min(520px, calc(100vw - 24px));
        box-sizing: border-box;
    }

    html.stc-theme-frontend :is(
        .home-notice-popup-content,
        .home-notice-popup-message,
        .home-notice-popup-actions
    ) {
        min-width: 0;
        max-width: 100%;
    }

    html.stc-theme-frontend .home-notice-popup-message,
    html.stc-theme-frontend .home-notice-popup-message * {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    html.stc-theme-frontend .home-notice-popup-message :is(img, video, iframe, table, pre),
    html.stc-theme-frontend :is(.home-notice-popup-later, .home-notice-popup-confirm) {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    html.stc-theme-frontend :is(.home-notice-popup-later, .home-notice-popup-confirm) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    html.stc-theme-frontend .content {
        padding-right: 13px !important;
        padding-left: 13px !important;
        border-radius: 18px !important;
    }

    html.stc-theme-frontend .home-guest-card,
    html.stc-theme-frontend .stc-hero,
    html.stc-theme-frontend .cron-hero,
    html.stc-theme-frontend .proxy-hero {
        border-radius: 20px !important;
    }

    html.stc-theme-payment .payment-container {
        border-radius: 18px !important;
    }

    html.stc-theme-maintenance .container {
        padding: 16px;
        box-sizing: border-box;
    }

    html.stc-theme-maintenance .box {
        width: 100%;
        height: auto;
        min-height: 430px;
        margin: 24px 0 0;
        padding: 28px 18px;
        box-sizing: border-box;
    }
}

/* One entrance layer per component: never animate the home shell/grid and
   its cards simultaneously. Keep dropdown positioning and hover transforms. */
@media (prefers-reduced-motion: no-preference) {
    html.stc-theme-frontend.stc-motion-ui .wrapper::before,
    html.stc-theme-frontend.stc-motion-ui .wrapper .wrapper-box {
        opacity: 1;
        transform: none;
        -webkit-animation: none !important;
        animation: none !important;
    }

    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar.side-nav .side-menu,
    html.stc-theme-frontend.stc-motion-ui .stc-navbar-row > :is(a, .stc-navbar-meta, .stc-notification-wrap, .stc-account-dropdown),
    html.stc-theme-frontend.stc-motion-ui .home-shell :is(.api-card, .service-table-container, .stc-coupon-box, .home-guest-card, .stc-home-notice, .stc-src-block),
    html.stc-theme-frontend.stc-motion-ui .home-showcase-modern :is(.service-item, .news-card),
    html.stc-theme-frontend.stc-motion-ui .mnv-bottom-item,
    html.stc-theme-frontend.stc-motion-ui .mnv-tab-panel.is-active .mnv-card {
        opacity: 1;
        animation: stc-component-enter .4s ease-out backwards !important;
        animation-delay: var(--stc-component-delay, 0ms) !important;
    }

    /* app.css gives sidebar links translateX(50px) and multi-second delays.
       Reset that baseline; the entrance below uses independent translate. */
    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar.side-nav .side-menu,
    html.stc-theme-frontend.stc-motion-ui .stc-navbar-row > :is(a, .stc-navbar-meta) {
        transform: none;
    }

    html.stc-theme-frontend.stc-motion-ui :is(.api-grid, .service-grid, .news-grid, .stc-navbar-row, .mnv-bottom-bar) > :nth-child(2),
    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar li:nth-child(2) > .side-menu {
        --stc-component-delay: 45ms;
    }

    html.stc-theme-frontend.stc-motion-ui :is(.api-grid, .service-grid, .news-grid, .stc-navbar-row, .mnv-bottom-bar) > :nth-child(3),
    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar li:nth-child(3) > .side-menu {
        --stc-component-delay: 90ms;
    }

    html.stc-theme-frontend.stc-motion-ui :is(.api-grid, .service-grid, .news-grid, .stc-navbar-row, .mnv-bottom-bar) > :nth-child(n+4),
    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar li:nth-child(n+4) > .side-menu {
        --stc-component-delay: 135ms;
    }
}

/* Bank lists share these blocks. Override legacy intro-y's nth-child delay
   without animating the table rows or the surrounding content container. */
html.stc-theme-frontend.stc-motion-ui .api-list-page > :is(.api-list-head, .api-list-alert, .api-list-card, .api-docs) {
    opacity: 1;
    transform: none;
    animation: none;
}

@media (prefers-reduced-motion: no-preference) {
    html.stc-theme-frontend.stc-motion-ui .api-list-page > :is(.api-list-head, .api-list-alert, .api-list-card, .api-docs) {
        animation: stc-component-enter .4s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    html.stc-theme-frontend.stc-motion-ui .api-list-page > .api-list-alert { animation-delay: 35ms; }
    html.stc-theme-frontend.stc-motion-ui .api-list-page > .api-list-card { animation-delay: 70ms; }
    html.stc-theme-frontend.stc-motion-ui .api-list-page > .api-docs { animation-delay: 105ms; }
}

@keyframes stc-component-enter {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}

@media print {
    html.stc-theme-frontend.stc-motion-ui * { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    html.stc-theme-frontend {
        scroll-behavior: auto;
    }

    html.stc-theme-frontend.stc-motion-ui .stc-navbar-row > :is(a, .stc-navbar-meta, .stc-notification-wrap, .stc-account-dropdown),
    html.stc-theme-frontend.stc-motion-ui .stc-desktop-sidebar.side-nav .side-menu {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    html.stc-theme-frontend .wrapper::before,
    html.stc-theme-frontend .wrapper .wrapper-box {
        opacity: 1 !important;
        transform: none !important;
        -webkit-animation: none !important;
        animation: none !important;
        transition: none !important;
    }

    html.stc-theme-frontend *,
    html.stc-theme-payment *,
    html.stc-theme-error *,
    html.stc-theme-maintenance * {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}