/* 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: 40;
    padding: 0;
    border-right: 1px solid rgba(255, 193, 7, 0.08);
}

.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.9rem;
    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-impersonate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 1.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #0a2e8c, #7d1cbb);
}

.up-impersonate a {
    color: #fff;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.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-top-title {
    display: none;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}
.up-top-title strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--up-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.up-top-title small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--up-muted);
}

.up-tabbar { display: none; }

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

.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;
    z-index: 0;
}

.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;
        padding-bottom: calc(1rem + 78px + env(safe-area-inset-bottom));
    }
}

.up-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.up-page-head h1 {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.up-page-head p {
    margin: 0.3rem 0 0;
    color: var(--up-muted);
    font-size: 0.92rem;
}

.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-rt {
    margin: 0 0 1.15rem;
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.up-rt-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 58%, #4338ca 100%);
    color: #fff;
}
.up-rt-head-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.up-rt-head-ico svg { width: 20px; height: 20px; }
.up-rt-head h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.up-rt-head p {
    margin: 0.12rem 0 0;
    font-size: 0.8rem;
    color: #c7d2fe;
    font-weight: 600;
}
.up-rt-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
    padding: 1.05rem 1.1rem 1.15rem;
}
.up-rt-card {
    border-radius: 16px;
    padding: 0.95rem 0.95rem 0.85rem;
    border: 1px solid transparent;
}
.up-rt-card.is-self {
    background: #e8f5e9;
    border-color: #a5d6a7;
}
.up-rt-card.is-ref {
    background: #f3e5f5;
    border-color: #ce93d8;
}
.up-rt-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}
.up-rt-card-id {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}
.up-rt-mini {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #fff;
}
.up-rt-mini svg { width: 16px; height: 16px; }
.up-rt-card.is-self .up-rt-mini { color: #e11d48; }
.up-rt-card.is-ref .up-rt-mini { color: #7c3aed; }
.up-rt-card-id strong {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.25;
}
.up-rt-card-id small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.up-rt-card.is-self .up-rt-card-id strong,
.up-rt-card.is-self .up-rt-amt b { color: #15803d; }
.up-rt-card.is-self .up-rt-card-id small,
.up-rt-card.is-self .up-rt-amt small { color: #3f8f4a; }
.up-rt-card.is-ref .up-rt-card-id strong,
.up-rt-card.is-ref .up-rt-amt b { color: #6d28d9; }
.up-rt-card.is-ref .up-rt-card-id small,
.up-rt-card.is-ref .up-rt-amt small { color: #7c3aed; }
.up-rt-amt { text-align: right; flex-shrink: 1; min-width: 0; }
.up-rt-amt b {
    display: block;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.up-rt-amt small {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}
.up-rt-bar {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}
.up-rt-card.is-self .up-rt-bar { background: #c8e6c9; }
.up-rt-card.is-ref .up-rt-bar { background: #e1bee7; }
.up-rt-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    transition: width 0.4s ease;
}
.up-rt-card.is-self .up-rt-bar-fill { background: #22c55e; }
.up-rt-card.is-ref .up-rt-bar-fill { background: #8b5cf6; }
.up-rt-units {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}
.up-rt-unit {
    background: #fff;
    border-radius: 12px;
    padding: 0.55rem 0.2rem 0.45rem;
    text-align: center;
}
.up-rt-card.is-self .up-rt-unit { border: 1px solid #81c784; }
.up-rt-card.is-ref .up-rt-unit { border: 1px solid #ce93d8; }
.up-rt-unit b {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.up-rt-card.is-self .up-rt-unit b { color: #16a34a; }
.up-rt-card.is-ref .up-rt-unit b { color: #7c3aed; }
.up-rt-unit span {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.up-rt-card.is-self .up-rt-unit span { color: #16a34a; }
.up-rt-card.is-ref .up-rt-unit span { color: #7c3aed; }
.up-rt-when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
}
.up-rt-when svg { width: 14px; height: 14px; flex-shrink: 0; }
.up-rt-card.is-self .up-rt-when { color: #166534; }
.up-rt-card.is-ref .up-rt-when { color: #5b21b6; }
.up-rt-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem;
    background: #fffde7;
    border: 1px solid #f6c453;
    border-radius: 14px;
    color: #b45309;
}
.up-rt-note span {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #f59e0b;
}
.up-rt-note svg { width: 16px; height: 16px; }
.up-rt-note p {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: #c2410c;
}
@media (max-width: 860px) {
    .up-rt {
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }
    .up-rt-head
     { display: none; }
    .up-rt-body {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0;
    }
    .up-rt-card {
        padding: 0.9rem 0.8rem 0.8rem;
        border-radius: 16px;
    }
    .up-rt-card-top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.45rem;
        margin-bottom: 0.65rem;
    }
    .up-rt-card-id { align-items: flex-start; min-width: 0; flex: 1; }
    .up-rt-mini { width: 28px; height: 28px; border-radius: 8px; }
    .up-rt-mini svg { width: 14px; height: 14px; }
    .up-rt-card-id strong {
        font-size: 0.66rem;
        letter-spacing: 0.03em;
        line-height: 1.2;
    }
    .up-rt-card-id small { font-size: 0.7rem; }
    .up-rt-amt {
        text-align: right;
        padding-left: 0;
        flex: 0 0 auto;
        max-width: 48%;
    }
    .up-rt-amt b { font-size: 1.18rem; white-space: nowrap; overflow-wrap: normal; }
    .up-rt-amt small {
        font-size: 0.62rem;
        white-space: normal;
        line-height: 1.25;
        overflow: visible;
        text-overflow: unset;
    }
    .up-rt-amt-extra { display: none; }
    .up-rt-bar { height: 6px; margin-bottom: 0.7rem; }
    .up-rt-units { gap: 0.4rem; }
    .up-rt-unit {
        padding: 0.5rem 0.1rem 0.4rem;
        border-radius: 10px;
        min-width: 0;
    }
    .up-rt-unit b { font-size: 1.05rem; }
    .up-rt-unit span { font-size: 0.56rem; letter-spacing: 0.05em; }
    .up-rt-when {
        justify-content: center;
        font-size: 0.72rem;
        margin-top: 0.65rem;
        flex-wrap: wrap;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }
}

.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.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-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: block;
    min-height: 4.75rem;
    padding-right: 3.85rem;
}

.up-stat-ico {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    background: linear-gradient(310deg, #64748b, #94a3b8);
}

.up-stat.g-blue .up-stat-ico { background: linear-gradient(310deg, #2152ff, #21d4fd); color: #fff; }
.up-stat.g-green .up-stat-ico { background: linear-gradient(310deg, #17ad37, #98ec2d); color: #fff; }
.up-stat.g-orange .up-stat-ico { background: linear-gradient(310deg, #f53939, #fbcf33); color: #fff; }
.up-stat.g-purple .up-stat-ico { background: linear-gradient(310deg, #7928ca, #ff0080); color: #fff; }

.up-stat-ico svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
    overflow: visible;
    color: inherit;
}

.up-stat-ico svg path,
.up-stat-ico svg circle,
.up-stat-ico svg rect,
.up-stat-ico svg line,
.up-stat-ico svg polyline,
.up-stat-ico svg polygon {
    stroke: currentColor;
    fill: none;
}

.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;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8392ab;
}

.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-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-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-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: 8px;
    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(0, 0, 0, 0.45);
    z-index: 35;
}

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

/* Auth — member gate (Linkera blue → purple, matches brand logo) */
.ulog-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', 'Noto Sans Devanagari', system-ui, sans-serif;
    color: #0f172a;
    background: #070b1a;
}

.ulog {
    --ulog-ink: #0f172a;
    --ulog-muted: #64748b;
    --ulog-line: rgba(10, 46, 140, 0.18);
    --ulog-accent: #7d1cbb;
    --ulog-accent-deep: #5b1490;
    --ulog-accent-soft: #f3e8ff;
    --ulog-accent-ink: #fff;
    --ulog-sheet: #f8f7fc;
    --ulog-rose: #c2410c;
    --ulog-teal: #0a2e8c;
    --ulog-teal-deep: #061a52;
    --ulog-blue: #007bff;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    background:
        radial-gradient(ellipse 50% 40% at 12% 18%, rgba(0, 123, 255, 0.22), transparent 60%),
        radial-gradient(ellipse 45% 35% at 88% 78%, rgba(125, 28, 187, 0.28), transparent 55%),
        linear-gradient(145deg, #070b1a 0%, #0a2e8c 42%, #1a0a3a 100%);
}

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

.ulog-blade {
    position: absolute;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.32), rgba(125, 28, 187, 0.14));
    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%);
    opacity: 0.55;
}

.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(125, 28, 187, 0.28), rgba(7, 11, 26, 0.45));
    animation-delay: -6s;
    opacity: 0.7;
}

.ulog-blade-c {
    width: 28vw;
    height: 28vw;
    top: 38%;
    left: 42%;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: rgba(255, 255, 255, 0.04);
    animation-delay: -3s;
}

.ulog-dots {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: radial-gradient(rgba(247, 248, 251, 0.55) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 10%, transparent 70%);
}

.ulog-rail {
    position: relative;
    z-index: 1;
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-right: 1px solid rgba(247, 248, 251, 0.08);
    color: rgba(247, 248, 251, 0.7);
    animation: ulog-fade 0.9s 0.2s ease both;
}

.ulog-mart {
    width: min(100%, 240px);
    align-self: center;
    margin: 10vh auto auto;
    color: var(--ulog-accent);
}

.ulog-mart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ulog-mart-line {
    stroke: currentColor;
    fill: none;
    opacity: 0.7;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: ulog-draw 1.6s 0.25s ease forwards;
}

.ulog-mart-fill {
    fill: currentColor;
    fill-opacity: 0.12;
    stroke: currentColor;
    stroke-width: 1.6;
    opacity: 0;
    animation: ulog-dot 0.5s 0.7s ease forwards;
}

.ulog-mart-stripe {
    stroke: currentColor;
    opacity: 0.35;
}

.ulog-mart-dot {
    fill: currentColor;
    opacity: 0;
    animation: ulog-dot 0.45s 1.05s ease forwards;
}

