/* User Panel ? Seller-style dark sidebar layout */
:root {
    --up-bg: #f3f4f6;
    --up-surface: #ffffff;
    --up-ink: #111827;
    --up-muted: #6b7280;
    --up-border: #e5e7eb;
    --up-accent: #d93b3b;
    --up-accent-deep: #b91c1c;
    --up-accent-soft: #fee2e2;
    --up-sidebar: #0b1120;
    --up-sidebar-2: #111827;
    --up-gold: #ffc107;
    --up-gold-soft: rgb(184 184 184 / 14%);
    --up-gold-soft-2: rgba(255, 193, 7, 0.22);
    --up-radius: 16px;
    --up-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    --up-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --up-sidebar-w: 278px;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    -webkit-transition: background .3s;
    transition: background .3s
}

::-webkit-scrollbar-thumb {
    background: #e1e6f1
}

:hover::-webkit-scrollbar-thumb {
    background: #adb5bd
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.up-body {
    font-family: var(--up-font);
    background: var(--up-bg);
    color: var(--up-ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--up-accent);
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.up-app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.up-sidebar {
    width: var(--up-sidebar-w);
    background: linear-gradient(180deg, #0b1120 0%, #0f172a 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 90;
    padding: 0;
    border-right: 1px solid rgba(255, 193, 7, 0.08);
}

.up-sidebar-close {
    display: none;
}

.up-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.15rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.up-brand-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffd54f, #ffc107);
    display: grid;
    place-items: center;
    color: #0b1120;
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.28);
}

.up-brand-ico svg {
    width: 18px;
    height: 18px;
}

.up-brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
}

.up-brand.has-logo {
    justify-content: center;
}

.up-brand.has-logo .up-brand-logo {
    width: auto;
    max-width: 160px;
    height: auto;
    max-height: 52px;
    border-radius: 10px;
    padding: 0.25rem 0.4rem;
}

.up-brand-text {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.up-brand-text span {
    color: var(--up-gold);
}

.up-nav {
    overflow-y: auto;
    padding: 0.85rem 0.75rem 1.25rem;
}

.up-nav-section {
    margin-bottom: 1.15rem;
}

.up-nav-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0.15rem 0.35rem 0.55rem;
}

.up-nav-label::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: var(--up-gold);
    flex-shrink: 0;
}

.up-nav-group {
    margin: 0;
}

.up-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.62rem 0.65rem;
    border-radius: 12px;
    border: 0;
    background: transparent;
    color: #e5e7eb;
    font: inherit;
    font-size: 0.859rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.up-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.up-nav-item.is-active {
    background: var(--up-gold-soft);
    color: #fff;
}

.up-nav-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #1e293b;
    border: 1px solid rgba(255, 193, 7, 0.22);
    display: grid;
    place-items: center;
    color: var(--up-gold);
    flex-shrink: 0;
}

.up-nav-ico svg {
    width: 16px;
    height: 16px;
}

.up-nav-text {
    flex: 1;
    min-width: 0;
}

.up-nav-chevron {
    width: 16px;
    height: 16px;
    color: var(--up-gold);
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.up-nav-group.is-open .up-nav-chevron {
    transform: rotate(180deg);
}

.up-nav-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--up-gold);
    color: #0b1120;
    font-size: 0.68rem;
    font-weight: 800;
    display: none;
    place-items: center;
    line-height: 1;
    flex-shrink: 0;
}

.up-nav-badge.is-alert {
    background: #f59e0b;
    color: #1c1917;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.up-nav-sub {
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 0 0 1.1rem;
    transition:
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease,
        margin 0.35s ease;
}

.up-nav-group.is-open .up-nav-sub {
    opacity: 1;
    margin: 0.3rem 0 0.15rem 0.5rem;
}

.up-nav-sub-inner {
    display: grid;
    gap: 0.15rem;
    /* padding: 0.3rem 0 0.35rem 0.85rem;
    border-left: 2px solid rgba(255, 193, 7, 0.45); */
}

.up-nav-sublink {
    position: relative;
    display: block;
    padding: 0.5rem 0.7rem 0.5rem 2.25rem;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.up-nav-sublink::before {
    content: '';
    position: absolute;
    left: 1.00rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--up-gold);
    background: transparent;
    transform: translateY(-50%);
}

.up-nav-sublink:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.04);
}

.up-nav-sublink.is-active {
    color: #fff;
    background: #1e293b;
}

.up-nav-sublink.is-active::before {
    background: var(--up-gold);
    border-color: var(--up-gold);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}

@media (prefers-reduced-motion: reduce) {

    .up-nav-sub,
    .up-nav-chevron {
        transition: none !important;
    }
}

/* Main */
.up-main {
    flex: 1;
    margin-left: var(--up-sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.up-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.35rem;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--up-border);
    backdrop-filter: blur(10px);
}

.up-menu-btn,
.up-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--up-border);
    border-radius: 12px;
    background: #fff;
    color: #4b5563;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.up-menu-btn {
    display: none;
}

.up-menu-btn svg,
.up-icon-btn svg {
    width: 18px;
    height: 18px;
}

.up-search {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--up-border);
    border-radius: 999px;
    background: #f9fafb;
    color: #9ca3af;
}

.up-search svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.up-search input {
    border: 0;
    background: transparent;
    width: 100%;
    font: inherit;
    font-size: 0.88rem;
    color: var(--up-ink);
    outline: none;
}

.up-top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.up-user-dd {
    position: relative;
}

.up-user-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.55rem 0.25rem 0.7rem;
    border: 1px solid var(--up-border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.up-user-chip:hover,
.up-user-dd.open .up-user-chip {
    background: #fff7f7;
    border-color: #fecaca;
    box-shadow: 0 4px 14px rgba(217, 59, 59, 0.1);
}

.up-user-meta {
    text-align: right;
    line-height: 1.2;
}

.up-user-meta strong {
    display: block;
    font-size: 0.82rem;
    color: var(--up-ink);
    font-weight: 700;
}

.up-user-meta small {
    font-size: 0.7rem;
    color: var(--up-muted);
    font-weight: 600;
}

.up-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff5f6d, #d93b3b);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
}

.up-avatar.has-photo {
    background: #e2e8f0;
    padding: 0;
}

.up-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}

.up-avatar.sm {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
}

.up-online {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
    z-index: 2;
}

.up-user-caret {
    width: 14px;
    height: 14px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.up-user-dd.open .up-user-caret {
    transform: rotate(180deg);
}

.up-user-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    padding: 0.45rem;
    display: none;
    z-index: 90;
    animation: upDropIn 0.16s ease;
}

.up-user-dd.open .up-user-menu {
    display: block;
}

@keyframes upDropIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.up-user-menu-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.7rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.up-user-menu-head strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--up-ink);
}

.up-user-menu-head small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--up-muted);
    font-weight: 600;
}

.up-user-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    color: #374151 !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.up-user-item svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
}

.up-user-item:hover {
    background: #f9fafb;
    color: var(--up-ink) !important;
}

.up-user-item:hover svg {
    color: var(--up-accent);
}

.up-user-item.danger {
    color: #dc2626 !important;
}

.up-user-item.danger svg {
    color: #dc2626;
}

.up-user-item.danger:hover {
    background: #fef2f2;
}

.up-user-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 0.3rem 0.4rem;
}

.up-content {
    padding: 1.35rem 1.35rem 2rem;
    flex: 1;
}

.up-footer {
    margin: 0;
    padding: 0;
}

.up-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.15rem;
    border-radius: 0;
    background:
        radial-gradient(ellipse 50% 120% at 0% 50%, rgba(217, 59, 59, 0.06), transparent 55%),
        #ffffff;
    border-top: 1px solid var(--up-border);
    /* box-shadow: var(--up-shadow); */
}

.up-footer-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.up-footer-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(145deg, #ff5f6d 0%, #d93b3b 100%);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(217, 59, 59, 0.3);
}

.up-footer-logo svg {
    width: 16px;
    height: 16px;
}

.up-footer-brand strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--up-ink);
    letter-spacing: -0.02em;
}

.up-footer-brand small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--up-muted);
}

.up-footer-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.up-footer-links a {
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4b5563;
    text-decoration: none;
    background: #f3f4f6;
    transition: background 0.15s, color 0.15s;
}

.up-footer-links a:hover {
    background: var(--up-accent-soft);
    color: var(--up-accent-deep);
}

.up-footer-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.up-footer-copy {
    font-size: 0.74rem;
    color: #9ca3af;
    font-weight: 500;
}

.up-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #ecfdf5;
    color: #059669;
}

.up-footer-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

@media (max-width: 860px) {
    .up-footer {
        margin: 0 1rem 1rem;
    }

    .up-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .up-content {
        padding: 1rem;
    }
}

.up-page-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    padding: 0.95rem 1.15rem 0.95rem 1.35rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(217, 59, 59, 0.06) 0%, rgba(217, 59, 59, 0) 55%),
        var(--up-surface);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.up-page-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.8rem;
    bottom: 0.8rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--up-accent) 0%, var(--up-accent-deep) 100%);
}

.up-page-head > div:first-child {
    min-width: 0;
    flex: 1 1 260px;
}

.up-page-head h1 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--up-ink);
}

.up-page-head h1::before {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--up-accent);
    box-shadow: 0 0 0 4px var(--up-accent-soft);
}

