/**
 * Asenso Platform — "Slate & Sage" design system (user dashboard)
 * Loaded last. Phase 1: layout shell (topbar, hero strip, sidebar,
 * bottom-nav) + Dashboard home page. Other pages keep prior styling
 * until migrated in a later phase.
 */

body.slate-sage.slate-sage.slate-sage.slate-sage {
    /* Colors */
    --color-bg:            #FFF8F5;
    --color-surface:       #FFFFFF;
    --color-border:        #F0D8CE;
    --color-border-subtle: #FAF0EC;

    --color-brand:         #EE4D2D;
    --color-accent:        #FF6B35;
    --color-accent-bg:     #FFF0EB;
    --color-accent-mid:    #FFAB93;
    --color-accent-strong: #D6431A; /* darker orange for CTA hover */

    --color-text-primary:  #2C2C2A;
    --color-text-muted:    #6B6862;
    --color-text-faint:    #8B8780;
    --color-text-inverse:  #FFFFFF;

    /* Legacy theme variables still referenced by un-migrated
       components (.side-box, select2, .modal-fullscreen, message
       sidebar, .whisper-box) — redefined light so anything still
       keyed to them doesn't stay dark. */
    --bg-color1: var(--color-surface);
    --bg-color2: var(--color-bg);

    /* user-style.css sets --primary-color: #ffffff for the dark user
       dashboard theme. Override it here so .cmn-tabs, .account-settings-navbar
       and any other component that uses var(--primary-color) as a background
       colour no longer renders white-text-on-white-background on click. */
    --primary-color:             var(--color-brand);
    --primary-color-opacity-low: rgba(238, 77, 45, 0.10);

    --color-success-bg:    #E1F5EE;
    --color-success-text:  #085041;
    --color-warning-bg:    #F1EFE8;
    --color-warning-text:  #633806;
    --color-danger-bg:     #FCEBEB;
    --color-danger-text:   #A32D2D;
    --color-info-bg:       #E6F1FB;
    --color-info-text:     #0C447C;
    --color-amber-bg:      #FAEEDA;
    --color-amber-text:    #854F0B;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    --radius-sm:   6px;
    --radius-md:   9px;
    --radius-lg:   12px;
    --radius-xl:   18px;
    --radius-full: 9999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.slate-sage.slate-sage.slate-sage.slate-sage {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage h1,
body.slate-sage.slate-sage.slate-sage.slate-sage h2,
body.slate-sage.slate-sage.slate-sage.slate-sage h3,
body.slate-sage.slate-sage.slate-sage.slate-sage h4,
body.slate-sage.slate-sage.slate-sage.slate-sage h5,
body.slate-sage.slate-sage.slate-sage.slate-sage h6 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

/* ============================================================
   Section labels (§6.8)
   ============================================================ */
.ss-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}

/* ============================================================
   App shell — USER DASHBOARD ONLY (body.asenso-user-dashboard).
   Single centered column capped at 1024px, like a mobile banking
   app. Sidebar removed; bottom tab bar is the primary nav. Scoped
   to the dashboard body class so login/register (which also carry
   .slate-sage) are NOT affected.
   ============================================================ */
body.asenso-user-dashboard.slate-sage .ss-appbar {
    position: relative;
    background: linear-gradient(150deg, #FF6236 0%, #EE4D2D 55%, #C83411 100%);
    overflow: hidden;
    max-width: 1024px;
    margin: 0 auto;
    padding: 14px 18px 26px;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 6px 28px rgba(238, 77, 45, 0.28);
}

/* Decorative circles — give the header depth like a real app */
body.asenso-user-dashboard.slate-sage .ss-appbar::before {
    content: '';
    position: absolute;
    top: -55px;
    right: -55px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 0;
}

body.asenso-user-dashboard.slate-sage .ss-appbar::after {
    content: '';
    position: absolute;
    bottom: -45px;
    left: 10px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    z-index: 0;
}

body.asenso-user-dashboard.slate-sage .ss-appbar .ss-appbar-row,
body.asenso-user-dashboard.slate-sage .ss-appbar .ss-hero {
    position: relative;
    z-index: 1;
}

/* Sidebar + legacy bottom-nav fully removed on the user dashboard */
body.asenso-user-dashboard.slate-sage #sidebar,
body.asenso-user-dashboard.slate-sage .sidebar,
body.asenso-user-dashboard.slate-sage .bottom-nav,
body.asenso-user-dashboard.slate-sage #footer {
    display: none !important;
}

/* Centered app column for content */
body.asenso-user-dashboard.slate-sage #main {
    margin: 0 auto !important;
    max-width: 1024px;
    float: none !important;
    margin-top: 0 !important;
    background: var(--color-bg) !important;
    padding: 12px 12px 80px !important;
    min-height: auto !important;
}