.ulog-mart-dot.is-core { fill: #fff; }

.ulog-mart-leaf {
    fill: currentColor;
    fill-opacity: 0.35;
    opacity: 0;
    animation: ulog-dot 0.5s 1.15s ease forwards;
}

.ulog-mart-tags {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ulog-mart-tags li {
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(125, 28, 187, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 248, 251, 0.82);
}

.ulog-tree {
    width: min(100%, 220px);
    height: auto;
    align-self: center;
    margin-bottom: auto;
    margin-top: 12vh;
    color: var(--ulog-accent);
}

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

.ulog-tree-dot {
    fill: currentColor;
    opacity: 0;
    animation: ulog-dot 0.45s ease forwards;
}

.ulog-tree-dot:nth-child(2) { animation-delay: 0.55s; }
.ulog-tree-dot:nth-child(3) { animation-delay: 0.7s; }
.ulog-tree-dot:nth-child(4) { animation-delay: 0.85s; }
.ulog-tree-dot:nth-child(5) { animation-delay: 1s; }
.ulog-tree-dot:nth-child(6) { animation-delay: 1.1s; }
.ulog-tree-dot:nth-child(7) { animation-delay: 1.2s; }
.ulog-tree-dot:nth-child(8) { animation-delay: 1.3s; }
.ulog-tree-dot:nth-child(9) { animation-delay: 1.35s; }
.ulog-tree-dot:nth-child(10) { animation-delay: 1.4s; }
.ulog-tree-dot:nth-child(11) { animation-delay: 1.45s; }

.ulog-tree-dot.is-core {
    fill: #fff;
}

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

.ulog-main {
    position: relative;
    z-index: 2;
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 460px);
    margin: 0 clamp(1.5rem, 8vw, 7rem) 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
    animation: ulog-rise 0.75s ease both;
}

.ulog-home {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.72);
    text-decoration: none;
}

.ulog-home:hover { color: var(--ulog-blue); }

.ulog-kicker {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ulog-accent);
}

.ulog-brand {
    margin: 0;
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: #fff;
    text-wrap: balance;
}

.ulog-logo {
    display: block;
    max-width: min(220px, 78%);
    max-height: 96px;
    object-fit: contain;
    margin: 0 0 0.75rem;
    border-radius: 10px;
}

.ulog-title {
    margin: 1.1rem 0 0;
    max-width: 18ch;
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(247, 248, 251, 0.88);
}

.ulog-lead {
    margin: 0.65rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(247, 248, 251, 0.58);
}

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

.ulog-form {
    margin-top: 1.6rem;
    padding: 1.35rem 1.25rem 1.4rem;
    background: var(--ulog-sheet);
    color: var(--ulog-ink);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
    display: grid;
    gap: 1.05rem;
    box-shadow: 12px 16px 0 rgba(125, 28, 187, 0.28);
}

.ulog-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #667066;
}

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

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

.ulog-forgot {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ulog-accent);
    text-decoration: none;
}

.ulog-forgot:hover { text-decoration: underline; }

.ulog-field input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid #d4cce3;
    border-radius: 0;
    background: transparent;
    padding: 0.55rem 0.15rem 0.65rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ulog-ink);
    transition: border-color 0.18s;
}

.ulog-field input:focus {
    outline: none;
    border-bottom-color: var(--ulog-accent);
}

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

.ulog-field-hint {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ulog-muted);
}

.ulog-field-hint.is-warn {
    color: var(--ulog-rose);
}

.ulog-field input.is-invalid {
    border-bottom-color: var(--ulog-rose);
}

.ulog-form .up-eye {
    color: #8b93a7;
}

.ulog-submit {
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ulog-accent-ink);
    background: linear-gradient(90deg, #0a2e8c 0%, #007bff 48%, #7d1cbb 100%);
    transition: transform 0.18s ease, filter 0.18s ease;
}

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

.ulog-submit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.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;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(125, 28, 187, 0.25);
    background: var(--ulog-accent-soft);
    border-radius: 10px;
}
.ulog-form .upw-dev strong {
    display: block;
    color: var(--ulog-accent-deep);
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}
.ulog-form .upw-dev p {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    color: var(--ulog-muted);
}
.ulog-form .upw-dev a {
    color: var(--ulog-teal);
    font-weight: 700;
    word-break: break-all;
    font-size: 0.8rem;
}

.ulog-foot {
    margin-top: 1.35rem;
    display: grid;
    gap: 0.45rem;
}

.ulog-foot p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(247, 248, 251, 0.62);
}

.ulog-foot a {
    color: var(--ulog-accent);
    font-weight: 700;
    text-decoration: none;
}

.ulog-foot a:hover { text-decoration: underline; }

.ulog-copy {
    font-size: 0.75rem !important;
    color: rgba(247, 248, 251, 0.38) !important;
}