.up-page-head p {
    margin: 0.3rem 0 0;
    max-width: 62ch;
    color: var(--up-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.up-page-head > .up-btn,
.up-page-head .up-head-actions .up-btn {
    padding: 0.55rem 0.95rem;
    font-size: 0.82rem;
    border-radius: 10px;
}

@media (max-width: 640px) {
    .up-page-head {
        padding: 0.8rem 0.9rem 0.8rem 1.1rem;
        margin-bottom: 1rem;
    }

    .up-page-head h1 {
        font-size: 1.1rem;
    }

    .up-page-head p {
        display: none;
    }

    .up-page-head .up-head-actions {
        width: 100%;
    }

    .up-page-head .up-head-actions .up-btn {
        flex: 1 1 auto;
    }
}

.up-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.15rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
}

.up-btn-primary {
    background: var(--up-accent);
    color: #fff;
}

.up-btn-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.up-btn-outline {
    background: #fff;
    border-color: var(--up-border);
    color: var(--up-ink);
}

.up-btn-outline:hover {
    background: #f9fafb;
    color: var(--up-ink);
}

.up-btn-soft {
    background: var(--up-accent-soft);
    color: var(--up-accent-deep);
}

.up-btn-block {
    width: 100%;
}

.up-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.up-stat {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 1.15rem 1.2rem 1.05rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-top: 4px solid transparent;
    min-height: 138px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.up-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}

.up-stat.is-link {
    --stat-accent: #2152ff;
    cursor: pointer;
}

.up-stat.is-link.g-mint { --stat-accent: #0d9488; }
.up-stat.is-link.g-teal { --stat-accent: #0891b2; }
.up-stat.is-link.g-slate { --stat-accent: #b7791f; }

.up-rank-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.6rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f6c453;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
}

.up-rank-chip svg {
    width: 14px;
    height: 14px;
}

.up-rank-chip.is-none {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.up-rank-chip:hover {
    filter: brightness(0.97);
}

.up-stat-value.up-stat-rank {
    font-size: 1.2rem;
    line-height: 1.25;
}

.up-stat-label-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.up-stat-sep {
    color: #c3cad6;
    font-weight: 500;
}
.up-stat.is-link.g-coral { --stat-accent: #f43f5e; }
.up-stat.is-link.g-violet { --stat-accent: #7c3aed; }
.up-stat.is-link.g-amber { --stat-accent: #d97706; }
.up-stat.is-link.g-orange { --stat-accent: #d97706; }
.up-stat.is-link.g-green { --stat-accent: #17ad37; }

.up-stat.is-link:hover,
.up-stat.is-link:focus-visible {
    border-color: color-mix(in srgb, var(--stat-accent) 35%, transparent);
    border-top-color: var(--stat-accent);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--stat-accent) 16%, transparent);
    outline: none;
}

.up-stat-label-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.up-stat-go {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.18rem 0.5rem 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(33, 82, 255, 0.1);
    background: color-mix(in srgb, var(--stat-accent, #2152ff) 12%, transparent);
    color: var(--stat-accent, #2152ff);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, gap 0.18s ease;
}

.up-stat-go svg {
    width: 12px;
    height: 12px;
}

.up-stat.is-link:hover .up-stat-go {
    background: var(--stat-accent, #2152ff);
    color: #fff;
    gap: 0.3rem;
}

.up-stat-split {
    margin-top: 0.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.up-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.up-stat-pill strong {
    font-weight: 800;
}

.up-stat-pill.is-income {
    background: rgba(23, 173, 55, 0.1);
    color: #138a2c;
}

.up-stat-pill.is-purchase {
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
}
.up-stat-pill:hover {
    border-color: currentColor;
}

.up-stat.g-blue {
    border-top-color: #2152ff;
}

.up-stat.g-green {
    border-top-color: #17ad37;
}

.up-stat.g-orange {
    border-top-color: #f59e0b;
}

.up-stat.g-purple {
    border-top-color: #7928ca;
}

.up-stat-bg {
    position: absolute;
    right: -8px;
    bottom: -10px;
    width: 96px;
    height: 96px;
    opacity: 0.08;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.up-stat.g-blue .up-stat-bg {
    color: #2152ff;
}

.up-stat.g-green .up-stat-bg {
    color: #17ad37;
}

.up-stat.g-orange .up-stat-bg {
    color: #f59e0b;
}

.up-stat.g-purple .up-stat-bg {
    color: #7928ca;
}

.up-stat.g-mint .up-stat-bg { color: #0d9488; }
.up-stat.g-coral .up-stat-bg { color: #f43f5e; }
.up-stat.g-teal .up-stat-bg { color: #0891b2; }
.up-stat.g-slate .up-stat-bg { color: #b7791f; }
.up-stat.g-violet .up-stat-bg { color: #7c3aed; }
.up-stat.g-amber .up-stat-bg { color: #d97706; }

.up-stat-bg svg {
    width: 100%;
    height: 100%;
}

.up-stat:hover .up-stat-bg {
    opacity: 0.14;
    transform: scale(1.08) rotate(-6deg);
}

.up-stat-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.up-stat-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.up-stat.g-blue .up-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.up-stat.g-green .up-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.up-stat.g-orange .up-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.up-stat.g-purple .up-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.up-stat-ico svg {
    width: 20px;
    height: 20px;
}

.up-stat-copy {
    min-width: 0;
    flex: 1;
}

.up-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #67748e;
    letter-spacing: 0.01em;
}

.up-stat-value {
    margin-top: 0.2rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #344767;
    line-height: 1.15;
    word-break: break-word;
}

.up-stat-value.is-sm {
    font-size: 1.2rem;
}

.up-stat-foot {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.4rem;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: #8392ab;
}

.up-stat-foot small {
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
}

.up-stat-foot strong {
    color: #344767;
    font-weight: 800;
}

.up-stat-need {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
}

.up-stat-need em {
    font-style: normal;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-right: 0.15rem;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
}

.up-stat-need small {
    color: #94a3b8;
    font-weight: 600;
}

.up-stat-foot span {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.up-stat.g-blue .up-stat-foot span {
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
}

.up-stat.g-green .up-stat-foot span {
    background: rgba(23, 173, 55, 0.1);
    color: #17ad37;
}

.up-stat.g-orange .up-stat-foot span {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.up-stat.g-purple .up-stat-foot span {
    background: rgba(121, 40, 202, 0.1);
    color: #7928ca;
}

.up-stat.g-mint .up-stat-foot span { background: rgba(13, 148, 136, 0.12); color: #0f766e; }
.up-stat.g-coral .up-stat-foot span { background: rgba(244, 63, 94, 0.12); color: #e11d48; }
.up-stat.g-teal .up-stat-foot span { background: rgba(8, 145, 178, 0.12); color: #0e7490; }
.up-stat.g-slate .up-stat-foot span { background: rgba(183, 121, 31, 0.12); color: #92400e; }
.up-stat.g-violet .up-stat-foot span { background: rgba(124, 58, 237, 0.12); color: #6d28d9; }
.up-stat.g-amber .up-stat-foot span { background: rgba(217, 119, 6, 0.12); color: #b45309; }

.up-stat-foot .is-ok,
.up-stat-foot .is-warn {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.68rem;
}

.up-stat .up-stat-foot .is-ok { background: rgba(5, 150, 105, 0.12); color: #047857; }
.up-stat .up-stat-foot .is-warn { background: rgba(217, 119, 6, 0.12); color: #b45309; }

.up-grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}

.up-card {
    background: var(--up-surface);
    border: 1px solid var(--up-border);
    border-radius: var(--up-radius);
    box-shadow: var(--up-shadow);
    padding: 1.2rem 1.25rem;
}

.up-panel-card {
    padding: 0;
    overflow: hidden;
}

.up-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    color: #fff;
}

.up-panel-head.is-blue {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(120deg, #2152ff 0%, #21d4fd 100%);
}

.up-panel-head.is-green {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(120deg, #17ad37 0%, #98ec2d 100%);
}

.up-panel-head.is-coral {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #ea0606 0%, #ff8f70 55%, #fbcf33 100%);
}

.up-panel-head.is-gold {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 42%, #f59e0b 130%);
}

.up-panel-head-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.up-panel-head-main p {
    display: none;
}

.up-panel-head-main h2 {
    font-size: 1.1rem;
    color: #131313;
    line-height: 1.35;
    font-family: var(--up-font);
}

.up-panel-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.1rem;
}

.up-panel-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.up-panel-head p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    line-height: 1.4;
    max-width: 360px;
    display: none;
    font-weight: 600;
}

.up-panel-head p strong {
    color: #fff;
    font-weight: 800;
}

.up-panel-head-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.up-panel-head-ico svg {
    width: 20px;
    height: 20px;
}

.up-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.7rem;
    padding: 1rem 1.05rem 1.15rem;
}

.up-q-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.85rem 0.75rem;
    border-radius: 14px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
}

.up-q-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
}

.up-q-tile .up-quick-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 0.45rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.up-q-tile .up-quick-ico svg {
    width: 18px;
    height: 18px;
}

.up-q-tile strong {
    font-size: 0.84rem;
    font-weight: 800;
    color: #344767;
}

.up-q-tile small {
    font-size: 0.7rem;
    color: #8392ab;
    font-weight: 600;
}

.up-q-tile.c1 {
    background: #e8f4ff;
    border-color: #c5e3ff;
}

.up-q-tile.c1 .up-quick-ico {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.up-q-tile.c2 {
    background: #e8f8e8;
    border-color: #c8ebc8;
}

.up-q-tile.c2 .up-quick-ico {
    background: linear-gradient(135deg, #10b981, #059669);
}

.up-q-tile.c3 {
    background: #fff4e6;
    border-color: #ffe0b8;
}

.up-q-tile.c3 .up-quick-ico {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.up-q-tile.c4 {
    background: #f3e8ff;
    border-color: #e4ccff;
}

.up-q-tile.c4 .up-quick-ico {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.up-q-tile.c5 {
    background: #e6fbff;
    border-color: #b8f0ff;
}

.up-q-tile.c5 .up-quick-ico {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.up-q-tile.c6 {
    background: #ffe8f3;
    border-color: #ffc9e0;
}

.up-q-tile.c6 .up-quick-ico {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.up-q-tile.c7 {
    background: #f4f6f8;
    border-color: #e2e8ee;
}

.up-q-tile.c7 .up-quick-ico {
    background: linear-gradient(135deg, #64748b, #475569);
}

.up-q-tile.c8 {
    background: #fff1f2;
    border-color: #fecdd3;
}

.up-q-tile.c8 .up-quick-ico {
    background: linear-gradient(135deg, #ef4444, #d93b3b);
}

.up-snap-body {
    padding: 1rem 1.05rem 1.15rem;
}

.up-snap-list {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
}

.up-snap-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    background: #f8f9fa;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.up-snap-item:hover {
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.up-snap-item .dot {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.up-snap-item .dot svg {
    width: 16px;
    height: 16px;
}

.up-snap-item .dot.a {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.up-snap-item .dot.b {
    background: linear-gradient(135deg, #10b981, #059669);
}

.up-snap-item .dot.c {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.up-snap-meta {
    flex: 1;
    min-width: 0;
}

.up-snap-meta strong {
    display: block;
    font-size: 0.88rem;
    color: #344767;
    font-weight: 700;
}

.up-snap-meta small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #8392ab;
    font-weight: 600;
}

.up-snap-item .badge {
    min-width: 34px;
    text-align: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    flex-shrink: 0;
}

.up-snap-item .badge.is-status {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.up-snap-item .badge.is-status.is-inactive {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.up-snap-item .badge.is-date {
    background: #eef2ff;
    color: #2152ff;
}

.up-alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.up-alert-ok {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.up-alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.up-alert-err {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.up-alert-info {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
}

.up-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.up-field {
    display: grid;
    gap: 0.35rem;
}

.up-field.full {
    grid-column: 1 / -1;
}

.up-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #4b5563;
}

.up-field input,
.up-field select,
.up-field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--up-border);
    border-radius: 12px;
    font: inherit;
    background: #fff;
    color: var(--up-ink);
    font-size: 14px;
}

.up-field input:focus,
.up-field select:focus,
.up-field textarea:focus {
    outline: none;
    border-color: #fda4af;
    box-shadow: 0 0 0 3px rgba(217, 59, 59, 0.12);
}

.up-field input:disabled,
.up-field input[readonly] {
    background: #f3f4f6;
    color: #6b7280;
}

.up-profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--up-border);
}

.up-profile-hero .big-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--up-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 800;
}

.up-kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0.55rem 1rem;
    font-size: 0.92rem;
}

.up-kv dt {
    color: var(--up-muted);
    font-weight: 600;
}

.up-kv dd {
    margin: 0;
    font-weight: 700;
    color: var(--up-ink);
}

.up-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
}

.up-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 990;
}

.up-overlay.show {
    display: block;
}

/* Auth • Member gate login (Royal Life Global Brand Theme) */
.ulog-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Figtree', 'Plus Jakarta Sans', sans-serif;
    color: #1a1d27;
    background: #f4f4f4;
}

.ulog {
    --ulog-ink: #08132b;
    --ulog-muted: #64748b;
    --ulog-line: #cbd5e1;
    --ulog-accent: #c8a98c;
    --ulog-accent-deep: #b29072;
    --ulog-accent-soft: #f6efe9;
    --ulog-accent-ink: #ffffff;
    --ulog-sheet: #ffffff;
    --ulog-blue: #1d4ed8;
    --ulog-blue-bright: #2563eb;
    --ulog-green: #10b981;
    --ulog-cyan: #0284c7;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(ellipse 70% 45% at 85% 22%, rgba(148, 163, 184, 0.15), transparent 72%),
        radial-gradient(ellipse 60% 38% at 18% 18%, rgba(214, 187, 161, 0.22), transparent 62%),
        radial-gradient(ellipse 60% 42% at 40% 92%, rgba(148, 163, 184, 0.08), transparent 68%),
        linear-gradient(180deg, #fdfdfd 0%, #f6f7f9 100%);
}

.ulog-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ulog-bg-watermark {
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: min(72vw, 680px);
    height: min(72vw, 680px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.055;
    filter: drop-shadow(0 0 60px rgba(29, 78, 216, 0.45));
    pointer-events: none;
    z-index: 0;
    animation: ulog-watermark-pulse 10s ease-in-out infinite alternate;
}

@keyframes ulog-watermark-pulse {
    0% {
        opacity: 0.045;
        transform: translateY(-50%) scale(0.98);
    }

    100% {
        opacity: 0.07;
        transform: translateY(-50%) scale(1.02);
    }
}

.ulog-blade {
    position: absolute;
    transform-origin: center;
    animation: ulog-blade 16s ease-in-out infinite;
}

.ulog-blade-a {
    width: 55vw;
    height: 38vh;
    top: -12%;
    right: -8%;
    clip-path: polygon(18% 0, 100% 0, 100% 72%, 0 100%);
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(191, 219, 254, 0.08));
    opacity: 0.7;
}

.ulog-blade-b {
    width: 42vw;
    height: 48vh;
    bottom: -18%;
    left: -10%;
    clip-path: polygon(0 28%, 100% 0, 82% 100%, 0 100%);
    background: linear-gradient(160deg, rgba(214, 187, 161, 0.22), rgba(248, 232, 204, 0.08));
    animation-delay: -6s;
    opacity: 0.75;
}

.ulog-blade-c {
    width: 32vw;
    height: 32vw;
    top: 36%;
    left: 38%;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: linear-gradient(135deg, rgba(167, 243, 208, 0.16), rgba(191, 219, 254, 0.08));
    animation-delay: -3s;
    opacity: 0.7;
}

.ulog-dots {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: radial-gradient(rgba(147, 197, 253, 0.45) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 75% 65% at 30% 40%, #000 15%, transparent 75%);
}

.ulog-rail {
    display: none !important;
}

.ulog-tree {
    width: min(100%, 220px);
    height: auto;
    align-self: center;
    margin-bottom: auto;
    margin-top: 10vh;
    color: #c89d6e;
    filter: drop-shadow(0 0 10px rgba(200, 157, 110, 0.2));
}

.ulog-tree-line {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: ulog-draw 1.6s 0.35s ease forwards;
}

.ulog-tree-dot {
    fill: #f59e0b;
    opacity: 0;
    animation: ulog-dot 0.45s ease forwards;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}

.ulog-tree-dot:nth-child(2) {
    animation-delay: 0.55s;
    fill: #f59e0b;
}

.ulog-tree-dot:nth-child(3) {
    animation-delay: 0.7s;
    fill: #10b981;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.8));
}

.ulog-tree-dot:nth-child(4) {
    animation-delay: 0.85s;
    fill: #38bdf8;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
}

.ulog-tree-dot:nth-child(5) {
    animation-delay: 1s;
    fill: #10b981;
}

.ulog-tree-dot:nth-child(6) {
    animation-delay: 1.1s;
    fill: #38bdf8;
}

.ulog-tree-dot:nth-child(7) {
    animation-delay: 1.2s;
    fill: #f59e0b;
}

.ulog-tree-dot:nth-child(8) {
    animation-delay: 1.3s;
    fill: #10b981;
}

.ulog-tree-dot:nth-child(9) {
    animation-delay: 1.35s;
    fill: #38bdf8;
}

.ulog-tree-dot:nth-child(10) {
    animation-delay: 1.4s;
    fill: #f59e0b;
}

.ulog-tree-dot:nth-child(11) {
    animation-delay: 1.45s;
    fill: #10b981;
}

.ulog-tree-dot.is-core {
    fill: #fbbf24;
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.95));
}

.ulog-rail-copy {
    margin: 0;
    font-family: 'Unbounded', 'Figtree', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #1f2a37;
}

.ulog-main {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: clamp(1.15rem, 2vw, 2rem) clamp(1.25rem, 2.4vw, 2rem) 1.5rem;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 20px 38px -26px rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ulog-rise 0.75s ease both;
    text-align: center;
}

.ulog-kicker {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8b6b52;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ulog-kicker::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.ulog-brand {
    margin: 0;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: #1f2937;
    text-wrap: balance;
}

.ulog-logo {
    display: block;
    max-width: 175px;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto 0.7rem;
    filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.08));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.ulog-logo:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 6px 20px rgba(29, 78, 216, 0.4)) drop-shadow(0 0 16px rgba(245, 158, 11, 0.25));
}

.ulog-title {
    margin: 0.2rem 0 0;
    font-family: 'Figtree', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: rgba(15, 23, 42, 0.92);
}

.ulog-title-short {
    display: none;
}

.ulog-lead {
    margin: 0.7rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(51, 65, 85, 0.72);
}

.ulog-main .up-alert {
    margin-top: 1.15rem;
}

/* .ulog-form {
    width: 100%;
    margin-top: 1.4rem;
    padding: 1.5rem 1.3rem 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    color: #08132b;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1.15rem;
    box-shadow: 0 12px 26px -18px rgba(15, 23, 42, 0.18);
} */

.ulog-form {
    width: 100%;
    margin-top: 1.15rem;
    padding: 0px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    overflow: visible;
    display: grid;
    gap: 1rem;
}

.ulog-form::before {
    display: none;
}

.ulog-field {
    display: grid;
    gap: 0.45rem;
    text-align: left;
}

.ulog-field label {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.ulog-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ulog-label-row label {
    margin-bottom: 0.4rem;
}

.ulog-forgot {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ulog-forgot:hover {
    color: #2563eb;
    text-decoration: underline;
}

.ulog-field input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #dfe5ee;
    border-radius: 0;
    background: transparent;
    padding: 0.85rem 0.1rem 0.7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #08132b;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.ulog-field input:focus {
    outline: none;
    border-bottom-color: #d0b29d;
    box-shadow: none;
}

.ulog-field .up-password-wrap input {
    padding-right: 2.8rem;
}

.ulog-form .up-eye {
    color: #64748b;
}

.ulog-submit {
    margin-top: 0.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem 1.2rem;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: linear-gradient(90deg, #c9a786 0%, #b88a67 100%);
    box-shadow: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ulog-submit-arrow {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.ulog-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.45);
}

.ulog-submit:hover .ulog-submit-arrow {
    transform: translateX(4px);
}

.ulog-submit:active {
    transform: none;
}

.ulog-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

a.ulog-submit {
    text-decoration: none;
    box-sizing: border-box;
}

.ulog-form .up-alert {
    margin: 0;
}

.ulog-form .upw-dev {
    margin-top: 0;
}

.ulog .upw-dev {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem;
    border: 1px dashed #f0b429;
    border-radius: 12px;
    background: #fffbeb;
    text-align: left;
    font-size: 0.8rem;
    color: #7c5a10;
}

.ulog .upw-dev strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #92400e;
}

.ulog .upw-dev p {
    margin: 0 0 0.35rem;
}

.ulog .upw-dev a {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #b45309;
}

.ulog .up-alert {
    box-sizing: border-box;
    max-width: 100%;
}

.ulog-meta-box {
    width: 100%;
    margin: 0 0 0.65rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: right;
}

.ulog-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ulog-home:hover {
    color: #1e3a8a;
    background: #dbeafe;
    border-color: #93c5fd;
}

.ulog-foot {
    margin-top: 1.1rem;
    display: grid;
    gap: 0.42rem;
    justify-items: center;
    width: 100%;
}

.ulog-foot p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(51, 65, 85, 0.72);
    text-align: center;
}

.ulog-foot a {
    color: #3b3b3b;
    font-weight: 700;
    text-decoration: none;
}

.ulog-foot a:hover {
    color: #1f2937;
    text-decoration: underline;
}

.ulog-copy {
    font-size: 0.75rem !important;
    color: rgba(248, 250, 252, 0.42) !important;
}

@keyframes ulog-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ulog-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ulog-blade {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-10px, 12px) rotate(0.6deg);
    }
}

@keyframes ulog-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ulog-dot {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 0.9;
        transform: scale(1);
    }
}

@media (max-width: 900px) {
    .ulog {
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ulog-rail {
        display: none !important;
    }

    .ulog-main {
        width: min(100%, 500px);
        margin: 0 auto;
        padding: 1rem 1rem 1.25rem;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.82);
    }

    .ulog-brand {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
    }

    .ulog-home,
    .ulog-kicker,
    .ulog-logo,
    .ulog-title,
    .ulog-lead,
    .ulog-form,
    .ulog-foot {
        margin-left: auto;
        margin-right: auto;
    }

    .ulog-home {
        justify-content: center;
    }

    .ulog-form {
        width: min(100%, 460px);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    .ulog-blade-c {
        display: none;
    }
}

/* Phone — single-column login desk */
@media (max-width: 640px) {
    .ulog-body {
        min-height: 100dvh;
        background: #f4f4f4;
    }

    .ulog {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background:
            radial-gradient(ellipse 90% 50% at 85% 10%, rgba(148, 163, 184, 0.15), transparent 70%),
            radial-gradient(ellipse 70% 40% at 15% 15%, rgba(214, 187, 161, 0.16), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
        padding:
            max(0.75rem, env(safe-area-inset-top)) max(0.9rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left));
    }

    .ulog-rail,
    .ulog-blade-a,
    .ulog-blade-b,
    .ulog-blade-c,
    .ulog-dots {
        display: none;
    }

    .ulog-stage {
        opacity: 0.65;
    }

    .ulog-bg-watermark {
        right: 50%;
        top: 35%;
        transform: translate(50%, -50%);
        width: 85vw;
        height: 85vw;
        opacity: 0.045;
    }

    .ulog-main {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0.35rem 0 0.5rem;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: none;
        animation: none;
    }

    .ulog-home {
        margin-bottom: 1.35rem;
        font-size: 0.84rem;
        min-height: 40px;
        align-items: center;
        justify-content: center;
        width: auto;
    }

    .ulog-kicker {
        margin-bottom: 0.55rem;
        font-size: 0.68rem;
        display: inline-flex;
        justify-content: center;
    }

    .ulog-logo {
        max-width: 130px;
        margin: 0 auto 0.85rem;
    }

    .ulog-title {
        margin-top: 0.35rem;
        font-size: 1.55rem;
        line-height: 1.25;
        max-width: none;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: rgba(15, 23, 42, 0.92);
        text-align: center;
    }

    .ulog-title-full {
        display: none;
    }

    .ulog-title-short {
        display: inline;
    }

    .ulog-lead {
        margin-top: 0.45rem;
        font-size: 0.9rem;
        line-height: 1.45;
        text-align: center;
    }

    .ulog-main .up-alert {
        margin-top: 0.95rem;
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .ulog-form {
        width: min(90%, 460px);
        margin-top: 1.25rem;
        padding: 0;
        gap: 1.15rem;
        border-radius: 0;
        clip-path: none;
        box-shadow: none;
        background: transparent;
        border: 0;
    }

    .ulog-field label {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    .ulog-field input {
        font-size: 16px;
        /* avoid iOS zoom */
        padding: 0.9rem 0.7rem 0.8rem;
        min-height: 48px;
    }

    .ulog-field .up-password-wrap input {
        padding-right: 2.8rem;
    }

    .ulog-form .up-eye {
        width: 44px;
        height: 44px;
        right: 0;
    }

    .ulog-forgot {
        font-size: 0.82rem;
        padding: 0.25rem 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .ulog-submit {
        margin-top: 0.35rem;
        min-height: 52px;
        padding: 0.95rem 1rem;
        font-size: 0.98rem;
        border-radius: 12px;
    }

    .ulog-foot {
        margin-top: 1.25rem;
        gap: 0.55rem;
        text-align: center;
        width: min(100%, 460px);
    }

    .ulog-foot p {
        font-size: 0.9rem;
    }

    .ulog-copy {
        margin-top: 0.15rem !important;
    }

    .maint-overlay {
        padding:
            max(0.85rem, env(safe-area-inset-top)) max(0.85rem, env(safe-area-inset-right)) max(0.85rem, env(safe-area-inset-bottom)) max(0.85rem, env(safe-area-inset-left));
        align-items: flex-end;
    }

    .maint-modal {
        width: 100%;
        border-radius: 20px 20px 16px 16px;
        padding: 1.4rem 1.15rem 1.25rem;
        max-height: min(88dvh, 640px);
        overflow-y: auto;
    }
}

@media (max-width: 380px) {
    .ulog-title {
        font-size: 1.35rem;
    }

    .ulog-logo {
        max-width: 96px;
    }

    .ulog-form {
        padding: 1.05rem 0.9rem 1.1rem;
    }
}

@media (max-width: 640px) and (max-height: 700px) {
    .ulog-logo {
        max-width: 88px;
        margin-bottom: 0.5rem;
    }

    .ulog-title {
        font-size: 1.25rem;
    }

    .ulog-lead {
        display: none;
    }

    .ulog-form {
        margin-top: 0.95rem;
        gap: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ulog-blade,
    .ulog-tree-line,
    .ulog-tree-dot,
    .ulog-main,
    .ulog-rail {
        animation: none !important;
    }

    .ulog-tree-line {
        stroke-dashoffset: 0;
    }

    .ulog-tree-dot {
        opacity: 0.9;
    }
}

/* Legacy auth helpers still used by password eye / fields */
.up-password-wrap {
    position: relative;
}

.up-password-wrap input {
    padding-right: 2.8rem;
}

.up-eye {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #9ca3af;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.up-eye svg {
    width: 18px;
    height: 18px;
}

.up-eye .eye-closed {
    display: none;
}

.up-eye.is-visible .eye-open {
    display: none;
}

.up-eye.is-visible .eye-closed {
    display: block;
}

/* Keep old centered card auth for any other pages still using it */
.up-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 70% 50% at 10% 10%, rgba(217, 59, 59, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 90%, rgba(17, 24, 39, 0.12), transparent 50%),
        linear-gradient(165deg, #111827 0%, #1f2937 45%, #111827 100%);
}

.up-auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 22px;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.up-auth-card h1 {
    margin: 0 0 0.3rem;
    font-size: 1.55rem;
    font-weight: 800;
}

.up-auth-card .lead {
    margin: 0 0 1.35rem;
    color: var(--up-muted);
    font-size: 0.92rem;
}

.up-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.35rem;
}

.up-auth-foot {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Referral Links */
.up-referral {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.up-referral-id {
    flex-shrink: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    text-align: center;
    min-width: 100px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.up-referral-id span {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.up-referral-id strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.up-referral-body {
    padding: 1rem 1.05rem 1.15rem;
}

.up-referral-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.up-ref-card {
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 1rem 1.05rem;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s, box-shadow 0.15s;
}

.up-ref-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.up-ref-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.up-ref-left {
    background: linear-gradient(90deg, rgba(33, 82, 255, 0.05) 0%, #fff 42%);
}

.up-ref-right {
    background: linear-gradient(90deg, rgba(251, 140, 0, 0.06) 0%, #fff 42%);
}

.up-ref-left::before {
    background: linear-gradient(180deg, #2152ff, #21d4fd);
}

.up-ref-right::before {
    background: linear-gradient(180deg, #f53939, #fbcf33);
}

.up-ref-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.up-ref-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.up-ref-side-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
}

.up-ref-side-ico svg {
    width: 14px;
    height: 14px;
}

.up-ref-side-ico.left {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.up-ref-side-ico.right {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.up-ref-badge {
    font-size: 0.88rem;
    font-weight: 800;
    color: #344767;
}

.up-ref-count {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
}

.up-ref-left .up-ref-count {
    background: #dbeafe;
    color: #1d4ed8;
}

.up-ref-right .up-ref-count {
    background: #fef3c7;
    color: #b45309;
}

.up-ref-desc {
    margin: 0 0 0.85rem;
    font-size: 0.8rem;
    color: var(--up-muted);
    line-height: 1.45;
}

.up-ref-desc strong {
    color: #374151;
}

.up-ref-field {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.up-ref-field input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.8rem;
    border: 1.5px solid var(--up-border);
    border-radius: 11px;
    background: #f9fafb;
    font: inherit;
    font-size: 0.78rem;
    color: #4b5563;
}

.up-ref-field input:focus {
    outline: none;
    border-color: #c5d4ff;
    background: #fff;
}

.up-ref-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.9rem;
    border: 1px solid var(--up-border);
    border-radius: 11px;
    background: #fff;
    color: var(--up-ink);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.up-ref-copy svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.up-ref-copy:hover {
    background: #f3f4f6;
}

.up-ref-copy.is-copied {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #fff !important;
}

.up-ref-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.85rem;
    border-radius: 11px;
    background: #25d366;
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    transition: filter 0.15s, transform 0.15s;
}

.up-ref-wa svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.up-ref-wa:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    color: #fff !important;
}

@media (max-width: 1100px) {
    .up-stats {
        grid-template-columns: 1fr 1fr;
    }

    .up-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .up-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 1000 !important;
        transform: translateX(-105%);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: none;
    }

    .up-sidebar.open {
        transform: translateX(0);
        box-shadow: 14px 0 45px rgba(0, 0, 0, 0.65);
    }

    .up-sidebar .up-nav {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    .up-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-left: auto;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: all 0.15s ease;
    }

    .up-sidebar-close:hover,
    .up-sidebar-close:active {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }

    .up-overlay {
        z-index: 990 !important;
    }

    .up-main {
        margin-left: 0;
    }

    .up-menu-btn {
        display: grid;
    }

    .up-search {
        display: none;
    }

    .up-user-meta {
        display: none;
    }

    .up-quick {
        grid-template-columns: repeat(2, 1fr);
    }

    .up-form-grid {
        grid-template-columns: 1fr;
    }

    .up-kv {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .up-kv dt {
        margin-top: 0.55rem;
    }

    .up-referral-grid {
        grid-template-columns: 1fr;
    }
}

/* Bottom nav base (hidden on desktop) */
.up-bottom-nav {
    display: none;
}

.up-bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.2rem;
    border-radius: 12px;
    color: #94a3b8;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.up-bn-ico {
    width: 36px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}

.up-bn-ico svg {
    width: 22px;
    height: 22px;
}

.up-bn-label {
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
}

.up-bn-item.active {
    color: var(--up-accent-deep);
}

.up-bn-item.active .up-bn-ico {
    background: var(--up-accent-soft);
}

.up-bn-item:active {
    transform: scale(0.97);
}

@media (max-width: 860px) {
    .up-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        align-items: stretch;
        justify-content: space-around;
        gap: 0.15rem;
        padding: 0.35rem 0.35rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #e8ecf1;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
    }

    .up-main {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }

    .up-footer {
        display: none;
    }
}

@media (max-width: 560px) {
    .up-stats {
        grid-template-columns: 1fr;
    }

    .up-content {
        padding: 1rem;
    }

    .up-panel-head {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .up-ref-field {
        flex-wrap: wrap;
    }

    .up-ref-copy,
    .up-ref-wa {
        flex: 1;
        justify-content: center;
        padding: 0.65rem 0.9rem;
    }
}

/* Soft UI Soft ? Profile page */
.pp {
    margin-top: -0.25rem;
}

.pp-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.15rem;
    align-items: start;
}

.pp-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    border: 0;
    padding: 1.15rem 1.2rem;
}

.pp-profile-card {
    padding: 0;
    overflow: hidden;
}

.pp-profile-banner {
    position: relative;
    min-height: 118px;
    padding: 1rem 1.15rem 2.6rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    overflow: hidden;
    background:
        linear-gradient(125deg, #7928ca 0%, #ff0080 55%, #ff667c 100%);
    color: #fff;
}

.pp-profile-banner-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pp-profile-banner-orb.a {
    width: 140px;
    height: 140px;
    right: -30px;
    top: -40px;
    background: rgba(255, 255, 255, 0.14);
}

.pp-profile-banner-orb.b {
    width: 90px;
    height: 90px;
    left: -20px;
    bottom: -30px;
    background: rgba(255, 255, 255, 0.1);
}

.pp-profile-kicker {
    position: relative;
    z-index: 1;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.88;
}

.pp-profile-id-tag {
    position: relative;
    z-index: 1;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.72rem;
    font-weight: 800;
    backdrop-filter: blur(6px);
}

.pp-profile-body {
    padding: 0 1.15rem 1.25rem;
    text-align: center;
    margin-top: -44px;
    position: relative;
    z-index: 2;
}

.pp-avatar-wrap {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 0.8rem;
}

.pp-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: linear-gradient(145deg, #2152ff, #21d4fd);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow:
        0 0 0 4px rgba(121, 40, 202, 0.12),
        0 12px 24px rgba(33, 82, 255, 0.3);
    overflow: hidden;
}

.pp-avatar.has-photo {
    background: #e2e8f0;
    padding: 0;
}

.pp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-online {
    position: absolute;
    right: 6px;
    bottom: 8px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #82d616;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 3px rgba(130, 214, 22, 0.2);
}

.pp-online.is-off {
    background: #8392ab;
    box-shadow: none;
}

.pp-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    letter-spacing: -0.02em;
}

.pp-verified {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pp-role {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #67748e;
    font-weight: 600;
}

.pp-profile-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0 0.95rem;
}

.pp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #f8f9fa;
    color: #67748e;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid #eef0f4;
}

.pp-status-pill.is-active {
    background: rgba(130, 214, 22, 0.14);
    border-color: rgba(130, 214, 22, 0.28);
    color: #4caf00;
}

.pp-status-pill.is-kyc {
    background: #fff4e6;
    border-color: #ffe0b8;
    color: #fb8c00;
}

.pp-status-pill.is-kyc.ok {
    background: #eef2ff;
    border-color: #c5d4ff;
    color: #2152ff;
}

.pp-status-pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.pp-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.pp-profile-stats>div {
    padding: 0.6rem 0.4rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.pp-profile-stats small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8392ab;
}

.pp-profile-stats strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.88rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.pp-level {
    margin: 0 0 1rem;
    text-align: left;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
    border: 1px solid #e8f0ff;
}

.pp-level-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #67748e;
}

.pp-level-top strong {
    color: #2152ff;
    font-weight: 800;
}

.pp-progress {
    height: 9px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.pp-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7928ca, #2152ff 50%, #21d4fd);
    box-shadow: 0 0 10px rgba(33, 82, 255, 0.35);
}

.pp-level-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.pp-level-foot small {
    font-size: 0.68rem;
    color: #8392ab;
    font-weight: 600;
}

.pp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-bottom: 0;
}

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}

.pp-btn svg {
    width: 14px;
    height: 14px;
}

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

.pp-btn-teal {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(33, 212, 253, 0.35);
}

.pp-btn-outline {
    background: #fff;
    border-color: #e9ecef;
    color: #344767 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.pp-btn-outline:hover {
    background: #f8f9fa;
}

.pp-contact {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
}

.pp-contact-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.05rem 1.15rem;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(120deg, #2152ff 0%, #21d4fd 100%);
    color: #fff;
}

.pp-contact-kicker {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.2rem;
}

.pp-contact-banner h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.pp-contact-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    opacity: 0.9;
    line-height: 1.4;
    display: none;
}

.pp-contact-edit {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff !important;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background 0.15s;
}

.pp-contact-edit:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pp-contact-edit svg {
    width: 15px;
    height: 15px;
}

.pp-contact-list {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem 1rem;
}

.pp-contact-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.pp-contact-list li:hover {
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.pp-ci {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.pp-ci svg {
    width: 16px;
    height: 16px;
}

.pp-ci.purple {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.pp-ci.teal {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.pp-ci.orange {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.pp-ci.indigo {
    background: linear-gradient(310deg, #5e72e4, #825ee4);
}

.pp-ci.green {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.pp-contact-body {
    flex: 1;
    min-width: 0;
}

.pp-contact-body small {
    display: block;
    font-size: 0.68rem;
    color: #8392ab;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-contact-body strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.86rem;
    color: #344767;
    font-weight: 700;
    word-break: break-word;
}

.pp-contact-body strong a {
    color: #344767;
    text-decoration: none;
}

.pp-contact-body strong a:hover {
    color: #2152ff;
}

.pp-contact-body strong.is-muted {
    color: #a0aec0;
    font-weight: 600;
}

.pp-contact-tag {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #7928ca;
    max-width: 88px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-contact-tag.teal {
    background: #e8f4ff;
    color: #1e88e5;
}

.pp-contact-tag.indigo {
    background: #eee9ff;
    color: #5e72e4;
}

.pp-contact-tag.green {
    background: #e8f8e8;
    color: #43a047;
}

.pp-ref-row {
    flex: 1;
    min-width: 0;
}

.pp-ref-section {
    margin-top: 1rem;
    padding: 0;
    overflow: hidden;
}

.pp-panel-banner.is-coral {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #ea0606 0%, #ff8f70 55%, #fbcf33 100%);
}

.pp-panel-banner.is-coral p strong {
    color: #fff;
    font-weight: 800;
}

.pp-ref-body {
    padding: 0.9rem 0.95rem 1.05rem;
}

.pp-ref-id-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    background: #111827;
    color: #fff;
}

.pp-ref-id-chip small {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.pp-ref-id-chip strong {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pp-ref-block {
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 0.85rem;
    margin-bottom: 0.7rem;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s, box-shadow 0.15s;
}

.pp-ref-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.pp-ref-block:last-child {
    margin-bottom: 0;
}

.pp-ref-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.pp-ref-left {
    background: linear-gradient(90deg, rgba(33, 82, 255, 0.05) 0%, #fff 40%);
}

.pp-ref-right {
    background: linear-gradient(90deg, rgba(251, 140, 0, 0.06) 0%, #fff 40%);
}

.pp-ref-left::before {
    background: linear-gradient(180deg, #2152ff, #21d4fd);
}

.pp-ref-right::before {
    background: linear-gradient(180deg, #f53939, #fbcf33);
}

.pp-ref-block-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    padding-left: 0.2rem;
}

.pp-ref-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pp-ref-leg strong {
    font-size: 0.86rem;
    color: #344767;
    font-weight: 800;
}

.pp-ref-leg-ico {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
}

.pp-ref-leg-ico svg {
    width: 14px;
    height: 14px;
}

.pp-ref-leg-ico.left {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.pp-ref-leg-ico.right {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.pp-ref-count {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #2152ff;
}

.pp-ref-right .pp-ref-count {
    background: #fff4e6;
    color: #fb8c00;
}

.pp-ref-hint {
    margin: 0 0 0.65rem;
    padding-left: 0.2rem;
    font-size: 0.74rem;
    color: #8392ab;
    line-height: 1.4;
}

.pp-ref-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pp-ref-block .pp-ref-line input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    background: #f8f9fa;
    padding: 0.55rem 0.65rem;
    font: inherit;
    font-size: 0.72rem;
    color: #67748e;
}

.pp-ref-block .pp-ref-line input:focus {
    outline: none;
    border-color: #c5d4ff;
    background: #fff;
}

.pp-copy {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: #f0f2f5;
    color: #67748e;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.pp-copy:hover {
    background: #e4e7ee;
}

.pp-copy svg {
    width: 15px;
    height: 15px;
}

.pp-copy.is-copied {
    background: #82d616;
    color: #fff;
}

.pp-wa {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #25d366;
    color: #fff !important;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.35);
    transition: filter 0.15s, transform 0.15s;
}

.pp-wa svg {
    width: 15px;
    height: 15px;
}

.pp-wa:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    color: #fff !important;
}

.pp-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pp-welcome-kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8392ab;
}

.pp-welcome h1 {
    margin: 0.15rem 0 0;
    font-size: 1.55rem;
    font-weight: 700;
    color: #344767;
    letter-spacing: -0.02em;
}

.pp-mini-stats {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pp-mini {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
    min-width: 118px;
}

.pp-mini-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.pp-mini-ico svg {
    width: 15px;
    height: 15px;
}

.pp-mini-ico.blue {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.pp-mini-ico.green {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.pp-mini-ico.red {
    background: linear-gradient(310deg, #ea0606, #ff667c);
}

.pp-mini small {
    display: block;
    font-size: 0.65rem;
    color: #8392ab;
    font-weight: 600;
}

.pp-mini strong {
    display: block;
    font-size: 0.95rem;
    color: #344767;
    font-weight: 800;
}

.pp-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.pp-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1rem 1.1rem;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
}

.pp-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pp-stat-ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.pp-stat-ico svg {
    width: 20px;
    height: 20px;
}

.pp-stat-ico.purple {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.pp-stat-ico.green {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.pp-stat-ico.orange {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.pp-chip {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
}

.pp-chip.up {
    background: rgba(130, 214, 22, 0.16);
    color: #4caf00;
}

.pp-stat-card>small {
    display: block;
    font-size: 0.78rem;
    color: #67748e;
    font-weight: 600;
}

.pp-stat-card>strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.45rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
}

.pp-mid-row,
.pp-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.pp-bottom-row {
    margin-bottom: 0.9rem;
}

.pp-sponsor,
.pp-chart-card,
.pp-quick-card,
.pp-activity-card {
    padding: 0;
    overflow: hidden;
}

.pp-panel-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    color: #fff;
}

.pp-panel-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.pp-panel-banner.is-purple {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(108deg, #7928ca 0%, #ff0080 100%);
}

.pp-panel-banner.is-teal {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(120deg, #2152ff 0%, #21d4fd 100%);
}

.pp-panel-banner.is-orange {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(120deg, #f53939 0%, #fbcf33 100%);
}

.pp-panel-banner.is-green {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(120deg, #17ad37 0%, #98ec2d 100%);
}

.pp-panel-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.1rem;
}

.pp-panel-banner h3 {
    margin: 0 !important;
    font-size: 1rem;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.02em;
}

.pp-panel-banner p {
    display: none;
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    opacity: 0.9;
    line-height: 1.4;
    max-width: 260px;
    font-weight: 600;
}

.pp-panel-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.pp-panel-ico svg {
    width: 20px;
    height: 20px;
}

.pp-panel-banner .pp-chip.up {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    align-self: center;
    flex-shrink: 0;
}

.pp-sponsor-body,
.pp-chart-body {
    padding: 0.95rem 1.05rem 1.1rem;
}

.pp-sponsor-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.pp-s-chip {
    padding: 0.55rem 0.5rem;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
    text-align: center;
}

.pp-s-chip small {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: #8392ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-s-chip strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #344767;
}

.pp-sponsor-body>p {
    margin: 0 0 0.95rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #67748e;
}

.pp-sponsor-foot {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(121, 40, 202, 0.06) 0%, #fff 50%);
    border: 1px solid #efe8f8;
}

.pp-sponsor-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7928ca, #ff0080);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    box-shadow: 0 6px 14px rgba(121, 40, 202, 0.3);
}

.pp-sponsor-meta {
    flex: 1;
    min-width: 0;
}

.pp-sponsor-meta strong {
    display: block;
    font-size: 0.86rem;
    color: #344767;
}

.pp-sponsor-meta small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    color: #8392ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-sponsor-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #7928ca;
}

.pp-sponsor-badge.is-root {
    background: #eef2ff;
    color: #5e72e4;
}

.pp-chart-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.pp-chart-meta>div {
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.pp-chart-meta small {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #8392ab;
    text-transform: uppercase;
}

.pp-chart-meta strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #2152ff;
}

.pp-chart {
    height: 150px;
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.2rem 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
    border: 1px solid #eef3ff;
}

.pp-chart svg {
    width: 100%;
    height: 118px;
    display: block;
}

.pp-chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 0.45rem 0.35rem;
    font-size: 0.66rem;
    color: #8392ab;
    font-weight: 700;
}

.pp-quick-card .pp-quick {
    padding: 0.9rem 0.95rem 1.05rem;
}

.pp-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.pp-q {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 92px;
    padding: 0.75rem 0.7rem;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
}

.pp-q:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.pp-q-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    margin-bottom: 0.45rem;
    background: rgba(255, 255, 255, 0.7);
}

.pp-q-ico svg {
    width: 14px;
    height: 14px;
}

.pp-q strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: inherit;
    line-height: 1.25;
}

.pp-q small {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    opacity: 0.8;
    font-weight: 600;
}

.pp-q.orange {
    background: #fff4e6;
    color: #fb8c00;
    border-color: #ffe0b8;
}

.pp-q.purple {
    background: #f3e8ff;
    color: #7928ca;
    border-color: #e4ccff;
}

.pp-q.green {
    background: #e8f8e8;
    color: #43a047;
    border-color: #c8ebc8;
}

.pp-q.red {
    background: #ffe8ec;
    color: #e53935;
    border-color: #ffc9d1;
}

.pp-q.blue {
    background: #e8f4ff;
    color: #1e88e5;
    border-color: #c5e3ff;
}

.pp-q.grey {
    background: #f4f6f8;
    color: #607d8b;
    border-color: #e2e8ee;
}

.pp-activity-card .pp-timeline {
    padding: 0.95rem 1.05rem 1.1rem;
}

.pp-timeline {
    list-style: none;
    display: grid;
    gap: 0.7rem;
    position: relative;
}

.pp-timeline li {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    position: relative;
}

.pp-dot-wrap {
    width: 18px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.pp-dot-wrap::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: -0.7rem;
    width: 2px;
    background: #eef0f4;
}

.pp-timeline li:last-child .pp-dot-wrap::before {
    display: none;
}

.pp-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.85rem;
    flex-shrink: 0;
    z-index: 1;
}

.pp-dot-wrap.purple .pp-dot {
    background: #7928ca;
    box-shadow: 0 0 0 4px rgba(121, 40, 202, 0.15);
}

.pp-dot-wrap.green .pp-dot {
    background: #82d616;
    box-shadow: 0 0 0 4px rgba(130, 214, 22, 0.18);
}

.pp-dot-wrap.red .pp-dot {
    background: #ea0606;
    box-shadow: 0 0 0 4px rgba(234, 6, 6, 0.14);
}

.pp-timeline-card {
    flex: 1;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
    transition: background 0.15s, box-shadow 0.15s;
}

.pp-timeline-card:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.pp-timeline-card strong {
    display: block;
    font-size: 0.84rem;
    color: #344767;
    font-weight: 700;
}

.pp-timeline-card small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: #8392ab;
}

.pp-txn-card {
    margin-top: 20px;
    padding: 0;
    overflow: hidden;
}

.pp-txn-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(108deg, #7928ca 0%, #ff0080 100%);
    color: #fff;
}

.pp-txn-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 0.1rem;
}

.pp-txn-banner h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.pp-txn-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    line-height: 1.4;
    max-width: 360px;
    font-weight: 600;
}

.pp-txn-banner-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}

.pp-txn-banner-ico svg {
    width: 20px;
    height: 20px;
}

.pp-txn-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    padding: 0.95rem 1.15rem 0.35rem;
}

.pp-txn-sum {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.pp-txn-sum small {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    color: #8392ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-txn-sum strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #344767;
}

.pp-txn-sum.in strong {
    color: #4caf00;
}

.pp-txn-sum.out strong {
    color: #ea0606;
}

.pp-txn-sum.all strong {
    color: #7928ca;
}

.pp-txn-empty {
    margin: 0.5rem 1.15rem 1.2rem;
    padding: 1.6rem 1rem;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed #e0e4ea;
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f6f9 100%);
}

.pp-txn-empty-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.7rem;
    border-radius: 14px;
    background: linear-gradient(310deg, #7928ca, #ff0080);
    color: #fff;
    display: grid;
    place-items: center;
}

.pp-txn-empty-ico svg {
    width: 20px;
    height: 20px;
}

.pp-txn-empty strong {
    display: block;
    font-size: 0.92rem;
    color: #344767;
    font-weight: 700;
}

.pp-txn-empty p {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #8392ab;
}

.pp-txn-list {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 1.15rem 1.2rem;
}

.pp-txn-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0.9rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #eef0f4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.pp-txn-list li:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    border-color: #e4e7ee;
}

.pp-txn-list li.is-in {
    background: linear-gradient(90deg, rgba(130, 214, 22, 0.06) 0%, #fff 42%);
}

.pp-txn-list li.is-out {
    background: linear-gradient(90deg, rgba(234, 6, 6, 0.05) 0%, #fff 42%);
}

.pp-txn-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.pp-txn-ico svg {
    width: 17px;
    height: 17px;
}

.pp-txn-ico.in {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.pp-txn-ico.out {
    background: linear-gradient(310deg, #ea0606, #ff667c);
}

.pp-txn-meta {
    flex: 1;
    min-width: 0;
}

.pp-txn-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.pp-txn-meta strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: #344767;
}

.pp-txn-type {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    background: #f3e8ff;
    color: #7928ca;
}

.pp-txn-type.referral {
    background: #e8f8e8;
    color: #43a047;
}

.pp-txn-type.binary {
    background: #e8f4ff;
    color: #1e88e5;
}

.pp-txn-type.matching {
    background: #fff4e6;
    color: #fb8c00;
}

.pp-txn-type.level {
    background: #f3e8ff;
    color: #7928ca;
}

.pp-txn-type.withdraw {
    background: #ffe8ec;
    color: #e53935;
}

.pp-txn-meta small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: #8392ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-txn-right {
    text-align: right;
    flex-shrink: 0;
}

.pp-txn-right strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pp-txn-right .pos {
    color: #4caf00;
}

.pp-txn-right .neg {
    color: #ea0606;
}

.pp-txn-status {
    display: inline-block;
    margin-top: 0.28rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    text-transform: capitalize;
    background: #e9ecef;
    color: #67748e;
}

.pp-txn-status.paid,
.pp-txn-status.approved {
    background: rgba(130, 214, 22, 0.16);
    color: #4caf00;
}

.pp-txn-status.pending {
    background: rgba(251, 207, 51, 0.25);
    color: #c79100;
}

.pp-txn-status.rejected,
.pp-txn-status.cancelled {
    background: rgba(234, 6, 6, 0.12);
    color: #ea0606;
}

@media (max-width: 640px) {
    .pp-txn-summary {
        grid-template-columns: 1fr;
    }

    .pp-txn-list li {
        flex-wrap: wrap;
    }

    .pp-txn-right {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding-left: 3.3rem;
    }
}

@media (max-width: 1180px) {
    .pp-layout {
        grid-template-columns: 290px 1fr;
    }

    .pp-mini-stats {
        max-width: 360px;
    }
}

@media (max-width: 980px) {
    .pp-layout {
        grid-template-columns: 1fr;
    }

    .pp-welcome {
        flex-direction: column;
    }

    .pp-mini-stats {
        justify-content: flex-start;
    }

    .pp-stat-row {
        grid-template-columns: 1fr;
    }

    .pp-mid-row,
    .pp-bottom-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .pp-quick {
        grid-template-columns: 1fr 1fr;
    }

    .pp-actions {
        grid-template-columns: 1fr;
    }

    .pp-sponsor-chips {
        grid-template-columns: 1fr;
    }
}

/* Soft UI Soft ? Edit Profile */
.ep {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.15rem;
    align-items: start;
}

.ep-profile-card,
.ep-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ep-side-banner {
    position: relative;
    min-height: 96px;
    padding: 1rem 1.15rem 2.4rem;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(125deg, #7928ca 0%, #ff0080 100%);
    color: #fff;
    overflow: hidden;
}

.ep-side-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ep-side-orb.a {
    width: 110px;
    height: 110px;
    right: -24px;
    top: -36px;
    background: rgba(255, 255, 255, 0.14);
}

.ep-side-orb.b {
    width: 70px;
    height: 70px;
    left: -16px;
    bottom: -22px;
    background: rgba(255, 255, 255, 0.1);
}

.ep-side-kicker {
    position: relative;
    z-index: 1;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.ep-side-body {
    padding: 0 1.15rem 1.25rem;
    margin-top: -2rem;
    position: relative;
    z-index: 1;
}

.ep-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #7928ca;
    background: linear-gradient(135deg, #fff 0%, #f3e8ff 100%);
    border: 4px solid #fff;
    box-shadow: 0 8px 20px rgba(121, 40, 202, 0.2);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.ep-avatar.has-photo {
    background: #e2e8f0;
    color: transparent;
    padding: 0;
}

.ep-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ep-side-body h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

.ep-side-body>p {
    margin: 0.2rem 0 0.75rem;
    font-size: 0.82rem;
    color: #8392ab;
    font-weight: 600;
}

.ep-side-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ep-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: #f0f2f5;
    color: #67748e;
}

.ep-chip.is-active {
    background: rgba(130, 214, 22, 0.16);
    color: #4caf00;
}

.ep-chip.is-blocked,
.ep-chip.is-inactive {
    background: rgba(234, 6, 6, 0.1);
    color: #ea0606;
}

.ep-side-meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.ep-side-meta li {
    display: grid;
    gap: 0.12rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.ep-side-meta span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8392ab;
}

.ep-side-meta strong {
    font-size: 0.86rem;
    font-weight: 700;
    color: #344767;
    word-break: break-word;
}

.ep-side-links {
    display: grid;
    gap: 0.45rem;
}

.ep-side-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    border: 1px solid #eef0f4;
    background: #fff;
    color: #344767;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.ep-side-link svg {
    width: 16px;
    height: 16px;
    color: #7928ca;
    flex-shrink: 0;
}

.ep-side-link:hover {
    background: #faf5ff;
    border-color: #e9d5ff;
    transform: translateX(2px);
    color: #7928ca;
}

.ep-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #7928ca 55%, #ff0080 100%);
}

.ep-form-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.ep-form-head p {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    opacity: 0.92;
    line-height: 1.45;
    max-width: 420px;
    display: none;
}

.ep-form-body {
    padding: 1.15rem 1.2rem 1.3rem;
}

.ep-form .up-alert {
    margin-bottom: 0.9rem;
}

.ep-section {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border: 1px solid #eef0f4;
}

.ep-section-title {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
}

.ep-section-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.ep-section-ico svg {
    width: 17px;
    height: 17px;
}

.ep-section-ico.is-lock {
    background: linear-gradient(310deg, #67748e, #8392ab);
    box-shadow: 0 6px 14px rgba(103, 116, 142, 0.25);
}

.ep-section-ico.is-edit {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    box-shadow: 0 6px 14px rgba(33, 82, 255, 0.28);
}

.ep-section-title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #344767;
}

.ep-section-title p {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.ep-input-wrap {
    position: relative;
}

.ep-input-wrap .ep-input-ico {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #8392ab;
    pointer-events: none;
    display: grid;
    place-items: center;
}

.ep-input-wrap .ep-input-ico svg {
    width: 16px;
    height: 16px;
}

.ep-input-wrap input {
    padding-left: 2.5rem !important;
}

.ep .up-field input:focus {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 3px rgba(121, 40, 202, 0.12);
}

.ep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.ep-save {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ep-save svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 980px) {
    .ep {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ep-form-head {
        flex-direction: column;
    }

    .ep-actions {
        flex-direction: column;
    }

    .ep-actions .up-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Soft UI — Change Password */
.cpw {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.15rem;
    align-items: start;
}

.cpw-tips-card,
.cpw-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.cpw-side-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 0;
    padding: 1.05rem 1.15rem;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(125deg, #059669 0%, #10b981 55%, #34d399 100%);
    color: #fff;
    overflow: hidden;
}

.cpw-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cpw-orb.a {
    width: 110px;
    height: 110px;
    right: -24px;
    top: -36px;
    background: rgba(255, 255, 255, 0.14);
}

.cpw-orb.b {
    width: 70px;
    height: 70px;
    left: -16px;
    bottom: -22px;
    background: rgba(255, 255, 255, 0.1);
}

.cpw-kicker {
    position: relative;
    z-index: 1;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.cpw-shield {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
}

.cpw-shield svg {
    width: 24px;
    height: 24px;
}

.cpw-side-body {
    padding: 1.15rem 1.15rem 1.25rem;
    background: #fff;
}

.cpw-side-intro {
    margin-bottom: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid #f1f5f9;
}

.cpw-side-body h2 {
    margin: 0 0 0.35rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.cpw-side-intro>p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.cpw-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cpw-tips li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.cpw-tip-ico {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #ecfdf5;
    color: #059669;
}

.cpw-tip-ico svg {
    width: 16px;
    height: 16px;
}

.cpw-tips strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.cpw-tips small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.74rem;
    color: #94a3b8;
    line-height: 1.35;
}

.cpw-side-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.cpw-side-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    transition: background 0.15s, color 0.15s;
}

.cpw-side-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #94a3b8;
}

.cpw-side-link:hover {
    background: #f8fafc;
    color: #059669;
}

.cpw-side-link:hover svg {
    color: #059669;
}

.cpw-account-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.04);
}

.cpw-account-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #7928ca, #ff0080);
}

.cpw-account-card strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.cpw-account-card span {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.74rem;
    color: #94a3b8;
}

.cpw-form-head {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.cpw-form-head .up-panel-head-ico.is-teal {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.cpw-form-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.cpw-form .up-alert {
    margin-bottom: 0.9rem;
}

.cpw-field {
    margin-bottom: 1rem;
}

.cpw-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
}

.cpw-input-wrap {
    position: relative;
}

.cpw-input-wrap .cpw-input-ico {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.cpw-input-wrap .cpw-input-ico svg {
    width: 18px;
    height: 18px;
}

.cpw-input-wrap .up-password-wrap input {
    width: 100%;
    padding: 0.72rem 2.8rem 0.72rem 2.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.88rem;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.cpw-input-wrap .up-password-wrap input:focus {
    outline: none;
    border-color: #34d399;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

.cpw-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cpw-divider::before,
.cpw-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}

.cpw-strength {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.45rem;
}

.cpw-strength-bar {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: #f1f5f9;
    overflow: hidden;
}

.cpw-strength-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    transition: width 0.2s ease, background 0.2s ease;
}

.cpw-strength small {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    min-width: 5.5rem;
    text-align: right;
}

.cpw-match {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #059669;
}

.cpw-match svg {
    width: 14px;
    height: 14px;
}

.cpw-checklist {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0.75rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cpw-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.15s;
}

.cpw-checklist li.is-ok {
    color: #059669;
}

.cpw-check-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.15s;
}

.cpw-checklist li.is-ok .cpw-check-dot {
    background: #34d399;
}

.cpw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.cpw-save {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cpw-save svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 980px) {
    .cpw {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cpw-actions {
        flex-direction: column;
    }

    .cpw-actions .up-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Soft UI Soft ? Upload Photo */
.ph {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.15rem;
    align-items: start;
}

.ph-preview-card,
.ph-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ph-side-banner {
    position: relative;
    min-height: 96px;
    padding: 1rem 1.15rem 2.4rem;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(125deg, #2152ff 0%, #21d4fd 100%);
    color: #fff;
    overflow: hidden;
}

.ph-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ph-orb.a {
    width: 110px;
    height: 110px;
    right: -24px;
    top: -36px;
    background: rgba(255, 255, 255, 0.14);
}

.ph-orb.b {
    width: 70px;
    height: 70px;
    left: -16px;
    bottom: -22px;
    background: rgba(255, 255, 255, 0.1);
}

.ph-kicker {
    position: relative;
    z-index: 1;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.ph-side-body {
    padding: 0 1.15rem 1.25rem;
    margin-top: -2rem;
    position: relative;
    z-index: 1;
    text-align: center;
}

.ph-avatar {
    width: 118px;
    height: 118px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: #2152ff;
    background: linear-gradient(135deg, #fff 0%, #dbeafe 100%);
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(33, 82, 255, 0.25);
    overflow: hidden;
}

.ph-avatar.has-photo {
    background: #e2e8f0;
}

.ph-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ph-side-body h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #344767;
}

.ph-side-body>p {
    margin: 0.2rem 0 0.75rem;
    font-size: 0.82rem;
    color: #8392ab;
    font-weight: 600;
}

.ph-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.ph-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: #f0f2f5;
    color: #67748e;
}

.ph-chip.is-ok {
    background: rgba(130, 214, 22, 0.16);
    color: #4caf00;
}

.ph-chip.is-muted {
    background: rgba(103, 116, 142, 0.1);
    color: #67748e;
}

.ph-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    text-align: left;
}

.ph-tips li {
    font-size: 0.78rem;
    font-weight: 600;
    color: #67748e;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.ph-tips li::before {
    content: '\2713';
    color: #2152ff;
    margin-right: 0.4rem;
    font-weight: 800;
}

.ph-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #7928ca 0%, #ff0080 100%);
}

.ph-form-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.ph-form-head p {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    opacity: 0.92;
    line-height: 1.45;
    max-width: 420px;
    display: none;
}

.ph-form-body {
    padding: 1.15rem 1.2rem 1.3rem;
}

.ph-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 200px;
    padding: 1.5rem 1.2rem;
    border-radius: 16px;
    border: 2px dashed #d2d6da;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.ph-drop:hover,
.ph-drop.is-drag {
    border-color: #2152ff;
    background: #f0f5ff;
    box-shadow: 0 0 0 4px rgba(33, 82, 255, 0.08);
}

.ph-drop.has-file {
    border-style: solid;
    border-color: #21d4fd;
}

.ph-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.ph-drop-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.3);
    margin-bottom: 0.35rem;
}

.ph-drop-ico svg {
    width: 24px;
    height: 24px;
}

.ph-drop strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #344767;
}

.ph-drop small {
    font-size: 0.78rem;
    color: #8392ab;
    font-weight: 600;
    max-width: 280px;
}

.ph-file-name {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2152ff;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(33, 82, 255, 0.08);
}

.ph-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.ph-save {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ph-save svg {
    width: 16px;
    height: 16px;
}

.ph-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

.ph-remove-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eef0f4;
}

.ph-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #e11d48;
}

.ph-remove-btn:hover {
    background: #ffe4e6;
    color: #be123c;
}

.ph-remove-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 980px) {
    .ph {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ph-form-head {
        flex-direction: column;
    }

    .ph-actions {
        flex-direction: column;
    }

    .ph-actions .up-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Soft UI Soft ? KYC pages */
.kyc {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.15rem;
    align-items: start;
}

.kyc-side-card,
.kyc-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.kyc-side-head {
    padding: 1rem 1.1rem;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(125deg, #f59e0b 0%, #fbcf33 100%);
    color: #0b1120;
}

.kyc-side-head-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kyc-side-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(15, 23, 42, 0.14);
    color: #0b1120;
}

.kyc-side-ico svg {
    width: 20px;
    height: 20px;
}

.kyc-side-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.kyc-side-head h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0b1120;
    letter-spacing: -0.02em;
}

.kyc-check-list {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    display: grid;
    gap: 0.35rem;
}

.kyc-check-list a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    text-decoration: none;
    color: #344767;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.kyc-check-list li.is-current a,
.kyc-check-list a:hover {
    background: #fffbeb;
    border-color: #fde68a;
}

.kyc-check-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #cbd5e1;
}

.kyc-check-dot.is-ok {
    background: #17ad37;
    box-shadow: 0 0 0 3px rgba(23, 173, 55, 0.15);
}

.kyc-check-dot.is-wait {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.kyc-check-dot.is-bad {
    background: #ea0606;
    box-shadow: 0 0 0 3px rgba(234, 6, 6, 0.15);
}

.kyc-check-dot.is-muted {
    background: #94a3b8;
}

.kyc-check-copy {
    min-width: 0;
}

.kyc-check-copy strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
}

.kyc-check-copy small {
    font-size: 0.72rem;
    color: #8392ab;
    font-weight: 600;
}

.kyc-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 55%, #f59e0b 140%);
}

.kyc-form-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.kyc-form-head p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    line-height: 1.4;
    font-weight: 600;
}

.kyc-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.kyc-status-pill.is-ok {
    background: rgba(130, 214, 22, 0.25);
}

.kyc-status-pill.is-wait {
    background: rgba(251, 207, 51, 0.28);
    color: #fff7ed;
}

.kyc-status-pill.is-bad {
    background: rgba(234, 6, 6, 0.28);
}

.kyc-form-body {
    padding: 1.15rem 1.2rem 1.3rem;
}

.kyc-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.kyc-upload {
    display: grid;
    gap: 0.65rem;
}

.kyc-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 168px;
    padding: 1.35rem 1.25rem 1.2rem;
    border-radius: 18px;
    border: 1.5px dashed #e5b4b8;
    background:
        linear-gradient(95deg, #fff5f6 0%, #ffffff 42%, #ffffff 100%);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.kyc-drop:hover,
.kyc-drop.is-drag {
    border-color: #e11d48;
    background:
        linear-gradient(95deg, #fff1f2 0%, #ffffff 50%);
    box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.06);
}

.kyc-drop.has-file {
    border-style: solid;
    border-color: #fda4af;
    min-height: 200px;
    padding: 0.9rem;
}

.kyc-drop.is-readonly {
    cursor: default;
    pointer-events: none;
}

.kyc-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.kyc-drop-empty {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    max-width: 420px;
}

.kyc-drop-ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #fb7185, #e11d48);
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.28);
    margin-bottom: 0.45rem;
}

.kyc-drop-ico svg {
    width: 24px;
    height: 24px;
}

.kyc-drop-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1e293b;
    line-height: 1.35;
}

.kyc-drop-browse {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
}

.kyc-drop-browse em {
    font-style: normal;
    color: #e11d48;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
}

.kyc-drop-meta {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
}

.kyc-file-name {
    position: relative;
    z-index: 1;
    margin-top: 0.55rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #be123c;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(225, 29, 72, 0.08);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-drop-preview {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.kyc-drop-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kyc-drop-pdf {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    gap: 0.45rem;
    color: #f8fafc;
    background: linear-gradient(145deg, #1e293b, #334155);
}

.kyc-drop-pdf.is-hidden {
    display: none;
}

.kyc-drop-pdf svg {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    color: #fb7185;
}

.kyc-drop-pdf span {
    font-size: 0.82rem;
    font-weight: 700;
}

.kyc-view-doc {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #e11d48;
    text-decoration: none;
}

.kyc-view-doc svg {
    width: 16px;
    height: 16px;
}

.kyc-view-doc:hover {
    color: #be123c;
    text-decoration: underline;
}

.up-nav-toggle {
    position: relative;
}

.up-nav-toggle .up-nav-badge {
    margin-left: auto;
    margin-right: 0.15rem;
}

@media (max-width: 980px) {
    .kyc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .kyc-form-head {
        flex-direction: column;
    }
}

/* Multi UPI list ? table */
.upi-saved {
    margin-top: 1.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(131, 146, 171, 0.18);
}

.upi-add-form {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.upi-saved-head,
.upi-add-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.upi-saved-head h3,
.upi-add-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #344767;
}

.upi-saved-head span {
    font-size: 0.78rem;
    color: #8392ab;
    font-weight: 600;
}

.upi-add-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.upi-add-head p {
    margin: 0;
    font-size: 0.85rem;
    color: #8392ab;
}

.upi-empty {
    padding: 1rem 1.05rem;
    border-radius: 0.75rem;
    background: #f8f9fa;
    color: #67748e;
    font-size: 0.9rem;
}

.upi-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(131, 146, 171, 0.16);
    border-radius: 0.85rem;
    background: #fff;
}

.upi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    min-width: 640px;
}

.upi-table th {
    text-align: left;
    padding: 0.7rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.upi-table td {
    padding: 0.8rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.upi-table tbody tr:last-child td {
    border-bottom: 0;
}

.upi-table tbody tr:hover {
    background: #fafbfc;
}

.upi-table .kyc-status-pill {
    position: static;
    display: inline-flex;
    white-space: nowrap;
}

.upi-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    color: #5e72e4;
    word-break: break-all;
}

.upi-note {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #ea0606;
}

.upi-muted {
    color: #94a3b8;
    font-size: 0.8rem;
}

.upi-file-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #5e72e4;
    text-decoration: none;
}

.upi-file-link:hover {
    text-decoration: underline;
}

.upi-del-form {
    margin: 0;
}

.upi-del-btn {
    border: 0;
    background: rgba(234, 6, 6, 0.1);
    color: #ea0606;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.upi-del-btn:hover {
    background: rgba(234, 6, 6, 0.18);
}

/* Aadhaar page ? dual upload + address + preview */
.kyc-aadhar-layout {
    grid-template-columns: 250px minmax(0, 1fr) 200px;
}

.ad-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    margin-bottom: 1.15rem;
}

.ad-lab-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
    color: #8392ab;
    vertical-align: -2px;
}

.ad-lab-ico svg {
    width: 14px;
    height: 14px;
}

.ad-status-wrap {
    min-height: 46px;
    display: flex;
    align-items: center;
}

.ad-status {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #e9ecef;
    color: #67748e;
}

.ad-status.is-ok {
    background: rgba(130, 214, 22, 0.18);
    color: #4caf00;
}

.ad-status.is-wait {
    background: rgba(251, 207, 51, 0.28);
    color: #c79100;
}

.ad-status.is-bad {
    background: rgba(234, 6, 6, 0.12);
    color: #ea0606;
}

.ad-status.is-muted {
    background: #e9ecef;
    color: #67748e;
}

.ad-upload-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin-bottom: 1.35rem;
}

.ad-side-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: #67748e;
    margin-bottom: 0.45rem;
}

.ad-drop {
    min-height: 150px;
    padding: 1.1rem 0.9rem;
}

.ad-drop .kyc-drop-title {
    font-size: 0.92rem;
}

.ad-drop .kyc-drop-ico {
    width: 46px;
    height: 46px;
    margin-bottom: 0.3rem;
}

.ad-drop .kyc-drop-ico svg {
    width: 20px;
    height: 20px;
}

.ad-drop.has-file {
    min-height: 168px;
}

.ad-addr-section {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

.ad-addr-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dotted #d2d6da;
    color: #8392ab;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ad-addr-head svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ad-addr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    margin-top: 0.85rem;
}

.ad-field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #94a3b8;
    font-weight: 600;
}

.ad-preview-col {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.ad-preview-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    text-align: center;
}

.ad-preview-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    margin-bottom: 0.55rem;
}

.ad-preview-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    padding: 0;
    overflow: hidden;
    cursor: zoom-in;
    display: grid;
    place-items: center;
}

.ad-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ad-preview-empty {
    display: grid;
    place-items: center;
    gap: 0.25rem;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
}

.ad-preview-empty svg {
    width: 28px;
    height: 28px;
    opacity: 0.7;
}

.ad-preview-card>small {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 600;
}

.ad-lightbox {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(15, 23, 42, 0.82);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.ad-lightbox[hidden] {
    display: none !important;
}

.ad-lightbox img {
    max-width: min(920px, 94vw);
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    background: #fff;
}

.ad-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .kyc-aadhar-layout {
        grid-template-columns: 1fr;
    }

    .ad-preview-col {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {

    .ad-top-grid,
    .ad-upload-row,
    .ad-addr-grid,
    .ad-preview-col {
        grid-template-columns: 1fr;
    }
}


/* ========== My Team pages (Soft UI Soft) ========== */
.team-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-bottom: 1.15rem;
}

.team-stat {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #fff;
    border-radius: 16px;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef0f4;
    position: relative;
    overflow: hidden;
}

.team-stat::after {
    content: "";
    position: absolute;
    right: -12px;
    top: -16px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    opacity: 0.1;
    pointer-events: none;
}

.team-stat.g-purple::after {
    background: #7928ca;
}

.team-stat.g-green::after {
    background: #17ad37;
}

.team-stat.g-orange::after {
    background: #f59e0b;
}

.team-stat.g-blue::after {
    background: #2152ff;
}

.team-stat.g-gold::after {
    background: #f59e0b;
}

.team-stat-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.team-stat-ico svg {
    width: 20px;
    height: 20px;
}

.team-stat.g-purple .team-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.team-stat.g-green .team-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.team-stat.g-orange .team-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.team-stat.g-blue .team-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.team-stat.g-gold .team-stat-ico {
    background: linear-gradient(310deg, #f59e0b, #fde047);
    color: #0b1120;
}

.team-stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8392ab;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.team-stat strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.team-stat strong.is-sm {
    font-size: 1.05rem;
}

.team-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.team-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

.team-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    color: #fff;
}

.team-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.team-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}

.team-banner-ico svg {
    width: 20px;
    height: 20px;
}

.team-banner.is-purple {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #7928ca 0%, #ff0080 100%);
}

.team-banner.is-blue {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.is-gold {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.team-banner.is-gold {
    /* background: linear-gradient(135deg, #0f1729 0%, #1a2540 55%, #243352 100%); */
}

.team-banner.is-level {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #7928ca 100%);
}

.team-banner-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.team-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.team-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
    font-weight: 600;
}

.team-banner-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.74rem;
    font-weight: 700;
    align-items: center;
}

.team-banner-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: -1px;
}

.team-banner-legend .dot.root {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}

.team-banner-legend .dot.filled {
    background: #2152ff;
}

.team-banner-legend .dot.noplan {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.team-banner-legend .dot.vacant {
    background: transparent;
    border: 1.5px dashed #cbd5e1;
}

.level-banner-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.team-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.team-search input,
.team-search select {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid #e9ecef;
    border-radius: 10px;
    font: inherit;
    font-size: 0.86rem;
    background: #fff;
    color: #344767;
    min-width: 140px;
}

.team-search.on-dark input,
.team-search.on-dark select {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.team-search.on-dark input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.team-search.on-dark select option {
    color: #344767;
}

.team-btn-ghost {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.team-leg-tabs {
    display: flex;
    gap: 0.4rem;
    padding: 0.85rem 1.15rem 0;
    flex-wrap: wrap;
}

.team-leg-tabs a {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    color: #67748e;
    background: #f1f3f5;
    transition: background 0.15s, color 0.15s;
}

.team-leg-tabs a.is-on {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

.team-list {
    padding: 0.75rem 1rem 1.1rem;
    display: grid;
    gap: 0.55rem;
}

.team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #eef0f4;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    transition: box-shadow 0.15s, transform 0.15s;
}

.team-row:hover {
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.team-row.leg-l {
    border-left: 3px solid #17ad37;
}

.team-row.leg-r {
    border-left: 3px solid #f59e0b;
}

.team-row-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.team-idx {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #67748e;
    background: #f1f3f5;
    flex-shrink: 0;
}

.team-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #2152ff, #21d4fd);
    flex-shrink: 0;
    overflow: hidden;
}

.team-ava.sm {
    width: 38px;
    height: 38px;
    font-size: 0.75rem;
}

.team-ava.has-photo {
    background: #e2e8f0;
    padding: 0;
}

.team-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.team-row-copy {
    min-width: 0;
}

.team-row-copy strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: #344767;
}

.team-row-copy span {
    display: block;
    font-size: 0.76rem;
    color: #8392ab;
    font-weight: 600;
}

.team-phone {
    color: #67748e !important;
}

.team-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.team-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
}

.team-chip.soft {
    background: #f1f3f5;
    color: #67748e;
}

.team-chip.leg-l {
    background: rgba(23, 173, 55, 0.12);
    color: #17ad37;
}

.team-chip.leg-r {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.team-chip.bv-chip {
    background: rgba(121, 40, 202, 0.12);
    color: #7928ca;
    gap: 0.2rem;
    font-weight: 700;
}

.team-chip.bv-chip.is-positive {
    background: rgba(23, 173, 55, 0.14);
    color: #118128;
    border: 1px solid rgba(23, 173, 55, 0.28);
}

.team-chip.bv-chip.is-positive strong {
    font-weight: 800;
    color: #0f6e22;
}

.team-chip.bv-chip.is-zero {
    background: #f1f3f5;
    color: #8392ab;
    border: 1px solid #e2e8f0;
}

.team-row-meta time {
    font-size: 0.72rem;
    font-weight: 700;
    color: #8392ab;
}

.team-empty-state {
    text-align: center;
    padding: 2.2rem 1.25rem;
    color: #8392ab;
}

.team-empty-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f1f3f5;
    color: #94a3b8;
}

.team-empty-ico svg {
    width: 26px;
    height: 26px;
}

.team-empty-state strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #344767;
}

.team-empty-state p {
    margin: 0.35rem auto 0;
    max-width: 360px;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
}

.team-pill {
    display: inline-flex;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: capitalize;
    background: #e9ecef;
    color: #67748e;
}

.team-pill.is-ok {
    background: rgba(130, 214, 22, 0.16);
    color: #4caf00;
}

.team-pill.is-wait {
    background: rgba(251, 207, 51, 0.25);
    color: #c79100;
}

.team-pill.is-bad {
    background: rgba(234, 6, 6, 0.12);
    color: #ea0606;
}

.team-level {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
    font-size: 0.75rem;
    font-weight: 800;
}

.team-level.big {
    min-width: 52px;
    font-size: 1rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.team-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.team-max-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #67748e;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.8rem;
    padding: 1rem 1.15rem 1.2rem;
}

.level-tile {
    border: 1px solid #eef0f4;
    border-radius: 14px;
    padding: 0.9rem 0.95rem;
    background: linear-gradient(180deg, #fafbfc, #fff);
    border-left: 3px solid #94a3b8;
    transition: transform 0.15s, box-shadow 0.15s;
}

.level-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.level-tile.leg-l {
    border-left-color: #17ad37;
}

.level-tile.leg-r {
    border-left-color: #f59e0b;
}

/* Repurchase level tree (sponsor org chart) */
.rlt-wrap { padding: 1rem; }
.rlt-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.6rem; margin-bottom: 0.75rem; font-size: 0.8rem; color: #67748e;
}
.rlt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-weight: 700; }
.rlt-crumbs a { color: #7c3aed; text-decoration: none; }
.rlt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-weight: 600; }
.rlt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.rlt-dot.has-rep { background: #17ad37; }
.rlt-dot.no-rep { background: #cbd5e1; }
.rlt-scroll { overflow-x: auto; padding: 0.5rem 0 1rem; }
.rlt-tree, .rlt-tree ul {
    position: relative; display: flex; justify-content: center;
    margin: 0; padding: 22px 0 0; list-style: none;
}
.rlt-tree { padding-top: 0; width: max-content; min-width: 100%; }
.rlt-tree li {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 22px 6px 0; list-style: none;
}
.rlt-tree > li { padding-top: 0; }
.rlt-tree li::before, .rlt-tree li::after {
    content: ''; position: absolute; z-index: 0; top: 0; right: 50%;
    width: 50%; height: 22px; border-top: 2px solid #cbd5e1;
}
.rlt-tree li::after { right: auto; left: 50%; border-left: 2px solid #cbd5e1; }
.rlt-tree li:only-child::before, .rlt-tree li:only-child::after { display: none; }
.rlt-tree li:only-child { padding-top: 0; }
.rlt-tree li:first-child::before, .rlt-tree li:last-child::after { border: 0 none; }
.rlt-tree li:last-child::before { border-right: 2px solid #cbd5e1; border-radius: 0 8px 0 0; }
.rlt-tree li:first-child::after { border-radius: 8px 0 0 0; }
.rlt-tree ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 0; height: 22px; border-left: 2px solid #cbd5e1;
}
.rlt-tree li.is-collapsed > ul { display: none; }
.rlt-card {
    position: relative; z-index: 1; width: 190px; padding: 0.75rem 0.7rem 0.6rem;
    border: 1px solid #eef0f4; border-top: 3px solid #94a3b8; border-radius: 14px;
    background: #fff; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); text-align: left;
}
.rlt-card.has-rep { border-top-color: #17ad37; }
.rlt-card.no-rep { opacity: 0.65; }
.rlt-card.is-me { border-top-color: #7c3aed; background: linear-gradient(180deg, #f5f3ff, #fff); }
.rlt-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 0.1rem 0.5rem; border-radius: 999px; background: #1e293b; color: #fff;
    font-size: 0.66rem; font-weight: 700; white-space: nowrap;
    z-index: 2; box-shadow: 0 0 0 3px #fff;
}
.rlt-badge.is-me { background: #7c3aed; }
.rlt-head { display: flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.rlt-head:hover strong { color: #7c3aed; }
.rlt-name { display: flex; flex-direction: column; min-width: 0; }
.rlt-name strong { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlt-name small { font-size: 0.7rem; color: #67748e; }
.rlt-status { margin-top: 0.4rem; }
.rlt-meta {
    display: flex; justify-content: space-between; gap: 0.3rem; margin-top: 0.35rem;
    font-size: 0.68rem; color: #67748e;
}
.rlt-meta b { color: #1e293b; }
.rlt-meta.is-empty { justify-content: center; font-weight: 700; }
.rlt-toggle {
    display: block; width: 100%; margin-top: 0.5rem; padding: 0.2rem 0;
    border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc;
    color: #475569; font-size: 0.7rem; font-weight: 700; text-align: center;
    text-decoration: none; cursor: pointer;
}
.rlt-toggle:hover { border-color: #7c3aed; color: #7c3aed; }
.rlt-tip { margin: 0.5rem 0 0; font-size: 0.75rem; color: #67748e; text-align: center; }

.level-tile-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.level-tile-name {
    min-width: 0;
    flex: 1;
}

.level-tile-name strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #344767;
    margin-bottom: 0.25rem;
}

.level-tile-meta {
    display: grid;
    gap: 0.1rem;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: #8392ab;
    font-weight: 600;
}

.level-tile-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #67748e;
}

.leg-chip {
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f1f3f5;
}

.ut-panel .team-banner {
    border-bottom: 0;
}

.ut-board {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(33, 82, 255, 0.06), transparent 60%),
        #f8fafc;
    border-top: 1px solid #eef0f4;
}

.ut-scroll {
    overflow: auto;
    padding: 1.75rem 1rem 2.2rem;
    min-height: 340px;
}

.ut-tree {
    display: inline-block;
    min-width: 100%;
    text-align: center;
}

.ut-tree ul {
    padding-top: 24px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin: 0;
}

.ut-tree li {
    list-style-type: none;
    text-align: center;
    position: relative;
    padding: 24px 12px 0 12px;
}

.ut-tree li::before,
.ut-tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #cbd5e1;
    width: 50%;
    height: 24px;
}

.ut-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #cbd5e1;
}

.ut-tree li:only-child::before,
.ut-tree li:only-child::after {
    display: none;
}

.ut-tree li:only-child {
    padding-top: 0;
}

.ut-tree li:first-child::before,
.ut-tree li:last-child::after {
    border: 0 none;
}

.ut-tree li:last-child::before {
    border-right: 2px solid #cbd5e1;
    border-radius: 0 8px 0 0;
}

.ut-tree li:first-child::after {
    border-radius: 8px 0 0 0;
}

.ut-tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #cbd5e1;
    width: 0;
    height: 24px;
}

.ut-item-node {
    display: inline-block;
    vertical-align: top;
}

.ut-node {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    min-width: 100px;
    padding: 0.65rem 0.5rem 0.55rem;
    border-radius: 14px;
    text-decoration: none;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.ut-node.filled:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
    border-color: #93c5fd;
}

.ut-node.filled.is-root {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fffbeb, #fff);
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.2);
}

.ut-node.filled.is-no-plan {
    border-color: #ef4444;
    background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.18);
}

.ut-node.filled.is-no-plan:hover {
    border-color: #dc2626;
    box-shadow: 0 14px 26px rgba(239, 68, 68, 0.22);
}

.ut-node.filled.is-no-plan .ut-avatar {
    background: linear-gradient(145deg, #ef4444, #f87171);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.ut-node.filled.is-no-plan .ut-name,
.ut-node.filled.is-no-plan .ut-code {
    color: #b91c1c;
}

.ut-node.filled.is-no-plan.is-root {
    border-color: #ef4444;
    background: linear-gradient(180deg, #fef2f2, #fff);
}

.ut-node.filled.is-inactive {
    border-color: #fda4af;
    opacity: 0.85;
}

.ut-plan-tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #dc2626;
}

.ut-node.vacant {
    border-style: dashed;
    background: #f8fafc;
    color: #94a3b8;
    cursor: default;
    box-shadow: none;
}

.ut-node.vacant.is-add {
    cursor: pointer;
    color: #64748b;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.ut-node.vacant.is-add:hover {
    transform: translateY(-3px);
    border-color: #94a3b8;
    color: #0f172a;
    background: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
}

.ut-tree-tip {
    margin: 0;
    padding: 0.85rem 1.15rem 1.15rem;
    font-size: 0.84rem;
    color: #64748b;
}

/* User Tree Node Hover Tooltip */
.tv-tooltip {
    position: fixed;
    z-index: 1300;
    min-width: 250px;
    max-width: 310px;
    background: #0f172a;
    color: #fff;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    pointer-events: none;
    font-size: 0.8rem;
    line-height: 1.4;
}

.tv-tooltip[hidden] {
    display: none !important;
}

.tv-tooltip .tt-name {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    color: #fff;
}

.tv-tooltip .tt-id {
    color: #94a3b8;
    margin-bottom: 0.65rem;
    font-size: 0.75rem;
}

.tv-tooltip .tt-alert {
    margin-bottom: 0.55rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    background: rgba(220, 53, 69, 0.2);
    color: #fecaca;
    font-size: 0.72rem;
    font-weight: 700;
}

.tv-tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.28rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tv-tooltip .tt-row span:first-child {
    color: #94a3b8;
}

.tv-tooltip .tt-row span:last-child {
    font-weight: 600;
    text-align: right;
    color: #f8fafc;
}

.tv-tooltip .tt-link {
    display: inline-block;
    margin-top: 0.65rem;
    color: #93c5fd;
    font-weight: 600;
    pointer-events: auto;
    text-decoration: none;
}

.tv-tooltip .tt-link:hover {
    text-decoration: underline;
}

.ut-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.ut-modal[hidden] {
    display: none !important;
}

.ut-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.ut-modal-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    border: 1px solid #e2e8f0;
}

.ut-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.ut-modal-head h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    color: #0f172a;
}

.ut-modal-sub {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.ut-modal-x {
    border: 0;
    background: #f1f5f9;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
    color: #475569;
    cursor: pointer;
}

.ut-modal-body {
    padding: 1.15rem 1.25rem 1.25rem;
}

.ut-slot-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 700;
}

.ut-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ut-form-grid .form-group {
    margin: 0;
}

.ut-form-grid label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.35rem;
}

.ut-form-grid input,
.ut-form-grid select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
}

.ut-field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.ut-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

body.ut-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .ut-form-grid {
        grid-template-columns: 1fr;
    }
}

.ut-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2152ff, #21d4fd);
    color: #fff;
    box-shadow: 0 4px 10px rgba(33, 82, 255, 0.25);
}

.ut-avatar svg {
    width: 18px;
    height: 18px;
}

.ut-avatar.vacant-ico {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
}

.ut-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #344767;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ut-code {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8392ab;
}

.ut-level {
    font-size: 0.62rem;
    font-weight: 800;
    color: #2152ff;
    letter-spacing: 0.04em;
}

@media (max-width: 980px) {
    .team-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .team-stats {
        grid-template-columns: 1fr;
    }

    .team-banner {
        flex-direction: column;
    }

    .team-row-meta {
        width: 100%;
        padding-left: 2.3rem;
    }
}

/* ===== Withdrawal (Soft UI Soft) ===== */
.wd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.wd-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.wd-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.wd-stat.g-purple::after {
    background: #7928ca;
}

.wd-stat.g-green::after {
    background: #17ad37;
}

.wd-stat.g-orange::after {
    background: #f59e0b;
}

.wd-stat.g-blue::after {
    background: #2152ff;
}

.wd-stat-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}

.wd-stat-ico svg {
    width: 20px;
    height: 20px;
}

.wd-stat.g-purple .wd-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.wd-stat.g-green .wd-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wd-stat.g-orange .wd-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.wd-stat.g-blue .wd-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.wd-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.wd-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wd-stat strong.is-sm {
    font-size: 1.05rem;
}

.wd-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.wd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.wd-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

.wd-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.wd-banner.is-report {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.wd-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wd-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.wd-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.wd-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
    font-weight: 600;
}

.wd-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.wd-banner-ico svg {
    width: 20px;
    height: 20px;
}

.wd-body {
    padding: 1.15rem 1.25rem 1.3rem;
}

.wd-form {
    display: grid;
    gap: 1.05rem;
}

.wd-form-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.wd-form-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(33, 82, 255, 0.06), rgba(33, 212, 253, 0.08));
    border: 1px solid rgba(33, 82, 255, 0.12);
}

.wd-form-chip.is-min {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 207, 51, 0.1));
    border-color: rgba(245, 158, 11, 0.18);
}

.wd-form-chip.is-max {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(45, 212, 191, 0.1));
    border-color: rgba(13, 148, 136, 0.18);
}

.wd-form-chip-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    flex-shrink: 0;
}

.wd-form-chip.is-min .wd-form-chip-ico {
    background: linear-gradient(135deg, #f53939, #fbcf33);
}

.wd-form-chip.is-max .wd-form-chip-ico {
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
}

.wd-form-chip-ico svg {
    width: 17px;
    height: 17px;
}

.wd-form-chip small {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.wd-form-chip strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.98rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

.wd-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.wd-field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.wd-field.is-full {
    grid-column: 1 / -1;
}

.wd-field-label,
.wd-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #344767;
}

.wd-hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2152ff;
    background: rgba(33, 82, 255, 0.08);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.wd-hint.is-ok {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.wd-amount {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wd-amount:focus-within {
    border-color: #2152ff;
    box-shadow: 0 0 0 4px rgba(33, 82, 255, 0.12);
}

.wd-amount-prefix {
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #67748e;
    background: #f8fafc;
    border-right: 1px solid #eef0f4;
}

.wd-amount input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    padding: 0.85rem 0.75rem;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
    background: transparent;
}

.wd-amount input:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.wd-amount-max {
    border: 0;
    border-left: 1px solid #eef0f4;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    color: #fff;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0 0.9rem;
    cursor: pointer;
    transition: filter 0.15s;
}

.wd-amount-max:hover:not(:disabled) {
    filter: brightness(1.06);
}

.wd-amount-max:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wd-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 0.45rem;
}

.wd-method {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.45rem 0.65rem;
    border-radius: 12px;
    border: 1.5px solid #e9ecef;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.wd-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wd-method-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #67748e;
    background: #f1f5f9;
    transition: background 0.15s, color 0.15s;
}

.wd-method-ico svg {
    width: 16px;
    height: 16px;
}

.wd-method-text {
    font-size: 0.72rem;
    font-weight: 800;
    color: #67748e;
    line-height: 1.2;
}

.wd-method:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.wd-method.is-on,
.wd-method:has(input:checked) {
    border-color: #2152ff;
    background: linear-gradient(180deg, rgba(33, 82, 255, 0.06), #fff);
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.12);
}

.wd-method.is-on .wd-method-ico,
.wd-method:has(input:checked) .wd-method-ico {
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
}

.wd-method.is-on .wd-method-text,
.wd-method:has(input:checked) .wd-method-text {
    color: #2152ff;
}

.wd-textarea-wrap {
    border: 1.5px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wd-textarea-wrap:focus-within {
    border-color: #2152ff;
    box-shadow: 0 0 0 4px rgba(33, 82, 255, 0.12);
}

.wd-textarea-wrap textarea {
    display: block;
    width: 100%;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    resize: vertical;
    min-height: 110px;
    padding: 0.85rem 0.95rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #344767;
    background: transparent;
}

.wd-textarea-wrap textarea:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.wd-form-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.35rem;
    border-top: 1px dashed #e9ecef;
}

.wd-break {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
}

.wd-break-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #67748e;
}

.wd-break-row strong {
    font-weight: 800;
    color: #344767;
}

.wd-break-row.is-net {
    margin-top: 0.25rem;
    padding-top: 0.45rem;
    border-top: 1px dashed #e9ecef;
    font-weight: 700;
    color: #344767;
}

.wd-break-row.is-net strong {
    color: #2152ff;
    font-size: 0.95rem;
}

.wd-break .wd-form-note {
    max-width: none;
    margin-top: 0.35rem;
}

.wd-form-note {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #8392ab;
    max-width: 280px;
    line-height: 1.4;
}

.wd-form-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.wd-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wd-submit svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 720px) {
    .wd-form-grid {
        grid-template-columns: 1fr;
    }

    .wd-form-strip {
        grid-template-columns: 1fr;
    }

    .wd-form-foot {
        align-items: stretch;
    }

    .wd-form-actions {
        width: 100%;
    }

    .wd-form-actions .up-btn {
        flex: 1;
        justify-content: center;
    }
}

.wd-side {
    display: grid;
    gap: 0.85rem;
}

.wd-guide {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.wd-guide-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    color: #fff;
}

.wd-guide-head.is-flow {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.wd-guide-head.is-tips {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #f53939 0%, #fbcf33 100%);
}

.wd-guide-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.wd-guide-ico svg {
    width: 20px;
    height: 20px;
}

.wd-guide-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.wd-guide-head h3 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.wd-timeline {
    list-style: none;
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    display: grid;
    gap: 0;
}

.wd-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0 0 1rem;
}

.wd-timeline li:last-child {
    padding-bottom: 0;
}

.wd-timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #c7d2fe 0%, #e2e8f0 100%);
}

.wd-tl-num {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    box-shadow: 0 8px 16px rgba(33, 82, 255, 0.25);
}

.wd-timeline li:nth-child(2) .wd-tl-num {
    background: linear-gradient(135deg, #f59e0b, #fbcf33);
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.28);
}

.wd-timeline li:nth-child(3) .wd-tl-num {
    background: linear-gradient(135deg, #7928ca, #ff0080);
    box-shadow: 0 8px 16px rgba(121, 40, 202, 0.25);
}

.wd-timeline li:nth-child(4) .wd-tl-num {
    background: linear-gradient(135deg, #17ad37, #98ec2d);
    box-shadow: 0 8px 16px rgba(23, 173, 55, 0.25);
}

.wd-timeline strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.25;
}

.wd-timeline p {
    margin: 0.18rem 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #8392ab;
    font-weight: 600;
}

.wd-tip-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem 0.95rem 0.35rem;
    display: grid;
    gap: 0.55rem;
}

.wd-tip-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
}

.wd-tip-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.wd-tip-ico svg {
    width: 18px;
    height: 18px;
}

.wd-tip-ico.t-orange {
    background: linear-gradient(135deg, #f53939, #fbcf33);
}

.wd-tip-ico.t-blue {
    background: linear-gradient(135deg, #2152ff, #21d4fd);
}

.wd-tip-ico.t-green {
    background: linear-gradient(135deg, #17ad37, #98ec2d);
}

.wd-tip-list strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.25;
}

.wd-tip-list p {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #8392ab;
    font-weight: 600;
}

.wd-guide-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.55rem 0.95rem 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(118deg, #0f172a 0%, #334155 55%, #b45309 140%);
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}

.wd-guide-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.wd-guide-cta strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
}

.wd-guide-cta small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    opacity: 0.88;
    font-weight: 600;
}

.wd-guide-cta-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.95rem;
    font-weight: 700;
}

/* legacy side cards (report page / fallbacks) */
.wd-side-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    padding: 1.1rem 1.15rem;
}

.wd-side-card.soft {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
    box-shadow: none;
}

.wd-side-card h3 {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #344767;
}

.wd-steps {
    margin: 0;
    padding-left: 1.15rem;
    color: #67748e;
    font-size: 0.82rem;
    line-height: 1.65;
}

.wd-tips {
    margin: 0;
    padding-left: 1.05rem;
    color: #67748e;
    font-size: 0.82rem;
    line-height: 1.65;
}

.wd-side-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2152ff;
    text-decoration: none;
}

.wd-side-link:hover {
    text-decoration: underline;
}

.wd-filters select {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    font: inherit;
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    min-width: 150px;
}

.wd-filters select option {
    color: #344767;
}

.wd-table-wrap {
    overflow-x: auto;
}

.wd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.wd-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.wd-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f3f5;
    color: #344767;
    vertical-align: top;
}

.wd-table tbody tr:hover {
    background: #fafbfc;
}

.wd-amt {
    color: #2152ff;
    font-weight: 800;
    white-space: nowrap;
}

.wd-account {
    max-width: 200px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #67748e;
    white-space: pre-wrap;
}

.wd-note {
    color: #8392ab;
    max-width: 140px;
    display: inline-block;
}

.wd-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.wd-pill.is-wait {
    background: #fff7ed;
    color: #c2410c;
}

.wd-pill.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.wd-pill.is-bad {
    background: #fef2f2;
    color: #b91c1c;
}

.wd-pill.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.wd-pill.is-info {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Support tickets */
.st-new-card, .st-list-card { margin-bottom: 1.25rem; }
.st-new-card .up-panel-head, .st-list-card .up-panel-head { flex-wrap: wrap; }
.up-panel-head p.st-head-sub { display: block; }
.st-body { padding: 1.1rem 1.2rem 1.2rem; }
.st-list-card .wd-table-wrap { margin: 0; }
.st-list-card .st-pages { padding: 0 1rem 1rem; }
.up-panel-head .st-tabs a { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.up-panel-head .st-tabs a:hover { background: rgba(255, 255, 255, 0.28); }
.up-panel-head .st-tabs a.is-on { background: #fff; color: #2152ff; border-color: #fff; }
.up-panel-head .st-x { background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.up-panel-head .st-x:hover { background: rgba(255, 255, 255, 0.32); }
.st-card-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.9rem;
}
.st-card-head h2 { margin: 0; font-size: 1.05rem; }
.st-card-head p { margin: 0.2rem 0 0; font-size: 0.82rem; color: #67748e; }
.st-x {
    border: 0; background: #f1f5f9; width: 32px; height: 32px; border-radius: 50%;
    font-size: 1.2rem; line-height: 1; cursor: pointer; color: #475569;
}
.st-form { display: grid; gap: 1rem; }
.st-type-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.st-type-pill { position: relative; cursor: pointer; }
.st-type-pill input { position: absolute; opacity: 0; pointer-events: none; }
.st-type-pill span {
    display: inline-block; padding: 0.55rem 1rem; border: 1.5px solid #e5e7eb; border-radius: 999px;
    font-size: 0.85rem; font-weight: 700; color: #475569; background: #fff; transition: all 0.15s;
}
.st-type-pill input:checked + span { color: #fff; border-color: transparent; }
.st-type-pill.is-complaint input:checked + span { background: #dc2626; }
.st-type-pill.is-support input:checked + span { background: #2563eb; }
.st-type-pill.is-feedback input:checked + span { background: #16a34a; }
.st-type-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); }
.st-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.st-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.st-tabs a {
    padding: 0.35rem 0.75rem; border-radius: 999px; background: #f1f5f9; color: #475569;
    font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.st-tabs a.is-on { background: #1e293b; color: #fff; }
.st-row-new td { background: #f0fdf4; }
.st-new-dot {
    display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: #16a34a; color: #fff; font-size: 0.66rem; font-weight: 700;
}
.st-prio { font-size: 0.75rem; font-weight: 700; }
.st-prio.is-high { color: #dc2626; }
.st-prio.is-medium { color: #d97706; }
.st-prio.is-low { color: #64748b; }
.st-prio-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem;
    border-radius: 999px; border: 1px solid transparent; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.st-prio-badge i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-prio-badge.is-high { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.st-prio-badge.is-medium { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.st-prio-badge.is-low { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.st-pages { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 1rem; }
.st-pages a, .st-pages span {
    min-width: 32px; padding: 0.3rem 0.6rem; border-radius: 8px; text-align: center;
    background: #f1f5f9; color: #475569; font-weight: 700; font-size: 0.8rem; text-decoration: none;
}
.st-pages .is-on { background: #1e293b; color: #fff; }
.st-detail { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 1.25rem; align-items: start; }
.st-thread-card { padding: 1.1rem 1.2rem; }
.st-thread { display: flex; flex-direction: column; gap: 0.85rem; max-height: 60vh; overflow-y: auto; padding: 0.25rem; }
.st-msg { max-width: 85%; padding: 0.75rem 0.9rem; border-radius: 14px; border: 1px solid #eef0f4; }
.st-msg.is-member { align-self: flex-end; background: #eff6ff; border-color: #dbeafe; border-bottom-right-radius: 4px; }
.st-msg.is-admin { align-self: flex-start; background: #f8fafc; border-bottom-left-radius: 4px; }
.st-msg-head { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.35rem; font-size: 0.78rem; }
.st-msg-head small { color: #94a3b8; }
.st-msg-body { font-size: 0.88rem; line-height: 1.55; color: #1e293b; word-wrap: break-word; }
.st-attach {
    display: inline-flex; gap: 0.3rem; margin-top: 0.5rem; padding: 0.3rem 0.6rem; border-radius: 8px;
    background: #fff; border: 1px dashed #cbd5e1; font-size: 0.78rem; font-weight: 600; color: #2563eb; text-decoration: none;
}
.st-reply { display: grid; gap: 0.6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eef0f4; }
.st-reply-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.st-reply-attach { flex: 1 1 320px; min-width: 0; }
.st-reply-actions { display: flex; align-items: center; gap: 0.6rem; }
.st-reply-actions .up-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.st-upload { position: relative; }
.st-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.st-upload-drop {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem;
    border: 1.5px dashed #c7d2fe; border-radius: 14px; background: #f8faff;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.st-upload-drop:hover, .st-upload-drop.is-over { border-color: #2152ff; background: #eef2ff; }
.st-upload-input:focus-visible + .st-upload-drop { box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.2); }
.st-upload-ico {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(120deg, #2152ff, #21d4fd); color: #fff;
}
.st-upload-ico svg { width: 20px; height: 20px; }
.st-upload-text { display: flex; flex-direction: column; font-size: 0.84rem; color: #475569; }
.st-upload-text strong { color: #2152ff; }
.st-upload-text small { margin-top: 0.15rem; font-size: 0.72rem; color: #94a3b8; }
.st-upload-file {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem;
    border: 1.5px solid #e2e8f0; border-radius: 14px; background: #fff;
}
.st-upload-file[hidden], .st-upload-drop[hidden], .st-upload-err[hidden] { display: none; }
.st-upload-thumb {
    display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; overflow: hidden;
    border-radius: 10px; background: #f1f5f9;
}
.st-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-upload-thumb.is-pdf { background: #fee2e2; color: #b91c1c; font-size: 0.72rem; font-weight: 800; }
.st-upload-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-upload-meta strong { font-size: 0.84rem; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-upload-meta small { font-size: 0.72rem; color: #94a3b8; }
.st-upload-remove {
    flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%;
    background: #fee2e2; color: #b91c1c; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.st-upload-remove:hover { background: #fecaca; }
.st-upload-err { margin: 0.4rem 0 0; font-size: 0.76rem; font-weight: 600; color: #dc2626; }
@media (max-width: 600px) {
    .st-reply-actions { width: 100%; }
    .st-reply-actions .up-btn { flex: 1; justify-content: center; }
}
.st-reply-note { margin: 0; padding: 0.5rem 0.75rem; border-radius: 10px; background: #fff7ed; color: #c2410c; font-size: 0.8rem; font-weight: 600; }
.st-hint { color: #94a3b8; font-size: 0.74rem; }
.st-info-card { padding: 0; position: sticky; top: 90px; }
.st-info-hero {
    margin: 1rem 1rem 0.5rem; padding: 0.9rem 1rem; border-radius: 14px;
    background: linear-gradient(135deg, #f5f8ff, #eef6ff); border: 1px solid #dbe5ff;
}
.st-info-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
.st-info-no { display: block; margin: 0.15rem 0 0.6rem; font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; color: #1e293b; }
.st-info-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.st-type-tag {
    display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; color: #fff; background: #64748b;
}
.st-type-tag.is-complaint { background: #dc2626; }
.st-type-tag.is-support { background: #2563eb; }
.st-type-tag.is-feedback { background: #16a34a; }
.st-info-list { list-style: none; margin: 0; padding: 0.25rem 1rem; }
.st-info-list li {
    display: grid; grid-template-columns: 30px auto 1fr; align-items: center; gap: 0.6rem;
    padding: 0.65rem 0; border-bottom: 1px dashed #e2e8f0; font-size: 0.82rem;
}
.st-info-list li:last-child { border-bottom: 0; }
.st-info-ico {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    background: #eef2ff; color: #2152ff;
}
.st-info-ico svg { width: 15px; height: 15px; }
.st-info-key { color: #67748e; font-weight: 600; }
.st-info-val { color: #1e293b; font-weight: 700; text-align: right; word-break: break-word; }
.st-info-note {
    margin: 0.25rem 1rem 1rem; padding: 0.7rem 0.85rem; border-radius: 12px;
    background: #f8fafc; border-left: 3px solid #21d4fd; font-size: 0.76rem; line-height: 1.5; color: #475569;
}
@media (max-width: 900px) {
    .st-detail { grid-template-columns: 1fr; }
    .st-info-card { position: static; }
    .st-msg { max-width: 100%; }
}

.wd-empty {
    text-align: center;
    padding: 2.2rem 1rem;
}

.wd-empty strong {
    display: block;
    font-size: 1rem;
    color: #344767;
    margin-bottom: 0.35rem;
}

.wd-empty p {
    margin: 0 0 1rem;
    color: #8392ab;
    font-size: 0.84rem;
}

.wd-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.9rem 1rem 1.1rem;
}

.wd-pagination a {
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #67748e;
    background: #f1f3f5;
}

.wd-pagination a.is-on {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

@media (max-width: 1100px) {
    .wd-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .wd-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .wd-stats {
        grid-template-columns: 1fr;
    }
}

/* ===== Register / Sign Up (Royal Life Global Brand Theme) ===== */
.ureg-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: #0f172a;
    background:
        radial-gradient(ellipse 60% 45% at 5% 0%, rgba(245, 158, 11, 0.12), transparent 55%),
        radial-gradient(ellipse 55% 40% at 95% 5%, rgba(29, 78, 216, 0.12), transparent 50%),
        radial-gradient(ellipse 50% 35% at 50% 100%, rgba(16, 185, 129, 0.08), transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #eff6ff 45%, #f1f5f9 100%);
}

.ureg {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.25rem 1.15rem 2.5rem;
}

.ureg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ureg-brand {
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ureg-brand:hover {
    color: #1d4ed8;
}

.ureg-top-link {
    font-size: 0.86rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ureg-top-link strong {
    color: #1d4ed8;
    font-weight: 700;
}

.ureg-top-link:hover strong {
    text-decoration: underline;
    color: #2563eb;
}

.ureg-intro {
    text-align: center;
    margin-bottom: 1.35rem;
    animation: ulog-rise 0.7s ease both;
}

.ureg-intro h1 {
    margin: 0;
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #0f172a;
}

.ureg-intro p {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

.ureg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.ureg-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.ureg-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #64748b;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.ureg-step-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ureg-step.is-on {
    color: #1d4ed8;
}

.ureg-step.is-on .ureg-step-num {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.ureg-step-line {
    width: 36px;
    height: 2px;
    background: #cbd5e1;
    border-radius: 2px;
}

.ureg-alert {
    margin-bottom: 1rem;
}

.ureg-sponsor-msg {
    margin: 0.85rem 0 0;
}

.ureg-card.is-locked {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

.ureg-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ureg-form {
    display: grid;
    gap: 1rem;
}

.ureg-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.25rem 1.3rem 1.4rem;
    box-shadow: 0 12px 32px rgba(29, 78, 216, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(29, 78, 216, 0.12);
    position: relative;
    overflow: hidden;
    animation: ulog-rise 0.75s ease both;
}

.ureg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1d4ed8 0%, #f59e0b 50%, #10b981 100%);
}

.ureg-card:nth-child(2) {
    animation-delay: 0.05s;
}

.ureg-card:nth-child(3) {
    animation-delay: 0.1s;
}

.ureg-card:nth-child(4) {
    animation-delay: 0.15s;
}

.ureg-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.ureg-card-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1d4ed8, #0f172a);
    color: #fbbf24;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
}

.ureg-card-ico.is-green {
    background: linear-gradient(145deg, #10b981, #047857);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.22);
}

.ureg-card-ico svg {
    width: 20px;
    height: 20px;
}

.ureg-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.ureg-card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.ureg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem 1rem;
}

.ureg-field {
    display: grid;
    gap: 0.4rem;
}

.ureg-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.ureg-input-ico {
    position: relative;
    display: flex;
    align-items: center;
}

.ureg-input-ico>svg:first-child {
    position: absolute;
    left: 0.85rem;
    width: 17px;
    height: 17px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.ureg-input-ico input,
.ureg-input-ico select {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.55rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.92rem;
    color: #0f172a;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ureg-input-ico.has-eye input {
    padding-right: 2.8rem;
}

.ureg-input-ico input:focus,
.ureg-input-ico select:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3.5px rgba(29, 78, 216, 0.14);
}

.ureg-input-ico select.has-value {
    color: #0f172a;
}

.ureg-input-ico select:not(.has-value) {
    color: #94a3b8;
}

.ureg-input-ico input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.ureg-input-ico.grow {
    flex: 1;
    min-width: 0;
}

.ureg-name-split {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.ureg-name-split>select {
    width: 78px;
    flex-shrink: 0;
    padding: 0.72rem 0.45rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.ureg-pos {
    margin-top: 1.15rem;
}

.ureg-pos-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}

.ureg-pos-head strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.ureg-pos-head span {
    font-size: 0.8rem;
    color: #64748b;
}

.ureg-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ureg-pos-card {
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-radius: 14px;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #0d1e3d, #081329);
    color: #f8fafc;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.ureg-pos-card:hover {
    border-color: rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.ureg-pos-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ureg-pos-card.is-on {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.35);
}

.ureg-pos-check {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s, transform 0.15s;
}

.ureg-pos-card.is-on .ureg-pos-check {
    opacity: 1;
    transform: scale(1);
    background: #ffffff;
    color: #ea580c;
}

.ureg-pos-check svg {
    width: 12px;
    height: 12px;
}

.ureg-pos-side {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.ureg-pos-hint {
    font-size: 0.75rem;
    opacity: 0.85;
}

.ureg-dob {
    margin-top: 1rem;
}

.ureg-dob-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.ureg-nominee {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px dashed rgba(29, 78, 216, 0.16);
}

.ureg-nominee-head {
    margin-bottom: 0.85rem;
}

.ureg-nominee-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.ureg-nominee-head p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

.ureg-captcha {
    margin-top: 1rem;
}

.ureg-captcha>label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.4rem;
}

.ureg-captcha-row {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ureg-captcha-code {
    min-width: 120px;
    display: grid;
    place-items: center;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    font-family: 'Sora', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #0f172a;
    background:
        repeating-linear-gradient(-12deg, transparent, transparent 6px, rgba(29, 78, 216, 0.04) 6px, rgba(29, 78, 216, 0.04) 7px),
        linear-gradient(135deg, #eff6ff, #fef3c7);
    border: 1.5px solid #f59e0b;
    user-select: none;
}

.ureg-captcha-refresh {
    width: 46px;
    flex-shrink: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.15s, border-color 0.15s;
}

.ureg-captcha-refresh:hover {
    color: #1d4ed8;
    border-color: #1d4ed8;
}

.ureg-captcha-refresh svg {
    width: 18px;
    height: 18px;
}

.ureg-captcha-row .ureg-input-ico {
    flex: 1;
    min-width: 140px;
}

.ureg-captcha-row .ureg-input-ico input {
    padding-left: 0.95rem;
    text-transform: none;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.ureg-agree {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1rem;
    font-size: 0.88rem;
    color: #475569;
    cursor: pointer;
}

.ureg-agree input {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
}

.ureg-agree a {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ureg-agree a:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* E-Contract modal */
.ureg-dialog {
    border: none;
    padding: 0;
    margin: auto;
    max-width: min(520px, calc(100vw - 1.5rem));
    width: 100%;
    background: transparent;
    color: inherit;
}

.ureg-dialog::backdrop {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
}

.ureg-dialog-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(29, 78, 216, 0.16);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    animation: ureg-dialog-in 0.22s ease both;
}

@keyframes ureg-dialog-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ureg-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.15rem 1.2rem 1rem;
    background:
        linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(245, 158, 11, 0.08)),
        linear-gradient(180deg, #f8fafc, #fff);
    border-bottom: 1px solid #eef2f7;
}

.ureg-dialog-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1d4ed8, #0f172a);
    color: #fbbf24;
}

.ureg-dialog-ico svg {
    width: 20px;
    height: 20px;
}

.ureg-dialog-kicker {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
}

.ureg-dialog-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.ureg-dialog-x {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.ureg-dialog-x:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.ureg-dialog-x svg {
    width: 16px;
    height: 16px;
}

.ureg-dialog-body {
    padding: 1.15rem 1.25rem 0.35rem;
    max-height: min(52vh, 360px);
    overflow-y: auto;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}

.ureg-dialog-body p {
    margin: 0 0 0.85rem;
}

.ureg-dialog-body strong {
    color: #0f172a;
}

.ureg-dialog-body ul {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.45rem;
}

.ureg-dialog-body li::marker {
    color: #f59e0b;
}

.ureg-dialog-note {
    font-size: 0.82rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
}

.ureg-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding: 1rem 1.2rem 1.15rem;
    border-top: 1px solid #eef2f7;
    background: #fafbfc;
}

.ureg-dialog-btn {
    border: none;
    border-radius: 12px;
    padding: 0.7rem 1.15rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s, filter 0.15s, background 0.15s;
}

.ureg-dialog-btn.ghost {
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.ureg-dialog-btn.ghost:hover {
    background: #f8fafc;
}

.ureg-dialog-btn.primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

.ureg-dialog-btn.primary:hover {
    filter: brightness(1.06);
}

@media (max-width: 520px) {
    .ureg-dialog-foot {
        flex-direction: column-reverse;
    }

    .ureg-dialog-btn {
        width: 100%;
    }
}

.ureg-actions {
    margin-top: 0.35rem;
    text-align: center;
    animation: ulog-rise 0.8s 0.18s ease both;
}

.ureg-submit {
    width: 100%;
    max-width: 360px;
    padding: 0.95rem 1.25rem;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.38);
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}

.ureg-submit:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.48);
}

.ureg-foot {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.ureg-foot a {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ureg-foot a:hover {
    color: #f59e0b;
    text-decoration: underline;
}

.ureg-dialog-inner {
    padding: 1.4rem 1.35rem 1.25rem;
}

.ureg-dialog-inner h3 {
    margin: 0 0 0.55rem;
    font-family: 'Sora', sans-serif;
    font-size: 1.1rem;
}

.ureg-dialog-inner p {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #64748b;
}

@media (max-width: 720px) {
    .ureg-grid {
        grid-template-columns: 1fr;
    }

    .ureg-pos-grid {
        grid-template-columns: 1fr;
    }

    .ureg-dob-grid {
        grid-template-columns: 1fr;
    }

    .ureg-step-label {
        display: none;
    }

    .ureg-top-link {
        font-size: 0.8rem;
    }
}

/* ===== Registration success ===== */
.urs-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: #1c2434;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 65% 50% at 85% 20%, rgba(29, 78, 216, 0.32), transparent 70%),
        radial-gradient(ellipse 55% 45% at 15% 15%, rgba(245, 158, 11, 0.24), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 85%, rgba(16, 185, 129, 0.18), transparent 60%),
        linear-gradient(145deg, #050a16 0%, #0c1836 45%, #050e24 100%);
}

.urs {
    width: 100%;
    max-width: 460px;
    animation: ulog-rise 0.75s ease both;
}

.urs-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    padding: 2rem 1.65rem 1.5rem;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.urs-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1d4ed8 0%, #f59e0b 50%, #10b981 100%);
}

.urs-burst span {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.35;
}

.urs-burst span:nth-child(1) {
    width: 160px;
    height: 160px;
    top: -50px;
    right: -40px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.45), transparent 70%);
}

.urs-burst span:nth-child(2) {
    width: 120px;
    height: 120px;
    bottom: 40px;
    left: -40px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent 70%);
}

.urs-burst span:nth-child(3) {
    width: 80px;
    height: 80px;
    top: 40%;
    right: 8%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 70%);
}

.urs-check {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #10b981, #047857);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4);
    animation: urs-pop 0.55s 0.15s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

.urs-check svg {
    width: 34px;
    height: 34px;
}

.urs-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f59e0b;
}

.urs-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.urs-lead {
    position: relative;
    z-index: 1;
    margin: 0.5rem auto 0;
    max-width: 34ch;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #64748b;
}

.urs-hello {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    margin: 1.35rem 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f1e40, #1d4ed8);
    color: #fff;
}

.urs-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.urs-hello strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.urs-hello small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(248, 250, 252, 0.75);
}

.urs-details {
    position: relative;
    z-index: 1;
    margin: 0;
    display: grid;
    gap: 0.55rem;
    text-align: left;
}

.urs-details>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.urs-details dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.urs-details dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.urs-copy {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.urs-copy:hover {
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.1);
}

.urs-copy.is-copied {
    color: #047857;
    background: #ecfdf5;
}

.urs-copy.is-copied::after {
    content: 'Copied!';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    z-index: 5;
    pointer-events: none;
    animation: actxCopyPop 0.18s ease;
}

.urs-copy.is-copied::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    z-index: 5;
    pointer-events: none;
}

.urs-copy svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.urs-muted {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
}

.urs-note {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid rgba(29, 78, 216, 0.14);
    text-align: left;
}

.urs-actions {
    position: relative;
    z-index: 1;
    margin-top: 1.35rem;
}

.urs-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.95rem 1.2rem;
    border-radius: 14px;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.38);
    transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}

.urs-login svg {
    width: 18px;
    height: 18px;
    transition: transform 0.15s;
}

.urs-login:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.48);
}

.urs-login:hover svg {
    transform: translateX(3px);
}

.urs-foot {
    position: relative;
    z-index: 1;
    margin: 1.15rem 0 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

@keyframes urs-pop {
    from {
        opacity: 0;
        transform: scale(0.55);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Activate account banner + package picker */
.up-activate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
    padding: 1.25rem 1.35rem;
    border-radius: 18px;
    color: #fff;
    background: radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%), linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
    box-shadow: 0 16px 36px rgba(245, 158, 11, 0.28);
    animation: ulog-rise 0.55s ease both;
}

.up-activate-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.up-activate-banner h2 {
    margin: 0.2rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.up-activate-banner p {
    margin: 0.35rem 0 0;
    max-width: 65ch;
    font-size: 0.88rem;
    line-height: 1.45;
    opacity: 0.95;
}

.up-activate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.95rem;
}

.up-activate-ghost {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}

.up-activate-visual {
    flex-shrink: 0;
    min-width: 140px;
    text-align: center;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.up-activate-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.55rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.up-activate-ico svg {
    width: 24px;
    height: 24px;
}

.up-activate-visual strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
}

.up-activate-visual small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Activate page redesign (actx-*) */
.actx-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.85fr);
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.actx-hero-copy {
    position: relative;
    overflow: hidden;
    padding: 1.4rem 1.45rem 1.5rem;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 90% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(128deg, #0f172a 0%, #1a2b4b 48%, #243552 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.actx-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #f5d76e;
}

.actx-hero-copy h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(1.25rem, 2.4vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.actx-hero-copy>p {
    margin: 0.45rem 0 0;
    max-width: 46ch;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.82);
}

.actx-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.actx-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem 0.4rem 0.4rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.65);
    background: rgba(255, 255, 255, 0.08);
}

.actx-steps li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.14);
}

.actx-steps li.is-on {
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.actx-steps li.is-on span {
    background: #0f172a;
    color: #f5d76e;
}

.actx-hero-user {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem 1.15rem 1.05rem;
    border-radius: 20px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e8ecf2;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.actx-user-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}

.actx-avatar.up-avatar,
.up-avatar.actx-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
    box-shadow: 0 8px 18px rgba(217, 59, 59, 0.22);
}

.up-avatar.actx-avatar.has-photo {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.up-avatar.actx-avatar img {
    border-radius: 16px !important;
}

.actx-user-meta {
    min-width: 0;
    flex: 1;
}

.actx-user-meta strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actx-user-meta small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actx-user-stats {
    display: grid;
    gap: 0.45rem;
}

.actx-user-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.62rem 0.75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eef0f4;
}

.actx-user-stat span {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.actx-user-stat strong {
    font-size: 0.84rem;
    font-weight: 800;
    color: #344767;
    text-align: right;
}

.actx-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem !important;
    line-height: 1.2;
}

.actx-pill.is-wait {
    color: #c2410c !important;
    background: #fff7ed;
}

.actx-pill.is-ok {
    color: #047857 !important;
    background: #ecfdf5;
}

.actx-bar-pay-note {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.actx-wallet {
    color: #2152ff !important;
    letter-spacing: -0.02em;
}

.actx-section-head {
    margin: 0.35rem 0 0.95rem;
}

.actx-section-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.actx-section-head p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    color: #8392ab;
}

.actx-form {
    margin-bottom: 1.75rem;
}

.actx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.actx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 100%;
    padding: 1.25rem 1.15rem 1.1rem;
    border-radius: 18px;
    border: 1.5px solid #e8ecf2;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}

.actx-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.actx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.actx-card.is-on {
    border-color: #d4a017;
    box-shadow: 0 18px 42px rgba(212, 160, 23, 0.2);
    background: linear-gradient(180deg, #fffdf5 0%, #fff 55%);
}

.actx-badge {
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    z-index: 2;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.actx-check {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef0f4;
    color: transparent;
}

.actx-card.is-on .actx-check {
    background: linear-gradient(135deg, #f5d76e, #d4a017);
    color: #0f172a;
}

.actx-check svg {
    width: 13px;
    height: 13px;
}

.actx-card-ico {
    width: 46px;
    height: 46px;
    margin-top: 0.55rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
}

.actx-card.tone-a .actx-card-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.actx-card.tone-b .actx-card-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.actx-card.tone-c .actx-card-ico {
    background: linear-gradient(310deg, #f59e0b, #fde047);
    color: #0f172a;
}

.actx-card.tone-d .actx-card-ico {
    background: linear-gradient(310deg, #0f172a, #334155);
}

.actx-card-ico svg {
    width: 22px;
    height: 22px;
}

.actx-name {
    margin-top: 0.25rem;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    padding-right: 1.5rem;
}

.actx-price {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #2152ff;
}

.actx-card.is-on .actx-price {
    color: #b45309;
}

.actx-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-top: 0.15rem;
    padding: 0.65rem 0.55rem;
    border-radius: 12px;
    background: #f8fafc;
}

.actx-stats span {
    display: grid;
    gap: 0.1rem;
    text-align: center;
}

.actx-stats small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.actx-stats strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #344767;
}

.actx-desc {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #67748e;
}

.actx-select-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
}

.actx-card.is-on .actx-select-label {
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.actx-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f172a, #1a2b4b);
    color: #fff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.35);
}

.actx-bar-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.55);
}

.actx-bar-summary strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.actx-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.72);
}

.actx-bar-meta em {
    font-style: normal;
    font-weight: 800;
    color: #f5d76e;
}

.actx-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 210px;
    padding: 0.9rem 1.25rem;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e 0%, #d4a017 55%, #b8860b 100%);
    transition: transform 0.15s, filter 0.15s;
}

.actx-submit svg {
    width: 18px;
    height: 18px;
    transition: transform 0.15s;
}

.actx-submit:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.actx-submit:hover svg {
    transform: translateX(3px);
}

.actx-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.actx-empty-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.85rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #94a3b8;
}

.actx-empty-ico svg {
    width: 28px;
    height: 28px;
}

.actx-empty strong {
    display: block;
    font-size: 1.05rem;
    color: #0f172a;
}

.actx-empty p {
    margin: 0.4rem 0 1rem;
    color: #8392ab;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .actx-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .up-activate-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .up-activate-visual {
        width: 100%;
    }

    .actx-bar {
        flex-direction: column;
        align-items: stretch;
        bottom: 0.5rem;
    }

    .actx-submit {
        width: 100%;
    }

    .actx-steps {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== My Income reports ===== */
.inc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.05rem;
}

.inc-tab {
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    color: #67748e;
    background: #f1f3f5;
    transition: background 0.15s, color 0.15s;
}

.inc-tab.is-on,
.inc-tab:hover {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

.inc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.inc-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.inc-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.inc-stat.g-purple::after {
    background: #7928ca;
}

.inc-stat.g-green::after {
    background: #17ad37;
}

.inc-stat.g-orange::after {
    background: #f59e0b;
}

.inc-stat.g-blue::after {
    background: #2152ff;
}

.inc-stat-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}

.inc-stat-ico svg {
    width: 20px;
    height: 20px;
}

.inc-stat.g-purple .inc-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.inc-stat.g-green .inc-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.inc-stat.g-orange .inc-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.inc-stat.g-blue .inc-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.inc-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.inc-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.inc-stat strong.is-sm {
    font-size: 1.05rem;
}

.inc-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.inc-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

.inc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    color: #fff;
}

.inc-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.inc-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}

.inc-banner-ico svg {
    width: 20px;
    height: 20px;
}

.inc-banner.is-blue {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.inc-banner.is-green {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #17ad37 0%, #98ec2d 100%);
}

.inc-banner.is-orange {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #f53939 0%, #fbcf33 100%);
}

.inc-banner.is-purple {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #7928ca 0%, #ff0080 100%);
}

.inc-banner.is-gold,
.inc-banner.is-summary {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.inc-banner.is-recent {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(118deg, #1a2b4b 0%, #2152ff 100%);
}

.inc-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.inc-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.inc-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
    font-weight: 600;
    display: none;
}

.inc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
}

.inc-fld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 140px;
    min-width: 0;
    max-width: 200px;
}

.inc-fld > span {
    font-size: 0.66rem;
    font-weight: 700;
    color: #67748e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inc-fld select,
.inc-fld input {
    width: 100%;
    height: 38px;
    padding: 0 0.7rem;
    border: 1px solid #d9e0ea;
    border-radius: 9px;
    font: inherit;
    font-size: 0.84rem;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.inc-fld select:focus,
.inc-fld input:focus {
    outline: none;
    border-color: #2152ff;
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}

.inc-fld-actions {
    display: flex;
    gap: 0.45rem;
}

.inc-fld-actions .up-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 640px) {
    .inc-fld {
        flex-basis: calc(50% - 0.35rem);
        max-width: none;
    }

    .inc-fld-actions {
        flex-basis: 100%;
    }

    .inc-fld-actions .up-btn {
        flex: 1;
        justify-content: center;
    }
}

.inc-filter-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding: 0.7rem 1.1rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
    font-size: 0.82rem;
    color: #67748e;
}

.inc-filter-sum strong {
    color: #1e293b;
}

.inc-filter-sum b {
    color: #334155;
}

.inc-filter-sum b.is-net {
    color: #17ad37;
}

.inc-levels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #eef0f4;
}

.inc-level {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.inc-level:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.1);
}

.inc-level-no {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #2152ff 0%, #21d4fd 100%);
    box-shadow: 0 4px 10px rgba(33, 82, 255, 0.25);
}

.inc-level-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inc-level-body strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inc-level-body small {
    font-size: 0.7rem;
    color: #8392ab;
}

.inc-level.is-empty .inc-level-no {
    background: #e2e8f0;
    color: #8392ab;
    box-shadow: none;
}

.inc-level.is-empty .inc-level-body strong {
    color: #94a3b8;
}

.inc-level.is-on {
    border-color: #2152ff;
    background: linear-gradient(135deg, #eef2ff 0%, #ecfeff 100%);
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.14);
}

.inc-level.is-on::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2152ff;
}

@media (max-width: 1100px) {
    .inc-levels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .inc-levels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding: 0.8rem;
    }

    .inc-level {
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }

    .inc-level-no {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }
}

.inc-table-wrap {
    overflow-x: auto;
}

.inc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.inc-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.inc-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f3f5;
    color: #344767;
    vertical-align: top;
}

.inc-table tbody tr:hover {
    background: #fafbfc;
}

.inc-amt {
    color: #2152ff;
    font-weight: 800;
    white-space: nowrap;
}

.inc-from strong {
    display: block;
    font-size: 0.84rem;
    color: #344767;
}

.inc-from small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: #8392ab;
    font-weight: 600;
}

.inc-desc {
    max-width: 240px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #67748e;
}

.inc-muted {
    color: #94a3b8;
    font-size: 0.8rem;
}

.inc-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.inc-pill.is-wait {
    background: #fff7ed;
    color: #c2410c;
}

.inc-pill.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.inc-pill.is-bad {
    background: #fef2f2;
    color: #b91c1c;
}

.inc-pill.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.inc-empty {
    text-align: center;
    padding: 2.2rem 1rem;
}

.inc-empty strong {
    display: block;
    font-size: 1rem;
    color: #344767;
    margin-bottom: 0.35rem;
}

.inc-empty p {
    margin: 0 0 1rem;
    color: #8392ab;
    font-size: 0.84rem;
}

.inc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.9rem 1rem 1.1rem;
}

.inc-pagination a {
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #67748e;
    background: #f1f3f5;
}

.inc-pagination a.is-on {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

.inc-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.9rem;
    padding: 1.1rem 1.15rem 1.25rem;
}

.inc-type-card {
    --inc-a: #2563eb;
    --inc-soft: #eff4ff;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.95rem 1rem 0.85rem;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid #e6ebf1;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inc-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--inc-a);
}

.inc-type-card:hover {
    border-color: color-mix(in srgb, var(--inc-a) 35%, #e6ebf1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.inc-type-card.tone-blue { --inc-a: #2563eb; --inc-soft: #eff4ff; }
.inc-type-card.tone-green { --inc-a: #059669; --inc-soft: #ecfdf5; }
.inc-type-card.tone-orange { --inc-a: #ea580c; --inc-soft: #fff7ed; }
.inc-type-card.tone-purple { --inc-a: #7c3aed; --inc-soft: #f5f3ff; }
.inc-type-card.tone-gold { --inc-a: #b45309; --inc-soft: #fffbeb; }
.inc-type-card.kind-profit_share { --inc-a: #0f766e; --inc-soft: #f0fdfa; }
.inc-type-card.kind-family_security { --inc-a: #be185d; --inc-soft: #fdf2f8; }
.inc-type-card.kind-other { --inc-a: #64748b; --inc-soft: #f8fafc; }
.inc-type-card.kind-rank { --inc-a: #a16207; --inc-soft: #fefce8; }

.inc-type-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.inc-type-ico {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--inc-a);
    background: var(--inc-soft);
    border: 1px solid color-mix(in srgb, var(--inc-a) 18%, #fff);
}

.inc-type-ico svg {
    width: 18px;
    height: 18px;
}

.inc-type-kicker {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
    color: var(--inc-a);
}

.inc-type-card strong {
    position: relative;
    z-index: 1;
    margin-top: 0.45rem;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
}

.inc-type-amt {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: 0.15rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--inc-a);
}

.inc-type-card.is-plan .inc-type-amt {
    font-size: 0.92rem;
    letter-spacing: 0;
}

.inc-type-meta {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid #eef1f5;
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
}

.inc-type-meta span {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.inc-type-meta span:last-child {
    text-align: right;
    align-items: flex-end;
}

.inc-type-meta em {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
}

.inc-type-go {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--inc-a);
}

.inc-type-go::after {
    content: ' \2192';
}

.inc-type-card:hover .inc-type-go {
    text-decoration: underline;
}

.inc-type-link {
    font-weight: 800;
    color: #2152ff;
    text-decoration: none;
}

.inc-type-link:hover {
    text-decoration: underline;
}

@media (max-width: 980px) {
    .inc-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .inc-stats {
        grid-template-columns: 1fr;
    }

    .inc-tabs {
        gap: 0.3rem;
    }

    .inc-tab {
        font-size: 0.72rem;
        padding: 0.38rem 0.7rem;
    }

    .inc-type-grid {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }
}

/* ===== Transaction Report ===== */
.txn-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.txn-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.txn-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.txn-stat.g-purple::after {
    background: #7928ca;
}

.txn-stat.g-green::after {
    background: #17ad37;
}

.txn-stat.g-orange::after {
    background: #f59e0b;
}

.txn-stat.g-blue::after {
    background: #2152ff;
}

.txn-stat-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}

.txn-stat-ico svg {
    width: 20px;
    height: 20px;
}

.txn-stat.g-purple .txn-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.txn-stat.g-green .txn-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.txn-stat.g-orange .txn-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.txn-stat.g-blue .txn-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.txn-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.txn-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.txn-stat strong.is-sm {
    font-size: 1.05rem;
}

.txn-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.txn-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

.txn-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.25rem;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #1e293b 42%, #b45309 130%);
}

.txn-kicker {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.88;
}

.txn-banner h2 {
    margin: 0.15rem 0 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #fff;
}

.txn-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    opacity: 0.92;
    max-width: 420px;
    line-height: 1.45;
}

.txn-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.txn-filters select {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    font: inherit;
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    min-width: 140px;
}

.txn-filters select option {
    color: #344767;
}

.txn-table-wrap {
    overflow-x: auto;
}

.txn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.txn-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.txn-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f3f5;
    color: #344767;
    vertical-align: top;
}

.txn-table tbody tr:hover {
    background: #fafbfc;
}

.txn-type {
    display: inline-flex;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.txn-type.is-in {
    background: #ecfdf5;
    color: #047857;
}

.txn-type.is-out {
    background: #fff7ed;
    color: #c2410c;
}

.txn-dir {
    font-size: 0.78rem;
    font-weight: 800;
}

.txn-dir.is-in {
    color: #17ad37;
}

.txn-dir.is-out {
    color: #c2410c;
}

.txn-amt {
    font-weight: 800;
    white-space: nowrap;
}

.txn-amt.is-in {
    color: #17ad37;
}

.txn-amt.is-out {
    color: #c2410c;
}

.txn-desc {
    max-width: 260px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #67748e;
    white-space: pre-line;
}

.txn-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.txn-pill.is-wait {
    background: #fff7ed;
    color: #c2410c;
}

.txn-pill.is-ok {
    background: #ecfdf5;
    color: #047857;
}

.txn-pill.is-bad {
    background: #fef2f2;
    color: #b91c1c;
}

.txn-pill.is-muted {
    background: #f1f5f9;
    color: #64748b;
}

.txn-empty {
    text-align: center;
    padding: 2.2rem 1rem;
}

.txn-empty strong {
    display: block;
    font-size: 1rem;
    color: #344767;
    margin-bottom: 0.35rem;
}

.txn-empty p {
    margin: 0 0 1rem;
    color: #8392ab;
    font-size: 0.84rem;
}

.txn-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.txn-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.9rem 1rem 1.1rem;
}

.txn-pagination a {
    min-width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #67748e;
    background: #f1f3f5;
}

.txn-pagination a.is-on {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

@media (max-width: 980px) {
    .txn-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .txn-stats {
        grid-template-columns: 1fr;
    }
}

/* ?? Maintenance overlay (login) ?? */
body.is-maintenance {
    overflow: hidden;
}

body.is-maintenance .ulog {
    filter: blur(8px) saturate(0.85);
    pointer-events: none;
    user-select: none;
    transform: scale(1.015);
}

.maint-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.maint-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(212, 160, 23, 0.14), transparent 70%),
        rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.maint-modal {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.28),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    overflow: hidden;
    animation: maint-pop 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.maint-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    width: 280px;
    height: 180px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(245, 215, 110, 0.35), transparent 70%);
    pointer-events: none;
}

@keyframes maint-pop {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.maint-icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.15rem;
}

.maint-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(212, 160, 23, 0.35);
    animation: maint-ring 2.4s ease-out infinite;
}

@keyframes maint-ring {
    0% {
        transform: scale(0.85);
        opacity: 0.9;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.maint-mark {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    color: #f5d76e;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.maint-mark svg {
    width: 26px;
    height: 26px;
}

.maint-head {
    display: block;
    margin-bottom: 1.15rem;
    text-align: center;
}

.maint-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d4a017;
}

.maint-head h2 {
    margin: 0;
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.maint-sub {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

.maint-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: left;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-bottom: 0.7rem;
}

.maint-box:last-child {
    margin-bottom: 0;
}

.maint-box-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.maint-box-ico svg {
    width: 18px;
    height: 18px;
}

.maint-box strong {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.88rem;
    font-weight: 800;
}

.maint-box span {
    display: block;
    font-weight: 500;
    opacity: 0.92;
}

.maint-box.is-warn {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fde68a;
    color: #92400e;
}

.maint-box.is-warn .maint-box-ico {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.maint-box.is-err {
    background: linear-gradient(135deg, #fff1f2 0%, #fee2e2 100%);
    border: 1px solid #fecdd3;
    color: #9f1239;
}

.maint-box.is-err .maint-box-ico {
    background: rgba(225, 29, 72, 0.12);
    color: #be123c;
}

/* ?? Dashboard news ?? */
.up-news-panel {
    margin-top: 1rem;
}

.up-news-count {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    white-space: nowrap;
}

.up-news-body {
    padding: 1.05rem 1.15rem 1.2rem;
}

.up-news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.up-news-item {
    padding: 0.95rem 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.up-news-item:hover {
    border-color: #fde68a;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.up-news-item-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.up-news-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
    flex-shrink: 0;
}

.up-news-item-top strong {
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.up-news-item-top time {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.02em;
}

.up-news-item p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
    padding-left: 1.05rem;
}

.up-news-empty {
    text-align: center;
    padding: 1.75rem 1rem;
    color: #64748b;
}

.up-news-empty-ico {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
}

.up-news-empty-ico svg {
    width: 22px;
    height: 22px;
}

.up-news-empty strong {
    display: block;
    color: #334155;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.up-news-empty p {
    margin: 0;
    font-size: 0.85rem;
}

/* ?? BV / open pairs row ?? */
.up-stats-bv {
    margin-top: -0.35rem;
}

.up-stats.up-stats-2 {
    grid-template-columns: repeat(2, 1fr);
}

.up-stats.up-stats-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
    .up-stats.up-stats-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .up-stats.up-stats-2,
    .up-stats.up-stats-3 {
        grid-template-columns: 1fr;
    }
}

.up-stat.g-mint {
    border-top-color: #0d9488;
}

.up-stat.g-coral {
    border-top-color: #f43f5e;
}

.up-stat.g-teal {
    border-top-color: #0891b2;
}

.up-stat.g-slate {
    border-top-color: #64748b;
}

.up-stat.g-mint .up-stat-ico {
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
}

.up-stat.g-coral .up-stat-ico {
    background: rgba(244, 63, 94, 0.12);
    color: #e11d48;
}

.up-stat.g-teal .up-stat-ico {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

.up-stat.g-slate .up-stat-ico {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.up-stat.g-violet {
    border-top-color: #7c3aed;
}

.up-stat.g-violet .up-stat-ico {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

.up-stat.g-amber {
    border-top-color: #d97706;
}

.up-stat.g-amber .up-stat-ico {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

/* ?? Topbar search ?? */
.up-search {
    position: relative;
}

.up-search-drop {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 280px;
    overflow: auto;
    padding: 0.4rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8ecf4;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.up-search-drop a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.up-search-drop a:hover,
.up-search-drop a.is-on {
    background: #f1f5f9;
    color: #2152ff;
}

.up-search-drop a[hidden] {
    display: none;
}

/* ?? Notifications dropdown ?? */
.up-notify-dd {
    position: relative;
}

.up-icon-btn {
    position: relative;
}

.up-notify-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

.up-notify-menu {
    width: min(320px, 86vw);
    right: 0;
    left: auto;
    padding: 0;
    overflow: hidden;
}

.up-notify-head {
    padding: 0.85rem 1rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #eef0f4;
}

.up-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
}

.up-notify-item:hover {
    background: #f8fafc;
}

.up-notify-item strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}

.up-notify-item small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #94a3b8;
}

.up-notify-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}

.up-notify-dot.red {
    background: #e11d48;
}

.up-notify-dot.amber {
    background: #f59e0b;
}

.up-notify-dot.blue {
    background: #2152ff;
}

.up-notify-dot.green {
    background: #17ad37;
}

.up-notify-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
}

.up-notify-foot {
    display: block;
    padding: 0.7rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2152ff;
    text-decoration: none;
    background: #f8fafc;
}

/* ?? Activation payment / pending ?? */
.actx-pending {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 55%);
    border: 1px solid #fde68a;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.08);
}

.actx-pending-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.actx-pending-ico svg {
    width: 26px;
    height: 26px;
}

.actx-pending-copy h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
}

.actx-pending-copy>p {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.92rem;
}

.actx-pending-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.actx-pending-meta div {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #fef3c7;
}

.actx-pending-meta small {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.actx-pending-meta strong {
    font-size: 0.9rem;
    color: #334155;
    word-break: break-all;
}

.actx-pending-help {
    margin: 1rem 0 0 !important;
    font-size: 0.85rem !important;
}

.actx-pending-help a {
    color: #2152ff;
    font-weight: 700;
}

/* ?? Activate payment panels ?? */
.actx-pay-panel {
    margin: 1.2rem 0;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #eef0f4;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.actx-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.2rem;
    color: #fff;
}

.actx-pay-head.is-teal {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(125deg, #0f766e 0%, #0d9488 48%, #14b8a6 100%);
}

.actx-pay-head.is-indigo {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(125deg, #1e3a8a 0%, #2152ff 52%, #3b82f6 100%);
}

.actx-pay-head-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.actx-pay-head-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.actx-pay-head-ico svg {
    width: 22px;
    height: 22px;
}

.actx-pay-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.82;
}

.actx-pay-head h3 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.actx-pay-head p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
    max-width: 52ch;
}

.actx-pay-chip {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    white-space: nowrap;
}

.actx-bank-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.25rem;
}

.actx-bank-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 42%);
    border: 1px solid #e8ecf4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.actx-bank-card:hover {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 16px 32px rgba(13, 148, 136, 0.1);
}

.actx-bank-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    align-items: stretch;
}

.actx-bank-card.has-qr .actx-bank-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1rem;
}

.actx-bank-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.actx-bank-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.actx-bank-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    flex-shrink: 0;
}

.actx-bank-mark svg {
    width: 20px;
    height: 20px;
}

.actx-bank-brand strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
    line-height: 1.2;
}

.actx-bank-brand small {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.actx-bank-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
}

.actx-bank-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
        #fff;
    border: 1px dashed #99f6e4;
    align-self: stretch;
}

.actx-bank-qr img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    border: 1px solid #e2e8f0;
}

.actx-bank-qr span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}

.actx-bank-rows {
    display: grid;
    gap: 0.45rem;
}

.actx-bank-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.actx-bank-row.is-upi {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border-color: #a7f3d0;
}

.actx-bank-row small {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}

.actx-bank-row>strong {
    font-size: 0.88rem;
    color: #1e293b;
    word-break: break-all;
}

.actx-bank-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.actx-bank-val strong {
    font-size: 0.88rem;
    color: #1e293b;
    word-break: break-all;
    min-width: 0;
}

.actx-bank-row.is-upi .actx-bank-val strong {
    color: #0f766e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
}

.actx-copy-btn {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #2152ff;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.actx-copy-btn svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}

.actx-copy-btn:hover {
    background: #2152ff;
    color: #fff;
    border-color: #2152ff;
}

.actx-copy-btn.is-copied {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.actx-copy-btn.is-copied::after {
    content: 'Copied';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    z-index: 5;
    pointer-events: none;
    animation: actxCopyPop 0.18s ease;
}

.actx-copy-btn.is-copied::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    z-index: 5;
    pointer-events: none;
}

@keyframes actxCopyPop {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.actx-proof-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.25rem;
}

.actx-pay-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
    min-width: 0;
}

.actx-pay-slip,
.actx-pay-note {
    grid-column: 1 / -1;
}

.actx-pay-fields .up-field[hidden],
.actx-pay-fields [data-actx-proof][hidden],
.actx-pay-fields .is-cash-hide {
    display: none !important;
}

.actx-proof-panel .up-field label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #64748b;
}

.actx-proof-panel .up-field input,
.actx-proof-panel .up-field select {
    border-radius: 12px;
    border-color: #e2e8f0;
    background: #f8fafc;
}

.actx-proof-panel .up-field input:focus,
.actx-proof-panel .up-field select:focus {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}

.actx-proof-tips {
    padding: 1rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(33, 82, 255, 0.1), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e8ecf4;
    align-self: start;
}

.actx-proof-tips strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.55rem;
}

.actx-proof-tips ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.actx-proof-tips li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748b;
    font-weight: 600;
}

.actx-proof-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2152ff, #60a5fa);
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.14);
}

.actx-upbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    border: 1.5px dashed #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 58%);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.actx-upbox:hover,
.actx-upbox.is-drag {
    border-color: #60a5fa;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 60%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.actx-upbox.has-file {
    border-style: solid;
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 55%);
}

.actx-upbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.actx-upbox-thumb {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}

.actx-upbox-empty,
.actx-upbox-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-sizing: border-box;
}

.actx-upbox-empty[hidden],
.actx-upbox-preview[hidden],
.actx-upbox-pdf[hidden],
.actx-upbox-preview img[hidden],
.actx-upbox-copy[hidden],
.actx-upbox-meta[hidden],
.actx-upbox-actions [hidden] {
    display: none !important;
}

.actx-upbox.has-file .actx-upbox-empty {
    display: none !important;
}

.actx-upbox-empty {
    background: linear-gradient(160deg, #dbeafe, #fff);
    border-style: dashed;
    color: #2563eb;
}

.actx-upbox-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.12);
}

.actx-upbox-ico svg {
    width: 22px;
    height: 22px;
}

.actx-upbox-preview {
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-color: #fff;
    border: 1px solid #bbf7d0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.actx-upbox.has-file .actx-upbox-preview {
    display: flex;
}

.actx-upbox-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}

.actx-upbox-pdf {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: linear-gradient(160deg, #fee2e2, #fff);
    color: #dc2626;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.actx-upbox-pdf svg {
    width: 28px;
    height: 28px;
}

.actx-upbox-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.actx-upbox-copy strong,
.actx-upbox-meta strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actx-upbox-copy small,
.actx-upbox-meta small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.actx-upbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.actx-upbox-btn,
.actx-upbox-cta {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 999px;
    padding: 0.48rem 0.95rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.actx-upbox-cta {
    background: #2152ff;
    color: #fff;
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.22);
}

.actx-upbox-cta:hover {
    background: #1a44d6;
    transform: translateY(-1px);
}

.actx-upbox-btn {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.actx-upbox-btn:hover {
    background: #f8fafc;
}

.actx-upbox-btn.is-clear {
    color: #be123c;
    border-color: #fecdd3;
    background: #fff1f2;
}

@media (max-width: 900px) {
    .actx-proof-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .actx-pay-fields {
        grid-template-columns: 1fr;
    }

    .actx-pending {
        grid-template-columns: 1fr;
    }

    .actx-bank-card.has-qr .actx-bank-body {
        grid-template-columns: 1fr;
    }

    .actx-bank-qr {
        max-width: 220px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .actx-upbox {
        align-items: flex-start;
        padding: 0.85rem;
    }

    .actx-upbox-actions {
        width: 100%;
    }

    .actx-upbox-cta,
    .actx-upbox-btn {
        flex: 1;
        text-align: center;
    }

    .actx-bank-val {
        flex-wrap: wrap;
    }
}

/* ?? Support page ?? */
.up-support-body {
    padding: 1.1rem 1.15rem 1.35rem;
}

.up-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.up-support-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.up-support-tile:hover {
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(33, 82, 255, 0.08);
    transform: translateY(-2px);
}

.up-support-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
}

.up-support-ico svg {
    width: 20px;
    height: 20px;
}

.up-support-ico.is-wa {
    background: rgba(37, 211, 102, 0.12);
    color: #128c7e;
}

.up-support-tile strong {
    font-size: 0.95rem;
    color: #1e293b;
}

.up-support-tile small {
    font-size: 0.8rem;
    color: #64748b;
    word-break: break-all;
}

.up-support-tips {
    margin-top: 1.25rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef0f4;
}

.up-support-tips h3 {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: #334155;
}

.up-support-tips ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.6;
}

.up-support-tips a {
    color: #2152ff;
    font-weight: 700;
}

@media (max-width: 720px) {
    .actx-pending {
        grid-template-columns: 1fr;
    }

    .actx-pay-fields {
        grid-template-columns: 1fr;
    }
}

/* ===== T-Pin wallet ===== */
.tpin-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tpin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.tpin-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.tpin-stat::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.tpin-stat.g-green::after {
    background: #17ad37;
}

.tpin-stat.g-blue::after {
    background: #2152ff;
}

.tpin-stat.g-orange::after {
    background: #f59e0b;
}

.tpin-stat-ico {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}

.tpin-stat.g-green .tpin-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.tpin-stat.g-blue .tpin-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.tpin-stat.g-orange .tpin-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.tpin-stat-ico svg {
    width: 20px;
    height: 20px;
}

.tpin-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8392ab;
}

.tpin-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

.tpin-stat small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.tpin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.tpin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.tpin-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.tpin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    color: #fff;
}

.tpin-banner.is-gold {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.tpin-banner.is-teal {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(120deg, #0f766e 0%, #14b8a6 100%);
}

.tpin-banner.is-navy {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(120deg, #16213e 0%, #2152ff 120%);
}

.tpin-banner.is-muted {
    background: linear-gradient(120deg, #f8fafc 0%, #eef2ff 100%);
    color: #334155;
    border-bottom: 1px solid #eef0f4;
}

.tpin-banner.is-muted .tpin-kicker {
    color: #64748b;
    opacity: 1;
}

.tpin-banner.is-muted h2 {
    color: #1e293b;
}

.tpin-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.tpin-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.tpin-banner-ico svg {
    width: 20px;
    height: 20px;
}

.tpin-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.tpin-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.tpin-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
}

.tpin-body {
    padding: 1.15rem 1.25rem 1.3rem;
}

.tpin-form {
    display: grid;
    gap: 0.95rem;
}

.tpin-form-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.tpin-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 1px dashed #dbe3f0;
    border-radius: 12px;
    background: #f8fafc;
}

.tpin-empty strong {
    display: block;
    color: #334155;
    font-size: 0.95rem;
}

.tpin-empty p {
    margin: 0.35rem 0 0;
    color: #8392ab;
    font-size: 0.84rem;
    line-height: 1.45;
}

.tpin-tips {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.55rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.45;
}

.tpin-tips a {
    color: #2152ff;
    font-weight: 700;
    text-decoration: none;
}

.tpin-tips a:hover {
    text-decoration: underline;
}

.tpin-pin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
}

.tpin-pin-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tpin-pin-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 20px rgba(33, 82, 255, 0.08);
}

.tpin-pin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpin-pin-pkg {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
}

.tpin-pin-amt {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f766e;
    background: rgba(15, 118, 110, 0.08);
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
}

.tpin-pin-code {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #16213e;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    text-align: center;
    cursor: pointer;
    user-select: all;
}

.tpin-pin-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpin-pin-foot small {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
}

.tpin-copy-btn {
    border: 0;
    background: #eef2ff;
    color: #2152ff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
}

.tpin-copy-btn:hover {
    background: #e0e7ff;
}

.tpin-copy-btn.is-copied {
    background: #dcfce7;
    color: #15803d;
}

.tpin-table-wrap {
    overflow-x: auto;
}

.tpin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.tpin-table th {
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
}

.tpin-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}

.tpin-table tbody tr:hover {
    background: #fafbfc;
}

.tpin-td-empty {
    text-align: center;
    color: #94a3b8 !important;
    padding: 1.4rem 1rem !important;
}

.tpin-code-sm {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #16213e;
}

.tpin-dir {
    margin-top: 0.25rem;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}

.tpin-dir.is-out {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.tpin-dir.is-in {
    background: rgba(23, 173, 55, 0.12);
    color: #15803d;
}

.tpin-arrow {
    margin: 0 0.25rem;
    color: #94a3b8;
    font-weight: 700;
}

.tpin-sub {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: #8392ab;
}

@media (max-width: 980px) {

    .tpin-layout,
    .tpin-split {
        grid-template-columns: 1fr;
    }

    .tpin-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .tpin-stats {
        grid-template-columns: 1fr;
    }
}


/* ========== ID Card + Welcome Letter ========== */
.doc-page {
    max-width: 980px;
    margin: 0 auto;
}

.doc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.doc-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--up-ink);
}