@media (min-width: 1200px) {
    body.asenso-user-dashboard.slate-sage #main {
        padding: 16px 16px 80px !important;
    }
}

/* ============================================================
   Unified app header (greeting + bell + avatar + balance)
   ============================================================ */
.ss-appbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ss-appbar-greet {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.ss-appbar-hi {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-inverse);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-appbar-sub {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ss-appbar-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ss-appbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    display: block;
}

.ss-appbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--color-text-inverse);
    border: none;
    padding: 0 !important;
}

.ss-icon-btn i {
    font-size: 17px !important;
    color: var(--color-text-inverse) !important;
}

.ss-icon-btn .ss-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1.5px solid rgba(238, 77, 45, 0.5);
}

.ss-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

/* ============================================================
   Hero balance strip (§6.2)
   ============================================================ */
.ss-hero {
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.ss-hero-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
}

.ss-hero-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-text-inverse);
    line-height: 1.1;
}

.ss-hero-sub {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ss-hero-badge {
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 130px;
}

.ss-hero-badge-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--color-accent-bg);
    color: var(--color-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.ss-hero-badge-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1.1;
}

.ss-hero-badge-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================================
   Scroll body
   ============================================================ */
.ss-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 80px;
}

@media (min-width: 1200px) {
    .ss-body {
        padding: 16px 20px;
        padding-bottom: 24px;
    }
}

/* ============================================================
   Alert bar (§6.4)
   ============================================================ */
.ss-alert {
    background: var(--color-warning-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ss-alert i {
    font-size: 18px;
    color: var(--color-amber-text);
    flex-shrink: 0;
}

.ss-alert-text {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-warning-text);
    line-height: 1.5;
    flex: 1;
}

.ss-alert-btn {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    white-space: nowrap;
}

/* ============================================================
   Stat cards (§6.3)
   ============================================================ */
.ss-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 1200px) {
    .ss-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ss-stat-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}

.ss-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ss-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ss-stat-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ss-stat-icon.is-growth   { background: #E1F5EE; color: #0F6E56; }
.ss-stat-icon.is-funding  { background: var(--color-info-bg); color: #185FA5; }
.ss-stat-icon.is-referral { background: var(--color-amber-bg); color: var(--color-amber-text); }
.ss-stat-icon.is-danger   { background: var(--color-danger-bg); color: var(--color-danger-text); }

.ss-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.1;
}

.ss-stat-sub {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-faint);
    margin-top: 2px;
}

/* ============================================================
   Chart card (§6.5)
   ============================================================ */
.ss-chart-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px;
}

.ss-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ss-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ss-tab-pills {
    display: flex;
    gap: 4px;
}

.ss-tab-pill {
    font-size: 10px;
    font-weight: 500;
    border: 0.5px solid var(--color-border);
    border-radius: 20px;
    padding: 3px 9px;
    color: var(--color-text-muted);
    background: transparent;
}

.ss-tab-pill.is-active {
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
}

/* ============================================================
   Activity / transaction list (§6.6)
   ============================================================ */