/* Auth pages — floating two-pane card */
.ulog-is-auth {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 32px 20px;
    background:
        radial-gradient(ellipse 55% 50% at 12% 10%, rgba(0, 123, 255, 0.28), transparent 58%),
        radial-gradient(ellipse 50% 45% at 90% 88%, rgba(125, 28, 187, 0.32), transparent 55%),
        linear-gradient(160deg, #070b1a 0%, #0a2e8c 46%, #2a1468 100%);
}
.ulog-is-auth .ulog-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.5;
}
.ulog-is-auth .ulog-orb-a {
    width: min(420px, 60vw);
    height: min(420px, 60vw);
    top: -12%;
    right: -6%;
    background: radial-gradient(circle, rgba(125, 28, 187, 0.55), transparent 70%);
}
.ulog-is-auth .ulog-orb-b {
    width: min(340px, 50vw);
    height: min(340px, 50vw);
    bottom: -16%;
    left: -8%;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.4), transparent 70%);
}
.ulog-is-auth .ulog-orb-c {
    width: min(220px, 36vw);
    height: min(220px, 36vw);
    top: 42%;
    left: 46%;
    background: radial-gradient(circle, rgba(91, 63, 217, 0.28), transparent 70%);
}
.ulog-is-auth .ulog-mesh {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 20%, transparent 75%);
}
.ulog-card {
    position: relative;
    z-index: 2;
    width: min(100%, 920px);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 32px 72px rgba(6, 10, 32, 0.4);
    animation: ulog-rise 0.7s ease both;
}
.ulog-card-brand {
    padding: 32px 32px 28px;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0, 123, 255, 0.28), transparent 55%),
        linear-gradient(165deg, #0a2e8c 0%, #5b3fd9 52%, #7d1cbb 100%);
    color: #f4f2ff;
}
.ulog-card-form {
    padding: 32px 30px 26px;
    background: #ffffff;
}
.ulog-is-auth .ulog-home {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.2rem;
}
.ulog-is-auth .ulog-home:hover { color: #ffffff; }
.ulog-is-auth .ulog-logo {
    max-height: 64px;
    max-width: 170px;
    margin: 0 0 1.15rem;
    padding: 6px 8px;
    border-radius: 10px;
    background: #ffffff;
}
.ulog-is-auth .ulog-kicker {
    color: #d8cfff;
}
.ulog-is-auth .ulog-title {
    max-width: 12ch;
    color: #ffffff;
    margin-top: 0.35rem;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
}
.ulog-is-auth .ulog-title em {
    font-style: italic;
    background: linear-gradient(90deg, #e9d5ff, #bfdbfe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ulog-is-auth .ulog-lead {
    color: rgba(244, 242, 255, 0.72);
    max-width: 30ch;
}
.ulog-card-proof {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.ulog-card-proof li {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.ulog-card-proof li:last-child {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
}
.ulog-card-proof strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
}
.ulog-card-proof span {
    display: block;
    margin-top: 3px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 242, 255, 0.55);
}
.ulog-form-title {
    margin: 0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 1.85rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #14172b;
}
.ulog-form-lead {
    margin: 6px 0 0;
    font-size: 0.92rem;
    color: rgba(20, 23, 43, 0.52);
}
.ulog-card-form > .up-alert {
    margin-top: 1.2rem;
}
.ulog-is-auth .ulog-form {
    margin-top: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.ulog-is-auth .ulog-foot {
    margin-top: 1.2rem;
}
.ulog-is-auth .ulog-foot p {
    color: rgba(20, 23, 43, 0.55);
}
.ulog-is-auth .ulog-foot a { color: #5b3fd9; }
.ulog-is-auth .ulog-copy {
    color: rgba(20, 23, 43, 0.35) !important;
}

@media (max-width: 780px) {
    .ulog-card {
        grid-template-columns: 1fr;
        width: min(100%, 460px);
    }
    .ulog-card-brand {
        padding: 22px 22px 20px;
    }
    .ulog-is-auth .ulog-title {
        max-width: none;
        font-size: 1.85rem;
    }
    .ulog-card-proof { display: none; }
    .ulog-card-form { padding: 24px 22px 20px; }
}

/* Member pass login — editorial, not the two-pane card */
.ulog-body.ulog-login {
    overflow-x: hidden;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
    .ulog-body.ulog-login .upass-nav a[href="../index.php"] {
        display: none;
    }
}
.ulog-is-pass {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        radial-gradient(circle at 18% 72%, rgba(125, 28, 187, 0.38), transparent 36%),
        radial-gradient(circle at 88% 18%, rgba(0, 123, 255, 0.28), transparent 34%),
        #060918;
}
.upass-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.upass-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.upass-ring-a {
    width: min(620px, 80vw);
    height: min(620px, 80vw);
    left: -12%;
    bottom: -18%;
}
.upass-ring-b {
    width: min(420px, 58vw);
    height: min(420px, 58vw);
    left: 2%;
    bottom: -4%;
    border-color: rgba(167, 139, 250, 0.22);
}
.upass-word {
    position: absolute;
    right: -0.08em;
    bottom: -0.22em;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(5.5rem, 18vw, 13rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.045);
}
.upass-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem 0;
}
.upass-brand img {
    display: block;
    height: 46px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    padding: 5px 7px;
    border-radius: 10px;
    background: #ffffff;
}
.upass-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
}
.upass-nav a { color: rgba(244, 242, 255, 0.72); text-decoration: none; }
.upass-nav a:hover { color: #ffffff; }
.upass-nav a:last-child {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #ffffff;
}
.upass-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 2.5rem;
    width: min(100%, 1080px);
    margin: 0 auto;
    padding: 2.4rem 1.5rem 2.6rem;
}
.upass-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c4b5fd;
}
.upass-copy h1 {
    margin: 0.45rem 0 0;
    max-width: 11ch;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: clamp(3rem, 7vw, 5.1rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #ffffff;
}
.upass-copy h1 em {
    font-style: italic;
    background: linear-gradient(90deg, #e9d5ff, #93c5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.upass-lead {
    margin: 1.1rem 0 0;
    max-width: 32ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(244, 242, 255, 0.68);
}
.upass-stats {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    color: rgba(244, 242, 255, 0.78);
    font-size: 0.92rem;
}
.upass-stats strong { color: #ffffff; margin-right: 0.35rem; }
.upass-ticket {
    position: relative;
    padding: 1.55rem 1.45rem 1.2rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: ulog-rise 0.7s ease both;
}
.upass-ticket-strip {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(90deg, #0a2e8c, #5b3fd9, #7d1cbb, #007bff);
}
.upass-ticket-kicker {
    margin: 0.35rem 0 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5b3fd9;
}
.upass-ticket h2 {
    margin: 0.25rem 0 0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 1.85rem;
    font-weight: 500;
    color: #14172b;
}
.upass-ticket-lead {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: rgba(20, 23, 43, 0.52);
}
.upass-ticket .up-alert { margin-top: 1rem; }
.upass-form {
    margin-top: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    clip-path: none;
}
.upass-form .ulog-field label {
    margin-bottom: 0.45rem;
    color: #5b6178;
}
.upass-input {
    position: relative;
    display: flex;
    align-items: center;
}
.upass-ico {
    position: absolute;
    left: 0.9rem;
    z-index: 1;
    color: #8b93a7;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.upass-ico svg { width: 18px; height: 18px; }
.upass-form .ulog-field input {
    border: 1.5px solid #e4e0f0;
    border-radius: 14px;
    background: #f6f5fb;
    padding: 0.88rem 1rem 0.88rem 2.7rem;
    font-size: 0.96rem;
    font-weight: 600;
    color: #14172b;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.upass-form .ulog-field input::placeholder {
    color: #9aa0b5;
    font-weight: 500;
}
.upass-form .ulog-field input:focus {
    background: #ffffff;
    border-color: #5b3fd9;
    box-shadow: 0 0 0 4px rgba(91, 63, 217, 0.14);
}
.upass-form .ulog-field input.is-invalid {
    border-color: #c2410c;
    box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.1);
}
.upass-form .up-password-wrap input { padding-right: 2.75rem; }
.upass-form .up-eye {
    color: #8b93a7;
    border-radius: 10px;
}
.upass-form .up-eye:hover {
    color: #5b3fd9;
    background: #f3e8ff;
}
.upass-form .ulog-forgot { color: #5b3fd9; }
.upass-ticket-foot {
    margin: 1.05rem 0 0;
    font-size: 0.74rem;
    color: rgba(20, 23, 43, 0.38);
}
.upass-ticket-foot a {
    color: #5b3fd9;
    font-weight: 700;
    text-decoration: none;
}
.upass-ticket-foot a:hover { text-decoration: underline; }
.upass-form a.ulog-submit {
    text-decoration: none;
    box-sizing: border-box;
}
@media (max-width: 860px) {
    .ulog-body.ulog-login .ulog.ulog-is-pass {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .upass-top {
        flex-shrink: 0;
        padding: 0.85rem 1rem 0;
        padding-top: max(0.85rem, env(safe-area-inset-top));
        gap: 0.65rem;
    }
    .upass-brand img {
        height: 38px;
        max-width: 120px;
        padding: 4px 6px;
    }
    .upass-nav {
        gap: 0.55rem;
        font-size: 0.8rem;
    }
    .upass-nav a:first-child { display: none; }
    .upass-nav a:last-child {
        padding: 0.4rem 0.75rem;
        white-space: nowrap;
    }
    .upass-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        min-height: 0;
        padding: 1.25rem 1.15rem;
        padding-bottom: max(1.6rem, env(safe-area-inset-bottom));
    }
    .ulog-body.ulog-login .upass-copy { display: none; }
    .upass-ticket {
        order: 1;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 1.5rem 1.2rem 1.2rem;
        border-radius: 22px;
    }
    .upass-copy h1 {
        max-width: none;
        font-size: clamp(1.85rem, 8vw, 2.4rem);
        line-height: 1.05;
    }
    .upass-lead {
        margin-top: 0.65rem;
        font-size: 0.9rem;
        max-width: none;
    }
    .upass-stats { display: none; }
    .upass-word,
    .upass-ring { display: none; }
}

@media (max-width: 420px) {
    .upass-ticket h2 { font-size: 1.55rem; }
    .upass-form { gap: 0.85rem; }
}

@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 {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .ulog-rail {
        order: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.25rem 0.5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(247, 248, 251, 0.08);
        min-height: auto;
    }

    .ulog-mart {
        width: 108px;
        margin: 0;
    }

    .ulog-mart-tags { display: none; }

    .ulog-tree {
        width: 88px;
        margin: 0;
    }

    .ulog-rail-copy {
        font-size: 1rem;
        text-align: right;
    }

    .ulog-main {
        order: 2;
        width: 100%;
        margin: 0;
        padding: 1.35rem 1.2rem 2rem;
        background: linear-gradient(180deg, transparent, rgba(12, 28, 20, 0.55) 18%);
    }

    .ulog-brand {
        font-size: clamp(1.85rem, 9vw, 2.6rem);
    }

    .ulog-form {
        box-shadow: 8px 10px 0 rgba(196, 163, 90, 0.24);
    }

    .ulog-is-pass .ulog-form {
        box-shadow: none;
    }

    .ulog-blade-c { display: none; }
}
/* 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 {
        transform: translateX(-105%);
        transition: transform 0.2s ease;
    }
    .up-sidebar.open { transform: translateX(0); }
    .up-main { margin-left: 0; }
    .up-menu-btn { display: grid; }
    .up-search { display: none; }
    .up-top-title { display: block; }
    .up-user-meta { display: none; }
    .up-user-caret { display: none; }
    .up-topbar {
        padding: 0.65rem 0.85rem;
        padding-top: max(0.65rem, env(safe-area-inset-top));
    }
    #upFullscreenBtn { 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; }
    .up-footer { display: none; }
    .up-content {
        padding-bottom: calc(1.15rem + 78px + env(safe-area-inset-bottom));
    }
    .up-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 32;
        background: #fff;
        border-top: 1px solid #eef0f4;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
        padding: 0.4rem 0.15rem calc(0.35rem + env(safe-area-inset-bottom));
    }
    .up-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0.18rem;
        min-height: 58px;
        padding: 0.1rem 0.08rem 0.12rem;
        color: #94a3b8;
        text-decoration: none;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .up-tab-ico {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: transparent;
        transition: background 0.15s;
    }
    .up-tab-ico svg { width: 24px; height: 24px; display: block; }
    .up-tab.is-active {
        color: #5b3fd9;
        font-weight: 800;
    }
    .up-tab.is-active .up-tab-ico {
        background: #ede9fe;
    }
}

@media (max-width: 560px) {
    .up-stats { grid-template-columns: 1fr; }
    .up-content {
        padding: 1rem;
        padding-bottom: calc(1rem + 78px + env(safe-area-inset-bottom));
    }
    .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: minmax(0, 1fr); }
    .pp-welcome { flex-direction: column; align-items: stretch; }
    .pp-mini-stats {
        max-width: none;
        justify-content: flex-start;
        width: 100%;
    }
    .pp-mid-row,
    .pp-bottom-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
    .pp {
        overflow-x: hidden;
        max-width: 100%;
    }
    .pp-layout,
    .pp-left,
    .pp-right,
    .pp-card {
        min-width: 0;
        max-width: 100%;
    }
    .pp-welcome { margin-bottom: 0.85rem; gap: 0.75rem; }
    .pp-welcome h1 { font-size: 1.28rem; }
    .pp-mini-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }
    .pp-mini {
        min-width: 0;
        width: 100%;
        padding: 0.5rem 0.4rem;
        gap: 0.35rem;
    }
    .pp-mini-ico { width: 30px; height: 30px; }
    .pp-mini small { font-size: 0.58rem; }
    .pp-mini strong { font-size: 0.88rem; }
    .pp-stat-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        margin-bottom: 0.85rem;
    }
    .pp-stat-card { padding: 0.75rem 0.55rem 0.8rem; }
    .pp-stat-ico { width: 36px; height: 36px; border-radius: 10px; }
    .pp-stat-ico svg { width: 16px; height: 16px; }
    .pp-stat-card .pp-chip { display: none; }
    .pp-stat-card > small { font-size: 0.68rem; }
    .pp-stat-card > strong {
        font-size: 0.92rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .pp-profile-banner {
        padding: 0.85rem 0.9rem 2.2rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .pp-profile-id-tag {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pp-profile-body { padding: 0 0.9rem 1rem; }
    .pp-name {
        flex-wrap: wrap;
        max-width: 100%;
        font-size: 1.08rem;
        word-break: break-word;
    }
    .pp-profile-stats strong { font-size: 0.78rem; overflow-wrap: anywhere; }
    .pp-contact-banner { padding: 0.9rem 0.95rem; }
    .pp-contact-banner p { display: none; }
    .pp-contact-list { padding: 0.75rem 0.8rem 0.9rem; }
    .pp-contact-list li {
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.65rem 0.6rem;
    }
    .pp-contact-tag {
        max-width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pp-panel-banner { padding: 0.85rem 0.9rem; }
    .pp-panel-banner p { display: none; }
    .pp-quick { grid-template-columns: 1fr 1fr; }
    .pp-q { min-height: 84px; padding: 0.65rem 0.55rem; }
    .pp-q strong { overflow-wrap: anywhere; }
    .pp-sponsor-chips { grid-template-columns: 1fr 1fr; }
    .pp-sponsor-foot { flex-wrap: wrap; }
    .pp-sponsor-badge { margin-left: auto; }
    .pp-s-chip strong { overflow-wrap: anywhere; }
    .pp-ref-body { padding: 0.8rem 0.8rem 0.95rem; }
    .pp-ref-line { min-width: 0; }
    .pp-ref-block .pp-ref-line input { font-size: 0.68rem; }
    .pp-level-foot { flex-wrap: wrap; gap: 0.25rem; }
    .pp-chart-meta strong { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
    .pp-quick { grid-template-columns: 1fr 1fr; }
    .pp-actions { grid-template-columns: 1fr 1fr; }
    .pp-sponsor-chips { grid-template-columns: 1fr 1fr; }
    .pp-mini-stats { grid-template-columns: 1fr 1fr 1fr; }
    .pp-contact-tag { display: none; }
    .pp-stat-row { grid-template-columns: 1fr; }
    .pp-stat-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 0.7rem;
        align-items: center;
        padding: 0.75rem 0.85rem;
    }
    .pp-stat-top {
        margin-bottom: 0;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: max-content;
    }
    .pp-stat-card > small { grid-column: 2; grid-row: 1; margin: 0; }
    .pp-stat-card > strong { grid-column: 2; grid-row: 2; margin: 0; font-size: 1.05rem; }
}

/* 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: '?';
    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-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 Tree org chart (sponsor generations) */
.lt-org-panel .team-leg-tabs { padding: 0.65rem 1rem; }
.lt-org-board {
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}
.lt-org-scroll {
    overflow: auto;
    padding: 1.5rem 1rem 2rem;
    min-height: 280px;
}
.lt-org-tree {
    display: inline-block;
    min-width: 100%;
    text-align: center;
}
.lt-org-tree ul {
    padding-top: 22px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin: 0;
}
.lt-org-tree li {
    list-style: none;
    text-align: center;
    position: relative;
    padding: 22px 10px 0;
}
.lt-org-tree li::before,
.lt-org-tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #c5c9d1;
    width: 50%;
    height: 22px;
}
.lt-org-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #c5c9d1;
}
.lt-org-tree li:only-child::before,
.lt-org-tree li:only-child::after { display: none; }
.lt-org-tree li:only-child { padding-top: 0; }
.lt-org-tree li:first-child::before,
.lt-org-tree li:last-child::after { border: 0 none; }
.lt-org-tree li:last-child::before {
    border-right: 2px solid #c5c9d1;
    border-radius: 0 6px 0 0;
}
.lt-org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.lt-org-tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #c5c9d1;
    width: 0;
    height: 22px;
}
.lt-org-root > li { padding-top: 0; }
.lt-org-root > li::before,
.lt-org-root > li::after { display: none; }

.lt-org-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    min-width: 118px;
    max-width: 148px;
    padding: 0.7rem 0.65rem 0.55rem;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #eceff3;
    box-shadow: none;
    vertical-align: top;
}
.lt-org-card.is-you {
    background: #e8eef8;
    border-color: #93c5fd;
}
.lt-org-ico {
    display: inline-flex;
    width: 28px;
    height: 28px;
    margin-bottom: 0.15rem;
}
.lt-org-ico svg { width: 100%; height: 100%; }
.lt-org-card.is-active .lt-org-ico { color: #15803d; }
.lt-org-card.is-inactive .lt-org-ico { color: #b91c1c; }
.lt-org-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lt-org-status {
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
}
.lt-org-card.is-active .lt-org-status { color: #166534; }
.lt-org-card.is-inactive .lt-org-status { color: #991b1b; }
.lt-org-amt {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1f2937;
    margin-top: 0.1rem;
}
.lt-org-code {
    font-size: 0.62rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
}
.lt-org-expand {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 0.02em;
}
.lt-org-card.is-toggle {
    cursor: pointer;
    user-select: none;
}
.lt-org-card.is-toggle:hover {
    border-color: #93c5fd;
    background: #e8eef8;
}
.lt-org-card.is-you.is-toggle:hover {
    background: #dbeafe;
}
.lt-org-tree li.is-collapsed > ul {
    display: none;
}
.lt-org-tree li.is-open > ul {
    display: flex;
}
.lt-org-tip {
    margin: 0;
    padding: 0.75rem 1.15rem 1.1rem;
    font-size: 0.84rem;
    color: #64748b;
}

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

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

/* —— Level Tree (redesign) —— */
.ltree {
    --ltree-blue: #0a2e8c;
    --ltree-sky: #007bff;
    --ltree-violet: #7d1cbb;
    --ltree-ink: #0f172a;
    --ltree-muted: #64748b;
    --ltree-line: #e2e8f0;
    display: grid;
    gap: 1.1rem;
}

.ltree-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.4rem 1.45rem;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(125, 28, 187, 0.45), transparent 55%),
        radial-gradient(ellipse 50% 70% at 0% 100%, rgba(0, 123, 255, 0.35), transparent 50%),
        linear-gradient(125deg, #070b1a 0%, #0a2e8c 48%, #4c1d95 100%);
    box-shadow: 0 18px 40px rgba(10, 46, 140, 0.22);
    animation: ltree-rise 0.55s ease both;
}

.ltree-hero-glow {
    position: absolute;
    inset: auto -10% -40% 40%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
    pointer-events: none;
}

.ltree-hero-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.ltree-you {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem 0.55rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}

.ltree-you-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ltree-sky), var(--ltree-violet));
    overflow: hidden;
    flex-shrink: 0;
}

.ltree-you-ava.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ltree-you-kicker {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
}

.ltree-you strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
}

.ltree-you-id {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.8;
}

.ltree-hero-copy { min-width: 0; }

.ltree-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.ltree-hero h1 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.ltree-lead {
    margin: 0.4rem 0 0;
    max-width: 36rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

.ltree-depth {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ltree-depth label {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.ltree-depth select {
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
}

.ltree-depth select option { color: #0f172a; }

.ltree-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ltree-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ltree-line);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    animation: ltree-rise 0.55s ease both;
    animation-delay: calc(0.05s * var(--i, 1));
}

.ltree-stat:nth-child(1) { --i: 1; }
.ltree-stat:nth-child(2) { --i: 2; }
.ltree-stat:nth-child(3) { --i: 3; }
.ltree-stat:nth-child(4) { --i: 4; }

.ltree-stat-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ltree-violet), #ff0080);
    flex-shrink: 0;
}

.ltree-stat-ico.is-blue { background: linear-gradient(135deg, var(--ltree-blue), var(--ltree-sky)); }
.ltree-stat-ico.is-green { background: linear-gradient(135deg, #059669, #34d399); }
.ltree-stat-ico.is-orange { background: linear-gradient(135deg, #ea580c, #fbbf24); }

.ltree-stat-ico svg { width: 18px; height: 18px; }

.ltree-stat span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ltree-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ltree-stat strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ltree-ink);
    letter-spacing: -0.02em;
}

.ltree-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ltree-line);
}

.ltree-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--ltree-line);
    color: var(--ltree-ink);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ltree-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 28, 187, 0.35);
    box-shadow: 0 8px 18px rgba(125, 28, 187, 0.12);
}