.doc-sub {
    margin-top: 0.25rem;
    color: var(--up-muted);
    font-size: 0.9rem;
}

.doc-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.doc-hint {
    margin-top: 1rem;
    text-align: center;
    color: var(--up-muted);
    font-size: 0.82rem;
}

/* --- ID Card --- */
.idc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 1.5rem;
    width: 100%;
}

.idc-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 540px));
    gap: 1.35rem;
    width: 100%;
    max-width: 1120px;
    justify-content: center;
}

.idc-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.idc-side-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--up-muted);
}

.idc-card {
    --idc-w: 540px;
    --idc-h: 322px;
    --idc-dark: linear-gradient(135deg, #0b1220 0%, #152038 55%, #111827 100%);
    --idc-ink: #0f172a;
    --idc-muted: #64748b;
    --idc-gold: #b45309;
    position: relative;
    width: 100%;
    max-width: var(--idc-w);
    height: var(--idc-h);
    border-radius: 18px;
    overflow: hidden;
    color: var(--idc-ink);
    background: #f8fafc;
    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.18),
        inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    padding: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    box-sizing: border-box;
}

.idc-glow,
.idc-glow-back {
    display: none;
}

.idc-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ffd54f, #f59e0b 40%, #d93b3b);
    z-index: 3;
    pointer-events: none;
}

