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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.up-user-item.danger { color: #dc2626 !important; }
.up-user-item.danger svg { color: #dc2626; }
.up-user-item.danger:hover { background: #fef2f2; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 860px) {
    .up-footer {
        margin: 0 1rem 1rem;
    }
    .up-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

.up-page-head {
    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-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: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

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

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

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

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

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

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

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

.up-stat-foot {
    margin-top: 0.55rem;
    display: flex;
    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: 12px;
    font: inherit;
    background: #fff;
    color: var(--up-ink);
    font-size: 14px;
}

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

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

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

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

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

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

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

.up-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 35;
}

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

/* Auth ? member gate login (editorial layout) */
.ulog-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Figtree', 'Plus Jakarta Sans', sans-serif;
    color: #1a1d27;
    background: #0d1324;
}

.ulog {
    --ulog-ink: #16213e;
    --ulog-muted: #7a849c;
    --ulog-line: #d5dbeb;
    --ulog-accent: #e9c46a;
    --ulog-accent-deep: #daa520;
    --ulog-accent-soft: #f0d78a;
    --ulog-accent-ink: #16213e;
    --ulog-sheet: #f7f8fc;
    --ulog-blue: #c9a227;
    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(233, 196, 106, 0.14), transparent 60%),
        radial-gradient(ellipse 45% 35% at 88% 78%, rgba(22, 33, 62, 0.55), transparent 55%),
        linear-gradient(145deg, #0b1020 0%, #16213e 42%, #10182c 100%);
}

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

.ulog-blade {
    position: absolute;
    background: linear-gradient(135deg, rgba(233, 196, 106, 0.28), rgba(218, 165, 32, 0.1));
    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(218, 165, 32, 0.16), rgba(22, 33, 62, 0.35));
    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-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: 'Unbounded', 'Figtree', 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-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: 'Unbounded', 'Figtree', 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: 160px;
    max-height: 56px;
    object-fit: contain;
    margin: 0 0 0.75rem;
}

.ulog-title {
    margin: 1.1rem 0 0;
    max-width: 18ch;
    font-family: 'Figtree', 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(233, 196, 106, 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: #5c6780;
}

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

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

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

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

.ulog-field input {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid #cfd5e2;
    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-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, #e9c46a 0%, #daa520 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; }

.ulog-home {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 1.1rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: rgba(247, 248, 251, 0.62);
    text-decoration: none;
    transition: color 0.15s ease;
}

.ulog-home:hover {
    color: #fff;
}

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

@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-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(13, 19, 36, 0.55) 18%);
    }

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

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

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

.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-user-meta { display: none; }
    .up-quick { grid-template-columns: repeat(2, 1fr); }
    .up-form-grid { grid-template-columns: 1fr; }
    .up-kv { grid-template-columns: 1fr; gap: 0.15rem; }
    .up-kv dt { margin-top: 0.55rem; }
    .up-referral-grid { grid-template-columns: 1fr; }
}

/* Bottom nav base (hidden on desktop) */
.up-bottom-nav {
    display: none;
}
.up-bn-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.2rem;
    border-radius: 12px;
    color: #94a3b8;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