.ltree-chip em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ltree-violet);
}

.ltree-chip span {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--ltree-ink);
}

.ltree-chip small {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ltree-muted);
}

.ltree-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 20px;
    background: #fff;
    border: 1px dashed #cbd5e1;
}

.ltree-empty-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--ltree-violet);
    background: linear-gradient(135deg, rgba(10, 46, 140, 0.08), rgba(125, 28, 187, 0.12));
}

.ltree-empty-ico svg { width: 28px; height: 28px; }

.ltree-empty strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ltree-ink);
}

.ltree-empty p {
    margin: 0.45rem auto 1.1rem;
    max-width: 28rem;
    font-size: 0.9rem;
    color: var(--ltree-muted);
    line-height: 1.5;
}

.ltree-timeline {
    position: relative;
    display: grid;
    gap: 1rem;
}

.ltree-gen {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.85rem;
    scroll-margin-top: 1.25rem;
    animation: ltree-rise 0.5s ease both;
    animation-delay: calc(0.04s * var(--ltree-i, 1));
}

.ltree-gen.is-flash .ltree-gen-panel {
    box-shadow: 0 0 0 3px rgba(125, 28, 187, 0.28), 0 16px 36px rgba(15, 23, 42, 0.08);
}

.ltree-gen-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.ltree-gen-rail::before {
    content: '';
    position: absolute;
    top: 48px;
    bottom: -1rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(125, 28, 187, 0.45), rgba(10, 46, 140, 0.08));
}

.ltree-gen:last-child .ltree-gen-rail::before { display: none; }

.ltree-gen-dot {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ltree-blue), var(--ltree-violet));
    box-shadow: 0 10px 20px rgba(10, 46, 140, 0.28);
}