.ss-list {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.ss-list-row {
    padding: 11px 14px;
    border-bottom: 0.5px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
}

.ss-list-row:last-child {
    border-bottom: none;
}

.ss-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ss-list-dot.is-success { background: #1D9E75; }
.ss-list-dot.is-warning { background: #EF9F27; }
.ss-list-dot.is-danger  { background: #E24B4A; }
.ss-list-dot.is-info    { background: #378ADD; }

.ss-list-info {
    flex: 1;
    min-width: 0;
}

.ss-list-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ss-list-time {
    font-size: 10px;
    font-weight: 400;
    color: var(--color-text-faint);
    margin-top: 1px;
}

.ss-list-amount {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.ss-list-amount.is-positive {
    color: var(--color-success-text);
}

.ss-list-empty {
    padding: 24px 14px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ============================================================
   Sidebar (§8 desktop persistent + mobile off-canvas — same
   #sidebar element in both cases, must be styled at all widths)
   ============================================================ */
body.slate-sage.slate-sage.slate-sage.slate-sage #sidebar.sidebar {
    background: var(--color-brand) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sidebar-nav .dropdown-header {
    color: #5F5E5A !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    margin-bottom: 6px !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent;
    background: transparent !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sidebar-nav .nav-link.active {
    color: var(--color-text-inverse) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: var(--color-accent);
    font-weight: 600 !important;
}

/* ============================================================
   Bottom tab nav — Home · Funding · [Wallet] · Referral · Account
   Shown at ALL widths; centered with the 1024px app column.
   ============================================================ */
.ss-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 1024px;
    background: var(--color-surface);
    border-top: 0.5px solid var(--color-border);
    border-left: 0.5px solid var(--color-border);
    border-right: 0.5px solid var(--color-border);
    height: 72px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
}

.ss-nav-item,
.ss-nav-item:link,
.ss-nav-item:visited,
.ss-nav-item:hover,
.ss-nav-item:active,
.ss-nav-item:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none !important;
    flex: 1;
    outline: none;
    /* Remove the default mobile blue/gray tap flash */
    -webkit-tap-highlight-color: transparent;
}

/* Default state — faint gray */
.ss-nav-item i,
.ss-nav-item span {
    color: var(--color-text-faint) !important;
    transition: color 0.15s ease;
}

.ss-nav-item span {
    font-size: 9px;
    font-weight: 500;
}

/* Active page indicator — orange */
.ss-nav-item.is-active i,
.ss-nav-item.is-active span {
    color: var(--color-brand) !important;
}

.ss-nav-item.is-active span {
    font-weight: 700 !important;
}

/* Hover / tap / focus — orange, fully opaque */
.ss-nav-item:hover i,
.ss-nav-item:hover span,
.ss-nav-item:active i,
.ss-nav-item:active span,
.ss-nav-item:focus i,
.ss-nav-item:focus span {
    color: var(--color-brand) !important;
    opacity: 1 !important;
}

/* Icon size (not tied to a state so declared once) */
.ss-nav-item > i { font-size: 20px; }

.ss-nav-item.is-center {
    flex: 0 0 auto;
}

.ss-nav-center-btn {
    width: 44px;
    height: 44px;
    background: var(--color-brand);
    border-radius: 14px;
    margin-top: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(238, 77, 45, 0.4);
}

/* Center button icon stays WHITE on every state. The generic
   `.ss-nav-item:hover i` rule above (orange, !important) would otherwise win by
   specificity and render orange-icon-on-orange-background (unreadable), so these
   higher-specificity selectors lock the inverse colour for hover/tap/focus too. */
.ss-nav-item.is-center .ss-nav-center-btn i,
.ss-nav-item.is-center:hover .ss-nav-center-btn i,
.ss-nav-item.is-center:active .ss-nav-center-btn i,
.ss-nav-item.is-center:focus .ss-nav-center-btn i {
    font-size: 20px;
    color: var(--color-text-inverse) !important;
}

/* ============================================================
   Generic component reskin — applies retroactively to every
   not-yet-individually-migrated page that still uses legacy
   markup (.card, .box-card, .table, .btn-1/2, etc.)
   ============================================================ */
body.slate-sage.slate-sage.slate-sage.slate-sage .card {
    background: var(--color-surface) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .card-header,
body.slate-sage.slate-sage.slate-sage.slate-sage .card-header.bg-white {
    background-color: var(--color-surface) !important;
    border-bottom: 0.5px solid var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .card-body {
    background-color: var(--color-surface) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .card-title,
body.slate-sage.slate-sage.slate-sage.slate-sage .card-header-title {
    color: var(--color-text-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none;
    font-family: var(--font-sans) !important;
}

/* box-card stat pattern (Balance, Profit Statistics, Badges, etc.) */
body.slate-sage.slate-sage.slate-sage.slate-sage .box-card {
    background: var(--color-surface) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .box-card .icon-box {
    border-radius: var(--radius-sm) !important;
    border-color: transparent !important;
    background: #E1F5EE !important;
    color: #0F6E56 !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .box-card.strong-orange-card .icon-box {
    background: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .box-card.grayish-custom-card .icon-box {
    background: var(--color-amber-bg) !important;
    color: var(--color-amber-text) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .box-card .text-box .title {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .box-card .bottom .item {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

/* tables */
body.slate-sage.slate-sage.slate-sage.slate-sage .table,
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-table {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .table thead th {
    background: var(--color-bg) !important;
    color: var(--color-text-muted) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    border-color: var(--color-border) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .table td,
body.slate-sage.slate-sage.slate-sage.slate-sage .table th {
    border-color: var(--color-border-subtle) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .table td *,
body.slate-sage.slate-sage.slate-sage.slate-sage .table td p,
body.slate-sage.slate-sage.slate-sage.slate-sage .table td span {
    color: inherit;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-bg) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .table tbody tr:hover {
    background: var(--color-accent-bg) !important;
}

/* buttons
   ------------------------------------------------------------------
   The legacy dark-dashboard theme (user-dashboard-theme.css) styled
   these CTAs for a dark canvas and gave them a hover that swapped to a
   transparent background while keeping a light text colour. On the
   light Slate & Sage canvas that produced unreadable white-on-white
   (and accent-on-accent) states. These rules give every CTA an
   explicit, contrast-safe base AND hover so text is always legible
   regardless of which legacy class a button uses. Colours come from
   the orange brand tokens, so this follows the active theme.          */

/* Solid / primary CTAs */
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-1,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-2,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-primary,
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn {
    background: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-md) !important;
    text-transform: none;
    font-weight: 600 !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .btn-1:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-2:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-primary:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-1:focus-visible,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-2:focus-visible,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-primary:focus-visible,
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn:focus-visible {
    background: var(--color-accent-strong) !important;
    border-color: var(--color-accent-strong) !important;
    color: var(--color-text-inverse) !important; /* stays white — never transparent */
}

/* Outline / secondary CTAs */
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn2,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
    text-transform: none;
    font-weight: 600 !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn2:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-outline-primary:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .cmn-btn2:focus-visible,
body.slate-sage.slate-sage.slate-sage.slate-sage .btn-outline-primary:focus-visible {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important; /* white text on filled hover */
}

/* page header — color */
body.slate-sage.slate-sage.slate-sage.slate-sage .pagetitle {
    border-bottom-color: var(--color-border-subtle) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .pagetitle h3 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .breadcrumb-item,
body.slate-sage.slate-sage.slate-sage.slate-sage .breadcrumb-item a {
    color: var(--color-text-muted) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .breadcrumb-item.active {
    color: var(--color-text-primary) !important;
}

/* page header — compact spacing for mobile/iPad-focused layout */
body.asenso-user-dashboard.slate-sage .pagetitle {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    padding-top: 2px !important;
}

body.asenso-user-dashboard.slate-sage .pagetitle h3 {
    font-size: 15px !important;
    margin-bottom: 2px !important;
}

body.asenso-user-dashboard.slate-sage .breadcrumb {
    margin-bottom: 0 !important;
    font-size: 11px !important;
    gap: 2px;
}

body.asenso-user-dashboard.slate-sage .breadcrumb-item + .breadcrumb-item::before {
    font-size: 10px;
}

/* pagination */
body.slate-sage.slate-sage.slate-sage.slate-sage .page-item.active .page-link {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .page-link {
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

/* offcanvas / modal */
body.slate-sage.slate-sage.slate-sage.slate-sage .offcanvas,
body.slate-sage.slate-sage.slate-sage.slate-sage .modal-content {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .offcanvas-header,
body.slate-sage.slate-sage.slate-sage.slate-sage .modal-header {
    border-bottom: 0.5px solid var(--color-border-subtle) !important;
}

/* dropdowns (notification bell + profile avatar menus, select menus, etc.) */
body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-menu,
body.slate-sage.slate-sage.slate-sage.slate-sage .header-nav .notifications,
body.slate-sage.slate-sage.slate-sage.slate-sage .header-nav .profile {
    background: var(--color-surface) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 8px 24px rgba(44, 44, 42, 0.12) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-item {
    color: var(--color-text-primary) !important;
    font-size: 12px;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-item:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-item:focus {
    background: var(--color-accent-bg) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-divider {
    border-color: var(--color-border-subtle) !important;
}

/* currency-symbol input-group addon (e.g. the "Fund Now" modal) */
body.slate-sage.slate-sage.slate-sage.slate-sage .bg-white {
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

/* forms */
body.slate-sage.slate-sage.slate-sage.slate-sage .form-control,
body.slate-sage.slate-sage.slate-sage.slate-sage .form-select {
    background: var(--color-bg) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .form-control:focus,
body.slate-sage.slate-sage.slate-sage.slate-sage .form-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
    background: var(--color-surface) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .form-label {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
}

/* status badges */
body.slate-sage.slate-sage.slate-sage.slate-sage .bg-soft-success { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; }
body.slate-sage.slate-sage.slate-sage.slate-sage .bg-soft-danger  { background: var(--color-danger-bg) !important; color: var(--color-danger-text) !important; }
body.slate-sage.slate-sage.slate-sage.slate-sage .bg-soft-warning { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; }
body.slate-sage.slate-sage.slate-sage.slate-sage .bg-soft-info    { background: var(--color-info-bg) !important; color: var(--color-info-text) !important; }

/* recent-activity tiles */
body.slate-sage.slate-sage.slate-sage.slate-sage .activity-card {
    background: var(--color-surface) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .activity-card .icon-box {
    background: #E1F5EE !important;
    border-radius: var(--radius-sm) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .activity-card .text-box h5 {
    color: var(--color-text-primary) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .activity-card .text-box p {
    color: var(--color-text-muted) !important;
}

/* ============================================================
   Auth pages (login / register) — reskins existing
   .sign-in-* markup, no structural changes
   ============================================================ */
body.slate-sage.slate-sage.slate-sage.slate-sage,
body.slate-sage.slate-sage.slate-sage.slate-sage .page-wrapper,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up {
    background: var(--color-bg) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-container-inner,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-container-inner {
    background: var(--color-surface) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: 32px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-logo img {
    max-height: 40px;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-title h3,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-title h3 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-title p,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-title p {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-form-group label,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-form-group label {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-input,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-input,
body.slate-sage.slate-sage.slate-sage.slate-sage .form-control {
    background: var(--color-bg) !important;
    border: 0.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-input::placeholder,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-input::placeholder {
    color: var(--color-text-faint) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .sign-in-input:focus,
body.slate-sage.slate-sage.slate-sage.slate-sage .sign-up-input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .btn-1 {
    background: var(--color-accent) !important;
    border: none !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .media-login,
body.slate-sage.slate-sage.slate-sage.slate-sage .signup-account p {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .signup-account a,
body.slate-sage.slate-sage.slate-sage.slate-sage .rember-password a {
    color: var(--color-accent) !important;
    font-weight: 600;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .rember label {
    color: var(--color-text-muted) !important;
    font-family: var(--font-sans) !important;
}

/* ============================================================
   Home quick-actions (app launcher tiles)
   ============================================================ */
.ss-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ss-quick-action {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

.ss-quick-action .ss-qa-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--color-accent-bg);
    color: #0F6E56;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ss-quick-action.is-deposit .ss-qa-icon  { background: var(--color-accent-bg); color: var(--color-brand); }
.ss-quick-action.is-withdraw .ss-qa-icon { background: #E1F5EE; color: #0F6E56; }
.ss-quick-action.is-fund .ss-qa-icon     { background: var(--color-info-bg);  color: #185FA5; }

.ss-quick-action .ss-qa-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ============================================================
   Account hub — menu rows
   ============================================================ */
.ss-account-head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 14px;
}

.ss-account-head .ss-account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ss-account-head .ss-account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-account-head .ss-account-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ss-account-head .ss-account-user {
    font-size: 12px;
    color: var(--color-text-muted);
}

.ss-menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 0.5px solid var(--color-border-subtle);
    text-decoration: none;
    color: var(--color-text-primary);
}

.ss-menu-row:last-child {
    border-bottom: none;
}

.ss-menu-row .ss-menu-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ss-menu-row .ss-menu-label {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.ss-menu-row .ss-menu-chevron {
    color: var(--color-text-faint);
    font-size: 16px;
}

.ss-menu-row.is-danger .ss-menu-icon { background: var(--color-danger-bg); color: var(--color-danger-text); }
.ss-menu-row.is-danger .ss-menu-label { color: var(--color-danger-text); }

/* ============================================================
   Action panel — floating white card (Shopee-style quick actions)
   ============================================================ */
.ss-action-panel {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 0.5px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(238, 77, 45, 0.10);
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.ss-action-panel .ss-quick-action {
    border: none;
    border-radius: 0;
    flex: 1;
    padding: 18px 8px;
    background: transparent;
}

.ss-action-panel .ss-quick-action:hover {
    background: var(--color-bg);
}

/* user-style.css: a:hover{color:var(--primary-color)} changes anchor color;
   lock child text/icon colours so they stay readable on hover */
.ss-action-panel .ss-quick-action:hover .ss-qa-label {
    color: var(--color-text-primary) !important;
}

.ss-action-panel .ss-quick-action:hover .ss-qa-icon,
.ss-action-panel .ss-quick-action:hover .ss-qa-icon i {
    color: inherit !important;
}

.ss-action-panel .ss-quick-action.is-deposit:hover .ss-qa-icon  { color: var(--color-brand) !important; }
.ss-action-panel .ss-quick-action.is-deposit:hover .ss-qa-icon i  { color: var(--color-brand) !important; }
.ss-action-panel .ss-quick-action.is-withdraw:hover .ss-qa-icon { color: #0F6E56 !important; }
.ss-action-panel .ss-quick-action.is-withdraw:hover .ss-qa-icon i { color: #0F6E56 !important; }
.ss-action-panel .ss-quick-action.is-fund:hover .ss-qa-icon     { color: #185FA5 !important; }
.ss-action-panel .ss-quick-action.is-fund:hover .ss-qa-icon i     { color: #185FA5 !important; }

.ss-action-sep {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
    align-self: stretch;
    margin: 12px 0;
}

/* Make action icons circular in panel */
.ss-action-panel .ss-qa-icon {
    border-radius: 50%;
}

/* ============================================================
   Horizontal stat cards (§image reference)
   ============================================================ */
.ss-hstat-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ss-hstat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.ss-hstat-icon.is-funding  { background: var(--color-accent-bg); color: var(--color-brand); }
.ss-hstat-icon.is-growth   { background: #E1F5EE; color: #0F6E56; }
.ss-hstat-icon.is-danger   { background: var(--color-danger-bg); color: var(--color-danger-text); }
.ss-hstat-icon.is-referral { background: var(--color-amber-bg);  color: var(--color-amber-text); }

.ss-hstat-body {
    flex: 1;
    min-width: 0;
}

.ss-hstat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.ss-hstat-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.ss-hstat-value.is-brand { color: var(--color-brand); }
.ss-hstat-value.is-green { color: #0F6E56; }
.ss-hstat-value.is-amber { color: var(--color-amber-text); }

.ss-hstat-sub {
    font-size: 11px;
    color: var(--color-text-faint);
    margin-top: 3px;
}

.ss-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   Referral banner
   ============================================================ */
.ss-referral-banner {
    background: linear-gradient(135deg, var(--color-brand) 0%, #FF6236 100%);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ss-ref-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.ss-ref-text {
    flex: 1;
    min-width: 0;
}

.ss-ref-title {
    font-size: 13px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
}

.ss-ref-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 2px;
}

.ss-ref-btn {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-brand);
    border-radius: var(--radius-full);
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

/* ============================================================
   Navigation hover readability fixes
   ============================================================ */

/* Notification dropdown items */
body.slate-sage.slate-sage.slate-sage.slate-sage .notification-item a {
    color: var(--color-text-primary) !important;
    padding: 8px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
}

body.slate-sage.slate-sage.slate-sage.slate-sage .notification-item a:hover {
    background: var(--color-accent-bg) !important;
    color: var(--color-text-primary) !important;
}

/* Sidebar nav hover (visible on desktop fallback) */
body.slate-sage.slate-sage.slate-sage.slate-sage .sidebar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

/* Breadcrumb link hover */
body.slate-sage.slate-sage.slate-sage.slate-sage .breadcrumb-item a:hover {
    color: var(--color-brand) !important;
    text-decoration: none;
}

/* Pagination hover */
body.slate-sage.slate-sage.slate-sage.slate-sage .page-link:hover {
    background: var(--color-accent-bg) !important;
    color: var(--color-brand) !important;
    border-color: var(--color-border) !important;
}

/* Dropdown item hover — ensure dark text on light orange bg */
body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-item:hover,
body.slate-sage.slate-sage.slate-sage.slate-sage .dropdown-item:focus {
    background: var(--color-accent-bg) !important;
    color: var(--color-text-primary) !important;
}

/* Table row hover — ensure dark text stays readable */
body.slate-sage.slate-sage.slate-sage.slate-sage .table tbody tr:hover td,
body.slate-sage.slate-sage.slate-sage.slate-sage .table tbody tr:hover th {
    color: var(--color-text-primary) !important;
}

/* Bottom nav hover/active/focus — superseded by the full lock block above */

/* ============================================================
   Mobile & tablet — tighter breadcrumb / pagetitle spacing.
   The legacy .pagetitle + .mt-50 combo burns ~160px on mobile
   before the first card appears. Override to keep it compact.
   ============================================================ */
@media (max-width: 767px) {
    body.asenso-user-dashboard.slate-sage #main .pagetitle {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }

    body.asenso-user-dashboard.slate-sage #main .pagetitle h3 {
        font-size: 16px !important;
        margin-bottom: 2px !important;
    }

    body.asenso-user-dashboard.slate-sage .mt-50 {
        margin-top: 10px !important;
    }

    body.asenso-user-dashboard.slate-sage .mt-45 {
        margin-top: 10px !important;
    }

    body.asenso-user-dashboard.slate-sage .mt-60 {
        margin-top: 12px !important;
    }

    body.asenso-user-dashboard.slate-sage .breadcrumb {
        margin-bottom: 0 !important;
        font-size: 11px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.asenso-user-dashboard.slate-sage #main .pagetitle {
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
    }

    body.asenso-user-dashboard.slate-sage .mt-50 {
        margin-top: 16px !important;
    }

    body.asenso-user-dashboard.slate-sage .mt-45 {
        margin-top: 14px !important;
    }
}

/* ============================================================
   In-app payment success screen (replaces the standalone
   "Thank You" redirect page for deposit / funding / plan)
   ============================================================ */
.ss-success {
    max-width: 460px;
    margin: 8px auto 0;
    text-align: center;
    padding: 8px 4px 24px;
}

.ss-success-check {
    width: 92px;
    height: 92px;
    margin: 8px auto 18px;
}

.ss-success-check svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ss-success-check-circle {
    stroke: var(--color-brand);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    transform-origin: center;
    animation: ssSuccessCircle 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.ss-success-check-tick {
    stroke: var(--color-brand);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: ssSuccessTick 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
}

@keyframes ssSuccessCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes ssSuccessTick {
    to { stroke-dashoffset: 0; }
}

.ss-success-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 6px !important;
}

.ss-success-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 auto 20px;
    max-width: 340px;
}

.ss-success-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(238, 77, 45, 0.08);
    padding: 20px 18px;
    margin-bottom: 22px;
}

.ss-success-amount {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-brand);
    line-height: 1.1;
}

.ss-success-amount-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    margin-top: 2px;
}

.ss-success-rows {
    margin-top: 16px;
    border-top: 0.5px dashed var(--color-border);
    padding-top: 6px;
    text-align: left;
}

.ss-success-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--color-border-subtle);
}

.ss-success-row:last-child {
    border-bottom: none;
}

.ss-success-key {
    font-size: 12px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.ss-success-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: right;
    word-break: break-word;
}

.ss-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ss-success-btn {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.ss-success-btn.is-primary,
.ss-success-btn.is-primary:hover,
.ss-success-btn.is-primary:focus,
.ss-success-btn.is-primary:active {
    background: var(--color-brand);
    color: var(--color-text-inverse) !important;
    box-shadow: 0 3px 12px rgba(238, 77, 45, 0.28);
}

.ss-success-btn.is-primary:hover {
    opacity: 0.92;
}

.ss-success-btn.is-ghost,
.ss-success-btn.is-ghost:hover,
.ss-success-btn.is-ghost:focus,
.ss-success-btn.is-ghost:active {
    background: transparent;
    color: var(--color-text-muted) !important;
}

.ss-success-btn.is-ghost:hover {
    background: var(--color-bg);
}