.up-bn-ico {
    width: 36px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.up-bn-ico svg {
    width: 22px;
    height: 22px;
}
.up-bn-label {
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
}
.up-bn-item.active {
    color: var(--up-accent-deep);
}
.up-bn-item.active .up-bn-ico {
    background: var(--up-accent-soft);
}
.up-bn-item:active {
    transform: scale(0.97);
}

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

@media (max-width: 560px) {
    .up-stats { grid-template-columns: 1fr; }
    .up-content { padding: 1rem; }
    .up-panel-head { flex-direction: row; flex-wrap: wrap; }
    .up-ref-field { flex-wrap: wrap; }
    .up-ref-copy,
    .up-ref-wa {
        flex: 1;
        justify-content: center;
        padding: 0.65rem 0.9rem;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pp-contact-edit:hover { background: rgba(255, 255, 255, 0.3); }
.pp-contact-edit svg { width: 15px; height: 15px; }

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

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

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

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

.pp-ci svg { width: 16px; height: 16px; }
.pp-ci.purple { background: linear-gradient(310deg, #7928ca, #ff0080); }
.pp-ci.teal { background: linear-gradient(310deg, #2152ff, #21d4fd); }
.pp-ci.orange { background: linear-gradient(310deg, #f53939, #fbcf33); }
.pp-ci.indigo { background: linear-gradient(310deg, #5e72e4, #825ee4); }
.pp-ci.green { background: linear-gradient(310deg, #17ad37, #98ec2d); }

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

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

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

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

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

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

.pp-contact-tag.teal { background: #e8f4ff; color: #1e88e5; }
.pp-contact-tag.indigo { background: #eee9ff; color: #5e72e4; }
.pp-contact-tag.green { background: #e8f8e8; color: #43a047; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pp-ref-leg-ico svg { width: 14px; height: 14px; }
.pp-ref-leg-ico.left { background: linear-gradient(310deg, #2152ff, #21d4fd); }
.pp-ref-leg-ico.right { background: linear-gradient(310deg, #f53939, #fbcf33); }

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

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

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

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

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

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

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

.pp-copy:hover { background: #e4e7ee; }
.pp-copy svg { width: 15px; height: 15px; }
.pp-copy.is-copied { background: #82d616; color: #fff; }

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

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

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

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

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

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

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

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

.pp-mini-ico svg { width: 15px; height: 15px; }
.pp-mini-ico.blue { background: linear-gradient(310deg, #2152ff, #21d4fd); }
.pp-mini-ico.green { background: linear-gradient(310deg, #17ad37, #98ec2d); }
.pp-mini-ico.red { background: linear-gradient(310deg, #ea0606, #ff667c); }

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

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

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

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

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

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

.pp-stat-ico svg { width: 20px; height: 20px; }
.pp-stat-ico.purple { background: linear-gradient(310deg, #7928ca, #ff0080); }
.pp-stat-ico.green { background: linear-gradient(310deg, #17ad37, #98ec2d); }
.pp-stat-ico.orange { background: linear-gradient(310deg, #f53939, #fbcf33); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pp-q.orange { background: #fff4e6; color: #fb8c00; border-color: #ffe0b8; }
.pp-q.purple { background: #f3e8ff; color: #7928ca; border-color: #e4ccff; }
.pp-q.green { background: #e8f8e8; color: #43a047; border-color: #c8ebc8; }
.pp-q.red { background: #ffe8ec; color: #e53935; border-color: #ffc9d1; }
.pp-q.blue { background: #e8f4ff; color: #1e88e5; border-color: #c5e3ff; }
.pp-q.grey { background: #f4f6f8; color: #607d8b; border-color: #e2e8ee; }

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

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

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

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

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

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

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

.pp-dot-wrap.purple .pp-dot { background: #7928ca; box-shadow: 0 0 0 4px rgba(121, 40, 202, 0.15); }
.pp-dot-wrap.green .pp-dot { background: #82d616; box-shadow: 0 0 0 4px rgba(130, 214, 22, 0.18); }
.pp-dot-wrap.red .pp-dot { background: #ea0606; box-shadow: 0 0 0 4px rgba(234, 6, 6, 0.14); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pp-txn-sum.in strong { color: #4caf00; }
.pp-txn-sum.out strong { color: #ea0606; }
.pp-txn-sum.all strong { color: #7928ca; }

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

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

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

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

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

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

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

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

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

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

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

.pp-txn-ico svg { width: 17px; height: 17px; }
.pp-txn-ico.in { background: linear-gradient(310deg, #17ad37, #98ec2d); }
.pp-txn-ico.out { background: linear-gradient(310deg, #ea0606, #ff667c); }

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

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

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

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

.pp-txn-type.referral { background: #e8f8e8; color: #43a047; }
.pp-txn-type.binary { background: #e8f4ff; color: #1e88e5; }
.pp-txn-type.matching { background: #fff4e6; color: #fb8c00; }
.pp-txn-type.level { background: #f3e8ff; color: #7928ca; }
.pp-txn-type.withdraw { background: #ffe8ec; color: #e53935; }

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

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

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

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

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

.pp-txn-status.paid,
.pp-txn-status.approved { background: rgba(130, 214, 22, 0.16); color: #4caf00; }
.pp-txn-status.pending { background: rgba(251, 207, 51, 0.25); color: #c79100; }
.pp-txn-status.rejected,
.pp-txn-status.cancelled { background: rgba(234, 6, 6, 0.12); color: #ea0606; }

@media (max-width: 640px) {
    .pp-txn-summary { grid-template-columns: 1fr; }
    .pp-txn-list li {
        flex-wrap: wrap;
    }
    .pp-txn-right {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding-left: 3.3rem;
    }
}

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

@media (max-width: 980px) {
    .pp-layout { grid-template-columns: 1fr; }
    .pp-welcome { flex-direction: column; }
    .pp-mini-stats { justify-content: flex-start; }
    .pp-stat-row { grid-template-columns: 1fr; }
    .pp-mid-row,
    .pp-bottom-row { grid-template-columns: 1fr; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 560px) {
    .ep-form-head { flex-direction: column; }
    .ep-actions { flex-direction: column; }
    .ep-actions .up-btn { width: 100%; justify-content: center; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cpw-strength-bar {
    flex: 1;
    height: 5px;
    border-radius: 99px;
    background: #f1f5f9;
    overflow: hidden;
}

.cpw-strength-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    transition: width 0.2s ease, background 0.2s ease;
}

.cpw-strength small {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    min-width: 5.5rem;
    text-align: right;
}

.cpw-match {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #059669;
}

.cpw-match svg { width: 14px; height: 14px; }

.cpw-checklist {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0.75rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cpw-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.15s;
}

.cpw-checklist li.is-ok { color: #059669; }

.cpw-check-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.15s;
}

.cpw-checklist li.is-ok .cpw-check-dot { background: #34d399; }

.cpw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

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

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

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

@media (max-width: 560px) {
    .cpw-actions { flex-direction: column; }
    .cpw-actions .up-btn { width: 100%; justify-content: center; }
}

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

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

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

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

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

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

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

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

.ph-avatar {
    width: 118px;
    height: 118px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 800;
    color: #2152ff;
    background: linear-gradient(135deg, #fff 0%, #dbeafe 100%);
    border: 4px solid #fff;
    box-shadow: 0 10px 24px rgba(33, 82, 255, 0.25);
    overflow: hidden;
}

.ph-avatar.has-photo { background: #e2e8f0; }

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

.ph-side-body h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #344767;
}

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

.ph-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 1rem;
}

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

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

.ph-chip.is-muted {
    background: rgba(103, 116, 142, 0.1);
    color: #67748e;
}

.ph-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    text-align: left;
}

.ph-tips li {
    font-size: 0.78rem;
    font-weight: 600;
    color: #67748e;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #eef0f4;
}

.ph-tips li::before {
    content: '?';
    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-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;
}

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

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

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

.ut-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.ut-modal-dialog {
    position: relative;
    width: min(560px, 100%);
    max-height: min(92vh, 820px);
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    border: 1px solid #e2e8f0;
}

.ut-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
}

.ut-modal-head h3 {
    margin: 0 0 0.2rem;
    font-size: 1.1rem;
    color: #0f172a;
}

.ut-modal-sub {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.ut-modal-x {
    border: 0;
    background: #f1f5f9;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1.35rem;
    line-height: 1;
    color: #475569;
    cursor: pointer;
}

.ut-modal-body { padding: 1.15rem 1.25rem 1.25rem; }

.ut-slot-chip {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 0.78rem;
    font-weight: 700;
}

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

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

.ut-form-grid label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    margin-bottom: 0.35rem;
}

.ut-form-grid input,
.ut-form-grid select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    background: #fff;
    box-sizing: border-box;
}

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

.ut-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

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

@media (max-width: 640px) {
    .ut-form-grid { grid-template-columns: 1fr; }
}

.ut-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #2152ff, #21d4fd);
    color: #fff;
    box-shadow: 0 4px 10px rgba(33, 82, 255, 0.25);
}

.ut-avatar svg { width: 18px; height: 18px; }
.ut-avatar.vacant-ico {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
}

.ut-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #344767;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ut-code { font-size: 0.65rem; font-weight: 700; color: #8392ab; }
.ut-level { font-size: 0.62rem; font-weight: 800; color: #2152ff; letter-spacing: 0.04em; }

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

@media (max-width: 560px) {
    .team-stats { grid-template-columns: 1fr; }
    .team-banner { flex-direction: column; }
    .team-row-meta { width: 100%; padding-left: 2.3rem; }
}

/* ===== Withdrawal (Soft UI Soft) ===== */
.wd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.wd-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.wd-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.wd-stat.g-purple::after { background: #7928ca; }
.wd-stat.g-green::after { background: #17ad37; }
.wd-stat.g-orange::after { background: #f59e0b; }
.wd-stat.g-blue::after { background: #2152ff; }

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

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

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

.wd-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.wd-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wd-stat strong.is-sm { font-size: 1.05rem; }
.wd-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.wd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 0.9fr);
    gap: 1rem;
    align-items: start;
}

.wd-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

.wd-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}

.wd-banner.is-report {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

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

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

.wd-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

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

.wd-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

.wd-body { padding: 1.15rem 1.25rem 1.3rem; }

.wd-form { display: grid; gap: 1.05rem; }

.wd-form-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.wd-form-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(33, 82, 255, 0.06), rgba(33, 212, 253, 0.08));
    border: 1px solid rgba(33, 82, 255, 0.12);
}

.wd-form-chip.is-min {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 207, 51, 0.1));
    border-color: rgba(245, 158, 11, 0.18);
}

.wd-form-chip.is-max {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.08), rgba(45, 212, 191, 0.1));
    border-color: rgba(13, 148, 136, 0.18);
}

.wd-form-chip-ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    flex-shrink: 0;
}

.wd-form-chip.is-min .wd-form-chip-ico {
    background: linear-gradient(135deg, #f53939, #fbcf33);
}

.wd-form-chip.is-max .wd-form-chip-ico {
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
}

.wd-form-chip-ico svg { width: 17px; height: 17px; }

.wd-form-chip small {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.wd-form-chip strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.98rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

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

.wd-field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

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

.wd-field-label,
.wd-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #344767;
}

.wd-hint {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2152ff;
    background: rgba(33, 82, 255, 0.08);
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.wd-hint.is-ok {
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
}

.wd-amount {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wd-amount:focus-within {
    border-color: #2152ff;
    box-shadow: 0 0 0 4px rgba(33, 82, 255, 0.12);
}

.wd-amount-prefix {
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #67748e;
    background: #f8fafc;
    border-right: 1px solid #eef0f4;
}

.wd-amount input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    padding: 0.85rem 0.75rem;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
    background: transparent;
}

.wd-amount input:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.wd-amount-max {
    border: 0;
    border-left: 1px solid #eef0f4;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    color: #fff;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 0 0.9rem;
    cursor: pointer;
    transition: filter 0.15s;
}

.wd-amount-max:hover:not(:disabled) { filter: brightness(1.06); }
.wd-amount-max:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wd-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 0.45rem;
}

.wd-method {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.45rem 0.65rem;
    border-radius: 12px;
    border: 1.5px solid #e9ecef;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.wd-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wd-method-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #67748e;
    background: #f1f5f9;
    transition: background 0.15s, color 0.15s;
}

.wd-method-ico svg { width: 16px; height: 16px; }

.wd-method-text {
    font-size: 0.72rem;
    font-weight: 800;
    color: #67748e;
    line-height: 1.2;
}

.wd-method:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.wd-method.is-on,
.wd-method:has(input:checked) {
    border-color: #2152ff;
    background: linear-gradient(180deg, rgba(33, 82, 255, 0.06), #fff);
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.12);
}

.wd-method.is-on .wd-method-ico,
.wd-method:has(input:checked) .wd-method-ico {
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
}

.wd-method.is-on .wd-method-text,
.wd-method:has(input:checked) .wd-method-text {
    color: #2152ff;
}

.wd-textarea-wrap {
    border: 1.5px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wd-textarea-wrap:focus-within {
    border-color: #2152ff;
    box-shadow: 0 0 0 4px rgba(33, 82, 255, 0.12);
}

.wd-textarea-wrap textarea {
    display: block;
    width: 100%;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    resize: vertical;
    min-height: 110px;
    padding: 0.85rem 0.95rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #344767;
    background: transparent;
}

.wd-textarea-wrap textarea:disabled {
    background: #f8fafc;
    color: #94a3b8;
}

.wd-form-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.35rem;
    border-top: 1px dashed #e9ecef;
}

.wd-break {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
}

.wd-break-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: #67748e;
}

.wd-break-row strong {
    font-weight: 800;
    color: #344767;
}

.wd-break-row.is-net {
    margin-top: 0.25rem;
    padding-top: 0.45rem;
    border-top: 1px dashed #e9ecef;
    font-weight: 700;
    color: #344767;
}

.wd-break-row.is-net strong {
    color: #2152ff;
    font-size: 0.95rem;
}

.wd-break .wd-form-note {
    max-width: none;
    margin-top: 0.35rem;
}

.wd-form-note {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #8392ab;
    max-width: 280px;
    line-height: 1.4;
}

.wd-form-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.wd-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.wd-submit svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 720px) {
    .wd-form-grid { grid-template-columns: 1fr; }
    .wd-form-strip { grid-template-columns: 1fr; }
    .wd-form-foot { align-items: stretch; }
    .wd-form-actions { width: 100%; }
    .wd-form-actions .up-btn { flex: 1; justify-content: center; }
}

.wd-side { display: grid; gap: 0.85rem; }

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

.wd-guide-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    color: #fff;
}

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

.wd-guide-head.is-tips {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #f53939 0%, #fbcf33 100%);
}

.wd-guide-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.wd-guide-ico svg { width: 20px; height: 20px; }

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

.wd-guide-head h3 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.wd-timeline {
    list-style: none;
    margin: 0;
    padding: 1rem 1.1rem 1.15rem;
    display: grid;
    gap: 0;
}

.wd-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0 0 1rem;
}

.wd-timeline li:last-child { padding-bottom: 0; }

.wd-timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #c7d2fe 0%, #e2e8f0 100%);
}

.wd-tl-num {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #2152ff, #21d4fd);
    box-shadow: 0 8px 16px rgba(33, 82, 255, 0.25);
}

.wd-timeline li:nth-child(2) .wd-tl-num {
    background: linear-gradient(135deg, #f59e0b, #fbcf33);
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.28);
}

.wd-timeline li:nth-child(3) .wd-tl-num {
    background: linear-gradient(135deg, #7928ca, #ff0080);
    box-shadow: 0 8px 16px rgba(121, 40, 202, 0.25);
}

.wd-timeline li:nth-child(4) .wd-tl-num {
    background: linear-gradient(135deg, #17ad37, #98ec2d);
    box-shadow: 0 8px 16px rgba(23, 173, 55, 0.25);
}

.wd-timeline strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.25;
}

.wd-timeline p {
    margin: 0.18rem 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #8392ab;
    font-weight: 600;
}

.wd-tip-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem 0.95rem 0.35rem;
    display: grid;
    gap: 0.55rem;
}

.wd-tip-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0.75rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
}

.wd-tip-ico {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.wd-tip-ico svg { width: 18px; height: 18px; }

.wd-tip-ico.t-orange { background: linear-gradient(135deg, #f53939, #fbcf33); }
.wd-tip-ico.t-blue { background: linear-gradient(135deg, #2152ff, #21d4fd); }
.wd-tip-ico.t-green { background: linear-gradient(135deg, #17ad37, #98ec2d); }

.wd-tip-list strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.25;
}

.wd-tip-list p {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: #8392ab;
    font-weight: 600;
}

.wd-guide-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.55rem 0.95rem 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    text-decoration: none;
    background: linear-gradient(118deg, #0f172a 0%, #334155 55%, #b45309 140%);
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}

.wd-guide-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}

.wd-guide-cta strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
}

.wd-guide-cta small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.72rem;
    opacity: 0.88;
    font-weight: 600;
}

.wd-guide-cta-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.95rem;
    font-weight: 700;
}

/* legacy side cards (report page / fallbacks) */
.wd-side-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    padding: 1.1rem 1.15rem;
}

.wd-side-card.soft {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
    box-shadow: none;
}

.wd-side-card h3 {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #344767;
}

.wd-steps {
    margin: 0;
    padding-left: 1.15rem;
    color: #67748e;
    font-size: 0.82rem;
    line-height: 1.65;
}

.wd-tips {
    margin: 0;
    padding-left: 1.05rem;
    color: #67748e;
    font-size: 0.82rem;
    line-height: 1.65;
}

.wd-side-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #2152ff;
    text-decoration: none;
}

.wd-side-link:hover { text-decoration: underline; }

.wd-filters select {
    padding: 0.55rem 0.75rem;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    font: inherit;
    font-size: 0.86rem;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    min-width: 150px;
}

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

.wd-table-wrap { overflow-x: auto; }

.wd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.wd-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.wd-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f3f5;
    color: #344767;
    vertical-align: top;
}

.wd-table tbody tr:hover { background: #fafbfc; }

.wd-amt { color: #2152ff; font-weight: 800; white-space: nowrap; }

.wd-account {
    max-width: 200px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #67748e;
    white-space: pre-wrap;
}

.wd-note {
    color: #8392ab;
    max-width: 140px;
    display: inline-block;
}

.wd-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.wd-pill.is-wait { background: #fff7ed; color: #c2410c; }
.wd-pill.is-ok { background: #ecfdf5; color: #047857; }
.wd-pill.is-bad { background: #fef2f2; color: #b91c1c; }
.wd-pill.is-muted { background: #f1f5f9; color: #64748b; }

.wd-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: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: #1c2434;
    background:
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(212, 160, 23, 0.1), transparent 55%),
        radial-gradient(ellipse 45% 35% at 100% 10%, rgba(26, 43, 75, 0.08), transparent 50%),
        linear-gradient(180deg, #f4f6f9 0%, #eef1f6 100%);
}

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

.ureg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ureg-brand {
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
    text-decoration: none;
}

.ureg-top-link {
    font-size: 0.86rem;
    color: #64748b;
    text-decoration: none;
}

.ureg-top-link strong { color: #c9a227; font-weight: 700; }
.ureg-top-link:hover strong { text-decoration: underline; }

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

.ureg-intro h1 {
    margin: 0;
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #0f172a;
}

.ureg-intro p {
    margin: 0.4rem 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

.ureg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.ureg-step {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #94a3b8;
}

.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: #0f172a; }
.ureg-step.is-on .ureg-step-num {
    background: linear-gradient(135deg, #f5d76e, #d4a017);
    color: #0f172a;
}

.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, #1a2b4b, #0f172a);
    color: #f5d76e;
}

.ureg-card-ico.is-green {
    background: linear-gradient(145deg, #0f3d2e, #14532d);
    color: #86efac;
}

.ureg-card-ico svg { width: 20px; height: 20px; }

.ureg-card-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.ureg-card-head p {
    margin: 0.2rem 0 0;
    font-size: 0.84rem;
    color: #64748b;
}

.ureg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem 1rem;
}

.ureg-field { display: grid; gap: 0.4rem; }

.ureg-field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

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

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

.ureg-input-ico input,
.ureg-input-ico select {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.55rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.92rem;
    color: #0f172a;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

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

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

.ureg-input-ico select.has-value {
    color: #0f172a;
}

.ureg-input-ico select:not(.has-value) {
    color: #94a3b8;
}

.ureg-input-ico input[readonly] {
    background: #f8fafc;
    color: #64748b;
}

.ureg-input-ico.grow { flex: 1; min-width: 0; }

.ureg-name-split {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.ureg-name-split > select {
    width: 78px;
    flex-shrink: 0;
    padding: 0.72rem 0.45rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
}

.ureg-pos { margin-top: 1.15rem; }

.ureg-pos-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}

.ureg-pos-head strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.ureg-pos-head span {
    font-size: 0.8rem;
    color: #64748b;
}

.ureg-pos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ureg-pos-card {
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-radius: 14px;
    border: 2px solid transparent;
    background: linear-gradient(145deg, #1a2b4b, #132038);
    color: #f8fafc;
    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, #f5d76e 0%, #d4a017 100%);
    color: #0f172a;
    border-color: #c9a227;
}

.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: #0f172a;
    color: #f5d76e;
}

.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: #0f172a;
    background:
        repeating-linear-gradient(-12deg, transparent, transparent 6px, rgba(15, 23, 42, 0.05) 6px, rgba(15, 23, 42, 0.05) 7px),
        linear-gradient(135deg, #fef9c3, #fde68a);
    border: 1.5px solid #f5d76e;
    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: #c9a227;
    border-color: #c9a227;
}

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

.ureg-agree a {
    color: #c9a227;
    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(520px, 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(212, 160, 23, 0.12), transparent 55%),
        linear-gradient(180deg, #f8fafc, #fff);
    border-bottom: 1px solid #eef2f7;
}
.ureg-dialog-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #1a2b4b, #0f172a);
    color: #f5d76e;
}
.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: #c9a227;
}
.ureg-dialog-head h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.ureg-dialog-x {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.ureg-dialog-x:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.ureg-dialog-x svg { width: 16px; height: 16px; }
.ureg-dialog-body {
    padding: 1.15rem 1.25rem 0.35rem;
    max-height: min(52vh, 360px);
    overflow-y: auto;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.55;
}
.ureg-dialog-body p { margin: 0 0 0.85rem; }
.ureg-dialog-body strong { color: #0f172a; }
.ureg-dialog-body ul {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.45rem;
}
.ureg-dialog-body li::marker { color: #c9a227; }
.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, #1a2b4b, #0f172a);
    color: #f5d76e;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.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: #0f172a;
    background: linear-gradient(135deg, #f5d76e 0%, #d4a017 55%, #b8860b 100%);
    transition: transform 0.15s, filter 0.15s;
}

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

.ureg-foot {
    margin: 1rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.ureg-foot a {
    color: #c9a227;
    font-weight: 700;
    text-decoration: none;
}

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

.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: 'Sora', sans-serif;
    font-size: 1.1rem;
}

.ureg-dialog-inner p {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #64748b;
}

@media (max-width: 720px) {
    .ureg-grid { grid-template-columns: 1fr; }
    .ureg-pos-grid { grid-template-columns: 1fr; }
    .ureg-dob-grid { grid-template-columns: 1fr; }
    .ureg-step-label { display: none; }
    .ureg-top-link { font-size: 0.8rem; }
}

/* ===== Registration success ===== */
.urs-body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    color: #1c2434;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse 55% 45% at 15% 20%, rgba(212, 160, 23, 0.22), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 85%, rgba(34, 197, 94, 0.12), transparent 50%),
        linear-gradient(160deg, #0b1220 0%, #152033 45%, #1a2740 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(212, 160, 23, 0.45), transparent 70%);
}

.urs-burst span:nth-child(2) {
    width: 120px;
    height: 120px;
    bottom: 40px;
    left: -40px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.25), transparent 70%);
}

.urs-burst span:nth-child(3) {
    width: 80px;
    height: 80px;
    top: 40%;
    right: 8%;
    background: radial-gradient(circle, rgba(33, 82, 255, 0.15), 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, #22c55e, #15803d);
    box-shadow: 0 12px 28px rgba(34, 197, 94, 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: #c9a227;
}

.urs-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Sora', 'Outfit', sans-serif;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.urs-lead {
    position: relative;
    z-index: 1;
    margin: 0.5rem auto 0;
    max-width: 34ch;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #64748b;
}

.urs-hello {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    margin: 1.35rem 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f172a, #1a2b4b);
    color: #fff;
}

.urs-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: 'Sora', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.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: #c9a227;
    background: rgba(212, 160, 23, 0.1);
}

.urs-copy.is-copied {
    color: #047857;
    background: #ecfdf5;
}

.urs-copy.is-copied::after {
    content: 'Copied!';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    z-index: 5;
    pointer-events: none;
    animation: actxCopyPop 0.18s ease;
}

.urs-copy.is-copied::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    z-index: 5;
    pointer-events: none;
}

.urs-copy svg { width: 15px; height: 15px; pointer-events: none; }

.urs-muted {
    font-size: 0.82rem;
    font-weight: 600;
    color: #94a3b8;
}

.urs-note {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #64748b;
    background: #fffbeb;
    border: 1px solid #fde68a;
    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: #0f172a;
    background: linear-gradient(135deg, #f5d76e 0%, #d4a017 55%, #b8860b 100%);
    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 { margin: 0.35rem 0 0.95rem; }

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

.actx-section-head p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    color: #8392ab;
}

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

.actx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.actx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 100%;
    padding: 1.25rem 1.15rem 1.1rem;
    border-radius: 18px;
    border: 1.5px solid #e8ecf2;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.18s;
}

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

.actx-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.actx-card.is-on {
    border-color: #d4a017;
    box-shadow: 0 18px 42px rgba(212, 160, 23, 0.2);
    background: linear-gradient(180deg, #fffdf5 0%, #fff 55%);
}

.actx-badge {
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    z-index: 2;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.actx-check {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef0f4;
    color: transparent;
}

.actx-card.is-on .actx-check {
    background: linear-gradient(135deg, #f5d76e, #d4a017);
    color: #0f172a;
}

.actx-check svg { width: 13px; height: 13px; }

.actx-card-ico {
    width: 46px;
    height: 46px;
    margin-top: 0.55rem;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
}

.actx-card.tone-a .actx-card-ico { background: linear-gradient(310deg, #2152ff, #21d4fd); }
.actx-card.tone-b .actx-card-ico { background: linear-gradient(310deg, #17ad37, #98ec2d); }
.actx-card.tone-c .actx-card-ico { background: linear-gradient(310deg, #f59e0b, #fde047); color: #0f172a; }
.actx-card.tone-d .actx-card-ico { background: linear-gradient(310deg, #0f172a, #334155); }

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

.actx-name {
    margin-top: 0.25rem;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
    padding-right: 1.5rem;
}

.actx-price {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #2152ff;
}

.actx-card.is-on .actx-price { color: #b45309; }

.actx-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-top: 0.15rem;
    padding: 0.65rem 0.55rem;
    border-radius: 12px;
    background: #f8fafc;
}

.actx-stats span {
    display: grid;
    gap: 0.1rem;
    text-align: center;
}

.actx-stats small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.actx-stats strong {
    font-size: 0.82rem;
    font-weight: 800;
    color: #344767;
}

.actx-desc {
    flex: 1;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #67748e;
}

.actx-select-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
}

.actx-card.is-on .actx-select-label {
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e, #d4a017);
}

.actx-bar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f172a, #1a2b4b);
    color: #fff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.35);
}

.actx-bar-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.55);
}

.actx-bar-summary strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.actx-bar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.72);
}

.actx-bar-meta em {
    font-style: normal;
    font-weight: 800;
    color: #f5d76e;
}

.actx-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 210px;
    padding: 0.9rem 1.25rem;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    background: linear-gradient(135deg, #f5d76e 0%, #d4a017 55%, #b8860b 100%);
    transition: transform 0.15s, filter 0.15s;
}

.actx-submit svg {
    width: 18px;
    height: 18px;
    transition: transform 0.15s;
}

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

.actx-submit:hover svg { transform: translateX(3px); }

.actx-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.actx-empty-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.85rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #94a3b8;
}

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

.actx-empty strong {
    display: block;
    font-size: 1.05rem;
    color: #0f172a;
}

.actx-empty p {
    margin: 0.4rem 0 1rem;
    color: #8392ab;
    font-size: 0.9rem;
}

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

@media (max-width: 720px) {
    .up-activate-banner { flex-direction: column; align-items: stretch; }
    .up-activate-visual { width: 100%; }
    .actx-bar { flex-direction: column; align-items: stretch; bottom: 0.5rem; }
    .actx-submit { width: 100%; }
    .actx-steps { flex-direction: column; align-items: stretch; }
}

/* ===== My Income reports ===== */
.inc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.05rem;
}

.inc-tab {
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
    color: #67748e;
    background: #f1f3f5;
    transition: background 0.15s, color 0.15s;
}

.inc-tab.is-on,
.inc-tab:hover {
    background: linear-gradient(90deg, #2152ff, #21d4fd);
    color: #fff;
}

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

.inc-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.inc-stat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.inc-stat.g-purple::after { background: #7928ca; }
.inc-stat.g-green::after { background: #17ad37; }
.inc-stat.g-orange::after { background: #f59e0b; }
.inc-stat.g-blue::after { background: #2152ff; }

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

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

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

.inc-stat-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
}

.inc-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.inc-stat strong.is-sm { font-size: 1.05rem; }
.inc-stat small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.inc-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 1.05rem;
}

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

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

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

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

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

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

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

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

.inc-banner.is-gold,
.inc-banner.is-summary {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.inc-banner.is-recent {
    background:
        radial-gradient(ellipse 80% 140% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(118deg, #1a2b4b 0%, #2152ff 100%);
}

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

.inc-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.inc-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
    font-weight: 600;
    display: none;
}

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

/* ?? BV / open pairs row ?? */
.up-stats-bv { 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-mint .up-stat-ico { background: rgba(13, 148, 136, 0.12); color: #0f766e; }
.up-stat.g-coral .up-stat-ico { background: rgba(244, 63, 94, 0.12); color: #e11d48; }
.up-stat.g-teal .up-stat-ico { background: rgba(8, 145, 178, 0.12); color: #0e7490; }
.up-stat.g-slate .up-stat-ico { background: rgba(100, 116, 139, 0.12); color: #475569; }

/* ?? Topbar search ?? */
.up-search { position: relative; }
.up-search-drop {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 280px;
    overflow: auto;
    padding: 0.4rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8ecf4;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.up-search-drop a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.up-search-drop a:hover,
.up-search-drop a.is-on {
    background: #f1f5f9;
    color: #2152ff;
}
.up-search-drop a[hidden] { display: none; }

/* ?? Notifications dropdown ?? */
.up-notify-dd { position: relative; }
.up-icon-btn { position: relative; }
.up-notify-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}
.up-notify-menu {
    width: min(320px, 86vw);
    right: 0;
    left: auto;
    padding: 0;
    overflow: hidden;
}
.up-notify-head {
    padding: 0.85rem 1rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid #eef0f4;
}
.up-notify-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
}
.up-notify-item:hover { background: #f8fafc; }
.up-notify-item strong {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: #1e293b;
}
.up-notify-item small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #94a3b8;
}
.up-notify-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: #94a3b8;
}
.up-notify-dot.red { background: #e11d48; }
.up-notify-dot.amber { background: #f59e0b; }
.up-notify-dot.blue { background: #2152ff; }
.up-notify-dot.green { background: #17ad37; }
.up-notify-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
}
.up-notify-foot {
    display: block;
    padding: 0.7rem 1rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2152ff;
    text-decoration: none;
    background: #f8fafc;
}

/* ?? Activation payment / pending ?? */
.actx-pending {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 55%);
    border: 1px solid #fde68a;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.08);
}
.actx-pending-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}
.actx-pending-ico svg { width: 26px; height: 26px; }
.actx-pending-copy h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
}
.actx-pending-copy > p {
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.92rem;
}
.actx-pending-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.actx-pending-meta div {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #fef3c7;
}
.actx-pending-meta small {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}
.actx-pending-meta strong {
    font-size: 0.9rem;
    color: #334155;
    word-break: break-all;
}
.actx-pending-help {
    margin: 1rem 0 0 !important;
    font-size: 0.85rem !important;
}
.actx-pending-help a { color: #2152ff; font-weight: 700; }

/* ?? Activate payment panels ?? */
.actx-pay-panel {
    margin: 1.2rem 0;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #eef0f4;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.actx-pay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.2rem;
    color: #fff;
}
.actx-pay-head.is-teal {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(125deg, #0f766e 0%, #0d9488 48%, #14b8a6 100%);
}
.actx-pay-head.is-indigo {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255,255,255,0.16), transparent 55%),
        linear-gradient(125deg, #1e3a8a 0%, #2152ff 52%, #3b82f6 100%);
}
.actx-pay-head-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}
.actx-pay-head-ico {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.actx-pay-head-ico svg { width: 22px; height: 22px; }
.actx-pay-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.82;
}
.actx-pay-head h3 {
    margin: 0.15rem 0 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.actx-pay-head p {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
    max-width: 52ch;
}
.actx-pay-chip {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    white-space: nowrap;
}

.actx-bank-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.25rem;
}
.actx-bank-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 42%);
    border: 1px solid #e8ecf4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.actx-bank-card:hover {
    transform: translateY(-2px);
    border-color: #99f6e4;
    box-shadow: 0 16px 32px rgba(13, 148, 136, 0.1);
}
.actx-bank-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    align-items: stretch;
}
.actx-bank-card.has-qr .actx-bank-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1rem;
}
.actx-bank-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}
.actx-bank-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.actx-bank-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 148, 136, 0.12);
    color: #0f766e;
    flex-shrink: 0;
}
.actx-bank-mark svg { width: 20px; height: 20px; }
.actx-bank-brand strong {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
    line-height: 1.2;
}
.actx-bank-brand small {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.actx-bank-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
}
.actx-bank-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.12), transparent 60%),
        #fff;
    border: 1px dashed #99f6e4;
    align-self: stretch;
}
.actx-bank-qr img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    border: 1px solid #e2e8f0;
}
.actx-bank-qr span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0f766e;
}
.actx-bank-rows {
    display: grid;
    gap: 0.45rem;
}
.actx-bank-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}
.actx-bank-row.is-upi {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border-color: #a7f3d0;
}
.actx-bank-row small {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #94a3b8;
}
.actx-bank-row > strong {
    font-size: 0.88rem;
    color: #1e293b;
    word-break: break-all;
}
.actx-bank-val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.actx-bank-val strong {
    font-size: 0.88rem;
    color: #1e293b;
    word-break: break-all;
    min-width: 0;
}
.actx-bank-row.is-upi .actx-bank-val strong {
    color: #0f766e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.84rem;
}
.actx-copy-btn {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #2152ff;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.actx-copy-btn svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
}
.actx-copy-btn:hover {
    background: #2152ff;
    color: #fff;
    border-color: #2152ff;
}
.actx-copy-btn.is-copied {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.actx-copy-btn.is-copied::after {
    content: 'Copied';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
    z-index: 5;
    pointer-events: none;
    animation: actxCopyPop 0.18s ease;
}
.actx-copy-btn.is-copied::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
    z-index: 5;
    pointer-events: none;
}
@keyframes actxCopyPop {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.actx-proof-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.25rem;
}
.actx-pay-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
    min-width: 0;
}
.actx-pay-slip,
.actx-pay-note { grid-column: 1 / -1; }
.actx-pay-fields .up-field[hidden],
.actx-pay-fields [data-actx-proof][hidden],
.actx-pay-fields .is-cash-hide {
    display: none !important;
}
.actx-proof-panel .up-field label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #64748b;
}
.actx-proof-panel .up-field input,
.actx-proof-panel .up-field select {
    border-radius: 12px;
    border-color: #e2e8f0;
    background: #f8fafc;
}
.actx-proof-panel .up-field input:focus,
.actx-proof-panel .up-field select:focus {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}
.actx-proof-tips {
    padding: 1rem;
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(33, 82, 255, 0.1), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #e8ecf4;
    align-self: start;
}
.actx-proof-tips strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.55rem;
}
.actx-proof-tips ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
}
.actx-proof-tips li {
    position: relative;
    padding-left: 1.15rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #64748b;
    font-weight: 600;
}
.actx-proof-tips li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2152ff, #60a5fa);
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.14);
}

.actx-upbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    border: 1.5px dashed #cbd5e1;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 58%);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.actx-upbox:hover,
.actx-upbox.is-drag {
    border-color: #60a5fa;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 60%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}
.actx-upbox.has-file {
    border-style: solid;
    border-color: #86efac;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 55%);
}
.actx-upbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.actx-upbox-thumb {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}
.actx-upbox-empty,
.actx-upbox-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-sizing: border-box;
}
.actx-upbox-empty[hidden],
.actx-upbox-preview[hidden],
.actx-upbox-pdf[hidden],
.actx-upbox-preview img[hidden],
.actx-upbox-copy[hidden],
.actx-upbox-meta[hidden],
.actx-upbox-actions [hidden] {
    display: none !important;
}
.actx-upbox.has-file .actx-upbox-empty {
    display: none !important;
}
.actx-upbox-empty {
    background: linear-gradient(160deg, #dbeafe, #fff);
    border-style: dashed;
    color: #2563eb;
}
.actx-upbox-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.12);
}
.actx-upbox-ico svg { width: 22px; height: 22px; }
.actx-upbox-preview {
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    background-color: #fff;
    border: 1px solid #bbf7d0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.actx-upbox.has-file .actx-upbox-preview {
    display: flex;
}
.actx-upbox-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
}
.actx-upbox-pdf {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: linear-gradient(160deg, #fee2e2, #fff);
    color: #dc2626;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.actx-upbox-pdf svg { width: 28px; height: 28px; }
.actx-upbox-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.actx-upbox-copy strong,
.actx-upbox-meta strong {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.actx-upbox-copy small,
.actx-upbox-meta small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #94a3b8;
}
.actx-upbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.actx-upbox-btn,
.actx-upbox-cta {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 999px;
    padding: 0.48rem 0.95rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.actx-upbox-cta {
    background: #2152ff;
    color: #fff;
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.22);
}
.actx-upbox-cta:hover { background: #1a44d6; transform: translateY(-1px); }
.actx-upbox-btn {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
}
.actx-upbox-btn:hover { background: #f8fafc; }
.actx-upbox-btn.is-clear {
    color: #be123c;
    border-color: #fecdd3;
    background: #fff1f2;
}

@media (max-width: 900px) {
    .actx-proof-body { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .actx-pay-fields { grid-template-columns: 1fr; }
    .actx-pending { grid-template-columns: 1fr; }
    .actx-bank-card.has-qr .actx-bank-body {
        grid-template-columns: 1fr;
    }
    .actx-bank-qr {
        max-width: 220px;
        margin: 0 auto;
        width: 100%;
    }
}
@media (max-width: 560px) {
    .actx-upbox {
        align-items: flex-start;
        padding: 0.85rem;
    }
    .actx-upbox-actions { width: 100%; }
    .actx-upbox-cta,
    .actx-upbox-btn { flex: 1; text-align: center; }
    .actx-bank-val { flex-wrap: wrap; }
}

/* ?? Support page ?? */
.up-support-body { padding: 1.1rem 1.15rem 1.35rem; }
.up-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}
.up-support-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    border: 1px solid #eef0f4;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.up-support-tile:hover {
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(33, 82, 255, 0.08);
    transform: translateY(-2px);
}
.up-support-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    background: rgba(33, 82, 255, 0.1);
    color: #2152ff;
}
.up-support-ico svg { width: 20px; height: 20px; }
.up-support-ico.is-wa { background: rgba(37, 211, 102, 0.12); color: #128c7e; }
.up-support-tile strong { font-size: 0.95rem; color: #1e293b; }
.up-support-tile small { font-size: 0.8rem; color: #64748b; word-break: break-all; }
.up-support-tips {
    margin-top: 1.25rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #eef0f4;
}
.up-support-tips h3 {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: #334155;
}
.up-support-tips ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.6;
}
.up-support-tips a { color: #2152ff; font-weight: 700; }

@media (max-width: 720px) {
    .actx-pending { grid-template-columns: 1fr; }
    .actx-pay-fields { grid-template-columns: 1fr; }
}

/* ===== T-Pin wallet ===== */
.tpin-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tpin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.05rem;
}

.tpin-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.05rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.tpin-stat::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.tpin-stat.g-green::after { background: #17ad37; }
.tpin-stat.g-blue::after { background: #2152ff; }
.tpin-stat.g-orange::after { background: #f59e0b; }

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

.tpin-stat.g-green .tpin-stat-ico { background: linear-gradient(310deg, #17ad37, #98ec2d); }
.tpin-stat.g-blue .tpin-stat-ico { background: linear-gradient(310deg, #2152ff, #21d4fd); }
.tpin-stat.g-orange .tpin-stat-ico { background: linear-gradient(310deg, #f53939, #fbcf33); }

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

.tpin-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8392ab;
}

.tpin-stat strong {
    display: block;
    margin-top: 0.12rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #344767;
    letter-spacing: -0.02em;
}

.tpin-stat small {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.74rem;
    color: #8392ab;
    font-weight: 600;
}

.tpin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.tpin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.tpin-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.tpin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.15rem;
    color: #fff;
}

.tpin-banner.is-gold {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(118deg, #0f172a 0%, #334155 45%, #f59e0b 140%);
}

.tpin-banner.is-teal {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(120deg, #0f766e 0%, #14b8a6 100%);
}

.tpin-banner.is-navy {
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(120deg, #16213e 0%, #2152ff 120%);
}

.tpin-banner.is-muted {
    background: linear-gradient(120deg, #f8fafc 0%, #eef2ff 100%);
    color: #334155;
    border-bottom: 1px solid #eef0f4;
}

.tpin-banner.is-muted .tpin-kicker { color: #64748b; opacity: 1; }
.tpin-banner.is-muted h2 { color: #1e293b; }

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

.tpin-banner-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

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

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

.tpin-banner h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.tpin-banner p {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    opacity: 0.9;
    max-width: 420px;
    line-height: 1.4;
}

.tpin-body { padding: 1.15rem 1.25rem 1.3rem; }

.tpin-form {
    display: grid;
    gap: 0.95rem;
}

.tpin-form-actions {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.15rem;
}

.tpin-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    border: 1px dashed #dbe3f0;
    border-radius: 12px;
    background: #f8fafc;
}

.tpin-empty strong {
    display: block;
    color: #334155;
    font-size: 0.95rem;
}

.tpin-empty p {
    margin: 0.35rem 0 0;
    color: #8392ab;
    font-size: 0.84rem;
    line-height: 1.45;
}

.tpin-tips {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.55rem;
    color: #475569;
    font-size: 0.86rem;
    line-height: 1.45;
}

.tpin-tips a {
    color: #2152ff;
    font-weight: 700;
    text-decoration: none;
}

.tpin-tips a:hover { text-decoration: underline; }

.tpin-pin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
}

.tpin-pin-card {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tpin-pin-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 8px 20px rgba(33, 82, 255, 0.08);
}

.tpin-pin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpin-pin-pkg {
    font-size: 0.78rem;
    font-weight: 800;
    color: #334155;
}

.tpin-pin-amt {
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f766e;
    background: rgba(15, 118, 110, 0.08);
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
}

.tpin-pin-code {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #16213e;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 0.55rem 0.65rem;
    text-align: center;
    cursor: pointer;
    user-select: all;
}

.tpin-pin-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tpin-pin-foot small {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 600;
}

.tpin-copy-btn {
    border: 0;
    background: #eef2ff;
    color: #2152ff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    cursor: pointer;
}

.tpin-copy-btn:hover { background: #e0e7ff; }
.tpin-copy-btn.is-copied {
    background: #dcfce7;
    color: #15803d;
}

.tpin-table-wrap { overflow-x: auto; }

.tpin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.tpin-table th {
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
    background: #f8fafc;
    border-bottom: 1px solid #eef0f4;
}

.tpin-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
}

.tpin-table tbody tr:hover { background: #fafbfc; }

.tpin-td-empty {
    text-align: center;
    color: #94a3b8 !important;
    padding: 1.4rem 1rem !important;
}

.tpin-code-sm {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #16213e;
}

.tpin-dir {
    margin-top: 0.25rem;
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}

.tpin-dir.is-out {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.tpin-dir.is-in {
    background: rgba(23, 173, 55, 0.12);
    color: #15803d;
}

.tpin-arrow {
    margin: 0 0.25rem;
    color: #94a3b8;
    font-weight: 700;
}

.tpin-sub {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: #8392ab;
}

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

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


/* ========== ID Card + Welcome Letter ========== */
.doc-page {
    max-width: 980px;
    margin: 0 auto;
}

.doc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.doc-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--up-ink);
}

.doc-sub {
    margin-top: 0.25rem;
    color: var(--up-muted);
    font-size: 0.9rem;
}

.doc-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.doc-hint {
    margin-top: 1rem;
    text-align: center;
    color: var(--up-muted);
    font-size: 0.82rem;
}

/* --- ID Card --- */
.idc-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0 1.5rem;
    width: 100%;
}

.idc-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 540px));
    gap: 1.35rem;
    width: 100%;
    max-width: 1120px;
    justify-content: center;
}

.idc-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.idc-side-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--up-muted);
}

.idc-card {
    --idc-w: 540px;
    --idc-h: 322px;
    --idc-dark: linear-gradient(135deg, #0b1220 0%, #152038 55%, #111827 100%);
    --idc-ink: #0f172a;
    --idc-muted: #64748b;
    --idc-gold: #b45309;
    position: relative;
    width: 100%;
    max-width: var(--idc-w);
    height: var(--idc-h);
    border-radius: 18px;
    overflow: hidden;
    color: var(--idc-ink);
    background: #f8fafc;
    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.18),
        inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    padding: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    box-sizing: border-box;
}

.idc-glow,
.idc-glow-back {
    display: none;
}

.idc-accent-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ffd54f, #f59e0b 40%, #d93b3b);
    z-index: 3;
    pointer-events: none;
}

.idc-head,
.idc-body,
.idc-foot,
.idc-back-head,
.idc-back-body,
.idc-back-foot {
    position: relative;
    z-index: 2;
}

/* Dark header */
.idc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-shrink: 0;
    padding: 0.75rem 1.15rem 0.75rem 1.25rem;
    background: var(--idc-dark);
    color: #fff;
}

.idc-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.idc-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ffe082, #f59e0b);
    color: #1f1300;
    flex-shrink: 0;
}

.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.35rem 0.6rem;
}

.idc-meta > div { min-width: 0; }

.idc-meta dt {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--idc-muted);
}

.idc-meta dd {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--idc-ink);
    margin-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark footer */
.idc-foot {
    margin-top: auto;
    padding: 0.65rem 1.15rem 0.7rem 1.25rem;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    background: var(--idc-dark);
    color: #fff;
}

.idc-barcode {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 24px;
    width: 55%;
    max-width: 200px;
}

.idc-barcode i {
    display: block;
    flex: 1;
    height: var(--h, 70%);
    background: rgba(255, 241, 200, 0.85);
    border-radius: 1px;
}

.idc-foot-tag {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 215, 128, 0.85);
    white-space: nowrap;
}

/* Back card */
.idc-card-back {
    background: #f8fafc;
    padding-top: 0;
}

.idc-back-head {
    flex-shrink: 0;
    background: var(--idc-dark);
    color: #fff;
    padding: 0.55rem 1.15rem 0.7rem 1.25rem;
}

.idc-magstripe {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: 28px;
    margin: 0 -1.15rem 0.55rem -1.25rem;
    width: calc(100% + 2.4rem);
    background: linear-gradient(180deg, #1a1a1a, #050505 40%, #171717);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    z-index: 1;
}

.idc-back-head-text strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}

.idc-back-head-text small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 215, 128, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idc-back-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.55rem;
    min-height: 0;
    margin: 0;
    padding: 0.75rem 1.15rem 0.75rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.idc-back-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.4rem 0.7rem;
}

.idc-back-grid > div { min-width: 0; }
.idc-back-grid .idc-span-2 { grid-column: 1 / -1; }

.idc-back-grid span {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--idc-muted);
}

.idc-back-grid strong {
    display: block;
    margin-top: 0.08rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--idc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idc-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(201, 162, 39, 0.08), transparent 42%),
        #fffef9;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.wl-frame-inner::before,
.wl-frame-inner::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid #c9a227;
    pointer-events: none;
}

.wl-frame-inner::before {
    top: 8px;
    left: 8px;
    border-right: 0;
    border-bottom: 0;
}

.wl-frame-inner::after {
    bottom: 8px;
    right: 8px;
    border-left: 0;
    border-top: 0;
}

.wl-border-outer,
.wl-border-inner,
.wl-corner,
.wl-mid,
.wl-tricolor {
    display: none !important;
}

.wl-head {
    text-align: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.wl-seal {
    width: 54px;
    height: 54px;
    margin: 0 auto 0.65rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #7a1a1a;
    background: radial-gradient(circle at 35% 30%, #ffe082, #c9a227 60%, #8a6a12);
    border: 3px solid #fff8dc;
    box-shadow: 0 0 0 2px #c9a227, 0 8px 18px rgba(138, 31, 31, 0.18);
}

.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,
    .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: flex; flex-wrap: wrap; gap: 0.65rem; }
.wal-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid rgba(131,146,171,0.22);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    color: #344767;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.wal-radio:has(input:checked) {
    border-color: rgba(33, 82, 255, 0.45);
    background: #eff4ff;
    color: #2152ff;
}
.up-btn-sm { padding: 0.42rem 0.8rem; font-size: 0.82rem; }

/* ===== Add Money dialog (centered) ===== */
.wal-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(780px, calc(100vw - 1.5rem));
    max-width: min(780px, calc(100vw - 1.5rem));
    margin: auto;
    position: fixed;
    inset: 0;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow: visible;
}
.wal-dialog[open] {
    display: block;
}
.wal-dialog::backdrop {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wal-dialog-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
    overflow: hidden;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    animation: wal-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.wal-dialog-hero {
    position: relative;
    padding: 1.2rem 1.25rem 1.1rem;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 120% at 100% 0%, rgba(255,255,255,0.22), transparent 55%),
        linear-gradient(118deg, #2152ff 0%, #21d4fd 100%);
}
.wal-dialog-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.wal-dialog-hero-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: grid;
    place-items: center;
    margin-bottom: 0.7rem;
}
.wal-dialog-hero-ico svg { width: 22px; height: 22px; }
.wal-dialog-hero h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.wal-dialog-hero p {
    margin: 0.3rem 0 0;
    font-size: 0.84rem;
    opacity: 0.9;
    line-height: 1.4;
    max-width: fit-content;
}
.wal-dialog-x {
    border: 0;
    background: rgba(255,255,255,0.2);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: background .15s ease;
}
.wal-dialog-x:hover { background: rgba(255,255,255,0.32); }
.wal-dialog-body { padding: 1.15rem 1.25rem 0.4rem; }
.wal-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem 1.2rem;
    border-top: 1px solid #eef0f4;
    background: #fafbfd;
    position: sticky;
    bottom: 0;
}

.wal-dialog-hero-copy {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.wal-dialog-hero-copy .wal-dialog-hero-ico { margin-bottom: 0; }

.wal-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.15rem;
}
.wal-mode-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1.5px solid rgba(131,146,171,0.22);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wal-mode-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wal-mode-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.wal-mode-ico svg { width: 18px; height: 18px; }
.wal-mode-text {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}
.wal-mode-chip strong {
    font-size: 0.88rem;
    font-weight: 800;
    color: #344767;
    line-height: 1.2;
}
.wal-mode-chip small {
    font-size: 0.68rem;
    color: #8392ab;
    font-weight: 600;
    line-height: 1.25;
}
.wal-mode-chip:hover { transform: translateY(-1px); }
.wal-mode-chip:has(input:checked),
.wal-mode-chip.is-on {
    border-color: rgba(33, 82, 255, 0.5);
    background: linear-gradient(180deg, #eff4ff, #fff);
    box-shadow: 0 10px 22px rgba(33, 82, 255, 0.12);
}
.wal-mode-chip:has(input:checked) .wal-mode-ico,
.wal-mode-chip.is-on .wal-mode-ico {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
}
.wal-mode-chip:has(input:checked) strong,
.wal-mode-chip.is-on strong { color: #2152ff; }

.wal-pay-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8392ab;
    margin: 0 0 0.55rem;
}
.wal-pay-split {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(260px, 1.05fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.95rem;
}
.wal-pay-side,
.wal-form-side {
    min-width: 0;
}
.wal-form-grid {
    gap: 0.75rem !important;
}
.wal-pay-banks {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.25rem;
}
.wal-pay-bank {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid rgba(131,146,171,0.14);
    font-size: 0.84rem;
    color: #475569;
}
.wal-pay-bank.is-online { grid-template-columns: 1fr; }
.wal-pay-bank-meta { display: grid; gap: 0.18rem; min-width: 0; }
.wal-pay-bank strong { color: #1e293b; font-size: 0.92rem; font-weight: 800; }

.wal-upi-grid { display: grid; gap: 0.85rem; }
.wal-upi-card {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 1rem 0.9rem 1.05rem;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5f8ff, #fff);
    border: 1px solid rgba(33, 82, 255, 0.14);
    text-align: center;
}
.wal-upi-qr-wrap {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
}
.wal-upi-qr-wrap span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}
.wal-pay-qr {
    width: min(200px, 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}
.wal-upi-id {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #fff;
    border: 1px dashed rgba(33, 82, 255, 0.28);
}
.wal-upi-id small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8392ab;
}
.wal-upi-id strong {
    font-size: 1rem;
    font-weight: 800;
    color: #2152ff;
    word-break: break-all;
}
.wal-upi-empty,
.wal-cash-note {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(131,146,171,0.16);
    font-size: 0.86rem;
    color: #64748b;
}
.wal-cash-note strong {
    display: block;
    color: #344767;
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}
.wal-cash-note p { margin: 0; line-height: 1.45; }
.wal-form-side .up-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #67748e;
}
.wal-form-side .up-field input[type="text"],
.wal-form-side .up-field input[type="number"] {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    color: #344767;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.wal-form-side .up-field input:focus {
    outline: none;
    border-color: rgba(33, 82, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(33, 82, 255, 0.12);
}
.wal-upbox {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1.5px dashed rgba(33, 82, 255, 0.35);
    background: linear-gradient(180deg, #f5f8ff, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.wal-upbox:hover {
    border-color: rgba(33, 82, 255, 0.55);
    background: linear-gradient(180deg, #eef4ff, #fff);
    box-shadow: 0 8px 18px rgba(33, 82, 255, 0.08);
}
.wal-upbox input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.wal-upbox-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
    box-shadow: 0 8px 16px rgba(33, 82, 255, 0.22);
}
.wal-upbox-ico svg { width: 20px; height: 20px; }
.wal-upbox-text {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    flex: 1;
}
.wal-upbox strong {
    font-size: 0.86rem;
    color: #2152ff;
    font-weight: 800;
    line-height: 1.25;
}
.wal-upbox-text > span {
    font-size: 0.74rem;
    color: #8392ab;
    line-height: 1.3;
}
.wal-upbox-file {
    color: #2152ff !important;
    font-weight: 700 !important;
    word-break: break-all;
}
.wal-upbox-file:empty { display: none; }
.wal-upbox.has-file {
    border-style: solid;
    border-color: rgba(23, 173, 55, 0.35);
    background: linear-gradient(180deg, #f0fdf4, #fff);
}
.wal-upbox.has-file .wal-upbox-ico {
    background: linear-gradient(310deg, #17ad37, #98ec2d);
}

.wal-layout {
    display: grid;
    grid-template-columns: 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: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px;
}
.shop-inv-logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #db2777);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}
.shop-inv-brand {
    display: block;
    font-size: 1.35rem;
    color: #0f172a;
    line-height: 1.2;
}
.shop-inv-doc-type {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #7c3aed;
}
.shop-inv-contact {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}
.shop-inv-right { text-align: right; }
.shop-inv-no span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.shop-inv-no strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 1.2rem;
    color: #0f172a;
}
.shop-inv-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}
.shop-inv-badge {
    display: inline-flex;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.shop-inv-badge.is-paid { background: #d1fae5; color: #047857; }
.shop-inv-badge.is-pending { background: #ffedd5; color: #c2410c; }
.shop-inv-badge.is-cancelled,
.shop-inv-badge.is-refunded { background: #fee2e2; color: #b91c1c; }
.shop-inv-badge.is-del { background: #ede9fe; color: #6d28d9; }

.shop-inv-info-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 1.5rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.shop-inv-info-strip span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-bottom: 0.2rem;
}
.shop-inv-info-strip strong {
    font-size: 0.9rem;
    color: #0f172a;
    word-break: break-word;
}

.shop-inv-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
}
.shop-inv-party {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 0.95rem 1rem;
}
.shop-inv-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0.4rem;
}
.shop-inv-party strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 0.25rem;
}
.shop-inv-party p {
    margin: 0.12rem 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}
.shop-inv-id { color: #64748b !important; font-weight: 600; }
.shop-inv-courier { font-weight: 700; color: #334155 !important; }

.shop-inv-table {
    width: calc(100% - 3rem);
    margin: 0 1.5rem 1rem;
    border-collapse: collapse;
}
.shop-inv-table th,
.shop-inv-table td {
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 0.55rem;
    text-align: left;
    font-size: 0.86rem;
    vertical-align: top;
}
.shop-inv-table th {
    background: #0f172a;
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.shop-inv-table th:first-child { border-radius: 10px 0 0 10px; }
.shop-inv-table th:last-child { border-radius: 0 10px 10px 0; }
.shop-inv-table .is-num { text-align: right; white-space: nowrap; }
.shop-inv-table .is-name { font-weight: 700; color: #0f172a; }
.shop-inv-table .is-amt { font-weight: 800; color: #0f172a; }
.shop-inv-table tbody tr:nth-child(even) td { background: #f8fafc; }

.shop-inv-totals {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 1rem;
    padding: 0 1.5rem 1.15rem;
    align-items: start;
}
.shop-inv-notes p {
    margin: 0.25rem 0 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}
.shop-inv-sum {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.85rem 1rem;
}
.shop-inv-sum > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #475569;
}
.shop-inv-sum .is-grand {
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 2px solid #0f172a;
    font-size: 1.08rem;
    color: #0f172a;
}
.shop-inv-sum .is-paid {
    margin-top: 0.25rem;
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 800;
}
.shop-inv-foot {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px dashed #e2e8f0;
    color: #64748b;
    font-size: 0.8rem;
}
.shop-inv-foot strong { display: block; color: #0f172a; margin-bottom: 0.15rem; }
.shop-inv-foot p { margin: 0; }
.shop-inv-stamp {
    text-align: right;
    min-width: 140px;
    padding-top: 0.35rem;
    border-top: 2px solid #cbd5e1;
}
.shop-inv-stamp .shop-inv-sign {
    display: block;
    max-width: 160px;
    max-height: 64px;
    margin: 0 0 0.35rem auto;
    object-fit: contain;
}
.shop-inv-stamp span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.shop-inv-stamp strong { margin-top: 0.2rem; font-size: 0.9rem; }

@media (max-width: 980px) {
    .shop-stats { grid-template-columns: 1fr 1fr; }
    .shop-layout { grid-template-columns: 1fr; }
    .shop-cart-card { position: static; }
    .shop-fund-steps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .shop-track-steps,
    .shop-ship-grid { grid-template-columns: 1fr; }
    .shop-track-steps li { text-align: left; padding: 0.55rem 0 0.55rem 1.6rem; }
    .shop-track-steps li::before {
        left: 0.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 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;
    }
}