.ltree-gen.is-l1 .ltree-gen-dot { background: linear-gradient(135deg, #0a2e8c, #007bff); }
.ltree-gen.is-l2 .ltree-gen-dot { background: linear-gradient(135deg, #1d4ed8, #7d1cbb); }
.ltree-gen.is-l3 .ltree-gen-dot { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.ltree-gen.is-l4 .ltree-gen-dot { background: linear-gradient(135deg, #7c3aed, #c026d3); }
.ltree-gen.is-ln .ltree-gen-dot { background: linear-gradient(135deg, #334155, #64748b); }

.ltree-gen-panel {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--ltree-line);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.25s ease;
}

.ltree-gen-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    background:
        linear-gradient(90deg, rgba(10, 46, 140, 0.04), rgba(125, 28, 187, 0.06));
    border-bottom: 1px solid var(--ltree-line);
}

.ltree-gen-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ltree-violet);
}

.ltree-gen-head h2 {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ltree-ink);
    letter-spacing: -0.02em;
}

.ltree-gen-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ltree-count,
.ltree-pct {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.ltree-count {
    background: rgba(10, 46, 140, 0.08);
    color: var(--ltree-blue);
}

.ltree-pct {
    background: rgba(125, 28, 187, 0.1);
    color: var(--ltree-violet);
}

.ltree-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    padding: 1rem 1.1rem 1.15rem;
}

.ltree-card {
    padding: 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--ltree-line);
    background: linear-gradient(180deg, #fcfcfd, #fff);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ltree-card:hover {
    transform: translateY(-2px);
    border-color: rgba(125, 28, 187, 0.28);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.ltree-card.is-active {
    border-left: 3px solid var(--ltree-violet);
}

.ltree-card.is-idle {
    border-left: 3px solid #f59e0b;
}

.ltree-card-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ltree-ava {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--ltree-sky), var(--ltree-violet));
    overflow: hidden;
    flex-shrink: 0;
}

.ltree-ava.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ltree-card-id {
    min-width: 0;
    flex: 1;
}

.ltree-card-id strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ltree-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ltree-card-id span {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ltree-muted);
}

.ltree-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f1f5f9;
}

.ltree-card-grid span {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ltree-card-grid strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes ltree-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

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

@media (max-width: 640px) {
    .ltree-hero { padding: 1.15rem; }
    .ltree-stats { grid-template-columns: 1fr; }
    .ltree-gen { grid-template-columns: 40px minmax(0, 1fr); gap: 0.65rem; }
    .ltree-gen-dot { width: 40px; height: 40px; border-radius: 12px; font-size: 0.7rem; }
    .ltree-gen-rail::before { top: 40px; }
    .ltree-card-grid { grid-template-columns: 1fr; }
    .ltree-you { width: 100%; }
}

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

/* Hover tooltip for user binary tree nodes */
.ut-tooltip {
    position: fixed;
    z-index: 1200;
    background: #0f172a;
    color: #ffffff;
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    min-width: 240px;
    max-width: 300px;
    white-space: pre-line;
    pointer-events: none;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
}

.ut-tooltip[hidden] { display: none !important; }

.ut-tooltip .tt-name {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.ut-tooltip .tt-id {
    color: #94a3b8;
    margin-bottom: 0.65rem;
    font-size: 0.75rem;
}

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

.ut-tooltip .tt-row span:first-child { color: #94a3b8; }
.ut-tooltip .tt-row span:last-child { font-weight: 600; text-align: right; }

.ut-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
    animation: utModalFade 0.22s ease;
}

.ut-modal[hidden] { display: none !important; }

.ut-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 28, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ut-modal-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: min(92vh, 880px);
    overflow: hidden;
    background: #f8fafc;
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(8, 13, 28, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.08);
    animation: utModalSlide 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes utModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes utModalSlide {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.ut-modal-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 1.3rem 1.15rem;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1729 0%, #1a2540 55%, #243352 100%);
    flex-shrink: 0;
}

.ut-modal-hero-glow {
    position: absolute;
    right: -40px;
    top: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.32), transparent 68%);
    pointer-events: none;
}

.ut-modal-hero-main {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.ut-modal-hero-ico {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 193, 7, 0.16);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: var(--up-gold);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ut-modal-hero-ico svg { width: 22px; height: 22px; }

.ut-modal-kicker {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--up-gold);
}

.ut-modal-hero h3 {
    margin: 0.12rem 0 0;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.ut-modal-sub {
    margin: 0.28rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.82);
    max-width: 420px;
}

.ut-modal-x {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #e2e8f0;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
}

.ut-modal-x svg { width: 16px; height: 16px; }

.ut-modal-x:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.ut-modal-body {
    padding: 1.1rem 1.25rem 0;
    overflow: auto;
    flex: 1;
}

.ut-place {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e8edf5;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.ut-place-parent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.ut-place-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid!important;
    place-items: center;
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f1729;
    background: linear-gradient(145deg, #ffc107, #f59e0b);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.32);
}

.ut-place-parent small {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.ut-place-parent strong {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.ut-place-parent span {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.ut-place-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.ut-place-side {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ut-place-side.is-left {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ut-place-side.is-right {
    background: #fdf2f8;
    color: #be185d;
    border: 1px solid #fbcfe8;
}

.ut-place-lvl {
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.04em;
}

.ut-place-sponsor {
    margin: 0.55rem 0 1rem;
    font-size: 0.78rem;
    color: #64748b;
}

.ut-place-sponsor strong { color: #0f172a; }

.ut-sec {
    margin-bottom: 0.95rem;
    padding: 0.95rem 1rem 1.05rem;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
}

.ut-sec-pin {
    background: linear-gradient(180deg, #fffbeb 0%, #fff 55%);
    border-color: #fde68a;
}

.ut-sec-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.ut-sec-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #eff6ff;
    color: #1d4ed8;
}

.ut-sec-ico.is-lock {
    background: #f1f5f9;
    color: #475569;
}

.ut-sec-ico.is-gold {
    background: #fff7ed;
    color: #b45309;
}

.ut-sec-ico svg { width: 16px; height: 16px; }

.ut-sec-head h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
}

.ut-sec-head p {
    margin: 0.12rem 0 0;
    font-size: 0.74rem;
    color: #94a3b8;
}

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

.ut-form-grid .form-group { margin: 0; }

.ut-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.ut-field > span:first-child {
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
}

.ut-field > span em {
    font-style: normal;
    color: var(--up-accent);
}

.ut-span-2 { grid-column: 1 / -1; }

.ut-input {
    position: relative;
    display: flex;
    align-items: center;
}

.ut-input > svg:first-child {
    position: absolute;
    left: 0.85rem;
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.ut-input input,
.ut-input select {
    width: 100%;
    min-height: 44px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.6rem 0.85rem 0.6rem 2.5rem;
    font: inherit;
    font-size: 0.9rem;
    color: #0f172a;
    background: #fff;
    box-sizing: border-box;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ut-input.has-eye input { padding-right: 2.8rem; }

.ut-input input:focus,
.ut-input select:focus {
    outline: none;
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.16);
}

.ut-input select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.1rem;
}

.ut-field-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.ut-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin: 0.15rem -1.25rem 0;
    padding: 0.95rem 1.25rem 1.15rem;
    border-top: 1px solid #e8edf5;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.ut-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

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

body.ut-modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .ut-modal { padding: 0; align-items: end; }
    .ut-modal-dialog {
        width: 100%;
        max-height: 96vh;
        border-radius: 22px 22px 0 0;
        animation: utModalSheet 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .ut-form-grid { grid-template-columns: 1fr; }
    .ut-place {
        flex-direction: column;
        align-items: flex-start;
    }
    .ut-place-meta { align-items: flex-start; flex-direction: row; }
    .ut-place-parent strong { max-width: 220px; }
}

@keyframes utModalSheet {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

.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-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 ===== */
.ureg-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', system-ui, sans-serif;
    color: #14172b;
    background:
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(91, 63, 217, 0.16), transparent 55%),
        radial-gradient(ellipse 45% 35% at 100% 10%, rgba(0, 123, 255, 0.12), transparent 50%),
        linear-gradient(180deg, #f4f2fb 0%, #ebe6f8 100%);
}

.ureg {
    max-width: 880px;
    margin: 0 auto;
    padding: 1.55rem 1.15rem 2.5rem;
}

.ureg-pass-top {
    padding: 1.1rem 1.5rem;
    background:
        radial-gradient(circle at 88% 0%, rgba(0, 123, 255, 0.22), transparent 42%),
        radial-gradient(circle at 12% 100%, rgba(125, 28, 187, 0.22), transparent 46%),
        #060918;
}

.ureg-intro {
    text-align: center;
    margin-bottom: 1.35rem;
    animation: ulog-rise 0.7s ease both;
}

.ureg-intro h1 {
    margin: 0;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(1.75rem, 3.4vw, 2.35rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #0a2e8c;
}

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

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

.ureg-step-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ureg-step.is-on { color: #5b3fd9; }
.ureg-step.is-on .ureg-step-num {
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #ffffff;
}

.ureg-step-line {
    width: 36px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}

.ureg-alert { margin-bottom: 1rem; }

.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(15, 23, 42, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.9);
    animation: ulog-rise 0.75s ease both;
}

.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, #5b3fd9, #0a2e8c);
    color: #e9d5ff;
}

.ureg-card-ico.is-green {
    background: linear-gradient(145deg, #7d1cbb, #5b3fd9);
    color: #f3e8ff;
}

.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: #0a2e8c;
}

.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 #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.92rem;
    color: #14172b;
    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: #5b3fd9;
    box-shadow: 0 0 0 3px rgba(91, 63, 217, 0.16);
}

.ureg-input-ico select.has-value {
    color: #14172b;
}

.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 #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #14172b;
    text-align: center;
}

.ureg-name-split > select:focus {
    outline: none;
    border-color: #5b3fd9;
    box-shadow: 0 0 0 3px rgba(91, 63, 217, 0.16);
}

.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: #0a2e8c;
}

.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, #0a2e8c, #14102a);
    color: #f4f2ff;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.ureg-pos-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ureg-pos-card.is-on {
    background: linear-gradient(135deg, #5b3fd9 0%, #7d1cbb 100%);
    color: #ffffff;
    border-color: #5b3fd9;
}

.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: #0a2e8c;
    color: #e9d5ff;
}

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

.ureg-dob { margin-top: 1rem; }
.ureg-dob-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
}

.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: #0a2e8c;
    background:
        repeating-linear-gradient(-12deg, transparent, transparent 6px, rgba(91, 63, 217, 0.07) 6px, rgba(91, 63, 217, 0.07) 7px),
        linear-gradient(135deg, #efe8ff, #ddd6fe);
    border: 1.5px solid #5b3fd9;
    user-select: none;
}

.ureg-captcha-refresh {
    width: 46px;
    flex-shrink: 0;
    border: 1.5px solid #e2e8f0;
    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: #5b3fd9;
    border-color: #5b3fd9;
}

.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: uppercase;
    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: #5b3fd9;
}

.ureg-agree a {
    color: #5b3fd9;
    font-weight: 700;
    text-decoration: none;
}

.ureg-agree a:hover { text-decoration: underline; }

/* E-Contract modal */
.ureg-dialog {
    border: none;
    padding: 0;
    margin: auto;
    max-width: min(640px, calc(100vw - 1.5rem));
    width: 100%;
    background: transparent;
    color: inherit;
}
.ureg-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}
.ureg-dialog-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    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(91, 63, 217, 0.14), transparent 55%),
        linear-gradient(180deg, #f4f2fb, #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, #5b3fd9, #0a2e8c);
    color: #e9d5ff;
}
.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: #5b3fd9;
}
.ureg-dialog-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0a2e8c;
}
.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;
}
.ureg-dialog-x:hover {
    background: #e2e8f0;
    color: #0a2e8c;
}
.ureg-dialog-x svg { width: 16px; height: 16px; }
.ureg-dialog-body {
    padding: 1.15rem 1.25rem 0.35rem;
    max-height: min(62vh, 440px);
    overflow-y: auto;
    color: #667066;
    font-size: 0.92rem;
    line-height: 1.55;
}
.ureg-dialog-body p { margin: 0 0 0.85rem; }
.ureg-dialog-body strong { color: #0a2e8c; }
.ureg-dialog-body ul {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.45rem;
}
.ureg-dialog-body li::marker { color: #5b3fd9; }
.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;
}
.ureg-dialog-btn.ghost {
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.ureg-dialog-btn.ghost:hover { background: #f8fafc; }
.ureg-dialog-btn.primary {
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #fff;
    box-shadow: 0 8px 18px rgba(91, 63, 217, 0.28);
}
.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: #fff;
    background: linear-gradient(135deg, #5b3fd9 0%, #7d1cbb 100%);
    box-shadow: 0 10px 22px rgba(91, 63, 217, 0.26);
    transition: transform 0.15s, filter 0.15s;
}

.ureg-submit:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

@media (max-width: 860px) {
    .ureg-pass-top {
        padding: 0.85rem 1rem;
    }
    .ureg-pass-top .upass-nav a:first-child {
        display: inline;
    }
}

.ureg-dialog {
    border: 0;
    border-radius: 16px;
    padding: 0;
    max-width: 420px;
    width: calc(100% - 2rem);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}

.ureg-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

.ureg-dialog-inner {
    padding: 1.4rem 1.35rem 1.25rem;
}

.ureg-dialog-inner h3 {
    margin: 0 0 0.55rem;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.2rem;
}

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

/* ===== Registration success ===== */
.urs-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', system-ui, sans-serif;
    color: #14172b;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 55% 45% at 15% 20%, rgba(91, 63, 217, 0.28), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 85%, rgba(125, 28, 187, 0.18), transparent 50%),
        linear-gradient(160deg, #060918 0%, #0a2e8c 55%, #14102a 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.35);
    text-align: center;
}

.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(91, 63, 217, 0.42), transparent 70%);
}

.urs-burst span:nth-child(2) {
    width: 120px;
    height: 120px;
    bottom: 40px;
    left: -40px;
    background: radial-gradient(circle, rgba(125, 28, 187, 0.28), transparent 70%);
}

.urs-burst span:nth-child(3) {
    width: 80px;
    height: 80px;
    top: 40%;
    right: 8%;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.22), 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, #5b3fd9, #0a2e8c);
    box-shadow: 0 12px 28px rgba(91, 63, 217, 0.35);
    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: #5b3fd9;
}

.urs-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: #0a2e8c;
}

.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, #0a2e8c, #5b3fd9);
    color: #fff;
}

.urs-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #7d1cbb, #5b3fd9);
}

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

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

.urs-details dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.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: #5b3fd9;
    background: rgba(91, 63, 217, 0.1);
}

.urs-copy.is-copied {
    color: #5b3fd9;
    background: #f3e8ff;
}

.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: #f4f2fb;
    border: 1px solid #ddd6fe;
    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, #5b3fd9 0%, #7d1cbb 100%);
    box-shadow: 0 10px 22px rgba(91, 63, 217, 0.26);
    transition: transform 0.15s, filter 0.15s;
}