.idc-head,
.idc-body,
.idc-foot,
.idc-back-head,
.idc-back-body,
.idc-back-foot {
    position: relative;
    z-index: 2;
}

/* Dark header */
.idc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-shrink: 0;
    padding: 0.75rem 1.15rem 0.75rem 1.25rem;
    background: var(--idc-dark);
    color: #fff;
}

.idc-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.idc-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ffe082, #f59e0b);
    color: #1f1300;
    flex-shrink: 0;
    overflow: hidden;
}

.idc-brand-mark.has-logo {
    width: 56px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    padding: 3px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.idc-brand-mark.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.idc-brand-mark svg {
    width: 16px;
    height: 16px;
}

.idc-brand strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.idc-brand small {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 215, 128, 0.85);
}

.idc-chip {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    flex-shrink: 0;
}

.idc-chip.is-ok {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.idc-chip.is-warn {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

/* Light body */
.idc-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.85rem;
    flex: 1;
    align-items: center;
    min-height: 0;
    margin: 0;
    padding: 0.85rem 1.15rem 0.85rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.idc-photo {
    width: 90px;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    background: linear-gradient(160deg, #e2e8f0, #f1f5f9);
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.idc-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.idc-photo span {
    font-size: 1.4rem;
    font-weight: 800;
    color: #b45309;
}

.idc-info {
    min-width: 0;
}

.idc-label {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--idc-gold);
    margin-bottom: 0.1rem;
}

.idc-name {
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--idc-ink);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.idc-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.35rem 0.6rem;
}

.idc-meta>div {
    min-width: 0;
}

.idc-meta dt {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--idc-muted);
}

.idc-meta dd {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--idc-ink);
    margin-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idc-sign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0.4rem;
}