.urs-login svg {
    width: 18px;
    height: 18px;
    transition: transform 0.15s;
}

.urs-login:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.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 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.15rem 0 1.05rem;
    padding: 1.05rem 1.2rem;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(128deg, #0f172a 0%, #1e3a5f 52%, #1d4ed8 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.actx-section-head-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.actx-section-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.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fde68a;
}

.actx-section-head-ico svg { width: 22px; height: 22px; }

.actx-section-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(253, 230, 138, 0.92);
}

.actx-section-head h3 {
    margin: 0.18rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.actx-section-head p {
    margin: 0.28rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.86);
    max-width: 52ch;
}

.actx-section-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
    background: rgba(253, 230, 138, 0.95);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

.actx-current-plan {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(13, 148, 136, 0.18);
    background:
        linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

.actx-current-plan-glow {
    position: absolute;
    right: -40px;
    top: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.22), transparent 68%);
    pointer-events: none;
}

.actx-current-plan-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.actx-current-plan-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    box-shadow: 0 10px 20px rgba(13, 148, 136, 0.28);
}

.actx-current-plan-ico svg { width: 22px; height: 22px; }

.actx-current-plan-copy {
    min-width: 0;
    flex: 1;
}

.actx-current-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0f766e;
}

.actx-current-plan-copy strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.actx-current-plan-copy small {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748b;
}

.actx-current-plan-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(13, 148, 136, 0.28);
    background: #fff;
    color: #0f766e;
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.actx-current-plan-cta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.actx-current-plan-cta:hover {
    background: #ecfdf5;
    box-shadow: 0 8px 18px rgba(13, 148, 136, 0.14);
    transform: translateY(-1px);
}

.actx-current-plan-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.95rem;
}

.actx-current-stat {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(13, 148, 136, 0.12);
}

.actx-current-stat small {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.actx-current-stat strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.actx-current-stat strong.is-ok { color: #0f766e; }

@media (max-width: 640px) {
    .actx-current-plan-stats { grid-template-columns: 1fr; }
    .actx-current-plan-cta { width: 100%; justify-content: center; }
}

.actx-form { margin-bottom: 1.75rem; }

.actx-pkg-slider { margin-bottom: 1.15rem; }
.actx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 0;
}
.actx-pkg-nav { display: none; }
.actx-pkg-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: #fff;
    color: #5b3fd9;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.actx-pkg-arrow svg { width: 18px; height: 18px; }
.actx-pkg-arrow:active { transform: scale(0.96); }
.actx-pkg-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
.actx-pkg-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ddd6fe;
    cursor: pointer;
}
.actx-pkg-dots button.is-on {
    width: 22px;
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
}

@media (max-width: 720px) {
    .actx-grid {
        display: flex;
        align-items: stretch;
        position: relative;
        gap: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .actx-grid::-webkit-scrollbar { display: none; }
    .actx-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .actx-card:hover { transform: none; }
    .actx-pkg-nav {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-top: 0.85rem;
    }
}

.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: none;
    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(0px);
    box-shadow: none;
}