.idc-sign img {
    display: block;
    max-width: 108px;
    max-height: 34px;
    object-fit: contain;
}

.idc-sign-line {
    width: 92px;
    height: 28px;
    border-bottom: 1px solid #94a3b8;
}

.idc-sign small {
    margin-top: 0.05rem;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--idc-muted);
}

/* Dark footer */
.idc-foot {
    margin-top: auto;
    padding: 0.65rem 1.15rem 0.7rem 1.25rem;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    background: var(--idc-dark);
    color: #fff;
}

.idc-barcode {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    width: 55%;
    max-width: 200px;
}

.idc-barcode i {
    display: block;
    flex: 1;
    height: var(--h, 70%);
    background: rgba(255, 241, 200, 0.85);
    border-radius: 1px;
}

.idc-foot-tag {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 215, 128, 0.85);
    white-space: nowrap;
}

/* Back card */
.idc-card-back {
    background: #f8fafc;
    padding-top: 0;
}

.idc-back-head {
    flex-shrink: 0;
    background: var(--idc-dark);
    color: #fff;
    padding: 0.55rem 1.15rem 0.7rem 1.25rem;
}

.idc-magstripe {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: 28px;
    margin: 0 -1.15rem 0.55rem -1.25rem;
    width: calc(100% + 2.4rem);
    background: linear-gradient(180deg, #1a1a1a, #050505 40%, #171717);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 1;
}

.idc-back-head-text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}

.idc-back-head-text small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 215, 128, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idc-back-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    min-height: 0;
    margin: 0;
    padding: 0.75rem 1.15rem 0.75rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.idc-back-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem 0.7rem;
}

.idc-back-grid>div {
    min-width: 0;
}

.idc-back-grid .idc-span-2 {
    grid-column: 1 / -1;
}

.idc-back-grid span {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--idc-muted);
}

.idc-back-grid strong {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--idc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idc-address strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.idc-back-note {
    font-size: 0.64rem;
    line-height: 1.4;
    color: #475569;
    padding: 0.45rem 0.55rem;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f1f5f9;
}

.idc-back-foot {
    margin-top: auto;
    padding: 0.6rem 1.15rem 0.7rem 1.25rem;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    background: var(--idc-dark);
    color: #fff;
}

.idc-qr {
    width: 40px;
    height: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 3px;
    background: #fff;
    border-radius: 6px;
    flex-shrink: 0;
}

.idc-qr i {
    background: #0b1220;
    border-radius: 1px;
}

.idc-qr i:nth-child(3n) {
    opacity: 0.3;
}

.idc-qr i:nth-child(5n) {
    opacity: 0.65;
}

.idc-qr i:nth-child(7n) {
    opacity: 0.2;
}

.idc-back-contact {
    min-width: 0;
    flex: 1;
}

.idc-back-contact strong {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffd54f;
}

.idc-back-contact small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    .idc-pair {
        grid-template-columns: 1fr;
        max-width: 540px;
    }
}