.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,
.actx-card.tone-1 .actx-card-ico { background: linear-gradient(310deg, #007bff, #38bdf8); }
.actx-card.tone-b .actx-card-ico,
.actx-card.tone-2 .actx-card-ico { background: linear-gradient(310deg, #0d9488, #2dd4bf); }
.actx-card.tone-c .actx-card-ico,
.actx-card.tone-3 .actx-card-ico { background: linear-gradient(310deg, #5b3fd9, #818cf8); }
.actx-card.tone-d .actx-card-ico,
.actx-card.tone-4 .actx-card-ico { background: linear-gradient(310deg, #7d1cbb, #c084fc); }
.actx-card.tone-5 .actx-card-ico { background: linear-gradient(310deg, #0a2e8c, #3b82f6); }
.actx-card.tone-6 .actx-card-ico { background: linear-gradient(310deg, #db2777, #f472b6); }
.actx-card.tone-7 .actx-card-ico { background: linear-gradient(310deg, #d97706, #fbbf24); color: #0f172a; }
.actx-card.tone-8 .actx-card-ico { background: linear-gradient(310deg, #059669, #34d399); }
.actx-card.tone-9 .actx-card-ico { background: linear-gradient(310deg, #b45309, #f59e0b); color: #0f172a; }

.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.tone-a .actx-price,
.actx-card.tone-1 .actx-price { color: #007bff; }
.actx-card.tone-b .actx-price,
.actx-card.tone-2 .actx-price { color: #0d9488; }
.actx-card.tone-c .actx-price,
.actx-card.tone-3 .actx-price { color: #5b3fd9; }
.actx-card.tone-d .actx-price,
.actx-card.tone-4 .actx-price { color: #7d1cbb; }
.actx-card.tone-5 .actx-price { color: #0a2e8c; }
.actx-card.tone-6 .actx-price { color: #db2777; }
.actx-card.tone-7 .actx-price { color: #d97706; }
.actx-card.tone-8 .actx-price { color: #059669; }
.actx-card.tone-9 .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: 0px 0px 5px 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 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;
}

.inc-filters select option { color: #344767; }

.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(210px, 1fr));
    gap: 0.85rem;
    padding: 1.1rem 1.15rem 1.25rem;
}

.inc-type-card {
    display: grid;
    gap: 0.35rem;
    padding: 1.05rem 1rem 1rem;
    border-radius: 14px;
    text-decoration: none;
    border: 1.5px solid #eef0f4;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.inc-type-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.inc-type-kicker {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8392ab;
}

.inc-type-card strong {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
}

.inc-type-amt {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #2152ff;
}

.inc-type-card.tone-green .inc-type-amt { color: #17ad37; }
.inc-type-card.tone-orange .inc-type-amt { color: #c2410c; }
.inc-type-card.tone-purple .inc-type-amt { color: #7928ca; }
.inc-type-card.tone-gold .inc-type-amt { color: #b45309; }

.inc-type-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8392ab;
}

.inc-type-go {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #2152ff;
}

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

/* ===== 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;
}

/* PV / open pairs row */
.up-stats-bv { margin-top: -0.35rem; grid-template-columns: repeat(3, 1fr); }
.up-stats-income-types { margin-top: -0.35rem; }
.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-gold { border-top-color: #f59e0b; }
.up-stat.g-mint .up-stat-ico { background: linear-gradient(310deg, #0d9488, #5eead4); color: #fff; }
.up-stat.g-coral .up-stat-ico { background: linear-gradient(310deg, #f43f5e, #fb7185); color: #fff; }
.up-stat.g-teal .up-stat-ico { background: linear-gradient(310deg, #0891b2, #67e8f9); color: #fff; }
.up-stat.g-slate .up-stat-ico { background: linear-gradient(310deg, #475569, #94a3b8); color: #fff; }
.up-stat.g-gold .up-stat-ico { background: linear-gradient(310deg, #f59e0b, #fde047); color: #fff; }

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

/* ?? 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-mode-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 1rem 1.2rem 0;
}
.actx-mode-btn {
    border: 1.5px solid #ddd6fe;
    background: #f4f2fb;
    color: #0a2e8c;
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
}
.actx-mode-btn.is-on {
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    border-color: transparent;
    color: #fff;
}
.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 {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem 1.05rem 1.1rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(91, 63, 217, 0.08), transparent 48%),
        #fff;
    border: 1px solid #ddd6fe;
}
.actx-bank-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.actx-bank-head-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f3e8ff;
    color: #5b3fd9;
    flex-shrink: 0;
}
.actx-bank-head-ico svg { width: 20px; height: 20px; }
.actx-bank-head strong {
    display: block;
    font-size: 0.95rem;
    color: #1e1b4b;
}
.actx-bank-head p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
}
.actx-bank-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.85rem;
}
.actx-bank-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.95rem 1rem 1rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg, #faf8ff 0%, #fff 38%);
    border: 1px solid #e9e4f8;
    box-shadow: 0 8px 20px rgba(76, 29, 149, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.actx-bank-card:hover {
    transform: translateY(-2px);
    border-color: #c4b5fd;
    box-shadow: 0 14px 28px rgba(91, 63, 217, 0.12);
}
.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: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(91, 63, 217, 0.28);
}
.actx-bank-mark svg { width: 20px; height: 20px; }
.actx-bank-brand > div { min-width: 0; }
.actx-bank-brand strong {
    display: block;
    font-size: 0.95rem;
    color: #1e1b4b;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.actx-bank-brand small {
    font-size: 0.72rem;
    font-weight: 700;
    color: #7c3aed;
    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: #f3e8ff;
    color: #6d28d9;
    border: 1px solid #e9d5ff;
    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(91, 63, 217, 0.1), transparent 60%),
        #fff;
    border: 1px dashed #ddd6fe;
    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: #5b3fd9;
}
.actx-bank-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.actx-bank-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.actx-bank-row.is-upi {
    background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
    border-color: #ddd6fe;
}
.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;
    min-width: 0;
}
.actx-bank-val strong {
    font-size: 0.88rem;
    color: #1e293b;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.actx-bank-val strong.is-mono,
.actx-bank-row.is-upi .actx-bank-val strong {
    color: #4c1d95;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}
.actx-bank-copyall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.15rem;
    padding: 0.58rem 0.75rem;
    border: 1px solid #ddd6fe;
    border-radius: 12px;
    background: #f5f3ff;
    color: #5b3fd9;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.actx-bank-copyall svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.actx-bank-copyall:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}
.actx-bank-copyall.is-copied {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
.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-method-box {
    grid-column: 1 / -1;
    padding: 0.95rem 1rem 1rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(33, 82, 255, 0.08), transparent 50%),
        #fff;
    border: 1px solid #dbe4ff;
}
.actx-method-box label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #334155;
}
.actx-method-box select {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid #c7d2fe;
    background: #f8fafc;
    /* font: inherit; */
    font-weight: 700;
    color: #1e1b4b;
}
.actx-method-box small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}
.actx-cash-note {
    grid-column: 1 / -1;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.actx-cash-note strong {
    display: block;
    font-size: 0.92rem;
    color: #92400e;
}
.actx-cash-note p {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #78350f;
}
.actx-upi-pay[hidden],
.actx-bank-grid[hidden],
.actx-cash-note[hidden],
.actx-method-box + .actx-upi-pay[hidden] {
    display: none !important;
}
.actx-proof-tips ul[hidden] { display: none !important; }
.actx-upi-pay {
    grid-column: 1 / -1;
    padding: 1rem 1.05rem 1.1rem;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 63, 217, 0.1), transparent 46%),
        #fff;
    border: 1px solid #ddd6fe;
}
.actx-upi-pay-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}
.actx-upi-pay-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f3e8ff;
    color: #5b3fd9;
    flex-shrink: 0;
}
.actx-upi-pay-ico svg { width: 20px; height: 20px; }
.actx-upi-pay-head strong {
    display: block;
    font-size: 0.95rem;
    color: #1e1b4b;
}
.actx-upi-pay-head p {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.4;
}
.actx-upi-pay-head em {
    font-style: normal;
    font-weight: 800;
    color: #5b3fd9;
}
.actx-upi-pick-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}
.actx-upi-pick {
    width: 100%;
    margin-bottom: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font: inherit;
    font-weight: 700;
}
.actx-upi-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: stretch;
}
.actx-upi-split-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.actx-upi-split:not(:has(#actxUpiQr:not([hidden]))) {
    grid-template-columns: 1fr;
}
.actx-upi-id-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}
.actx-upi-id-line small {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7c3aed;
}
.actx-upi-id-line strong {
    display: block;
    margin-top: 0.12rem;
    word-break: break-all;
    font-size: 0.88rem;
    color: #4c1d95;
}
.actx-upi-pay-btn {
    display: none;
    width: 100%;
    min-height: 52px;
    margin: 0 0 0.65rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(91, 63, 217, 0.28);
    -webkit-tap-highlight-color: transparent;
}
.actx-upi-pay-btn:active { transform: scale(0.985); }
.actx-upi-hint {
    margin: 0 0 0.35rem;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.45;
}
.actx-upi-hint.is-phone { display: none; }
.actx-upi-hint.is-desk { display: block; }
@media (max-width: 560px) {
    .actx-upi-split {
        grid-template-columns: 1fr;
    }
    .actx-upi-qr {
        max-width: 200px;
        margin: 0 auto;
        width: 100%;
    }
}
@media (max-width: 860px) {
    .actx-upi-pay-btn { display: flex; align-items: center; justify-content: center; }
    .actx-upi-hint.is-phone { display: block; }
    .actx-upi-hint.is-desk { display: none; }
    .actx-upi-pay.is-ios .actx-upi-pay-btn,
    .actx-upi-pay.is-ios .actx-upi-hint.is-phone { display: none; }
    .actx-upi-pay.is-ios .actx-upi-hint.is-desk { display: block; }
}
.actx-upi-qr[hidden] { display: none !important; }
.actx-upi-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0;
    min-width: 156px;
    padding: 0.75rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed #ddd6fe;
}
.actx-upi-qr img {
    width: 132px;
    height: 132px;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.actx-upi-qr span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b3fd9;
}

.actx-proof-body[hidden] { display: none !important; }
.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-pay-slip > label {
    display: block;
    margin-bottom: 0.4rem;
}
.actx-upbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    border: 1.5px dashed #ddd6fe;
    background:
        radial-gradient(circle at 0% 0%, rgba(91, 63, 217, 0.08), transparent 52%),
        #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.actx-upbox:hover,
.actx-upbox.is-drag {
    border-color: #c4b5fd;
    background:
        radial-gradient(circle at 0% 0%, rgba(91, 63, 217, 0.12), transparent 52%),
        #faf8ff;
    box-shadow: 0 10px 24px rgba(91, 63, 217, 0.1);
}
.actx-upbox.has-file {
    border-style: solid;
    border-color: #c4b5fd;
    background: linear-gradient(135deg, #f5f3ff 0%, #fff 55%);
    cursor: default;
}
.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, #ede9fe, #fff);
    border-style: dashed;
    border-color: #ddd6fe;
    color: #5b3fd9;
}
.actx-upbox-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 63, 217, 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 #ddd6fe;
    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: linear-gradient(135deg, #5b3fd9, #7d1cbb);
    color: #fff;
    box-shadow: 0 8px 18px rgba(91, 63, 217, 0.26);
}
.actx-upbox-cta:hover { filter: brightness(1.05); 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-grid {
        padding: 0.85rem 0.7rem 0.9rem;
        border-radius: 14px;
    }
    .actx-bank-cards {
        grid-template-columns: 1fr;
    }
    .actx-bank-card {
        padding: 0.8rem 0.75rem 0.85rem;
        gap: 0.65rem;
    }
    .actx-bank-card:hover { transform: none; }
    .actx-bank-card.has-qr .actx-bank-body {
        grid-template-columns: 1fr;
    }
    .actx-bank-qr {
        max-width: 220px;
        margin: 0 auto;
        width: 100%;
    }
    .actx-bank-top {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
    }
    .actx-bank-brand { flex: 1 1 auto; }
    .actx-bank-tag { flex-shrink: 0; }
    .actx-bank-row { padding: 0.5rem 0.6rem; }
    .actx-bank-copyall { font-size: 0.76rem; }
}
@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-head-ico,
    .actx-bank-mark {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
    .actx-bank-brand strong { font-size: 0.88rem; }
    .actx-bank-val strong.is-mono { font-size: 0.78rem; }
}

/* ?? 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;
}

.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: 92px;
    height: 110px;
    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.6rem 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;
}

/* 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: 1rem 1.15rem 1rem 1.25rem;
}

.idc-magstripe {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: auto;
    /* 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.3rem;
    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.6rem 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-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 (max-width: 560px) {
    .idc-card {
        height: auto;
        aspect-ratio: 1.68 / 1;
        min-height: 260px;
    }
}

/* --- 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(255, 255, 255, 1), 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);
}

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

.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-tabbar,
    .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;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .idc-card-back {
        page-break-before: always;
        break-before: page;
    }
    .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: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-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: 1.25fr 0.85fr;
    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; }
.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(3, 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-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-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: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.wal-radio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.9rem 1rem;
    min-height: 4.35rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    background: #f8fafc;
    color: #334155;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.wal-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.wal-radio-ico {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #64748b;
    border: 1px solid #e8ecf4;
}
.wal-radio-ico svg { width: 18px; height: 18px; }
.wal-radio-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}
.wal-radio-copy strong {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.wal-radio-copy small {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}
.wal-radio-tick {
    margin-left: auto;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    position: relative;
}
.wal-radio-tick::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: transparent;
}
.wal-radio:hover {
    border-color: #c7d2fe;
    background: #fff;
}
.wal-radio.is-on,
.wal-radio:has(input:checked) {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.1);
}
.wal-radio.is-on .wal-radio-ico,
.wal-radio:has(input:checked) .wal-radio-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
    border-color: transparent;
}
.wal-radio.is-on .wal-radio-tick,
.wal-radio:has(input:checked) .wal-radio-tick {
    border-color: #2152ff;
}
.wal-radio.is-on .wal-radio-tick::after,
.wal-radio:has(input:checked) .wal-radio-tick::after {
    background: #2152ff;
}

.wal-select {
    position: relative;
}
.wal-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 2.8rem 0.85rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    cursor: pointer;
    line-height: 1.3;
}
.wal-select select:focus {
    outline: none;
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}
.wal-select::after {
    content: '';
    position: absolute;
    right: 1.05rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.wal-select.has-value select {
    background: #fff;
    color: #0f172a;
}

.wal-payable {
    position: relative;
    display: flex;
    align-items: center;
}
.wal-payable-cur {
    position: absolute;
    left: 0.95rem;
    font-weight: 800;
    color: #2152ff;
    pointer-events: none;
}
.wal-payable input {
    padding-left: 2.15rem !important;
    background: #f1f5f9 !important;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

@media (max-width: 720px) {
    .wal-radio-row { grid-template-columns: 1fr; }
}
.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: 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.15 / 1;
    background: #f8fafc;
    display: grid;
    place-items: center;
}
.shop-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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;
}
.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; }

.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: 100px;
    height: auto;
    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-table-wrap {
    overflow-x: auto;
    margin: 0 1.5rem 1rem;
}
.shop-inv-table-wrap .shop-inv-table {
    width: 100%;
    margin: 0;
}
.shop-inv-table-kit th,
.shop-inv-table-kit td {
    font-size: 0.8rem;
    padding: 0.65rem 0.45rem;
}
.shop-inv-table-kit th {
    font-size: 0.62rem;
}
.shop-inv-sku {
    display: block;
    margin-top: 0.15rem;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
}
.shop-inv-empty {
    text-align: center !important;
    color: #64748b;
    padding: 1.2rem 0.75rem !important;
}

.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.35rem;
        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 { width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; }
    .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 {
        page-break-inside: auto;
    }
    .shop-inv-table-wrap {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        overflow: visible !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;
    }
}

.rk-dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #1e3a5f, #0f766e);
    color: #fff;
}
.rk-dash-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 0.15rem;
}
.rk-dash strong { display: block; font-size: 1.25rem; font-weight: 800; }
.rk-dash small { display: block; margin-top: 0.2rem; opacity: 0.85; font-size: 0.82rem; }
.rk-dash .up-btn { border-color: rgba(255,255,255,.35); color: #000; }
.rk-card { margin-bottom: 1.5rem; overflow: hidden; }
.rk-progress {
    height: 8px;
    background: #e2e8f0;
    margin: 0 1.15rem 1rem;
    border-radius: 99px;
    overflow: hidden;
}
.rk-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0f766e, #f59e0b);
    border-radius: inherit;
}
.rk-ladder {
    list-style: none;
    margin: 0;
    padding: 0 1.15rem 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.55rem;
}
.rk-ladder li {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: #fff;
}
.rk-ladder li strong { display: block; font-size: 0.88rem; }
.rk-ladder li span { font-size: 0.75rem; color: #64748b; }
.rk-ladder li.is-done { border-color: #99f6e4; background: #f0fdfa; }
.rk-ladder li.is-now { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
.rk-note {
    margin: 0;
    padding: 0 1.15rem 1.15rem;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}
.rk-status-txt { font-size: 0.78rem; color: #64748b; }

.rk-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.35rem 1.4rem;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #0f1729 0%, #1a2540 55%, #243352 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}
.rk-hero-glow {
    position: absolute;
    right: 8%;
    top: -48px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 193, 7, 0.34), transparent 68%);
    pointer-events: none;
}
.rk-hero-main { position: relative; min-width: 0; flex: 1; }
.rk-hero-id {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.rk-hero-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f1729;
    background: linear-gradient(145deg, #ffc107, #f59e0b);
    box-shadow: 0 8px 18px rgba(245, 158, 11, 0.35);
}
.rk-hero-kicker {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--up-gold);
}
.rk-hero h2 {
    margin: 0.1rem 0 0;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #fff;
}
.rk-hero-who {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.78);
    font-weight: 600;
}
.rk-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.15rem 1.6rem;
    margin-top: 1.05rem;
}
.rk-hero-meta small {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.58);
}
.rk-hero-meta strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}
.rk-ring {
    --p: 0;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#ffc107 calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
    box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.08);
}
.rk-ring-inner {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    background: #13203a;
    text-align: center;
}
.rk-ring-inner strong {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.rk-ring-inner span {
    margin-top: 0.2rem;
    font-size: 0.64rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.7);
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rk-nextbar {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    padding: 1rem 1.15rem 1.05rem;
    margin-bottom: 1.05rem;
}
.rk-nextbar-copy {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0.65rem;
}
.rk-nextbar-copy span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}
.rk-nextbar-copy strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
}
.rk-progress-lg {
    margin: 0;
    height: 10px;
    background: #f1f5f9;
}
.rk-path-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.rk-path-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.2rem 0.35rem;
}
.rk-path-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b45309;
}
.rk-path-head h3 {
    margin: 0.15rem 0 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}
.rk-path-head p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.rk-path-count {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.72rem;
    font-weight: 800;
}
.rk-path {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.85rem 0.25rem;
}
.rk-node {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.7rem;
    align-items: stretch;
}
.rk-node-rail {
    position: relative;
    display: flex;
    justify-content: center;
}
.rk-node-rail::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: -4px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: #e2e8f0;
}
.rk-node:last-child .rk-node-rail::before { display: none; }
.rk-node-dot {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    margin-top: 0.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.68rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #64748b;
}
.rk-node.is-done .rk-node-dot {
    background: #0f766e;
    color: #fff;
}
.rk-node.is-now .rk-node-dot {
    background: linear-gradient(145deg, #ffc107, #f59e0b);
    color: #0f1729;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22);
}
.rk-node.is-next .rk-node-dot {
    background: #fff;
    color: #b45309;
    border: 2px solid #f59e0b;
}
.rk-node-body {
    margin-bottom: 0.55rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background: #f8fafc;
}
.rk-node.rk-tone-gold .rk-node-body { border-left: 3px solid #f59e0b; }
.rk-node.rk-tone-bronze .rk-node-body { border-left: 3px solid #d97706; }
.rk-node.rk-tone-silver .rk-node-body { border-left: 3px solid #94a3b8; }
.rk-node.rk-tone-steel .rk-node-body { border-left: 3px solid #64748b; }
.rk-node.rk-tone-gem .rk-node-body { border-left: 3px solid #059669; }
.rk-node.rk-tone-diamond .rk-node-body { border-left: 3px solid #2563eb; }
.rk-node.rk-tone-teal .rk-node-body { border-left: 3px solid #0f766e; }
.rk-node.is-done .rk-node-body {
    background: #f0fdfa;
    border-color: #99f6e4;
}
.rk-node.is-now .rk-node-body {
    background: #fffbeb;
    border-color: #fde68a;
    box-shadow: 0 10px 22px rgba(245, 158, 11, 0.08);
}
.rk-node.is-locked .rk-node-body {
    opacity: 0.72;
}
.rk-node-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.65rem;
}
.rk-node-top strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}
.rk-node-pairs {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}
.rk-node-state {
    flex-shrink: 0;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}
.rk-node.is-done .rk-node-state { background: #ccfbf1; color: #0f766e; }
.rk-node.is-now .rk-node-state { background: #fde68a; color: #92400e; }
.rk-node.is-next .rk-node-state { background: #ffedd5; color: #9a3412; }
.rk-node-bonus {
    margin: 0.4rem 0 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: #b45309;
}
.rk-node-bar {
    margin-top: 0.55rem;
    height: 6px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.rk-node-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e, #f59e0b);
}
.rk-path-card .rk-note { padding-top: 0.35rem; }

.rk-hero-stars {
    margin: 0.2rem 0 0.15rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fde68a;
}
.rk-hero-stars span {
    margin-right: 0.35rem;
    letter-spacing: 0.04em;
}

@media (max-width: 720px) {
    .rk-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.15rem 1.1rem 1.25rem;
    }
    .rk-ring { align-self: center; }
    .rk-hero h2 { font-size: 1.4rem; }
}

.rk-hero-avatar svg { width: 24px; height: 24px; }

.rw-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1rem;
    padding: 1.4rem 1.4rem 1.35rem;
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #1a1230 0%, #2a1b4a 48%, #3d2a18 100%);
    box-shadow: 0 20px 40px rgba(26, 18, 48, 0.22);
}
.rw-hero-glow {
    position: absolute;
    right: 6%;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.38), transparent 68%);
    pointer-events: none;
}
.rw-hero-copy { position: relative; min-width: 0; }
.rw-hero-kicker {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fbbf24;
}
.rw-hero h2 {
    margin: 0.28rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
    max-width: 34rem;
}
.rw-hero-who {
    margin: 0.28rem 0 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}
.rw-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.95rem;
}
.rw-hero-pills span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
}
.rw-hero-pills b { color: #fde68a; font-weight: 800; }
.rw-hero-ring {
    --p: 0;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(#fbbf24 calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
}
.rw-hero-ring > div {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    align-content: center;
    background: #1a1230;
    text-align: center;
}
.rw-hero-ring strong {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.rw-hero-ring small {
    margin-top: 0.18rem;
    font-size: 0.64rem;
    font-weight: 700;
    color: rgba(253, 230, 138, 0.85);
}

.rw-spotlight {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.05rem 1.15rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #fde68a;
    box-shadow: 0 16px 32px rgba(245, 158, 11, 0.08);
}
.rw-spot-ico {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #0f1729;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.28);
}
.rw-spot-ico svg { width: 28px; height: 28px; }
.rw-spot-copy { flex: 1; min-width: 0; }
.rw-spot-kicker {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b45309;
}
.rw-spotlight h3 {
    margin: 0.12rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.rw-spotlight p {
    margin: 0.18rem 0 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}
.rw-spot-bar {
    height: 8px;
    border-radius: 99px;
    background: #f1f5f9;
    overflow: hidden;
}
.rw-spot-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #f59e0b);
}
.rw-spotlight small {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: #475569;
}

.rw-board {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.rw-board-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 1.1rem 1.2rem 0.75rem;
}
.rw-board-head span {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7c3aed;
}
.rw-board-head h3 {
    margin: 0.12rem 0 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
}
.rw-board-head em {
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}
.rw-list {
    list-style: none;
    margin: 0;
    padding: 0 0.85rem 0.4rem;
}
.rw-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.8rem 0.85rem;
    margin-bottom: 0.5rem;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #f8fafc;
}
.rw-row-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e2e8f0;
    color: #334155;
}
.rw-row-ico svg { width: 20px; height: 20px; }
.rw-row-main { min-width: 0; }
.rw-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}
.rw-row-top strong {
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.rw-row-top em {
    flex-shrink: 0;
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
}
.rw-row-main p {
    margin: 0.18rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}
.rw-row-bar {
    margin-top: 0.45rem;
    height: 5px;
    border-radius: 99px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.rw-row-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7c3aed, #f59e0b);
}
.rw-row-pairs {
    text-align: right;
    flex-shrink: 0;
}
.rw-row-pairs b {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
}
.rw-row-pairs span {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rw-st-fulfilled {
    background: #f0fdfa;
    border-color: #99f6e4;
}
.rw-st-fulfilled .rw-row-ico { background: #0f766e; color: #fff; }
.rw-st-fulfilled .rw-row-top em { background: #ccfbf1; color: #0f766e; }
.rw-st-eligible {
    background: #fffbeb;
    border-color: #fde68a;
}
.rw-st-eligible .rw-row-ico { background: linear-gradient(145deg, #fbbf24, #f59e0b); color: #0f1729; }
.rw-st-eligible .rw-row-top em { background: #fde68a; color: #92400e; }
.rw-st-next {
    border-color: #ddd6fe;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.08);
}
.rw-st-next .rw-row-ico { background: #ede9fe; color: #6d28d9; }
.rw-st-next .rw-row-top em { background: #ede9fe; color: #6d28d9; }
.rw-st-cancelled { opacity: 0.7; }
.rw-st-cancelled .rw-row-top em { background: #fee2e2; color: #b91c1c; }
.rw-foot {
    margin: 0;
    padding: 0.35rem 1.2rem 1.15rem;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

@media (max-width: 720px) {
    .rw-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.15rem 1.1rem 1.2rem;
    }
    .rw-hero-ring { align-self: center; }
    .rw-hero h2 { font-size: 1.2rem; }
    .rw-spotlight { flex-direction: column; align-items: flex-start; }
    .rw-row {
        grid-template-columns: 40px 1fr;
    }
    .rw-row-pairs {
        grid-column: 2;
        text-align: left;
        display: flex;
        gap: 0.35rem;
        align-items: baseline;
    }
    .rw-row-pairs b { display: inline; font-size: 0.82rem; }
}

/* Settings hub + mobile app chrome extras */
.up-set-head { margin-bottom: 1rem; }
.up-set-hero {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    margin-bottom: 1.05rem;
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 18px;
    box-shadow: var(--up-shadow);
}
.up-set-hero-avatar {
    width: 54px;
    height: 54px;
    font-size: 1rem;
}
.up-set-hero strong {
    display: block;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.up-set-hero small {
    display: block;
    margin-top: 0.12rem;
    color: var(--up-muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.up-set-hero-link {
    margin-left: auto;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #5b3fd9;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}
.up-set-group { margin-bottom: 1.05rem; }
.up-set-group h2 {
    margin: 0 0 0.45rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.up-set-list {
    background: #fff;
    border: 1px solid var(--up-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--up-shadow);
}
.up-set-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.82rem 0.9rem;
    text-decoration: none;
    color: inherit;
    border-top: 1px solid #f1f5f9;
    -webkit-tap-highlight-color: transparent;
}
.up-set-row:first-child { border-top: 0; }
.up-set-row:active { background: #f8fafc; }
.up-set-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f3e8ff;
    color: #5b3fd9;
    flex-shrink: 0;
}
.up-set-ico svg { width: 18px; height: 18px; }
.up-set-copy { min-width: 0; flex: 1; }
.up-set-copy strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
}
.up-set-copy small {
    display: block;
    margin-top: 0.12rem;
    color: var(--up-muted);
    font-size: 0.74rem;
    font-weight: 600;
}
.up-set-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.up-set-badge.is-alert {
    background: #ffedd5;
    color: #c2410c;
}
.up-set-chevron {
    width: 16px;
    height: 16px;
    color: #cbd5e1;
    flex-shrink: 0;
}
.up-set-row.is-danger .up-set-ico {
    background: #fee2e2;
    color: #dc2626;
}
.up-set-row.is-danger strong { color: #dc2626; }

@media (max-width: 860px) {
    .up-set-head { display: none; }
}

.tc-points {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    counter-reset: tc;
}
.tc-points li {
    position: relative;
    padding: 0.75rem 0.9rem 0.75rem 3.15rem;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fafbff;
    color: #334155;
    line-height: 1.55;
}
.tc-points li::before {
    counter-increment: tc;
    content: counter(tc);
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #5b3fd9, #0a2e8c);
}
.tc-points a { color: #5b3fd9; font-weight: 700; }
.tc-page-body { padding: 1.15rem 1.2rem 1.35rem; }
.tc-page-note {
    margin: 0;
    font-size: 0.84rem;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 0.8rem 0.95rem;
    line-height: 1.5;
}