@media screen and (max-width: 560px) {
    .idc-card {
        height: auto;
        aspect-ratio: auto;
        min-height: 0;
    }

    .idc-back-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .idc-back-grid strong,
    .idc-back-head-text small,
    .idc-back-contact small {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .idc-back-note {
        overflow-wrap: anywhere;
    }

    .idc-address strong {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }
}

/* --- Welcome Letter A4 (210mm ? 297mm) --- */
.wl-stage {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0 1.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wl-a4 {
    width: 210mm;
    flex: 0 0 210mm;
}

.wl-sheet {
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    background: #fffef9;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.wl-frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 8mm;
    background:
        linear-gradient(#8a1f1f, #8a1f1f) padding-box,
        repeating-linear-gradient(45deg,
            #c9a227 0 6px,
            #8a1f1f 6px 12px,
            #f3e2a0 12px 18px,
            #8a1f1f 18px 24px) border-box;
    border: 7px solid transparent;
}

.wl-frame-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #c9a227;
    padding: 10mm 12mm;
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.08), transparent 42%),
        #fffef9;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.wl-frame-inner::before,
.wl-frame-inner::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid #c9a227;
    pointer-events: none;
}

.wl-frame-inner::before {
    top: 8px;
    left: 8px;
    border-right: 0;
    border-bottom: 0;
}

.wl-frame-inner::after {
    bottom: 8px;
    right: 8px;
    border-left: 0;
    border-top: 0;
}

.wl-border-outer,
.wl-border-inner,
.wl-corner,
.wl-mid,
.wl-tricolor {
    display: none !important;
}

.wl-head {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.wl-seal {
    width: 54px;
    height: 54px;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #7a1a1a;
    background: radial-gradient(circle at 35% 30%, #ffe082, #c9a227 60%, #8a6a12);
    border: 3px solid #fff8dc;
    box-shadow: 0 0 0 2px #c9a227, 0 8px 18px rgba(138, 31, 31, 0.18);
    overflow: hidden;
}

.wl-seal.has-logo {
    width: 120px;
    height: 92px;
    border-radius: 0;
    padding: 4px 6px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.wl-seal.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.wl-seal svg {
    width: 24px;
    height: 24px;
}

.wl-eyebrow {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.9rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a1f1f;
    margin-bottom: 0.2rem;
}

.wl-head-text h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2.15rem;
    font-weight: 700;
    color: #1a1208;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.wl-tagline {
    margin-top: 0.3rem;
    font-size: 0.84rem;
    color: #6b5a3e;
    font-style: italic;
}

.wl-ornament {
    width: 140px;
    height: 2px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, transparent, #c9a227, #8a1f1f, #c9a227, transparent);
    position: relative;
}

.wl-ornament::before,
.wl-ornament::after {
    content: '\25C6';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #c9a227;
    font-size: 0.7rem;
}

.wl-ornament::before {
    left: -14px;
}

.wl-ornament::after {
    right: -14px;
}

.wl-date-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: #5c4b32;
    margin-bottom: 0.95rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed rgba(138, 31, 31, 0.25);
    flex-shrink: 0;
}

.wl-body {
    flex: 1 1 auto;
    min-height: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: #2b2114;
}

.wl-salute {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.wl-body p {
    margin-bottom: 0.7rem;
    font-size: 14px;
}

.wl-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.9rem;
    margin: 0.9rem 0 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(201, 162, 39, 0.45);
    background: linear-gradient(180deg, rgba(255, 248, 220, 0.65), rgba(255, 255, 255, 0.4));
    border-radius: 4px;
}

.wl-details span {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6a3c;
    margin-bottom: 0.12rem;
}

.wl-details strong {
    font-size: 0.88rem;
    color: #1a1208;
}

.wl-details small {
    font-weight: 600;
    color: #6b5a3e;
}

.wl-status {
    color: #8a1f1f;
}

.wl-closing {
    margin-top: 0.25rem;
}

.wl-regards {
    margin-top: 1.1rem;
    margin-bottom: 0.3rem;
}

.wl-sign {
    margin-top: 1.25rem;
}

.wl-sign-img {
    display: block;
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 0.25rem;
}

.wl-sign-line {
    width: 160px;
    height: 1px;
    background: #1a1208;
    margin-bottom: 0.35rem;
}

.wl-sign strong {
    display: block;
    font-size: 0.92rem;
}

.wl-sign small {
    color: #6b5a3e;
}

.wl-foot {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(138, 31, 31, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: #6b5a3e;
    text-align: center;
    flex-shrink: 0;
}

.wl-foot em {
    font-style: italic;
    opacity: 0.85;
}

@media (max-width: 860px) {

    .doc-page.wl-responsive,
    .wl-stage {
        justify-content: flex-start;
    }
}

/* Screen: true A4; JS scales preview to fit */
@media screen {
    .up-page-welcome .wl-a4 {
        width: 210mm;
        height: 297mm;
        flex: 0 0 auto;
        position: relative;
    }

    .up-page-welcome .wl-sheet {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;
    }
}

@media print {
    body.up-body {
        background: #fff !important;
    }

    .up-sidebar,
    .up-topbar,
    .up-flash,
    .up-footer,
    .up-bottom-nav,
    .up-overlay,
    .no-print,
    .doc-toolbar {
        display: none !important;
    }

    .up-main,
    .up-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 210mm !important;
        max-width: 210mm !important;
    }

    .doc-page {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .idc-stage {
        padding: 0;
        min-height: auto;
        justify-content: flex-start;
    }

    .idc-pair {
        display: flex;
        flex-direction: column;
        gap: 8mm;
        max-width: none;
        width: 100%;
        align-items: center;
    }

    .idc-card {
        box-shadow: none;
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-before: auto;
        break-before: auto;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .idc-pair {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .wl-stage {
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        width: 210mm !important;
    }

    .wl-a4 {
        width: 210mm !important;
        height: 297mm !important;
        flex: none !important;
        position: static !important;
        overflow: visible !important;
    }

    .wl-sheet {
        position: static !important;
        width: 210mm !important;
        height: 297mm !important;
        max-width: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wl-frame,
    .wl-frame-inner {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.up-page-welcome .up-app {
        display: block !important;
        width: 210mm !important;
    }

    @page {
        size: A4 portrait;
        margin: 0;
    }
}


/* ===== Multi Wallet (Soft UI Soft match) ===== */
.up-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.wal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.wal-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.wal-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.wal-stat.g-green::after {
    background: #17ad37;
}

.wal-stat.g-blue::after {
    background: #2152ff;
}

.wal-stat.g-purple::after {
    background: #7928ca;
}

.wal-stat.g-orange::after {
    background: #f59e0b;
}

.wal-stat.g-navy::after {
    background: #1e293b;
}

.wal-stat-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}

.wal-stat-ico svg {
    width: 20px;
    height: 20px;
}

.wal-stat.g-green .wal-stat-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wal-stat.g-blue .wal-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.wal-stat.g-purple .wal-stat-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.wal-stat.g-orange .wal-stat-ico {
    background: linear-gradient(310deg, #f53939, #fbcf33);
}

.wal-stat.g-navy .wal-stat-ico {
    background: linear-gradient(310deg, #0f172a, #334155);
}

.wal-stat-copy {
    min-width: 0;
}

.wal-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.wal-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wal-stat small {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

/* Legacy tone aliases ? Soft look */
.wal-stat.tone-green {}

.wal-stat.tone-blue {}

.wal-stat.tone-purple {}

.wal-stat.is-total,
.wal-stat.is-green {}

.wal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.wal-card {
    position: relative;
    display: grid;
    gap: 0.55rem;
    padding: 1.2rem 1.2rem 1.15rem;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.wal-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
}

.wal-card.tone-green::before {
    background: linear-gradient(90deg, #17ad37, #98ec2d);
}

.wal-card.tone-blue::before {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
}

.wal-card.tone-purple::before {
    background: linear-gradient(90deg, #7928ca, #ff0080);
}

.wal-card.tone-orange::before {
    background: linear-gradient(90deg, #ea580c, #f59e0b);
}

.wal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.1);
}

.wal-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.wal-card-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8392ab;
}

.wal-card-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
}

.wal-card.tone-green .wal-card-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wal-card.tone-blue .wal-card-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.wal-card.tone-orange .wal-card-ico {
    background: linear-gradient(310deg, #ea580c, #f59e0b);
}

.wal-card.tone-purple .wal-card-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.wal-card-ico svg {
    width: 18px;
    height: 18px;
}

.wal-card-go {
    color: #94a3b8;
    font-weight: 700;
    font-size: 1.1rem;
}

.wal-card-bal {
    font-size: 1.55rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
}

.wal-card p {
    margin: 0;
    font-size: 0.84rem;
    color: #67748e;
    line-height: 1.45;
}

.wal-card-cta {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2152ff;
}

.wal-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.wal-panel,
.wal-card-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.wal-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    color: #fff;
}

.wal-banner.is-blue {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.wal-banner.is-green {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #17ad37 0%, #98ec2d 120%);
}

.wal-banner.is-purple {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #7928ca 0%, #ff0080 120%);
}

.wal-banner.is-navy {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 55%, #2152ff 140%);
}

.wal-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wal-banner-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wal-banner-ico svg {
    width: 20px;
    height: 20px;
}

.wal-banner .wal-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.wal-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wal-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    opacity: 0.88;
    line-height: 1.4;
}

.wal-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.wal-banner .up-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    border: 0;
}

.wal-banner .up-btn-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.wal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid #eef0f4;
}

.wal-panel-head h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #344767;
}

.wal-panel-head a {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2152ff;
    text-decoration: none;
}

.wal-form-body {
    padding: 1.15rem;
}

.hint-label{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wal-hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: #8392ab;
    line-height: 1.4;
}

.wal-table-wrap {
    overflow-x: auto;
}

.wal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.wal-table th {
    text-align: left;
    padding: 0.75rem 1.1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.wal-table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.wal-table tbody tr:hover {
    background: #fafbfd;
}

.wal-empty {
    text-align: center !important;
    color: #94a3b8 !important;
    padding: 1.6rem 1rem !important;
}

.wal-table .is-in {
    color: #17ad37;
    font-weight: 700;
}

.wal-table .is-out {
    color: #f53939;
    font-weight: 700;
}

.wal-quick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.wal-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.58rem 0.9rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
}

.wal-quick-link em {
    font-style: normal;
    color: #344767;
    font-weight: 800;
}

.wal-quick-link.is-on {
    border-color: rgba(33, 82, 255, 0.28);
    background: linear-gradient(180deg, #eff4ff, #fff);
    color: #2152ff;
}

.wal-quick-link.is-on em {
    color: #2152ff;
}

.wal-quick-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    border: 1.5px solid transparent;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    position: relative;
    overflow: hidden;
}

.wal-quick-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.wal-quick-card.tone-green::before {
    background: linear-gradient(180deg, #17ad37, #98ec2d);
}

.wal-quick-card.tone-blue::before {
    background: linear-gradient(180deg, #2152ff, #21d4fd);
}

.wal-quick-card.tone-orange::before {
    background: linear-gradient(180deg, #ea580c, #f59e0b);
}

.wal-quick-card.tone-purple::before {
    background: linear-gradient(180deg, #7928ca, #ff0080);
}

.wal-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 36px rgba(15, 23, 42, 0.1);
}

.wal-quick-card.is-on {
    border-color: rgba(33, 82, 255, 0.28);
    background: linear-gradient(135deg, #f5f8ff 0%, #fff 55%);
}

.wal-quick-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.wal-quick-card.tone-green .wal-quick-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wal-quick-card.tone-blue .wal-quick-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.wal-quick-card.tone-orange .wal-quick-ico {
    background: linear-gradient(310deg, #ea580c, #f59e0b);
}

.wal-quick-card.tone-purple .wal-quick-ico {
    background: linear-gradient(310deg, #7928ca, #ff0080);
}

.wal-quick-ico svg {
    width: 18px;
    height: 18px;
}

.wal-quick-meta {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}

.wal-quick-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
}

.wal-quick-meta strong {
    font-size: 1.08rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

.wal-quick-go {
    color: #94a3b8;
    font-weight: 700;
    font-size: 1.05rem;
}

.wal-quick-card.is-on .wal-quick-go {
    color: #2152ff;
}

.wal-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.9rem 1.1rem 1.1rem;
}

.wal-pager a {
    min-width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.55rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.wal-pager a.is-on {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
}

.wal-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wal-badge.is-pending {
    background: #fff7ed;
    color: #c2410c;
}

.wal-badge.is-approved {
    background: #ecfdf5;
    color: #047857;
}

.wal-badge.is-rejected {
    background: #fef2f2;
    color: #b91c1c;
}

.wal-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.wal-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid rgba(131, 146, 171, 0.22);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #344767;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}

.wal-radio:has(input:checked) {
    border-color: rgba(33, 82, 255, 0.45);
    background: #eff4ff;
    color: #2152ff;
}

.up-btn-sm {
    padding: 0.42rem 0.8rem;
    font-size: 0.82rem;
}

/* ===== Add Money dialog (centered) ===== */
.wal-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(780px, calc(100vw - 1.5rem));
    max-width: min(780px, calc(100vw - 1.5rem));
    margin: auto;
    position: fixed;
    inset: 0;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow: visible;
}

.wal-dialog[open] {
    display: block;
}

.wal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.wal-dialog-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: wal-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wal-pop {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.wal-dialog-hero {
    position: relative;
    padding: 1.2rem 1.25rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.wal-dialog-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.wal-dialog-hero-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    margin-bottom: 0.7rem;
}

.wal-dialog-hero-ico svg {
    width: 22px;
    height: 22px;
}

.wal-dialog-hero h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.wal-dialog-hero p {
    margin: 0.3rem 0 0;
    font-size: 0.84rem;
    opacity: 0.9;
    line-height: 1.4;
    max-width: fit-content;
}

.wal-dialog-x {
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: background .15s ease;
}

.wal-dialog-x:hover {
    background: rgba(255, 255, 255, 0.32);
}

.wal-dialog-body {
    padding: 1.15rem 1.25rem 0.4rem;
}

.wal-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 1.2rem;
    border-top: 1px solid #eef0f4;
    background: #fafbfd;
    position: sticky;
    bottom: 0;
}

.wal-dialog-hero-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.wal-dialog-hero-copy .wal-dialog-hero-ico {
    margin-bottom: 0;
}

.wal-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}

.wal-mode-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1.5px solid rgba(131, 146, 171, 0.22);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.wal-mode-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wal-mode-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}

.wal-mode-ico svg {
    width: 18px;
    height: 18px;
}

.wal-mode-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.wal-mode-chip strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.2;
}

.wal-mode-chip small {
    font-size: 0.68rem;
    color: #8392ab;
    font-weight: 600;
    line-height: 1.25;
}

.wal-mode-chip:hover {
    transform: translateY(-1px);
}

.wal-mode-chip:has(input:checked),
.wal-mode-chip.is-on {
    border-color: rgba(33, 82, 255, 0.5);
    background: linear-gradient(180deg, #eff4ff, #fff);
    box-shadow: 0 10px 22px rgba(33, 82, 255, 0.12);
}

.wal-mode-chip:has(input:checked) .wal-mode-ico,
.wal-mode-chip.is-on .wal-mode-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
}

.wal-mode-chip:has(input:checked) strong,
.wal-mode-chip.is-on strong {
    color: #2152ff;
}

.wal-pay-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    margin: 0 0 0.55rem;
}

.wal-pay-split {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(260px, 1.05fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.95rem;
}

.wal-pay-side,
.wal-form-side {
    min-width: 0;
}

.wal-form-grid {
    gap: 0.75rem !important;
}

.wal-pay-banks {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
}

.wal-pay-bank {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid rgba(131, 146, 171, 0.14);
    font-size: 0.84rem;
    color: #475569;
}

.wal-pay-bank.is-online {
    grid-template-columns: 1fr;
}

.wal-pay-bank-meta {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.wal-pay-bank strong {
    color: #1e293b;
    font-size: 0.92rem;
    font-weight: 800;
}

.wal-upi-grid {
    display: grid;
    gap: 0.85rem;
}

.wal-upi-card {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 1rem 0.9rem 1.05rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5f8ff, #fff);
    border: 1px solid rgba(33, 82, 255, 0.14);
    text-align: center;
}

.wal-upi-qr-wrap {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
}

.wal-upi-qr-wrap span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.wal-pay-qr {
    width: min(200px, 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.wal-upi-id {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed rgba(33, 82, 255, 0.28);
}

.wal-upi-id small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
}

.wal-upi-id strong {
    font-size: 1rem;
    font-weight: 800;
    color: #2152ff;
    word-break: break-all;
}

.wal-upi-empty,
.wal-cash-note {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(131, 146, 171, 0.16);
    font-size: 0.86rem;
    color: #64748b;
}

.wal-cash-note strong {
    display: block;
    color: #344767;
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}

.wal-cash-note p {
    margin: 0;
    line-height: 1.45;
}

.wal-form-side .up-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #67748e;
}

.wal-form-side .up-field input[type="text"],
.wal-form-side .up-field input[type="number"] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    color: #344767;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wal-form-side .up-field input:focus {
    outline: none;
    border-color: rgba(33, 82, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}

.wal-upbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1.5px dashed rgba(33, 82, 255, 0.35);
    background: linear-gradient(180deg, #f5f8ff, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.wal-upbox:hover {
    border-color: rgba(33, 82, 255, 0.55);
    background: linear-gradient(180deg, #eef4ff, #fff);
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.08);
}

.wal-upbox input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.wal-upbox-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
    box-shadow: 0 8px 16px rgba(33, 82, 255, 0.22);
}

.wal-upbox-ico svg {
    width: 20px;
    height: 20px;
}

.wal-upbox-text {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}

.wal-upbox strong {
    font-size: 0.86rem;
    color: #2152ff;
    font-weight: 800;
    line-height: 1.25;
}

.wal-upbox-text>span {
    font-size: 0.74rem;
    color: #8392ab;
    line-height: 1.3;
}

.wal-upbox-file {
    color: #2152ff !important;
    font-weight: 700 !important;
    word-break: break-all;
}

.wal-upbox-file:empty {
    display: none;
}

.wal-upbox.has-file {
    border-style: solid;
    border-color: rgba(23, 173, 55, 0.35);
    background: linear-gradient(180deg, #f0fdf4, #fff);
}

.wal-upbox.has-file .wal-upbox-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wal-layout {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); */
    gap: 1rem;
    align-items: start;
}

@media (max-width: 980px) {

    .wal-grid,
    .wal-split,
    .wal-layout,
    .wal-quick {
        grid-template-columns: 1fr;
    }

    .wal-mode-grid {
        grid-template-columns: 1fr;
    }

    .wal-pay-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .wal-stats {
        grid-template-columns: 1fr;
    }

    .wal-pay-bank {
        grid-template-columns: 1fr;
    }

    .wal-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .wal-pay-qr {
        width: min(180px, 60vw);
    }
}


/* ===== Product Purchase / Shop ===== */
.shop-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.shop-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.shop-stat.g-purple {
    background: linear-gradient(135deg, #f5f3ff, #fff);
    border-color: #ddd6fe;
}

.shop-stat.g-blue {
    background: linear-gradient(135deg, #eff6ff, #fff);
    border-color: #bfdbfe;
}

.shop-stat.g-green {
    background: linear-gradient(135deg, #ecfdf5, #fff);
    border-color: #a7f3d0;
}

.shop-stat.g-orange {
    background: linear-gradient(135deg, #fff7ed, #fff);
    border-color: #fed7aa;
}

.shop-stat-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #0f172a;
    color: #fff;
    flex-shrink: 0;
}

.shop-stat-ico svg {
    width: 18px;
    height: 18px;
}

.shop-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.shop-stat strong {
    display: block;
    font-size: 1.15rem;
    color: #0f172a;
    line-height: 1.2;
}

.shop-stat strong.is-sm {
    font-size: 1rem;
}

.shop-stat small {
    color: #64748b;
    font-size: 0.78rem;
}

.shop-stat small a {
    color: #7c3aed;
    font-weight: 700;
}

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.shop-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.shop-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #f8fafc, #fff);
}

.shop-banner.is-cart {
    background: linear-gradient(180deg, #f5f3ff, #fff);
}

.shop-kicker {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0.2rem;
}

.shop-banner h2 {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    color: #0f172a;
}

.shop-banner p {
    margin: 0;
    color: #64748b;
    font-size: 0.86rem;
}

.shop-search {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.shop-search input {
    min-width: 180px;
    height: 40px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 0.8rem;
    font: inherit;
}

.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.9rem;
    padding: 1rem 1.1rem 1.2rem;
}

.shop-product {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.shop-product.is-oos {
    opacity: 0.72;
}

.shop-product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: grid;
    place-items: center;
}

.shop-product-media img {
    width: auto;
    height: auto;
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
    object-position: center;
    padding: 0;
}

.shop-product-ph {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #94a3b8;
}

.shop-product-ph svg {
    width: 28px;
    height: 28px;
}

.shop-stock-tag {
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-stock-tag.is-out {
    background: #fee2e2;
    color: #b91c1c;
}

.shop-stock-tag.is-low {
    background: #ffedd5;
    color: #c2410c;
}

.shop-product-body {
    padding: 0.85rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.shop-product-cat {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
}

.shop-product-body h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #0f172a;
    line-height: 1.3;
}

.shop-product-price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.shop-product-price strong {
    font-size: 1.05rem;
    color: #0f172a;
}

.shop-product-price s {
    color: #94a3b8;
    font-size: 0.82rem;
}

.shop-bv {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 800;
    color: #7c3aed;
    background: #f5f3ff;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}

.shop-add-form {
    display: flex;
    gap: 0.45rem;
    margin-top: auto;
}

.shop-add-form input[type="number"] {
    width: 64px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 0.45rem;
    font: inherit;
}

.shop-add-form .up-btn {
    flex: 1;
}

.shop-in-cart {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #059669;
}

.shop-empty {
    padding: 2rem 1.2rem;
    text-align: center;
    color: #64748b;
}

.shop-empty.is-compact {
    padding: 1.4rem 1rem;
}

.shop-empty strong {
    display: block;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

.shop-cart-card {
    position: sticky;
    top: 1rem;
}

.shop-cart-list {
    padding: 0.85rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.shop-cart-row {
    display: grid;
    grid-template-columns: 1fr 70px auto;
    gap: 0.55rem;
    align-items: center;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #f1f5f9;
}

.shop-cart-row strong {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.shop-cart-row small {
    color: #94a3b8;
    font-size: 0.74rem;
}

.shop-cart-row input {
    width: 100%;
    height: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 0.4rem;
    font: inherit;
}

.shop-cart-line {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.88rem;
    white-space: nowrap;
}

.shop-cart-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
}

.shop-cart-summary {
    margin: 0 1rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.shop-cart-summary>div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
}

.shop-cart-summary span {
    color: #64748b;
}

.shop-warn {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #b45309;
    font-weight: 600;
}

.shop-warn a {
    color: #7c3aed;
}

.shop-checkout-form {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shop-checkout-form .form-group {
    margin: 0;
}

.shop-checkout-form label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.3rem;
}

.shop-checkout-form input,
.shop-checkout-form textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    box-sizing: border-box;
}

.shop-table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrap,
.shop-inv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.shop-table th,
.shop-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    font-size: 0.88rem;
}

.shop-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
}

.shop-td-empty {
    text-align: center;
    color: #64748b;
    padding: 1.5rem !important;
}

.shop-td-actions {
    white-space: nowrap;
}

.shop-inv {
    font-weight: 700;
    color: #0f172a;
    background: #f1f5f9;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
}

.shop-pill {
    display: inline-flex;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-pill.is-paid {
    background: #d1fae5;
    color: #047857;
}

.shop-pill.is-pending {
    background: #ffedd5;
    color: #c2410c;
}

.shop-pill.is-cancelled,
.shop-pill.is-refunded {
    background: #fee2e2;
    color: #b91c1c;
}

.shop-pill.is-del-pending {
    background: #e0e7ff;
    color: #3730a3;
}

.shop-pill.is-del-processing {
    background: #ffedd5;
    color: #c2410c;
}

.shop-pill.is-del-shipped,
.shop-pill.is-del-out_for_delivery {
    background: #dbeafe;
    color: #1d4ed8;
}

.shop-pill.is-del-delivered {
    background: #d1fae5;
    color: #047857;
}

.shop-pill.is-del-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-pt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.badge-pt.pt-act {
    background: #d1fae5;
    color: #047857;
    border: 1px solid rgba(4, 120, 87, 0.25);
}

.badge-pt.pt-upg {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid rgba(29, 78, 216, 0.25);
}

.badge-pt.pt-rep {
    background: #f3e8ff;
    color: #7e22ce;
    border: 1px solid rgba(126, 34, 206, 0.25);
}

.badge-pt.pt-ps {
    background: #ffedd5;
    color: #c2410c;
    border: 1px solid rgba(194, 65, 12, 0.25);
}

.shop-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 1.15rem;
    flex-wrap: wrap;
}

.shop-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
}

.shop-tab:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.shop-tab.is-on {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.shop-fund-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.shop-fund-step {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.shop-fund-step:hover {
    border-color: #94a3b8;
}

.shop-fund-step.is-current {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.shop-fund-step.is-done {
    border-color: #86efac;
    background: #f0fdf4;
}

.shop-fund-num {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
    flex-shrink: 0;
}

.shop-fund-step.is-current .shop-fund-num {
    background: #7c3aed;
    color: #fff;
}

.shop-fund-step.is-done .shop-fund-num {
    background: #16a34a;
    color: #fff;
}

.shop-fund-copy strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
}

.shop-fund-copy small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.shop-ship-head {
    margin: 0.35rem 0 0.65rem;
}

.shop-ship-head strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
}

.shop-ship-head small {
    color: #64748b;
    font-size: 0.78rem;
}

.shop-ship-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
}

.shop-checkout-hint {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.shop-track {
    max-width: 920px;
    margin: 0 auto 1.1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.15rem 1.35rem 1.25rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.shop-track-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.shop-track-head h2 {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.2rem;
    color: #0f172a;
}

.shop-track-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
}

.shop-track-steps {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

.shop-track-steps li {
    position: relative;
    text-align: center;
    padding-top: 1.5rem;
}

.shop-track-steps li::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: -50%;
    right: 50%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.shop-track-steps li:first-child::before {
    display: none;
}

.shop-track-steps li.is-done::before,
.shop-track-steps li.is-current::before {
    background: #7c3aed;
}

.shop-track-dot {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    background: #e2e8f0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
    z-index: 1;
}

.shop-track-steps li.is-done .shop-track-dot {
    background: #7c3aed;
    box-shadow: 0 0 0 1px #7c3aed;
}

.shop-track-steps li.is-current .shop-track-dot {
    background: #fff;
    box-shadow: 0 0 0 3px #7c3aed;
}

.shop-track-steps strong {
    display: block;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.25;
}

.shop-track-steps li.is-done strong,
.shop-track-steps li.is-current strong {
    color: #0f172a;
}

.shop-track-steps small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.68rem;
    color: #94a3b8;
}

.shop-track-note {
    margin: 0.9rem 0 0;
    padding: 0.65rem 0.8rem;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 0.84rem;
    color: #475569;
}

.shop-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: #64748b;
    font-size: 0.86rem;
}

.shop-invoice {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.shop-inv-accent {
    height: 6px;
    background: linear-gradient(90deg, #7c3aed, #db2777);
}

.shop-inv-top {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.4rem 1.5rem 1.15rem;
}

.shop-inv-brand-block {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.shop-inv-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px;
}

.shop-inv-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}

.shop-inv-brand {
    display: block;
    font-size: 1.35rem;
    color: #0f172a;
    line-height: 1.2;
}

.shop-inv-doc-type {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #7c3aed;
}

.shop-inv-contact {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.shop-inv-right {
    text-align: right;
}

.shop-inv-no span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.shop-inv-no strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.2rem;
    color: #0f172a;
}

.shop-inv-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.shop-inv-badge {
    display: inline-flex;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-inv-badge.is-paid {
    background: #d1fae5;
    color: #047857;
}

.shop-inv-badge.is-pending {
    background: #ffedd5;
    color: #c2410c;
}

.shop-inv-badge.is-cancelled,
.shop-inv-badge.is-refunded {
    background: #fee2e2;
    color: #b91c1c;
}

.shop-inv-badge.is-del {
    background: #ede9fe;
    color: #6d28d9;
}

.shop-inv-info-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 1.5rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.shop-inv-info-strip span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.shop-inv-info-strip strong {
    font-size: 0.9rem;
    color: #0f172a;
    word-break: break-word;
}

.shop-inv-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
}

.shop-inv-party {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 0.95rem 1rem;
}

.shop-inv-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0.4rem;
}

.shop-inv-party strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.shop-inv-party p {
    margin: 0.12rem 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}

.shop-inv-id {
    color: #64748b !important;
    font-weight: 600;
}

.shop-inv-courier {
    font-weight: 700;
    color: #334155 !important;
}

.shop-inv-table {
    width: calc(100% - 3rem);
    margin: 0 1.5rem 1rem;
    border-collapse: collapse;
}

.shop-inv-table th,
.shop-inv-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 0.55rem;
    text-align: left;
    font-size: 0.86rem;
    vertical-align: top;
}

.shop-inv-table th {
    background: #0f172a;
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shop-inv-table th:first-child {
    border-radius: 10px 0 0 10px;
}

.shop-inv-table th:last-child {
    border-radius: 0 10px 10px 0;
}

.shop-inv-table .is-num {
    text-align: right;
    white-space: nowrap;
}

.shop-inv-table .is-name {
    font-weight: 700;
    color: #0f172a;
}

.shop-inv-table .is-amt {
    font-weight: 800;
    color: #0f172a;
}

.shop-inv-table tbody tr:nth-child(even) td {
    background: #f8fafc;
}

.shop-inv-totals {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 1rem;
    padding: 0 1.5rem 1.15rem;
    align-items: start;
}

.shop-inv-notes p {
    margin: 0.25rem 0 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}

.shop-inv-sum {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 1rem;
}

.shop-inv-sum>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #475569;
}

.shop-inv-sum .is-grand {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 2px solid #0f172a;
    font-size: 1.08rem;
    color: #0f172a;
}

.shop-inv-sum .is-paid {
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 800;
}

.shop-inv-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px dashed #e2e8f0;
    color: #64748b;
    font-size: 0.8rem;
}

.shop-inv-foot strong {
    display: block;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.shop-inv-foot p {
    margin: 0;
}

.shop-inv-stamp {
    text-align: right;
    min-width: 140px;
    padding-top: 0.35rem;
    border-top: 2px solid #cbd5e1;
}

.shop-inv-stamp .shop-inv-sign {
    display: block;
    max-width: 160px;
    max-height: 64px;
    margin: 0 0 0.35rem auto;
    object-fit: contain;
}

.shop-inv-stamp span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.shop-inv-stamp strong {
    margin-top: 0.2rem;
    font-size: 0.9rem;
}

@media (max-width: 980px) {
    .shop-stats {
        grid-template-columns: 1fr 1fr;
    }

    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-cart-card {
        position: static;
    }

    .shop-fund-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {

    .shop-track-steps,
    .shop-ship-grid {
        grid-template-columns: 1fr;
    }

    .shop-track-steps li {
        text-align: left;
        padding: 0.55rem 0 0.55rem 1.6rem;
    }

    .shop-track-steps li::before {
        left: 0.65rem;
        right: auto;
        top: -0.15rem;
        bottom: -0.15rem;
        width: 2px;
        height: auto;
    }

    .shop-track-dot {
        left: 0.35rem;
        transform: none;
        top: 0.7rem;
    }
}

@media (max-width: 640px) {
    .shop-stats {
        grid-template-columns: 1fr;
    }

    .shop-inv-parties,
    .shop-inv-totals,
    .shop-inv-info-strip {
        grid-template-columns: 1fr;
    }

    .shop-inv-right {
        text-align: left;
    }

    .shop-inv-badges {
        justify-content: flex-start;
    }

    .shop-inv-table-wrap {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .shop-inv-table {
        width: 100%;
        min-width: 560px;
        margin: 0;
    }

    .shop-table {
        min-width: 560px;
    }

    .doc-toolbar-actions {
        flex-wrap: wrap;
    }

    .shop-inv-top,
    .shop-inv-parties,
    .shop-inv-totals,
    .shop-inv-foot {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .shop-inv-info-strip {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html,
    body {
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.up-body .up-main,
    body.up-body .up-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .shop-invoice-page {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .shop-track {
        display: none !important;
    }

    .shop-invoice {
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .shop-inv-accent {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .shop-inv-table th {
        background: #0f172a !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .shop-inv-table tbody tr:nth-child(even) td {
        background: #f8fafc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .shop-inv-badge,
    .shop-inv-sum,
    .shop-inv-info-strip,
    .shop-inv-sum .is-paid {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .shop-inv-foot {
        page-break-inside: avoid;
    }

    .shop-inv-table-wrap {
        overflow: visible !important;
        margin: 0 !important;
    }

    .shop-inv-table {
        page-break-inside: auto;
        min-width: 0 !important;
    }

    .shop-inv-table tr {
        page-break-inside: avoid;
    }
}

/* Multi-step cart / checkout */
.ck-page {
    max-width: 100%;
    margin: 0 auto;
}

.ck-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ck-head h1 {
    margin: 0;
    font-size: 1.55rem;
    color: #0f172a;
}

.ck-count {
    color: #7c3aed;
    font-size: 0.95rem;
    font-weight: 700;
    margin-left: 0.35rem;
}

.ck-back {
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.ck-back:hover {
    color: #7c3aed;
}

.ck-empty {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.ck-empty strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.ck-empty p {
    color: #64748b;
    margin: 0 0 1rem;
}

.ck-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.25rem;
    align-items: start;
}

.ck-select-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 0.85rem;
}

.ck-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    color: #334155;
    cursor: pointer;
}

.ck-link-danger {
    border: 0;
    background: none;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}

.ck-items {
    display: grid;
    gap: 0.85rem;
}

.ck-item {
    display: grid;
    grid-template-columns: auto 96px minmax(0, 1fr);
    gap: 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.ck-item-check {
    margin-top: 0.35rem;
}

.ck-item-media {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ck-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ck-item-ph {
    width: 40px;
    color: #94a3b8;
}

.ck-item-sku {
    color: #94a3b8;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ck-item-body h3 {
    margin: 0.15rem 0 0.4rem;
    font-size: 1rem;
    color: #0f172a;
}

.ck-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.ck-item-tags span {
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.ck-item-price {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.ck-item-price strong {
    color: #7c3aed;
    font-size: 1.05rem;
}

.ck-item-price s {
    color: #94a3b8;
    font-size: 0.85rem;
}

.ck-item-price em {
    color: #16a34a;
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 800;
}

.ck-item-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.ck-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.15rem;
    background: #fff;
}

.ck-qty span {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.ck-qty-form {
    display: inline;
    margin: 0;
}

.ck-qty-btn {
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #0f172a;
    font-weight: 800;
    cursor: pointer;
}

.ck-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ck-item-ship {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.65rem 0 0;
    color: #16a34a;
    font-size: 0.8rem;
    font-weight: 600;
}

.ck-side {
    position: sticky;
    top: 1rem;
}

.ck-summary {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.15rem 1.2rem 1.25rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.ck-summary h2 {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
}

.ck-sum-row,
.ck-sum-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    color: #475569;
    font-size: 0.9rem;
}

.ck-sum-line span {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-sum-row.is-total {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 800;
}

.ck-save {
    margin: 0.75rem 0;
    padding: 0.65rem 0.75rem;
    background: #ecfdf5;
    color: #047857;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
}

.ck-cta,
.ck-cta-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.2rem;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.ck-cta:disabled,
.ck-cta[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ck-cta-sm {
    width: auto;
    padding: 0.55rem 1rem;
    font-size: 0.84rem;
}

.ck-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    color: #94a3b8;
    font-size: 0.75rem;
}

.ck-pay-form {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.ck-pay-note {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ck-pay-note label {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: #334155;
}

.ck-pay-note label span {
    font-weight: 500;
    color: #94a3b8;
}

.ck-pay-note textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font: inherit;
    font-size: 0.92rem;
    color: #0f172a;
    background: #fff;
    line-height: 1.45;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.ck-pay-note textarea::placeholder {
    color: #94a3b8;
}

.ck-pay-note textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

.ck-pay-form .ck-cta {
    margin-top: 0.15rem;
}

.ck-steps {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0 0 1.1rem;
}

.ck-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

.ck-step span {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.78rem;
}

.ck-step.is-on {
    color: #7c3aed;
}

.ck-step.is-on span {
    background: #ede9fe;
    color: #7c3aed;
}

.ck-step.is-done {
    color: #16a34a;
}

.ck-step.is-done span {
    background: #dcfce7;
    color: #16a34a;
}

.ck-step-sep {
    color: #cbd5e1;
}

.ck-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.15rem 1.25rem 1.35rem;
}

.ck-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ck-panel-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.ck-panel-sub {
    margin-bottom: 0.85rem;
    color: #64748b;
    font-size: 0.88rem;
}

.ck-addr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.ck-addr-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
}

.ck-addr-card.is-on {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ck-addr-badges {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
}

.ck-addr-label {
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.ck-addr-default {
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.ck-addr-card strong {
    display: block;
    margin-bottom: 0.25rem;
}

.ck-addr-card p {
    margin: 0.15rem 0;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.4;
}

.ck-addr-phone {
    font-weight: 700;
    color: #0f172a !important;
}

.ck-addr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.ck-addr-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 160px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    color: #64748b;
    text-decoration: none;
    font-weight: 700;
}

.ck-addr-add span {
    font-size: 1.6rem;
    color: #7c3aed;
}

.ck-addr-form {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.ck-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ck-form-grid .ck-full {
    grid-column: 1 / -1;
}

.ck-form-actions {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.ck-pay-ship {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.ck-pay-ship strong {
    display: block;
    margin: 0.2rem 0;
}

.ck-pay-ship p {
    margin: 0.15rem 0;
    color: #475569;
    font-size: 0.88rem;
}

.ck-wallet-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.ck-wallet-card.is-ok {
    background: #ecfdf5;
    border-color: #86efac;
}

.ck-wallet-card.is-low {
    background: #fff7ed;
    border-color: #fdba74;
}

.ck-wallet-card strong {
    display: block;
    font-size: 1.35rem;
    color: #0f172a;
}

.ck-wallet-card small {
    color: #64748b;
}

.ck-wallet-badge {
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ck-wallet-badge.is-low {
    background: #ffedd5;
    color: #c2410c;
}

.ck-fund-box {
    border: 1px dashed #fdba74;
    background: #fffbeb;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.ck-fund-box p {
    margin: 0.35rem 0 0.75rem;
    color: #78716c;
    font-size: 0.86rem;
}

.ck-fund-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ck-activated {
    max-width: 920px;
    margin: 0 auto 1rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #86efac;
}

.ck-activated strong {
    display: block;
    color: #166534;
    font-size: 1.05rem;
}

.ck-activated p {
    margin: 0.25rem 0 0;
    color: #166534;
}

@media (max-width: 900px) {

    .ck-layout,
    .ck-addr-grid,
    .ck-form-grid {
        grid-template-columns: 1fr;
    }

    .ck-side {
        position: static;
    }

    .ck-item {
        grid-template-columns: auto 72px minmax(0, 1fr);
    }
}

/* Checkout address modal */
body.ck-modal-open {
    overflow: hidden;
}

.ck-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ck-modal.is-open,
.ck-modal:not([hidden]) {
    display: flex;
}

.ck-modal[hidden] {
    display: none !important;
}

.ck-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.ck-modal-card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(92vh, 760px);
    overflow: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.ck-modal-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.35rem 1.1rem;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
}

.ck-modal-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.25rem;
}

.ck-modal-hero h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
}

.ck-modal-hero p {
    margin: 0.3rem 0 0;
    font-size: 0.86rem;
    opacity: 0.9;
}

.ck-modal-x {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.ck-modal-x:hover {
    background: rgba(255, 255, 255, 0.32);
}

.ck-modal-body {
    padding: 1.2rem 1.35rem 1.35rem;
}

.ck-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.ck-modal-grid .ck-full {
    grid-column: 1 / -1;
}

.ck-modal-body .form-group {
    margin: 0;
}

.ck-modal-body .form-group label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.3rem;
}

.ck-modal-body .form-group input,
.ck-modal-body .form-group textarea {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    color: #0f172a;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.ck-modal-body .form-group input:focus,
.ck-modal-body .form-group textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.ck-label-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ck-label-pill {
    cursor: pointer;
}

.ck-label-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ck-label-pill span {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
}

.ck-label-pill input:checked+span {
    border-color: #7c3aed;
    background: #ede9fe;
    color: #6d28d9;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.ck-default-toggle {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin: 1rem 0 1.15rem;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.ck-default-toggle input {
    margin-top: 0.2rem;
}

.ck-default-toggle strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
}

.ck-default-toggle small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.78rem;
}

.ck-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ck-modal-actions .ck-cta-sm {
    width: auto;
    min-width: 140px;
}

.ck-panel-sub small {
    display: block;
    margin-top: 0.2rem;
    color: #94a3b8;
    font-weight: 500;
}

.ck-addr-selected {
    background: #ede9fe;
    color: #6d28d9;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
}

.ck-addr-continue {
    margin-top: 1.1rem;
}

.ck-addr-empty-hint {
    margin: 1rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.ck-addr-add {
    border: 2px dashed #cbd5e1;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.ck-addr-add:hover {
    border-color: #7c3aed;
    color: #7c3aed;
}

@media (max-width: 640px) {
    .ck-modal-grid {
        grid-template-columns: 1fr;
    }

    .ck-modal-card {
        border-radius: 16px;
    }

    .ck-modal-actions {
        flex-direction: column-reverse;
    }

    .ck-modal-actions .up-btn,
    .ck-modal-actions .ck-cta-sm {
        width: 100%;
    }
}

/* Purchase tracking */
.trk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1.15rem 1rem;
}

.trk-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.trk-chip.is-on,
.trk-chip:hover {
    border-color: #7c3aed;
    background: #ede9fe;
    color: #6d28d9;
}

.trk-list {
    display: grid;
    gap: 0.9rem;
    padding: 0 1.15rem 1.25rem;
}

.trk-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.trk-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.trk-meta {
    margin: 0.3rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.trk-mini-steps {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}

.trk-mini-steps li {
    position: relative;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    padding-top: 1.1rem;
    line-height: 1.25;
}

.trk-mini-steps li span {
    position: absolute;
    top: 0.15rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #e2e8f0;
}

.trk-mini-steps li::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: -50%;
    right: 50%;
    height: 2px;
    background: #e2e8f0;
}

.trk-mini-steps li:first-child::before {
    display: none;
}

.trk-mini-steps li.is-done,
.trk-mini-steps li.is-current {
    color: #0f172a;
}

.trk-mini-steps li.is-done span,
.trk-mini-steps li.is-current span {
    background: #7c3aed;
}

.trk-mini-steps li.is-done::before,
.trk-mini-steps li.is-current::before {
    background: #7c3aed;
}

.trk-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.trk-card-grid span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}

.trk-card-grid strong {
    display: block;
    font-size: 0.9rem;
    color: #0f172a;
    word-break: break-word;
}

.trk-card-grid small {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.8rem;
}

.trk-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.trk-card-actions small {
    color: #64748b;
    font-size: 0.78rem;
}

@media (max-width: 800px) {

    .trk-mini-steps,
    .trk-card-grid {
        grid-template-columns: 1fr;
    }

    .trk-mini-steps li {
        text-align: left;
        padding: 0.35rem 0 0.35rem 1.4rem;
    }

    .trk-mini-steps li span {
        left: 0;
        transform: none;
        top: 0.55rem;
    }

    .trk-mini-steps li::before {
        left: 0.28rem;
        right: auto;
        top: -0.1rem;
        bottom: -0.1rem;
        width: 2px;
        height: auto;
    }
}

/* User Rank & Rewards — Royal Life Global Theme */
.urr-pretitle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.4rem;
}

.urr-pretitle svg {
    width: 14px;
    height: 14px;
    color: #f59e0b;
}

.urr-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.urr-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.15rem;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(22, 33, 62, 0.08);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.urr-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

.urr-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.urr-stat.g-blue::after {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
}

.urr-stat.g-green::after {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.urr-stat.g-purple::after {
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
}

.urr-stat.g-gold::after {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.urr-stat-ico {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.urr-stat-ico svg {
    width: 22px;
    height: 22px;
}

.urr-stat.g-blue .urr-stat-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
}

.urr-stat.g-green .urr-stat-ico {
    background: linear-gradient(310deg, #059669, #34d399);
}

.urr-stat.g-purple .urr-stat-ico {
    background: linear-gradient(310deg, #7c3aed, #c084fc);
}

.urr-stat.g-gold .urr-stat-ico {
    background: linear-gradient(310deg, #d97706, #fbbf24);
}

.urr-stat-content {
    min-width: 0;
    flex: 1;
}

.urr-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8392ab;
}

.urr-stat-val {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.urr-stat-sub {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Standout current rank card */
.urr-stat-rank {
    background: linear-gradient(135deg, #0b1120 0%, #16213e 60%, #1e293b 100%);
    border-color: rgba(255, 193, 7, 0.3);
    box-shadow: 0 12px 28px rgba(11, 17, 32, 0.2);
}

.urr-stat-rank::after {
    background: linear-gradient(90deg, #ffd54f, #ffc107);
}

.urr-stat-rank .urr-stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.urr-stat-rank .urr-stat-val {
    color: #fff;
    text-shadow: 0 2px 10px rgba(255, 193, 7, 0.25);
}

.urr-stat-rank .urr-stat-sub {
    color: #fde68a;
}

.urr-stat-rank .urr-stat-ico {
    background: linear-gradient(145deg, #ffd54f, #ffc107);
    color: #0b1120;
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.35);
}

/* Next Milestone Showcase Card */
.urr-next-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.06);
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.urr-next-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(118deg, #0b1120 0%, #16213e 50%, #253356 100%);
    color: #fff;
    position: relative;
}

.urr-next-banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, transparent);
}

.urr-next-banner-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.urr-next-banner-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    display: grid;
    place-items: center;
    color: #0b1120;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
}

.urr-next-banner-ico svg {
    width: 22px;
    height: 22px;
}

.urr-next-banner-text h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.urr-next-banner-text h2 span {
    color: #fbbf24;
}

.urr-next-banner-text p {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.urr-next-reward-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fef3c7;
    font-size: 0.82rem;
    font-weight: 700;
}

.urr-next-reward-tag strong {
    color: #fbbf24;
    font-weight: 800;
}

.urr-next-body {
    padding: 1.25rem 1.35rem;
}

.urr-leg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.urr-leg-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.05rem 1.15rem;
    position: relative;
}

.urr-leg-box.is-fulfilled {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.urr-leg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.urr-leg-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
}

.urr-leg-title svg {
    width: 15px;
    height: 15px;
    color: #2563eb;
}

.urr-leg-box.is-fulfilled .urr-leg-title svg {
    color: #10b981;
}

.urr-leg-pct {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
}

.urr-leg-box.is-fulfilled .urr-leg-pct {
    background: #dcfce7;
    color: #15803d;
}

.urr-leg-track {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    margin-bottom: 0.65rem;
}

.urr-leg-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    transition: width 0.6s ease;
}

.urr-leg-fill.fill-right {
    background: linear-gradient(90deg, #059669, #34d399);
}

.urr-leg-box.is-fulfilled .urr-leg-fill {
    background: linear-gradient(90deg, #10b981, #059669);
}

.urr-leg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
    flex-wrap: wrap;
}

.urr-leg-foot strong {
    color: #1e293b;
}

.urr-leg-need {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 6px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #ffedd5;
}

.urr-leg-need.is-ok {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

/* Top Rank Completed State */
.urr-completed-card {
    background: linear-gradient(135deg, #0b1120 0%, #16213e 50%, #2e2616 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 193, 7, 0.4);
    box-shadow: 0 14px 30px rgba(11, 17, 32, 0.18);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: #fff;
}

.urr-completed-ico {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffd54f, #ffc107);
    color: #0b1120;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(255, 193, 7, 0.4);
}

.urr-completed-ico svg {
    width: 32px;
    height: 32px;
}

.urr-completed-text h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
}

.urr-completed-text p {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: #fde68a;
}

/* Ladder Card */
.urr-ladder-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(22, 33, 62, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.urr-card-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(118deg, #0f172a 0%, #1e293b 65%, #334155 100%);
    color: #fff;
}

.urr-card-banner-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.urr-card-banner-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    color: #fbbf24;
    flex-shrink: 0;
}

.urr-card-banner-ico svg {
    width: 22px;
    height: 22px;
}

.urr-card-banner h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.urr-card-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: #94a3b8;
}

.urr-card-banner p strong {
    color: #fbbf24;
}

.urr-legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.urr-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.urr-legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}

.urr-legend-dot.is-achieved {
    background: #10b981;
}

.urr-legend-dot.is-next {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
}

.urr-legend-dot.is-locked {
    background: #64748b;
}

.urr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.urr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 0.88rem;
}

.urr-table thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.urr-table thead th:first-child {
    text-align: center;
    width: 56px;
}

.urr-table thead th:last-child {
    text-align: center;
    width: 130px;
}

.urr-table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    transition: background 0.15s ease;
}

.urr-table tbody tr:hover td {
    background: #f8fafc;
}

/* Row states */
.urr-table tbody tr.is-done td {
    background: rgba(16, 185, 129, 0.04);
}

.urr-table tbody tr.is-done td:first-child {
    border-left: 3px solid #10b981;
}

.urr-table tbody tr.is-next td {
    background: rgba(245, 158, 11, 0.08);
}

.urr-table tbody tr.is-next td:first-child {
    border-left: 3px solid #f59e0b;
}

.urr-table tbody tr.is-highlight td {
    background: rgba(254, 240, 138, 0.25);
}

.urr-table td:first-child {
    text-align: center;
}

.urr-table-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.urr-table tr.is-done .urr-table-idx {
    background: #d1fae5;
    color: #065f46;
}

.urr-table tr.is-next .urr-table-idx {
    background: #fef3c7;
    color: #92400e;
    font-weight: 800;
    box-shadow: 0 0 0 1px #f59e0b;
}

.urr-rank-cell {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.urr-rank-gem {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #475569;
    flex-shrink: 0;
}

.urr-rank-gem svg {
    width: 18px;
    height: 18px;
}

.urr-rank-cell strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
}

.urr-rank-cell .urr-mini-tags {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.urr-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    line-height: 1.2;
}

.urr-pill.ok {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.urr-pill.next {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.urr-pill.star {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.urr-org-val {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.92rem;
}

.urr-org-check {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    color: #10b981;
    font-size: 0.72rem;
    font-weight: 700;
}

.urr-org-check svg {
    width: 14px;
    height: 14px;
}

.urr-reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-weight: 800;
    color: #0f172a;
    font-size: 0.88rem;
}

.urr-reward-pill svg {
    width: 15px;
    height: 15px;
    color: #d97706;
}

.urr-table tr.is-next .urr-reward-pill,
.urr-table tr.is-highlight .urr-reward-pill {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

/* Status cell */
.urr-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.urr-status-badge svg {
    width: 13px;
    height: 13px;
}

.urr-status-badge.is-done {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.urr-status-badge.is-next {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}

.urr-status-badge.is-locked {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.urr-table tfoot td {
    padding: 0.95rem 1rem;
    background: #0f172a;
    color: #fff;
    font-weight: 800;
    border: none;
}

.urr-table tfoot td:last-child {
    text-align: right;
    color: #fbbf24;
    font-size: 1.05rem;
}

/* Bonanza Offer Section */
.urr-bonanza-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.08);
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.urr-bonanza-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.35rem;
    background: linear-gradient(118deg, #0b1120 0%, #16213e 50%, #2b2111 100%);
    color: #fff;
    border-bottom: 2px solid #f59e0b;
}

.urr-bonanza-banner-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.urr-bonanza-banner-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffd54f, #ffc107);
    color: #0b1120;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(255, 193, 7, 0.4);
}

.urr-bonanza-banner-ico svg {
    width: 22px;
    height: 22px;
}

.urr-bonanza-banner h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.urr-bonanza-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: #fde68a;
}

.urr-bonanza-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fef3c7;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.urr-bonanza-body {
    display: grid;
    grid-template-columns: 260px 1fr;
}

.urr-bonanza-direct {
    padding: 1.5rem 1.35rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-right: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.4rem;
}

.urr-bonanza-direct-ico {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #ffffff;
    display: grid;
    place-items: center;
    color: #d97706;
    margin-bottom: 0.35rem;
    box-shadow: 0 8px 18px rgba(217, 119, 6, 0.15);
}

.urr-bonanza-direct-ico svg {
    width: 26px;
    height: 26px;
}

.urr-bonanza-direct span {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92400e;
}

.urr-bonanza-direct strong {
    font-size: 1.8rem;
    font-weight: 800;
    color: #b45309;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.urr-bonanza-direct small {
    font-size: 0.76rem;
    color: #78350f;
    font-weight: 600;
}

.urr-bonanza-benefits {
    padding: 1.4rem 1.5rem;
    background: #ffffff;
}

.urr-bonanza-benefits-title {
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.85rem;
}

.urr-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.urr-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.4;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.urr-benefit-item:hover {
    transform: translateY(-1px);
    border-color: #f59e0b;
    background: #fffbeb;
}

.urr-benefit-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #dcfce7;
    color: #15803d;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.urr-benefit-check svg {
    width: 12px;
    height: 12px;
}

/* Policy Card */
.urr-policy-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.5;
}

.urr-policy-card svg {
    width: 20px;
    height: 20px;
    color: #475569;
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 1100px) {
    .urr-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .urr-benefit-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .urr-stats {
        grid-template-columns: 1fr;
    }

    .urr-leg-grid {
        grid-template-columns: 1fr;
    }

    .urr-bonanza-body {
        grid-template-columns: 1fr;
    }

    .urr-bonanza-direct {
        border-right: none;
        border-bottom: 1px solid rgba(245, 158, 11, 0.2);
    }
}

/* Repurchase Income — polished card */
.urr-repurchase-card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(22, 33, 62, 0.08);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.urr-repurchase-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.15rem 1.35rem;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(233, 196, 106, 0.22), transparent 55%),
        linear-gradient(118deg, #0b1120 0%, #16213e 55%, #1e3a5f 100%);
    color: #fff;
}

.urr-repurchase-banner-left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.urr-repurchase-banner-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #e9c46a, #daa520);
    color: #0b1120;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(218, 165, 32, 0.35);
}

.urr-repurchase-banner-ico svg {
    width: 22px;
    height: 22px;
}

.urr-repurchase-banner h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.urr-repurchase-banner p {
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
    color: #cbd5e1;
}

.urr-repurchase-banner-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.urr-repurchase-badge {
    display: inline-flex;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(233, 196, 106, 0.18);
    border: 1px solid rgba(233, 196, 106, 0.4);
    color: #fef3c7;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.urr-repurchase-sum {
    font-size: 0.8rem;
    color: #94a3b8;
}

.urr-repurchase-sum strong {
    color: #f0d78a;
    font-weight: 800;
}

.urr-repurchase-intro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border-bottom: 1px solid #eef2f7;
    align-items: center;
}

.urr-repurchase-intro-item span {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.urr-repurchase-intro-item strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.98rem;
    font-weight: 800;
    color: #16213e;
}

.urr-repurchase-intro-item small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: #94a3b8;
    line-height: 1.35;
}

.urr-repurchase-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #16213e, #2d3561);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(22, 33, 62, 0.2);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.urr-repurchase-cta svg {
    width: 14px;
    height: 14px;
}

.urr-repurchase-cta:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #fff;
}

.urr-repurchase-bands {
    display: grid;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem 0.35rem;
}

.urr-repurchase-band {
    border: 1px solid #e8eef5;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.urr-repurchase-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.urr-repurchase-band-head strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #16213e;
}

.urr-repurchase-band-head span {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
}

.urr-repurchase-band.tone-gold .urr-repurchase-band-head {
    background: linear-gradient(90deg, #fffbeb, #fef9c3);
}

.urr-repurchase-band.tone-gold .urr-repurchase-band-head span {
    color: #b45309;
}

.urr-repurchase-band.tone-amber .urr-repurchase-band-head {
    background: linear-gradient(90deg, #fff7ed, #ffedd5);
}

.urr-repurchase-band.tone-amber .urr-repurchase-band-head span {
    color: #c2410c;
}

.urr-repurchase-band.tone-slate .urr-repurchase-band-head {
    background: linear-gradient(90deg, #f8fafc, #f1f5f9);
}

.urr-repurchase-band.tone-blue .urr-repurchase-band-head {
    background: linear-gradient(90deg, #eff6ff, #dbeafe);
}

.urr-repurchase-band.tone-blue .urr-repurchase-band-head span {
    color: #1d4ed8;
}

.urr-repurchase-band.tone-teal .urr-repurchase-band-head {
    background: linear-gradient(90deg, #f0fdfa, #ccfbf1);
}

.urr-repurchase-band.tone-teal .urr-repurchase-band-head span {
    color: #0f766e;
}

.urr-repurchase-band-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
}

.urr-repurchase-band.tone-teal .urr-repurchase-band-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.urr-repurchase-lv {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-right: 1px solid #eef2f7;
}

.urr-repurchase-lv:last-child {
    border-right: 0;
}

.urr-repurchase-lv em {
    display: block;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.urr-repurchase-lv strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #16213e;
    letter-spacing: -0.02em;
}

.urr-repurchase-band.tone-gold .urr-repurchase-lv strong {
    color: #b45309;
}

.urr-repurchase-band.tone-amber .urr-repurchase-lv strong {
    color: #c2410c;
}

.urr-repurchase-band.tone-blue .urr-repurchase-lv strong {
    color: #1d4ed8;
}

.urr-repurchase-band.tone-teal .urr-repurchase-lv strong {
    color: #0f766e;
}

.urr-repurchase-foot {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.85rem 1.25rem 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.urr-repurchase-foot svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #64748b;
    margin-top: 1px;
}

.urr-repurchase-foot p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #64748b;
}

@media (max-width: 980px) {
    .urr-repurchase-intro {
        grid-template-columns: 1fr 1fr;
    }

    .urr-repurchase-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .urr-repurchase-banner-meta {
        align-items: flex-start;
        width: 100%;
    }

    .urr-repurchase-intro {
        grid-template-columns: 1fr;
    }

    .urr-repurchase-band-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .urr-repurchase-lv {
        border-right: 0;
        border-bottom: 1px solid #eef2f7;
    }
}

@media (max-width: 420px) {
    .urr-repurchase-band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.urr-repurchase-grid {
    display: none;
}

.urr-repurchase-cell {
    display: none;
}
/* Invoice GST */
.shop-inv-table th small { font-size: 0.62rem; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.shop-inv-table .shop-inv-gst strong { display: block; color: #0f172a; font-weight: 700; }
.shop-inv-table .shop-inv-gst small { display: block; margin-top: 0.15rem; font-size: 0.7rem; color: #64748b; white-space: nowrap; }
.shop-inv-sum .is-gst { margin-top: 0.15rem; padding-top: 0.5rem; border-top: 1px dashed #cbd5e1; color: #be123c; font-weight: 700; }
.shop-inv-sum .is-grand small { font-size: 0.72rem; font-weight: 600; color: #64748b; }

/* Shop GST (report, cart, checkout, tracking) */
.shop-stat.g-red { background: linear-gradient(135deg, #fff1f2, #fff); border-color: #fecdd3; }
.shop-table .shop-td-gst { color: #be123c; font-weight: 600; white-space: nowrap; }
.ck-gst-tag { display: inline-block; margin-top: 0.2rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #fff1f2; color: #be123c; font-size: 0.68rem; font-weight: 700; }
.ck-sum-row.is-gst { font-size: 0.82rem; color: #64748b; }
.ck-sum-row.is-gst strong, .ck-sum-row.is-gst span:last-child { color: #be123c; }
.ck-sum-row.is-total small { font-size: 0.7rem; font-weight: 600; color: #64748b; }
.ck-sum-gst { display: block; margin-top: 0.1rem; font-size: 0.68rem; color: #94a3b8; }
.trk-gst { margin-left: 0.25rem; font-size: 0.75rem; font-weight: 600; color: #64748b; }

/* Profit Share Packs */
.psp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; padding: 1.2rem; }
.psp-card {
    --psp-a: #2563eb; --psp-b: #7c3aed; --psp-soft: #eef2ff; --psp-ink: #1e3a8a;
    position: relative; display: flex; flex-direction: column; gap: 0.6rem;
    padding: 1.1rem 1.1rem 1.15rem; overflow: hidden;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -14px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.psp-card::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 5px;
    background: linear-gradient(90deg, var(--psp-a), var(--psp-b));
}
.psp-card::after {
    content: ''; position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, var(--psp-soft) 0%, transparent 70%); pointer-events: none;
}
.psp-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--psp-a) 45%, transparent); }
.psp-t1 { --psp-a: #2563eb; --psp-b: #06b6d4; --psp-soft: #e0f2fe; --psp-ink: #1e40af; }
.psp-t2 { --psp-a: #059669; --psp-b: #84cc16; --psp-soft: #dcfce7; --psp-ink: #065f46; }
.psp-t3 { --psp-a: #7c3aed; --psp-b: #ec4899; --psp-soft: #f3e8ff; --psp-ink: #5b21b6; }
.psp-t4 { --psp-a: #ea580c; --psp-b: #f59e0b; --psp-soft: #ffedd5; --psp-ink: #9a3412; }
.psp-t5 { --psp-a: #e11d48; --psp-b: #f97316; --psp-soft: #ffe4e6; --psp-ink: #9f1239; }
.psp-t6 { --psp-a: #0f766e; --psp-b: #6366f1; --psp-soft: #ccfbf1; --psp-ink: #134e4a; }
.psp-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 0.15rem; }
.psp-tier {
    padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--psp-ink); background: var(--psp-soft);
}
.psp-ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, var(--psp-a), var(--psp-b));
    box-shadow: 0 6px 14px -6px var(--psp-a);
}
.psp-ico svg { width: 19px; height: 19px; }
.psp-name { position: relative; z-index: 1; font-size: 0.95rem; font-weight: 800; color: var(--up-ink); line-height: 1.3; }
.psp-price {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.8rem 0.9rem; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, var(--psp-a), var(--psp-b));
}
.psp-price small { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.psp-amount { font-size: 1.25rem; font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -0.01em; }
.psp-state {
    position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
}
.psp-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.psp-state.is-ok { color: #047857; background: #d1fae5; }
.psp-state.is-low { color: #b45309; background: #fef3c7; }
.psp-state.is-lock { color: #64748b; background: #f1f5f9; }
.psp-card .psp-buy { position: relative; z-index: 1; border: 0; background: linear-gradient(135deg, var(--psp-a), var(--psp-b)); color: #fff; box-shadow: 0 8px 18px -10px var(--psp-a); }
.psp-card .psp-buy:not([disabled]):hover { filter: brightness(1.06); }
.psp-card .psp-buy[disabled] { background: #e2e8f0; color: #94a3b8; box-shadow: none; opacity: 1; }
.psp-topup { position: relative; z-index: 1; font-size: 0.74rem; font-weight: 700; color: var(--psp-ink); text-align: center; text-decoration: none; }
.psp-topup:hover { text-decoration: underline; }
.psp-rate { display: none; font-size: 1rem; font-weight: 700; color: #047857; }
.psp-rate small { font-weight: 600; color: var(--up-muted); }
.psp-cap { display: none; font-size: 0.8rem; font-weight: 600; color: var(--up-muted); }
.psp-bv {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    background: var(--psp-soft);
    color: var(--psp-ink);
    font-size: 0.82rem;
}
.psp-bv em {
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.8;
}
.psp-bv strong { font-weight: 800; }
.psp-desc { position: relative; z-index: 1; font-size: 0.76rem; line-height: 1.45; color: var(--up-muted); }
.psp-card .up-btn { margin-top: auto; width: 100%; justify-content: center; }
.psp-card .up-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.psp-bar { width: 100%; min-width: 90px; height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.psp-bar span { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #059669); border-radius: 999px; }

/* Family Security Income */
.fs-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.15rem; border: 1px solid #e2e8f0; border-radius: 16px; background: linear-gradient(135deg, #f8fafc, #fff); }
.fs-intro.is-on { border-color: #c7d2fe; background: linear-gradient(135deg, #eef2ff, #fff); }
.fs-intro-main { display: flex; align-items: flex-start; gap: 0.85rem; flex: 1 1 320px; }
.fs-intro-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e2e8f0; color: #475569; }
.fs-intro.is-on .fs-intro-ico { background: linear-gradient(135deg, #4f46e5, #818cf8); color: #fff; }
.fs-intro-ico svg { width: 22px; height: 22px; }
.fs-intro-main strong { display: block; font-size: 0.95rem; color: var(--up-ink); }
.fs-intro-main p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--up-muted); }
.fs-intro-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fs-intro-facts span { padding: 0.45rem 0.75rem; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0; font-size: 0.75rem; color: var(--up-muted); }
.fs-intro-facts b { display: block; margin-top: 0.1rem; font-size: 0.88rem; color: var(--up-ink); }
.ep-nominee-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.ep-nominee-form .ep-actions { grid-column: 1 / -1; }
@media (max-width: 640px) { .ep-nominee-form { grid-template-columns: 1fr; } }

/* ===== Mobile Recharge ===== */
.rch-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 1.6rem 1.75rem;
    border-radius: 22px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.16) 0%, transparent 60%),
        radial-gradient(50% 90% at 0% 100%, rgba(217, 59, 59, 0.55) 0%, transparent 70%),
        linear-gradient(125deg, #0b1120 0%, #1e1b4b 55%, #7f1d1d 100%);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.22);
}
.rch-hero::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.rch-hero-main { position: relative; z-index: 1; align-self: center; }
.rch-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rch-hero-kicker svg { width: 13px; height: 13px; color: #fbbf24; }
.rch-hero h1 { margin: 0.75rem 0 0.4rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.rch-hero p { margin: 0; max-width: 460px; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); }
.rch-hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.rch-ghost-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.rch-ghost-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.rch-hero-side { position: relative; z-index: 1; display: grid; gap: 0.75rem; align-content: center; }
.rch-balance {
    display: grid;
    gap: 0.15rem;
    padding: 1rem 1.15rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
}
.rch-balance span { font-size: 0.74rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.05em; }
.rch-balance strong { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.rch-balance small { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.rch-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.rch-mini-stats div {
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}
.rch-mini-stats span { display: block; font-size: 0.66rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rch-mini-stats strong { display: block; margin-top: 0.15rem; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rch-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.45;
}
.rch-notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.05rem; }
.rch-notice.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.rch-notice.is-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.rch-notice a { color: inherit; font-weight: 700; text-decoration: underline; }

.rch-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rch-card {
    background: var(--up-surface);
    border: 1px solid var(--up-border);
    border-radius: 20px;
    box-shadow: var(--up-shadow);
    overflow: hidden;
}
.rch-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem 0.9rem;
}
.rch-card-head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--up-ink); }
.rch-card-head p { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--up-muted); }
.rch-step-badge {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--up-accent-soft);
    color: var(--up-accent-deep);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.rch-form { padding: 0.25rem 1.25rem 1.25rem; }
.rch-step { display: flex; gap: 0.85rem; padding: 0.9rem 0; border-top: 1px dashed #e5e7eb; }
.rch-step:first-child { border-top: 0; }
.rch-step-no {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #111827;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    margin-top: 0.1rem;
}
.rch-step-body { flex: 1; min-width: 0; }
.rch-label { display: block; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; }

.rch-input {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--up-border);
    border-radius: 14px;
    background: #f9fafb;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.rch-input:focus-within { border-color: var(--up-accent); background: #fff; box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.1); }
.rch-input input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    padding: 0.8rem 0.9rem 0.8rem 0.8rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--up-ink);
}
.rch-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem 0 0.95rem;
    font-weight: 700;
    color: var(--up-muted);
}
.rch-prefix svg { width: 17px; height: 17px; }
.rch-input-phone input,
.rch-input-amount input { font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; }
.rch-input-amount .rch-prefix { font-size: 1rem; color: var(--up-ink); }
.rch-input-ico {
    width: 24px;
    height: 24px;
    margin-right: 0.8rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: #ef4444;
}
.rch-input-ico svg { width: 13px; height: 13px; grid-area: 1 / 1; }
.rch-input-ico .ico-ok { display: none; }
.rch-input-ico.is-ok { background: #10b981; }
.rch-input-ico.is-ok .ico-ok { display: block; }
.rch-input-ico.is-ok .ico-bad { display: none; }

.rch-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0 1.25rem 0.35rem; padding: 0.3rem; border-radius: 14px; background: #f3f4f6; }
.rch-switch button { border: 0; border-radius: 11px; padding: 0.62rem 0.8rem; background: transparent; color: #64748b; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; }
.rch-switch button.is-active { background: #fff; color: var(--up-ink); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.rch-input.is-dth .rch-prefix { display: none; }
.rch-input.is-dth input::placeholder {
    color: #c5cdd6;
    font-weight: 500;
    letter-spacing: 0;
}
.rch-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
.rch-op { position: relative; cursor: pointer; }
.rch-op input { position: absolute; opacity: 0; pointer-events: none; }
.rch-op-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 0.5rem 0.8rem;
    border: 1.5px solid var(--up-border);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.rch-op:hover .rch-op-card { border-color: #d1d5db; transform: translateY(-2px); }
.rch-op input:checked + .rch-op-card {
    border-color: var(--up-accent);
    background: #fffafa;
    box-shadow: 0 8px 20px rgba(217, 59, 59, 0.14);
}
.rch-op input:focus-visible + .rch-op-card { box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.15); }
.rch-op-name { font-size: 0.8rem; font-weight: 700; color: var(--up-ink); line-height: 1.25; }
.rch-op.is-locked { cursor: not-allowed; }
.rch-op.is-locked .rch-op-card { opacity: 0.55; background: #f8fafc; }
.rch-op.is-locked:hover .rch-op-card { transform: none; border-color: var(--up-border); }
.rch-op-wait { font-size: 0.65rem; font-weight: 700; color: #b45309; }
.rch-op-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--up-accent);
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s, transform 0.2s;
}
.rch-op-check svg { width: 10px; height: 10px; }
.rch-op input:checked + .rch-op-card .rch-op-check { opacity: 1; transform: scale(1); }
.rch-op-logo {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}
.rch-op-logo.is-jio { background: linear-gradient(135deg, #0f3cc9, #1d4ed8); }
.rch-op-logo.is-airtel { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.rch-op-logo.is-vi { background: linear-gradient(135deg, #ee2a7b, #fbbf24); }
.rch-op-logo.is-bsnl { background: linear-gradient(135deg, #f59e0b, #0369a1); }
.rch-op-logo.is-other { background: linear-gradient(135deg, #475569, #1e293b); }
.rch-empty-line { margin: 0; font-size: 0.85rem; color: var(--up-muted); }

.rch-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.rch-chip {
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--up-border);
    background: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--up-ink);
    cursor: pointer;
    transition: all 0.2s;
}
.rch-chip:hover { border-color: var(--up-accent); color: var(--up-accent); }
.rch-chip.is-active { background: var(--up-accent); border-color: var(--up-accent); color: #fff; }
.rch-hint { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--up-muted); }

.rch-pay {
    margin-top: 0.4rem;
    padding: 1.05rem 1.1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
    border: 1px solid var(--up-border);
}
.rch-pay-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: var(--up-ink); }
.rch-pay-row strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.rch-pay-row.is-muted { margin-top: 0.25rem; font-size: 0.8rem; color: var(--up-muted); }
.rch-pay-row .is-low { color: #dc2626; font-weight: 700; }
.rch-pay-pwd { margin: 0.95rem 0 0.9rem; }
.rch-pay-pwd .rch-input { background: #fff; }
.rch-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef4444 0%, var(--up-accent) 50%, var(--up-accent-deep) 100%);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(217, 59, 59, 0.3);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.rch-submit svg { width: 18px; height: 18px; }
.rch-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(217, 59, 59, 0.36); }
.rch-submit:disabled { background: #d1d5db; box-shadow: none; cursor: not-allowed; color: #6b7280; }
.rch-safe { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.75rem 0 0; font-size: 0.74rem; color: var(--up-muted); text-align: center; }
.rch-safe svg { width: 14px; height: 14px; flex-shrink: 0; color: #10b981; }

.rch-history { position: sticky; top: 1rem; }
.rch-tabs { display: flex; gap: 0.35rem; margin: 0 1.25rem; padding: 0.3rem; border-radius: 12px; background: #f3f4f6; }
.rch-tabs button {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 0.76rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--up-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.rch-tabs button.is-active { background: #fff; color: var(--up-ink); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
.rch-list { display: grid; gap: 0.55rem; padding: 0.9rem 1.25rem 1.25rem; max-height: 640px; overflow-y: auto; }
.rch-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rch-item:hover { border-color: #e5e7eb; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05); }
.rch-item[hidden] { display: none; }
.rch-item .rch-op-logo { width: 38px; height: 38px; border-radius: 11px; font-size: 0.78rem; }
.rch-item-main { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.rch-item-main strong { font-size: 0.9rem; color: var(--up-ink); letter-spacing: 0.02em; }
.rch-item-main span,
.rch-item-main small { font-size: 0.74rem; color: var(--up-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rch-item-main small.is-refund { color: #059669; font-weight: 600; }
.rch-item-side { display: grid; justify-items: end; gap: 0.3rem; }
.rch-item-side strong { font-size: 0.92rem; color: var(--up-ink); }
.rch-status { padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
.rch-status.is-success { background: #d1fae5; color: #047857; }
.rch-status.is-pending { background: #fef3c7; color: #b45309; }
.rch-status.is-failed { background: #fee2e2; color: #b91c1c; }
.rch-empty { display: grid; justify-items: center; gap: 0.3rem; padding: 2.25rem 1rem; text-align: center; color: var(--up-muted); font-size: 0.82rem; }
.rch-empty[hidden] { display: none; }
.rch-empty strong { color: var(--up-ink); font-size: 0.92rem; }
.rch-empty-ico { width: 54px; height: 54px; margin-bottom: 0.35rem; border-radius: 16px; display: grid; place-items: center; background: #f3f4f6; color: #9ca3af; }
.rch-empty-ico svg { width: 26px; height: 26px; }

@media (max-width: 1100px) {
    .rch-layout { grid-template-columns: 1fr; }
    .rch-history { position: static; }
}
@media (max-width: 760px) {
    .rch-hero { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; }
    .rch-hero h1 { font-size: 1.45rem; }
    .rch-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .rch-mini-stats { grid-template-columns: 1fr 1fr; }
    .rch-step { gap: 0.6rem; }
    .rch-form, .rch-card-head { padding-left: 0.95rem; padding-right: 0.95rem; }
    .rch-tabs, .rch-switch { margin: 0 0.95rem; }
    .rch-list { padding-left: 0.95rem; padding-right: 0.95rem; }
}