/* =========================================================
           TR — BLACK / PURPLE THEME
        ========================================================= */
/* =========================================================
			   LIGHT THEME — DEFAULT
			========================================================= */

@font-face {
    font-family: "Rostex";
    src: url("../fonts/Rostex-Regular.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f7f5fb;
    --surface: #ffffff;
    --surface-hover: #f4efff;

    --text: #17121f;
    --text-muted: #71697d;

    --primary: #7c2cff;
    --primary-dark: #5a19ff;
    --primary-light: #9f5cff;

    --border: #e8e1f0;
    --border-light: #eee8f5;

    --button-bg: #ffffff;
    --button-text: #372d42;

    --icon-bg: #f3eaff;
    --icon-color: #7c2cff;

    --sidebar-bg: #ffffff;
    --sidebar-hover: #f4efff;
    --sidebar-text: #71697d;
    --sidebar-heading: #8b8196;

    --purple-primary: #8f32ff;
    --purple-dark: #5a19ff;
    --purple-light: #9f5cff;

    --purple-glow: rgba(120, 0, 255, 0.15);
    --purple-glow-hover: rgba(120, 0, 255, 0.25);

    --badge-bg: rgba(100, 0, 255, 0.08);
    --badge-border: rgba(143, 50, 255, 0.25);
    --badge-text: #7c2cff;
    --font-family: Arial, Helvetica, sans-serif;
}

/* =========================================================
			   DARK THEME — YOUR BLACK / PURPLE COLORS
			========================================================= */

[data-theme="dark"] {
    --bg: #000000;
    --surface: #030006;
    --surface-hover: rgba(143, 50, 255, 0.1);

    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.62);

    --primary: #8f32ff;
    --primary-dark: #5a19ff;
    --primary-light: #dba9ff;

    --border: rgba(255, 255, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.08);

    --button-bg: #08030f;
    --button-text: #ffffff;

    --icon-bg: rgba(100, 0, 255, 0.08);
    --icon-color: #c798ff;

    --sidebar-bg: #030006;
    --sidebar-hover: rgba(143, 50, 255, 0.12);
    --sidebar-text: rgba(255, 255, 255, 0.62);
    --sidebar-heading: rgba(255, 255, 255, 0.4);

    --purple-primary: #8f32ff;
    --purple-dark: #5a19ff;
    --purple-light: #dba9ff;

    --purple-glow: rgba(120, 0, 255, 0.25);
    --purple-glow-hover: rgba(120, 0, 255, 0.45);

    --badge-bg: rgba(100, 0, 255, 0.08);
    --badge-border: rgba(170, 90, 255, 0.35);
    --badge-text: #c798ff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-family);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* =========================================================
           SIDEBAR
        ========================================================= */
.sidebar {
    width: 250px;
    position: fixed;
    inset: 0 auto 0 0;
    background: var(--sidebar-bg);
    color: white;
    z-index: 1045;
    border-right: 1px solid var(--border-light);
    transition: background-color 0.2s ease;

    overflow-y: auto;

    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Chrome, Safari, Opera */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-header {
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-close {
    position: absolute;
    top: 19px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-close:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.nav-section {
    color: var(--sidebar-heading);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 25px 13px 9px;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    margin: 3px 12px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.sidebar .nav-link i {
    width: 22px;
    margin-right: 8px;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--text);
}

.sidebar .nav-link.active {
    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );
    color: #fff;
    box-shadow: 0 6px 20px var(--purple-glow);
}

/* =========================================================
           SIDEBAR PROFILE
        ========================================================= */
.sidebar-bottom {
    margin-top: 45px;
    padding: 0 12px 20px;
}

.profile-box {
    background: var(--sidebar-hover);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px;
    color: white;
}

.profile-box .text-secondary {
    color: var(--text-muted) !important;
}

.avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 18px var(--purple-glow);
}

/* =========================================================
           MAIN
        ========================================================= */
.main {
    margin-left: 250px;
    min-height: 100vh;
    background: var(--bg);
}

.topbar {
    height: 72px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.top-title {
    font-size: 17px;
    font-weight: 700;
}

.top-subtitle {
    color: var(--text-muted);
    font-size: 12px;
}

.content {
    padding: 30px;
}

/* =========================================================
           THEME BUTTON
        ========================================================= */
.theme-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.15s ease;
}

.theme-toggle:hover {
    background: var(--surface-hover);
    border-color: rgba(143, 50, 255, 0.5);
    color: var(--purple-light);
}

.theme-toggle:active {
    transform: scale(0.94);
}

.theme-toggle i {
    font-size: 17px;
}

/* =========================================================
           BOOTSTRAP BUTTON OVERRIDES
        ========================================================= */
.btn-light {
    background: var(--button-bg);
    border-color: var(--border);
    color: var(--button-text);
}

.btn-light:hover,
.btn-light:focus {
    background: var(--surface-hover);
    border-color: rgba(143, 50, 255, 0.5);
    color: #fff;
}

/* =========================================================
           BLANK CONTENT
        ========================================================= */
.blank-page {
    min-height: calc(100vh - 132px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blank-content {
    text-align: center;
    max-width: 420px;
}

.blank-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 16px;
    background: var(--icon-bg);
    border: 1px solid var(--badge-border);
    color: var(--icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 10px 35px var(--purple-glow);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blank-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.blank-description {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
           MOBILE BOTTOM NAV
        ========================================================= */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(3, 0, 6, 0.97);
        backdrop-filter: blur(15px);
        border-top: 1px solid var(--border-light);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 1040;
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .mobile-bottom-nav a {
        color: var(--text-muted);
        font-size: 20px;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        transition: color 0.15s ease;
    }

    .mobile-bottom-nav a:hover {
        color: var(--purple-light);
    }

    .mobile-bottom-nav a.active {
        color: var(--purple-primary);
    }

    .mobile-bottom-nav a span {
        font-size: 10px;
        margin-top: 2px;
    }

    .content {
        padding-bottom: 80px !important;
    }

    .main {
        margin-left: 0;
    }

    .sidebar {
        width: 280px;
    }
}

/* =========================================================
           RESPONSIVE
        ========================================================= */
@media (max-width: 576px) {
    .topbar {
        height: 64px;
        padding: 0 15px;
    }

    .content {
        padding: 15px;
    }

    .top-subtitle {
        display: none;
    }

    .top-title {
        font-size: 15px;
    }

    .blank-page {
        min-height: calc(100vh - 94px);
    }
}

/* =========================================================
           REDUCE FLASH ON LOAD
        ========================================================= */
html.theme-ready body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

html:not(.theme-ready) body {
    transition: none;
}

/* =========================
           WELCOME
        ========================= */
.welcome-title {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.welcome-subtitle {
    color: var(--text-muted);
    font-size: 14px;
}

/* =========================
           STAT CARDS
        ========================= */
.stat-card {
    padding: 20px;
    height: 100%;
}

.stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.blue {
    color: #2563eb;
    background: #eff6ff;
}

.green {
    color: #059669;
    background: #ecfdf5;
}

.orange {
    color: #d97706;
    background: #fffbeb;
}

.purple {
    color: #7c3aed;
    background: #f5f3ff;
}

.stat-label {
    margin-top: 17px;
    font-size: 12px;
    /*color: var(--text-muted);*/
}

.stat-value {
    margin-top: 3px;
    font-size: 25px;
    font-weight: 700;
}

.stat-foot {
    margin-top: 7px;
    font-size: 11px;
}

/* =========================
           RECOVERY CARD
        ========================= */
.recovery-main {
    display: flex;
    align-items: center;
    gap: 30px;
}

.progress-circle {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: conic-gradient(#2563eb 0deg 248deg, #e8edf5 248deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-circle-inner {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-percent {
    font-size: 27px;
    font-weight: 700;
}

.progress-label {
    font-size: 11px;
    color: var(--text-muted);
}

.recovery-amount {
    font-size: 29px;
    font-weight: 700;
}

.recovery-bar {
    height: 8px;
    border-radius: 20px;
}

.recovery-legend {
    font-size: 12px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

/* =========================
           WALLET
        ========================= */
.wallet-item {
    padding: 17px 0;
    border-bottom: 1px solid #edf0f3;
}

.wallet-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.wallet-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.eth {
    color: #627eea;
    background: #eef0ff;
}

.btc {
    color: #f7931a;
    background: #fff5e8;
}

.sol {
    color: #7c3aed;
    background: #f4efff;
}

.wallet-name {
    font-size: 13px;
    font-weight: 700;
}

.wallet-address {
    font-family: monospace;
    color: var(--text-muted);
    font-size: 10px;
    margin-top: 2px;
}

.wallet-value {
    font-size: 14px;
    font-weight: 700;
}

.wallet-status {
    font-size: 11px;
}

/* =========================
           MONEY FLOW
        ========================= */
.flow-box {
    min-height: 235px;
    background: radial-gradient(#247fff 1px, transparent 1px);
    background-size: 18px 18px;
    border-radius: 11px;
    overflow-x: auto;
}

.flow {
    min-width: 700px;
    height: 235px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.flow-node {
    width: 145px;
    background: white;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}

.flow-node.active {
    border: 2px solid #2563eb;
}

.flow-node.recovered {
    border-color: #10b981;
}

.flow-node-title {
    font-size: 12px;
    font-weight: 700;
}

.flow-address {
    font-family: monospace;
    /*color: var(--text-muted);*/
    font-size: 9px;
    margin-top: 3px;
}

.flow-value {
    font-size: 12px;
    font-weight: 700;
    margin-top: 9px;
}

.flow-status {
    color: var(--text-muted);
    font-size: 9px;
    margin-top: 2px;
}

.arrow {
    width: 70px;
    flex-shrink: 0;
    text-align: center;
}

.arrow-amount {
    color: var(--text-muted);
    font-size: 9px;
    margin-bottom: 5px;
}

.arrow-line {
    height: 2px;
    background: #cbd5e1;
    position: relative;
}

.arrow-line::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 8px solid #94a3b8;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* =========================
           ACTIVITY
        ========================= */
.activity-item {
    display: flex;
    gap: 13px;
    padding: 15px 0;
    border-bottom: 1px solid #edf0f3;
}

.activity-item:last-child {
    border-bottom: 0;
}

.activity-icon {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-title {
    font-size: 13px;
    font-weight: 600;
}

.activity-description {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.activity-time {
    color: #9ca3af;
    font-size: 10px;
    margin-top: 4px;
}

/* =========================
           STATUS BADGES
        ========================= */
.badge-soft-success {
    background: #ecfdf5;
    color: #047857;
}

.badge-soft-primary {
    background: #eff6ff;
    color: #1d4ed8;
}

.badge-soft-warning {
    background: #fffbeb;
    color: #b45309;
}

/* SUMMARY */
.summary-card {
    padding: 20px;
    height: 100%;
}

.summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.summary-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 16px;
}

.summary-value {
    font-size: 24px;
    font-weight: 700;
    margin-top: 3px;
}

.summary-footer {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
}

.filter-btn.active {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

/* WALLET CARD */
.wallet-card {
    transition: 0.15s ease;
}

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

.wallet-header {
    padding: 20px 20px 16px;
}

.wallet-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex-shrink: 0;
}

.eth {
    background: #eef0ff;
    color: #627eea;
}

.btc {
    background: #fff4e5;
    color: #f7931a;
}

.sol {
    background: #f4efff;
    color: #7c3aed;
}

.wallet-name {
    font-size: 15px;
    font-weight: 700;
}

.wallet-network {
    font-size: 11px;
    margin-top: 2px;
}

.wallet-address {
    font-family: monospace;
    font-size: 11px;
    color: #6b7280;
    background: #f8fafc;
    border: 1px solid #edf0f3;
    border-radius: 6px;
    padding: 6px 8px;
    display: inline-block;
    margin-top: 12px;
}

.copy-btn {
    border: 0;
    background: transparent;
    color: #6b7280;
    padding: 0 4px;
}

.copy-btn:hover {
    color: #2563eb;
}

.wallet-body {
    padding: 18px 20px;
    border-top: 1px solid #edf0f3;
}

.wallet-balance {
    font-size: 22px;
    font-weight: 700;
}

.wallet-usd {
    font-size: 12px;

    margin-top: 2px;
}

.status-badge {
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.status-recovery {
    background: #fff7ed;
    color: #c2410c;
}

.status-monitoring {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-recovered {
    background: #ecfdf5;
    color: #047857;
}

.status-warning {
    background: #fef2f2;
    color: #b91c1c;
}

.wallet-progress {
    height: 6px;
    border-radius: 20px;
}

.progress-info {
    font-size: 10px;
}

.wallet-footer {
    padding: 13px 20px;
    background: #fafbfc;
    border-top: 1px solid #edf0f3;
    border-radius: 0 0 15px 15px;
}

.last-activity {
    font-size: 10px;
}

/* EMPTY ADD CARD */
.add-wallet-card {
    border: 1.5px dashed #cbd5e1;
    background: transparent;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.15s;
}

.add-wallet-card:hover {
    background: white;
    border-color: #2563eb;
}

.add-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 23px;
}

/* ================= WALLET SELECTOR ================= */
.wallet-selector {
    padding: 15px 18px;
}

.wallet-mini {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef0ff;
    color: #627eea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.wallet-address {
    font-family: monospace;
    font-size: 11px;
    color: #6b7280;
}

/* ================= FLOW GRAPH ================= */
.flow-card {
    overflow: hidden;
}

.flow-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.flow-body {
    min-height: 430px;
    padding: 30px;
    background: radial-gradient(
            circle,
            rgb(31 103 203 / 40%) 1px,
            transparent 1px
    );
    background-size: 24px 24px;
    position: relative;
    overflow-x: auto;
}

.flow-container {
    min-width: 920px;
    height: 360px;
    position: relative;
}

.node {
    width: 190px;
    background: white;
    border: 1px solid #dfe4ea;
    border-radius: 13px;
    padding: 15px;
    position: absolute;
    z-index: 3;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

.node:hover {
    border-color: #93c5fd;
}

.node-main {
    border: 2px solid #2563eb;
}

.node-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.node-title {
    font-size: 13px;
    font-weight: 700;
}

.node-address {
    font-family: monospace;
    color: #6b7280;
    font-size: 9px;
    margin-top: 2px;
}

.node-value {
    font-size: 14px;
    font-weight: 700;
    margin-top: 13px;
}

.node-meta {
    color: #9ca3af;
    font-size: 9px;
}

.node-1 {
    left: 20px;
    top: 130px;
}

.node-2 {
    left: 260px;
    top: 55px;
}

.node-3 {
    left: 260px;
    top: 220px;
}

.node-4 {
    left: 515px;
    top: 55px;
}

.node-5 {
    left: 515px;
    top: 220px;
}

.node-6 {
    left: 755px;
    top: 130px;
}

/* connectors */
.line {
    position: absolute;
    height: 2px;
    background: #cbd5e1;
    transform-origin: left center;
    z-index: 1;
}

.line-blue {
    background: #60a5fa;
}

.line-1 {
    width: 100px;
    left: 210px;
    top: 165px;
    transform: rotate(-18deg);
}

.line-2 {
    width: 100px;
    left: 210px;
    top: 195px;
    transform: rotate(18deg);
}

.line-3 {
    width: 70px;
    left: 450px;
    top: 125px;
    transform: rotate(0deg);
}

.line-4 {
    width: 70px;
    left: 450px;
    top: 280px;
    transform: rotate(0deg);
}

.line-5 {
    width: 100px;
    left: 705px;
    top: 125px;
    transform: rotate(18deg);
}

.line-6 {
    width: 100px;
    left: 705px;
    top: 280px;
    transform: rotate(-18deg);
}

.flow-amount {
    position: absolute;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 9px;
    color: #475569;
    z-index: 4;
}

.amount-1 {
    left: 205px;
    top: 113px;
}

.amount-2 {
    left: 205px;
    top: 216px;
}

.amount-3 {
    left: 454px;
    top: 103px;
}

.amount-4 {
    left: 454px;
    top: 290px;
}

.amount-5 {
    left: 700px;
    top: 165px;
}

.amount-6 {
    left: 700px;
    top: 290px;
}

/* ================= LEGEND ================= */
.legend {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: #fafbfc;
}

.legend-item {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ================= TRANSACTIONS ================= */
.transaction-row {
    padding: 15px 20px;
    border-bottom: 1px solid #edf0f3;
}

.transaction-row:last-child {
    border-bottom: 0;
}

.tx-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tx-in {
    background: #ecfdf5;
    color: #059669;
}

.tx-out {
    background: #fff1f2;
    color: #e11d48;
}

.tx-title {
    font-size: 12px;
    font-weight: 600;
}

.tx-address {
    font-family: monospace;
    font-size: 10px;
    color: #94a3b8;
}

.tx-value {
    font-size: 12px;
    font-weight: 700;
}

.tx-time {
    font-size: 10px;
    color: #94a3b8;
}

/* ================= DESTINATIONS ================= */
.destination {
    padding: 15px 0;
    border-bottom: 1px solid #edf0f3;
}

.destination:last-child {
    border-bottom: 0;
}

.destination-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.risk {
    font-size: 9px;
    padding: 4px 7px;
    border-radius: 20px;
}

.risk-low {
    color: #047857;
    background: #ecfdf5;
}

.risk-medium {
    color: #b45309;
    background: #fffbeb;
}

.risk-high {
    color: #b91c1c;
    background: #fef2f2;
}

/* =========================================================
   PROFILE PAGE
========================================================= */

.profile-content {
    max-width: 1500px;
    margin: 0 auto;
}

/* =========================================================
   PAGE HEADING
========================================================= */

.profile-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.profile-page-heading h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--text);
}

.profile-page-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* =========================================================
   PROFILE CARD
========================================================= */

.profile-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

    transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

[data-theme="dark"] .profile-card {
    box-shadow: 0 10px 40px rgba(100, 0, 255, 0.06);
}

.profile-card:hover {
    border-color: var(--badge-border);
}

/* =========================================================
   PROFILE HEADER
========================================================= */

.profile-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 28px;
    margin-bottom: 4px;

    background: radial-gradient(
            circle at 85% 20%,
            rgba(143, 50, 255, 0.12),
            transparent 35%
    ),
    var(--surface);
}

.profile-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-header-right {
    text-align: right;
}

.member-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 3px;
}

.profile-header-right strong {
    color: var(--text);
    font-size: 13px;
}

/* =========================================================
   LARGE AVATAR
========================================================= */

.large-avatar {
    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    color: #fff;

    font-size: 25px;
    font-weight: 700;

    box-shadow: 0 0 0 5px var(--icon-bg), 0 15px 35px var(--purple-glow);
}

.avatar-edit {
    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    border: 3px solid var(--surface);

    background: var(--purple-primary);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;

    cursor: pointer;
}

.avatar-edit:hover {
    background: var(--purple-dark);
}

/* =========================================================
   PROFILE HEADER INFORMATION
========================================================= */

.profile-header-info h2 {
    margin: 0 0 4px;

    font-size: 20px;
    font-weight: 700;

    color: var(--text);
}

.profile-header-info p {
    margin: 0 0 10px;

    font-size: 13px;
    color: var(--text-muted);
}

.account-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border-radius: 20px;

    background: var(--badge-bg);
    border: 1px solid var(--badge-border);

    color: var(--badge-text);

    font-size: 10px;
    font-weight: 600;
}

/* =========================================================
   CARD HEADING
========================================================= */

.card-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;
}

.heading-icon {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    background: var(--icon-bg);
    color: var(--icon-color);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}

.card-heading h3 {
    margin: 0 0 2px;

    font-size: 15px;
    font-weight: 700;

    color: var(--text);
}

.card-heading p {
    margin: 0;

    color: var(--text-muted);
    font-size: 11px;
}

/* =========================================================
   FORM
========================================================= */

.profile-label {
    display: block;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 600;

    margin-bottom: 7px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper > i {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

    font-size: 14px;

    pointer-events: none;
}

.profile-input {
    width: 100%;

    height: 44px;

    border-radius: 9px;

    border: 1px solid var(--border);

    background: var(--button-bg);

    color: var(--text);

    outline: none;

    padding: 0 13px 0 38px;

    font-size: 13px;

    transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

select.profile-input {
    appearance: auto;
}

.profile-input:focus {
    border-color: var(--purple-primary);

    box-shadow: 0 0 0 3px var(--purple-glow);
}

.profile-input::placeholder {
    color: var(--text-muted);
}

/* =========================================================
   FORM BUTTONS
========================================================= */


.btn-purple {
    border: 0;

    height: 40px;

    padding: 0 17px;

    border-radius: 8px;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    color: #fff;

    font-size: 12px;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    cursor: pointer;

    box-shadow: 0 6px 18px var(--purple-glow);

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-purple:hover {
    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 8px 25px var(--purple-glow-hover);
}

.btn-secondary-custom {
    height: 40px;

    padding: 0 16px;

    border-radius: 8px;

    border: 1px solid var(--border);

    background: var(--button-bg);
    color: var(--button-text);

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

/* =========================================================
   ACCOUNT STATUS
========================================================= */

.status-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 0;

    border-bottom: 1px solid var(--border-light);
}

.status-item:last-of-type {
    border-bottom: 0;
}

.status-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
}

.status-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.status-item strong {
    display: block;

    color: var(--text);

    font-size: 12px;
    margin-bottom: 2px;
}

.status-item span {
    display: block;

    color: var(--text-muted);

    font-size: 10px;
}

.security-button {
    width: 100%;
    height: 40px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    padding: 11px;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--badge-border);
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: auto;
}

/* =========================================================
   WALLET SUMMARY
========================================================= */

.wallet-summary {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 5px 0 18px;
}

.wallet-number {
    width: 58px;
    height: 58px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);

    color: var(--purple-primary);

    font-size: 23px;
    font-weight: 700;
}

.wallet-summary strong {
    display: block;

    color: var(--text);

    font-size: 13px;
}

.wallet-summary span {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 10px;
}

.wallet-networks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.wallet-networks span {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border-radius: 20px;

    background: var(--surface-hover);

    color: var(--text-muted);

    font-size: 10px;
}

.wallet-networks i {
    font-size: 6px;
    color: var(--purple-primary);
}

/* =========================================================
   OUTLINE BUTTON
========================================================= */

.outline-purple-button {
    width: 100%;

    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 8px;

    border: 1px solid var(--badge-border);

    background: transparent;

    color: var(--purple-primary);

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.outline-purple-button:hover {
    background: var(--purple-primary);
    color: #fff;
}

/* =========================================================
   RECOVERY
========================================================= */

.recovery-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 20px;
}

.recovery-info > div {
    padding: 13px;

    border-radius: 10px;

    background: var(--surface-hover);
}

.recovery-info span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;

    margin-bottom: 5px;
}

.recovery-info strong {
    display: block;

    color: var(--text);

    font-size: 17px;
}

.purple-text {
    color: var(--purple-primary) !important;
}

.green-text {
    color: #22c55e !important;
}

/* =========================================================
   DANGER ZONE
========================================================= */

.danger-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-color: rgba(239, 68, 68, 0.18);
}

.danger-title {
    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 5px;
}

.danger-title i {
    color: #ef4444;
    margin-right: 6px;
}

.danger-card p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10px;
}

.delete-button {
    height: 38px;

    padding: 0 15px;

    border-radius: 8px;

    border: 1px solid rgba(239, 68, 68, 0.35);

    background: rgba(239, 68, 68, 0.06);

    color: #ef4444;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;
}

.delete-button:hover {
    background: #ef4444;
    color: #fff;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {
    .profile-page-heading {
        margin-bottom: 18px;
    }

    .profile-page-heading h1 {
        font-size: 22px;
    }

    .profile-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .profile-header-right {
        text-align: left;

        padding-top: 15px;

        width: 100%;

        border-top: 1px solid var(--border-light);
    }

    .profile-header-left {
        gap: 15px;
    }

    .large-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
        font-size: 20px;
    }

    .profile-header-info h2 {
        font-size: 17px;
    }

    .profile-card {
        padding: 18px;
        border-radius: 13px;
    }

    .recovery-info {
        grid-template-columns: 1fr;
    }

    .danger-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .delete-button {
        width: 100%;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions button {
        width: 100%;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {
    .recovery-main {
        display: block;
    }

    .profile-header-left {
        align-items: flex-start;
    }

    .profile-header-info p {
        font-size: 11px;
    }

    .account-badge {
        font-size: 9px;
    }

    .card-heading {
        margin-bottom: 17px;
    }
}

/* =========================================================
   RESET PASSWORD PAGE
========================================================= */

.password-content {
    max-width: 1250px;
    margin: 0 auto;
}

/* =========================================================
   PAGE HEADING
========================================================= */

.password-page-heading {
    margin-bottom: 24px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 13px;

    color: var(--text-muted);

    text-decoration: none;

    font-size: 11px;
}

.back-link:hover {
    color: var(--purple-primary);
}

.password-page-heading h1 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 26px;
    font-weight: 700;
}

.password-page-heading p {
    margin: 0;

    color: var(--text-muted);

    font-size: 12px;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.password-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 22px;

    align-items: start;
}

/* =========================================================
   PASSWORD CARD
========================================================= */

.password-card,
.security-card,
.activity-card {
    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 16px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);

    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .password-card,
[data-theme="dark"] .security-card,
[data-theme="dark"] .activity-card {
    box-shadow: 0 10px 40px rgba(100, 0, 255, 0.06);
}

.password-card {
    padding: 26px;
}

/* =========================================================
   CARD HEADER
========================================================= */

.password-card-header {
    display: flex;
    align-items: center;
    gap: 13px;

    padding-bottom: 21px;

    margin-bottom: 22px;

    border-bottom: 1px solid var(--border-light);
}

.password-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);

    color: var(--purple-primary);

    font-size: 19px;

    box-shadow: 0 6px 20px var(--purple-glow);
}

.password-card-header h2 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.password-card-header p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10px;
}

/* =========================================================
   FORM FIELD
========================================================= */

.password-field {
    margin-bottom: 18px;
}

.password-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 11px;
    font-weight: 600;
}

/* =========================================================
   PASSWORD INPUT
========================================================= */

.password-input {
    position: relative;

    display: flex;
    align-items: center;
}

.password-input > i {
    position: absolute;
    left: 13px;

    color: var(--text-muted);

    font-size: 14px;

    pointer-events: none;

    z-index: 2;
}

.password-input input {
    width: 100%;
    height: 44px;

    padding: 0 44px 0 39px;

    border-radius: 9px;

    border: 1px solid var(--border);

    outline: none;

    background: var(--button-bg);

    color: var(--text);

    font-size: 11px;

    transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.password-input input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.password-input input:focus {
    border-color: var(--purple-primary);

    box-shadow: 0 0 0 3px var(--purple-glow);
}

/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    position: absolute;

    right: 8px;

    width: 30px;
    height: 30px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: var(--text-muted);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.password-toggle:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* =========================================================
   ERROR
========================================================= */

.field-error {
    min-height: 15px;

    margin-top: 5px;

    color: #ef4444;

    font-size: 9px;
}

.password-field.has-error .password-input input {
    border-color: #ef4444;
}

/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 8px;
}

.strength-bars {
    display: flex;
    gap: 3px;

    flex: 1;
}

.strength-bars span {
    height: 3px;

    flex: 1;

    border-radius: 5px;

    background: var(--border);
}

.strength-bars span.weak {
    background: #ef4444;
}

.strength-bars span.fair {
    background: #f59e0b;
}

.strength-bars span.good {
    background: #22c55e;
}

.strength-bars span.strong {
    background: var(--purple-primary);
}

.strength-text {
    min-width: 65px;

    color: var(--text-muted);

    font-size: 9px;

    text-align: right;
}

/* =========================================================
   REQUIREMENTS
========================================================= */

.password-requirements {
    padding: 14px;

    margin-top: 3px;
    margin-bottom: 21px;

    border-radius: 10px;

    background: var(--surface-hover);

    border: 1px solid var(--border-light);
}

.requirements-title {
    margin-bottom: 10px;

    color: var(--text);

    font-size: 10px;
    font-weight: 700;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 7px;

    color: var(--text-muted);

    font-size: 9px;
}

.requirement:last-child {
    margin-bottom: 0;
}

.requirement i {
    color: var(--text-muted);

    font-size: 9px;
}

.requirement.valid {
    color: #22c55e;
}

.requirement.valid i {
    color: #22c55e;
}

/* =========================================================
   ACTION BUTTONS
========================================================= */

.password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.cancel-button {
    height: 40px;

    padding: 0 17px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: var(--button-bg);

    color: var(--button-text);

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;
}

.cancel-button:hover {
    background: var(--surface-hover);
}

.save-password-button {
    height: 40px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border: 0;

    border-radius: 8px;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    color: #fff;

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 7px 20px var(--purple-glow);
}

.save-password-button:hover {
    box-shadow: 0 8px 25px var(--purple-glow-hover);
}

/* =========================================================
   SECURITY CARD
========================================================= */

.security-card {
    padding: 23px;

    position: relative;
    overflow: hidden;
}

.security-card::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -65px;
    right: -65px;

    border-radius: 50%;

    background: radial-gradient(circle, var(--purple-glow), transparent 70%);
}

.security-card-icon {
    width: 45px;
    height: 45px;

    margin-bottom: 15px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);

    color: var(--purple-primary);

    font-size: 19px;
}

.security-card h2 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.security-card > p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.6;
}

/* =========================================================
   SECURITY TIPS
========================================================= */

.security-tips {
    margin-top: 21px;

    padding-top: 16px;

    border-top: 1px solid var(--border-light);
}

.security-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    margin-bottom: 13px;
}

.tip-icon {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    border-radius: 50%;

    background: rgba(34, 197, 94, 0.1);

    color: #22c55e;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;
}

.security-tip span {
    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.5;
}

/* =========================================================
   SECURITY FOOTER
========================================================= */

.security-footer {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 17px;
    padding: 11px;

    border-radius: 9px;

    background: var(--badge-bg);

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.5;
}

.security-footer i {
    color: var(--purple-primary);
}

/* =========================================================
   PASSWORD ACTIVITY
========================================================= */

.activity-card {
    margin-top: 22px;

    padding: 22px;
}

.activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 17px;

    border-bottom: 1px solid var(--border-light);
}

.activity-header h2 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 14px;
    font-weight: 700;
}

.activity-header p {
    margin: 0;

    color: var(--text-muted);

    font-size: 9px;
}

.security-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border-radius: 20px;

    background: rgba(34, 197, 94, 0.1);

    color: #22c55e;

    font-size: 9px;
    font-weight: 600;
}

.security-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* =========================================================
   ACTIVITY DETAILS
========================================================= */

.activity-details {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 17px 18px 0;

    border-right: 1px solid var(--border-light);
}

.activity-item:first-child {
    padding-left: 0;
}

.activity-item:last-child {
    border-right: 0;
}

.activity-item > i {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);

    color: var(--purple-primary);

    font-size: 13px;
}

.activity-item span {
    display: block;

    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.activity-item strong {
    display: block;

    color: var(--text);

    font-size: 10px;
}

.activity-item strong.enabled {
    color: #22c55e;
}

/* =========================================================
   RESPONSIVE
========================================================= */

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

    .security-card {
        order: 2;
    }
}

@media (max-width: 767.98px) {
    .password-page-heading h1 {
        font-size: 22px;
    }

    .password-card,
    .security-card,
    .activity-card {
        border-radius: 13px;
    }

    .password-card {
        padding: 19px;
    }

    .password-card-header {
        align-items: flex-start;
    }

    .password-actions {
        flex-direction: column-reverse;
    }

    .password-actions button {
        width: 100%;
    }

    .activity-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .activity-details {
        grid-template-columns: 1fr;
    }

    .activity-item,
    .activity-item:first-child {
        padding: 13px 0;

        border-right: 0;

        border-bottom: 1px solid var(--border-light);
    }

    .activity-item:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 450px) {
    .password-page-heading p {
        font-size: 10px;
    }

    .password-card-header h2 {
        font-size: 14px;
    }

    .password-card-header p {
        font-size: 9px;
        line-height: 1.5;
    }

    .security-card {
        padding: 19px;
    }
}

.login-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
}

/* Purple background glow */
.login-page::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--purple-glow);
    border-radius: 50%;
    filter: blur(100px);
    top: -200px;
    left: -150px;
    pointer-events: none;
}

.login-page::after {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: var(--purple-glow);
    border-radius: 50%;
    filter: blur(120px);
    bottom: -220px;
    right: -150px;
    pointer-events: none;
}

.login-wrapper {
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 2;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 38px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08), 0 0 40px var(--purple-glow);
    transition: background 0.25s ease, border 0.25s ease;
}

[data-theme="dark"] .login-card {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 50px var(--purple-glow);
}

.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px auto 16px;
    font-size: 25px;
}

.login-title {
    color: var(--text);
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 8px;
    text-align: center;
}

.login-subtitle {
    color: var(--text-muted);
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px;
}

.form-label {
    color: var(--text);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.input-group-custom {
    position: relative;
}

.input-group-custom .input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    z-index: 3;
}

.form-control-custom {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 46px;

    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--button-bg);
    color: var(--text);

    outline: none;
    box-shadow: none;

    transition: border-color 0.2s ease, box-shadow 0.2s ease,
    background 0.2s ease;
}

.form-control-custom::placeholder {
    color: var(--text-muted);
}

.form-control-custom:focus {
    background: var(--button-bg);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--purple-glow);
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
    z-index: 3;
}

.password-toggle:hover {
    color: var(--primary);
}

.form-check-input {
    background-color: var(--button-bg);
    border-color: var(--border);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-label {
    color: var(--text-muted);
    font-size: 13px;
}

.forgot-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.forgot-link:hover {
    color: var(--primary-dark);
}

.btn-login {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;

    color: #fff;
    font-weight: 700;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    box-shadow: 0 10px 25px var(--purple-glow);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px var(--purple-glow-hover);
}

.btn-login:active {
    transform: translateY(0);
}

.divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 25px 0;
    color: var(--text-muted);
    font-size: 12px;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-social {
    height: 46px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--button-bg);
    color: var(--button-text);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 13px;
    font-weight: 600;

    transition: background 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.btn-social:hover {
    background: var(--surface-hover);
    border-color: var(--primary);
    color: var(--text);
    transform: translateY(-1px);
}

.register-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 25px;
    margin-bottom: 0;
}

.register-text a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.register-text a:hover {
    color: var(--primary-dark);
}

@media (max-width: 576px) {
    .login-card {
        padding: 28px 22px;
        border-radius: 20px;
    }

    .login-title {
        font-size: 25px;
    }

    .social-buttons {
        grid-template-columns: 1fr;
    }
}

.password-requirements {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.password-requirements div {
    display: flex;
    align-items: center;
    gap: 7px;

    color: var(--text-muted);
    font-size: 12px;

    transition: color 0.2s ease;
}

.password-requirements i {
    font-size: 13px;
}

/* Valid rule */
.password-requirements div.valid {
    color: #22c55e;
}

.password-requirements div.valid i {
    color: #22c55e;
}

.password-requirements div.valid i::before {
    content: "\f26a";
}

/* Invalid rule */
.password-requirements div.invalid {
    color: #ef4444;
}

.password-requirements div.invalid i {
    color: #ef4444;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text) !important;
    font-family: "Rostex", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1.8px;
    text-decoration: none;
}

.brand-symbol {
    color: var(--purple-primary);
    font-size: 30px;
    font-weight: 400;
    text-shadow: 0 0 18px var(--purple-glow);
    line-height: 1;
}

.navbar-brand .brand-dot {
    color: var(--purple-primary);
    text-shadow: 0 0 15px var(--purple-glow);
}

.request-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: radial-gradient(
            circle at center,
            rgba(143, 50, 255, 0.12),
            rgba(0, 0, 0, 0.78) 55%,
            rgba(0, 0, 0, 0.92)
    );

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.request-loading.show {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   CARD
========================================================= */

.request-loading-card {
    width: min(100%, 390px);

    position: relative;

    padding: 38px 32px 28px;

    text-align: center;

    background: linear-gradient(145deg, var(--surface), var(--button-bg));

    border: 1px solid var(--border);

    border-radius: 24px;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 80px var(--purple-glow);

    overflow: hidden;

    transform: translateY(20px) scale(0.94);

    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.request-loading.show .request-loading-card {
    transform: translateY(0) scale(1);
}

/* Top purple glow */

.request-loading-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 120px;

    top: -100px;
    left: 50%;

    transform: translateX(-50%);

    background: var(--primary);

    filter: blur(70px);

    opacity: 0.35;

    pointer-events: none;
}

/* =========================================================
   SEARCH ANIMATION
========================================================= */

.request-search-animation {
    width: 110px;
    height: 110px;

    position: relative;

    margin: 0 auto 25px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rings */

.search-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(143, 50, 255, 0.25);

    animation: searchRing 2.4s ease-out infinite;
}

.search-ring-1 {
    width: 55px;
    height: 55px;
}

.search-ring-2 {
    width: 78px;
    height: 78px;

    animation-delay: 0.5s;
}

.search-ring-3 {
    width: 105px;
    height: 105px;

    animation-delay: 1s;
}

@keyframes searchRing {
    0% {
        transform: scale(0.65);
        opacity: 0.8;
    }

    70% {
        transform: scale(1);
        opacity: 0.15;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Scanner */

.search-scanner {
    position: absolute;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(143, 50, 255, 0.65) 70deg,
            transparent 100deg
    );

    animation: scannerRotate 1.5s linear infinite;

    filter: drop-shadow(0 0 8px rgba(143, 50, 255, 0.7));
}

@keyframes scannerRotate {
    to {
        transform: rotate(360deg);
    }
}

/* Search icon */

.search-icon {
    width: 48px;
    height: 48px;

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    box-shadow: 0 0 25px var(--purple-glow-hover),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);

    animation: searchIconPulse 1.8s ease-in-out infinite;
}

.search-icon i {
    font-size: 20px;
}

@keyframes searchIconPulse {
    0%,
    100% {
        box-shadow: 0 0 20px var(--purple-glow);

        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 35px var(--purple-glow-hover);

        transform: scale(1.05);
    }
}

/* =========================================================
   TEXT
========================================================= */

.request-loading-title {
    color: var(--text);

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.2px;

    margin-bottom: 7px;
}

.request-loading-text {
    min-height: 20px;

    color: var(--text-muted);

    font-size: 13px;
    line-height: 1.5;

    transition: opacity 0.2s ease;
}

/* =========================================================
   PROGRESS
========================================================= */

.request-progress {
    height: 5px;

    margin-top: 24px;

    overflow: hidden;

    background: var(--border-light);

    border-radius: 20px;
}

.request-progress-bar {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background: linear-gradient(
            90deg,
            var(--purple-dark),
            var(--purple-primary),
            var(--purple-light)
    );

    box-shadow: 0 0 12px var(--purple-glow-hover);

    transition: width 0.25s ease;
}

/* =========================================================
   STATUS
========================================================= */

.request-loading-status {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 16px;

    color: var(--text-muted);

    font-size: 11px;
}

.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);

    animation: statusPulse 1.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {
    .request-loading-card {
        padding: 32px 22px 25px;

        border-radius: 20px;
    }

    .request-search-animation {
        margin-bottom: 20px;
    }

    .request-loading-title {
        font-size: 17px;
    }
}

.profile-toggle {
    width: 40px;
    height: 40px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px !important;

    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease;
}

.profile-toggle:hover,
.profile-toggle:focus,
.profile-toggle.show {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: var(--surface-hover) !important;

    box-shadow: 0 0 0 4px var(--purple-glow);
}

.profile-toggle i {
    font-size: 17px;
}

/* =========================================================
   DROPDOWN
========================================================= */

.profile-dropdown {
    min-width: 245px;

    padding: 8px;

    margin-top: 10px !important;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 15px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 30px var(--purple-glow);

    animation: profileDropdownShow 0.18s ease-out;
}

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

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

/* =========================================================
   HEADER
========================================================= */

.profile-dropdown-header {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px 9px;
}

.profile-avatar {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    border-radius: 11px;

    box-shadow: 0 6px 15px var(--purple-glow);
}

.profile-name {
    color: var(--text);

    font-size: 13px;
    font-weight: 700;

    max-width: 155px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-email {
    color: var(--text-muted);

    font-size: 11px;

    max-width: 155px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   ITEMS
========================================================= */

.profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px;

    border-radius: 9px;

    color: var(--text);

    font-size: 13px;
    font-weight: 500;

    transition: color 0.15s ease, background 0.15s ease;
}

.profile-dropdown .dropdown-item:hover,
.profile-dropdown .dropdown-item:focus {
    color: var(--primary);

    background: var(--surface-hover);
}

.dropdown-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--icon-color);

    background: var(--icon-bg);

    border-radius: 8px;

    transition: background 0.15s ease, color 0.15s ease;
}

.profile-dropdown .dropdown-item:hover .dropdown-icon {
    color: #fff;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );
}

/* =========================================================
   DIVIDER
========================================================= */

.profile-dropdown .dropdown-divider {
    border-color: var(--border);
    opacity: 1;

    margin: 7px 3px;
}

/* =========================================================
   LOGOUT
========================================================= */

.profile-dropdown .logout-item {
    color: #ef4444;
}

.profile-dropdown .logout-item .dropdown-icon {
    color: #ef4444;

    background: rgba(239, 68, 68, 0.08);
}

.profile-dropdown .logout-item:hover {
    color: #ef4444;

    background: rgba(239, 68, 68, 0.08);
}

.profile-dropdown .logout-item:hover .dropdown-icon {
    color: #fff;

    background: #ef4444;
}

/* =========================================================
          TABLE
       ========================================================= */
.transactions-table-wrapper {
    overflow-x: auto;
}

.transactions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.transactions-table th {
    padding: 12px 20px;
    background: var(--surface-hover);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.transactions-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    font-size: 10px;
    white-space: nowrap;
}

.transactions-table tbody tr {
    transition: background 0.15s ease;
}

.transactions-table tbody tr:hover {
    background: var(--surface-hover);
}

.transactions-table tbody tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
TRANSACTION NAME
========================================================= */
.transaction-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.transaction-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 9px;
    font-size: 14px;
}

.transaction-icon.received {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.transaction-icon.sent {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.transaction-icon.recovery {
    background: rgba(143, 50, 255, 0.1);
    color: var(--purple-primary);
}

.transaction-title {
    display: block;
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
}

.transaction-wallet {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 8px;
}

/* =========================================================
HASH
========================================================= */
.transaction-hash {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 8px;
}

.copy-hash {
    margin-left: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.copy-hash:hover {
    color: var(--purple-primary);
}

/* =========================================================
AMOUNT
========================================================= */
.amount {
    font-weight: 700;
}

.amount.received {
    color: #22c55e;
}

.amount.sent {
    color: #ef4444;
}

.amount.recovery {
    color: var(--purple-primary);
}

/* =========================================================
STATUS
========================================================= */
.transaction-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 600;
}

.transaction-status i {
    font-size: 7px;
}

.transaction-status.completed {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.transaction-status.pending {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.transaction-status.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* =========================================================
ACTION
========================================================= */
.transaction-action {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.transaction-action:hover {
    background: var(--surface-hover);
    color: var(--purple-primary);
}

/* =========================================================
FOOTER
========================================================= */
.transactions-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
}

.transaction-count {
    color: var(--text-muted);
    font-size: 9px;
}

.pagination-custom {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-button {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font-size: 9px;
    cursor: pointer;
}

.page-button:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.page-button.active {
    background: var(--purple-primary);
    border-color: var(--purple-primary);
    color: white;
}

/* =========================================================
EMPTY STATE
========================================================= */
.no-results {
    display: none;
    padding: 45px 20px;
    text-align: center;
    color: var(--text);
}

.no-results i {
    display: block;
    margin-bottom: 10px;
    color: var(--purple-primary);
    font-size: 25px;
}

.profile-alert {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    width: 100%;

    padding: 15px 18px;

    margin-bottom: 20px;

    color: #991b1b;

    background: linear-gradient(
            135deg,
            rgba(239, 68, 68, 0.1),
            rgba(239, 68, 68, 0.04)
    );

    border: 1px solid rgba(239, 68, 68, 0.2);

    border-radius: 14px;

    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.06);

    overflow: hidden;

    transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.profile-alert::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: linear-gradient(180deg, #ef4444, #dc2626);

    border-radius: 3px;
}

.profile-alert:hover {
    transform: translateY(-1px);

    border-color: rgba(239, 68, 68, 0.35);

    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.1);
}

/* =========================================================
   ICON
========================================================= */

.profile-alert-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #dc2626;

    background: rgba(239, 68, 68, 0.1);

    border: 1px solid rgba(239, 68, 68, 0.15);

    border-radius: 11px;

    font-size: 20px;
}

/* =========================================================
   CONTENT
========================================================= */

.profile-alert-content {
    min-width: 0;

    flex: 1;
}

.profile-alert-title {
    color: #991b1b;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.3;
}

.profile-alert-text {
    margin-top: 3px;

    color: rgba(127, 29, 29, 0.7);

    font-size: 12px;

    line-height: 1.5;
}

/* =========================================================
   ACTION
========================================================= */

.profile-alert-action {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    padding: 9px 14px;

    color: #fff;

    background: linear-gradient(135deg, #ef4444, #dc2626);

    border: 0;

    border-radius: 9px;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.2);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-alert-action:hover {
    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.profile-alert-action i {
    font-size: 13px;

    transition: transform 0.2s ease;
}

.profile-alert-action:hover i {
    transform: translateX(3px);
}

/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"] .profile-alert {
    color: #fca5a5;

    background: linear-gradient(
            135deg,
            rgba(239, 68, 68, 0.12),
            rgba(239, 68, 68, 0.04)
    );

    border-color: rgba(239, 68, 68, 0.2);

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .profile-alert-title {
    color: #fca5a5;
}

[data-theme="dark"] .profile-alert-text {
    color: rgba(252, 165, 165, 0.62);
}

[data-theme="dark"] .profile-alert-icon {
    color: #f87171;

    background: rgba(239, 68, 68, 0.12);

    border-color: rgba(239, 68, 68, 0.2);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {
    .profile-alert {
        align-items: flex-start;

        flex-wrap: wrap;

        padding: 14px;
    }

    .profile-alert-content {
        flex: 1;
    }

    .profile-alert-action {
        width: 100%;

        justify-content: center;

        margin-top: 2px;
    }
}

/* =========================================================
   HOME WELCOME
========================================================= */

.home-welcome {
    position: relative;

    padding: 28px 30px;

    overflow: hidden;

    background: radial-gradient(
            circle at 85% 15%,
            rgba(143, 50, 255, 0.13),
            transparent 32%
    ),
    linear-gradient(135deg, var(--surface), var(--surface-hover));

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);

    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Decorative purple glow */

.home-welcome::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -110px;
    top: -120px;

    background: var(--primary);

    opacity: 0.06;

    border-radius: 50%;

    filter: blur(25px);

    pointer-events: none;
}

/* Small decorative line */

.home-welcome::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: linear-gradient(
            180deg,
            var(--purple-primary),
            var(--purple-light)
    );

    border-radius: 20px 0 0 20px;

    opacity: 0.9;

    pointer-events: none;
}

/* =========================================================
   CONTENT
========================================================= */

.home-welcome-content {
    position: relative;

    z-index: 1;
}

.welcome-greeting {
    color: var(--text-muted);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.02em;
}

/* =========================================================
   TITLE
========================================================= */

.welcome-title {
    color: var(--text);

    font-size: clamp(26px, 3vw, 34px);

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.8px;
}

.welcome-wave {
    display: inline-block;

    margin-left: 5px;

    font-size: 0.8em;

    transform-origin: 70% 70%;
}

/* =========================================================
   SUBTITLE
========================================================= */

.welcome-subtitle {
    max-width: 600px;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.6;
}

/* =========================================================
   VERIFICATION BADGES
========================================================= */

.home-welcome .badge {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.01em;
}

/* =========================================================
   RIGHT STATUS
========================================================= */

.home-welcome-status {
    position: relative;

    z-index: 1;

    flex-shrink: 0;
}

.welcome-status {
    padding: 10px 14px;

    color: var(--text-muted);

    background: var(--button-bg);

    border: 1px solid var(--border);

    border-radius: 11px;

    font-size: 11px;
    font-weight: 600;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

    white-space: nowrap;
}

/* =========================================================
   STATUS DOT
========================================================= */

.status-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    display: inline-block;

    background: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1),
    0 0 10px rgba(34, 197, 94, 0.45);

    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 1;

        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1),
        0 0 10px rgba(34, 197, 94, 0.45);
    }

    50% {
        opacity: 0.65;

        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.04),
        0 0 5px rgba(34, 197, 94, 0.25);
    }
}

/* =========================================================
   WARNING STATUS
========================================================= */

.welcome-status-warning {
    color: #b45309;

    background: rgba(245, 158, 11, 0.06);

    border-color: rgba(245, 158, 11, 0.18);
}

.status-dot-warning {
    background: #f59e0b;

    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1),
    0 0 10px rgba(245, 158, 11, 0.35);
}

/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"] .home-welcome {
    background: radial-gradient(
            circle at 85% 15%,
            rgba(143, 50, 255, 0.18),
            transparent 34%
    ),
    linear-gradient(135deg, #030006, #08020f);

    border-color: rgba(255, 255, 255, 0.1);

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .home-welcome:hover {
    border-color: rgba(143, 50, 255, 0.25);

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(120, 0, 255, 0.08);
}

[data-theme="dark"] .welcome-status {
    background: rgba(255, 255, 255, 0.025);

    border-color: rgba(255, 255, 255, 0.1);

    box-shadow: none;
}

[data-theme="dark"] .welcome-status-warning {
    color: #fbbf24;

    background: rgba(245, 158, 11, 0.06);

    border-color: rgba(245, 158, 11, 0.18);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {
    .home-welcome {
        padding: 24px;
    }
}

@media (max-width: 575.98px) {
    .home-welcome {
        padding: 22px 20px;

        border-radius: 16px;
    }

    .welcome-title {
        font-size: 26px;

        letter-spacing: -0.5px;
    }

    .welcome-subtitle {
        font-size: 12px;
    }

    .home-welcome-status {
        width: 100%;
    }

    .welcome-status {
        width: 100%;

        justify-content: center;

        padding: 9px 12px;
    }
}

/* =========================================================
   WITHDRAW MODAL
========================================================= */

.withdraw-modal {
    position: relative;

    overflow: hidden;

    background: var(--surface);

    color: var(--text);

    border: 1px solid var(--border) !important;

    border-radius: 22px;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18);
}

/* Purple glow */

.withdraw-modal::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -120px;
    top: -130px;

    background: var(--primary);

    opacity: 0.08;

    border-radius: 50%;

    filter: blur(30px);

    pointer-events: none;
}

/* =========================================================
   HEADER
========================================================= */

.withdraw-modal-header {
    position: relative;

    padding: 20px 22px;

    background: linear-gradient(135deg, var(--surface), var(--surface-hover));

    border-bottom: 1px solid var(--border);

    z-index: 1;
}

.withdraw-modal-title {
    color: var(--text);

    font-size: 15px;

    font-weight: 750;

    line-height: 1.2;
}

.withdraw-modal-subtitle {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 11px;
}

/* =========================================================
   MODAL ICON
========================================================= */

.withdraw-modal-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--primary);

    background: var(--icon-bg);

    border: 1px solid rgba(143, 50, 255, 0.14);

    border-radius: 12px;

    font-size: 18px;

    box-shadow: 0 6px 18px var(--purple-glow);
}

.withdraw-modal-icon-warning {
    color: #f59e0b;

    background: rgba(245, 158, 11, 0.09);

    border-color: rgba(245, 158, 11, 0.16);

    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.08);
}

/* =========================================================
   BODY
========================================================= */

.withdraw-modal-body {
    position: relative;

    padding: 24px;

    z-index: 1;
}

/* =========================================================
   LABEL
========================================================= */

.withdraw-label {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 8px;

    color: var(--text);

    font-size: 12px;

    font-weight: 700;
}

.withdraw-label span {
    color: var(--text-muted);

    font-weight: 500;
}

/* =========================================================
   INPUT
========================================================= */

.withdraw-input-group {
    display: flex;

    align-items: stretch;

    min-height: 48px;

    background: var(--button-bg);

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.withdraw-input-group:focus-within {
    border-color: var(--primary);

    box-shadow: 0 0 0 3px var(--purple-glow);
}

.withdraw-input-icon {
    width: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--icon-color);

    background: var(--icon-bg);

    border-right: 1px solid var(--border-light);

    font-size: 16px;
}

.withdraw-input {
    min-width: 0;

    color: var(--text) !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    padding: 11px 12px;

    font-size: 13px;
}

.withdraw-input::placeholder {
    color: var(--text-muted);

    opacity: 0.65;
}

.withdraw-input-suffix {
    display: flex;
    align-items: center;

    padding: 0 13px;

    color: var(--primary);

    background: var(--icon-bg);

    border-left: 1px solid var(--border-light);

    font-size: 11px;

    font-weight: 800;
}

.withdraw-help {
    margin-top: 6px;

    color: var(--text-muted);

    font-size: 10px;
}

.withdraw-help strong {
    color: var(--text);

    font-weight: 700;
}

/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.withdraw-password-toggle {
    width: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-muted);

    background: transparent;

    border: 0;

    transition: color 0.2s ease;
}

.withdraw-password-toggle:hover {
    color: var(--primary);
}

/* =========================================================
   SECURITY NOTE
========================================================= */

.withdraw-security-note {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 12px 13px;

    background: rgba(143, 50, 255, 0.055);

    border: 1px solid rgba(143, 50, 255, 0.12);

    border-radius: 12px;
}

.withdraw-security-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--primary);

    background: var(--icon-bg);

    border-radius: 9px;

    font-size: 15px;
}

.withdraw-security-title {
    color: var(--text);

    font-size: 11px;

    font-weight: 700;
}

.withdraw-security-text {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.4;
}

/* =========================================================
   BUTTONS
========================================================= */

.withdraw-btn-primary,
.withdraw-btn-cancel {
    min-height: 44px;

    border-radius: 11px !important;

    font-size: 12px;

    font-weight: 700;

    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.withdraw-btn-primary {
    color: #fff !important;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    border: 0 !important;

    box-shadow: 0 7px 20px var(--purple-glow);
}

.withdraw-btn-primary:hover {
    color: #fff !important;

    transform: translateY(-1px);

    box-shadow: 0 10px 26px var(--purple-glow-hover);
}

.withdraw-btn-cancel {
    color: var(--button-text);

    background: var(--button-bg);

    border: 1px solid var(--border) !important;
}

.withdraw-btn-cancel:hover {
    color: var(--text);

    background: var(--surface-hover);

    border-color: var(--border);
}

/* =========================================================
   LOCKED STATE
========================================================= */

.withdraw-lock-icon {
    display: flex;

    justify-content: center;

    margin-bottom: 16px;
}

.withdraw-lock-icon-inner {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f87171;

    background: rgba(239, 68, 68, 0.08);

    border: 1px solid rgba(239, 68, 68, 0.16);

    border-radius: 18px;

    font-size: 27px;

    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.07);
}

.withdraw-lock-title {
    margin-bottom: 7px;

    color: var(--text);

    font-size: 16px;

    font-weight: 750;
}

.withdraw-lock-text {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.6;
}

/* =========================================================
   REQUIRED AMOUNT
========================================================= */

.withdraw-required-box {
    margin-top: 18px;

    padding: 15px;

    background: linear-gradient(
            135deg,
            rgba(143, 50, 255, 0.08),
            rgba(143, 50, 255, 0.03)
    );

    border: 1px solid rgba(143, 50, 255, 0.15);

    border-radius: 14px;
}

.withdraw-required-label {
    color: var(--text-muted);

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.withdraw-required-amount {
    margin-top: 4px;

    color: var(--primary);

    font-size: 23px;

    font-weight: 800;

    letter-spacing: -0.4px;
}

/* =========================================================
   INFO MESSAGE
========================================================= */

.withdraw-wallet-message {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 17px;

    padding: 10px 12px;

    color: var(--text-muted);

    background: var(--surface-hover);

    border: 1px solid var(--border-light);

    border-radius: 10px;

    text-align: left;

    font-size: 10px;

    line-height: 1.5;
}

.withdraw-wallet-message i {
    color: var(--primary);

    margin-top: 1px;
}

/* =========================================================
   WALLET BOX
========================================================= */

.withdraw-wallet-box {
    margin-top: 15px;

    padding: 12px;

    background: var(--button-bg);

    border: 1px solid var(--border);

    border-radius: 13px;
}

.withdraw-wallet-label {
    margin-bottom: 8px;

    color: var(--text);

    font-size: 11px;

    font-weight: 700;

    text-align: left;
}

.withdraw-wallet-label i {
    color: var(--primary);
}

.withdraw-wallet-input {
    min-width: 0;

    color: var(--text) !important;

    background: var(--surface) !important;

    border-color: var(--border) !important;

    font-size: 11px;
}

.withdraw-copy-btn {
    color: var(--primary);

    background: var(--icon-bg);

    border-color: var(--border);

    transition: background 0.2s ease, color 0.2s ease;
}

.withdraw-copy-btn:hover {
    color: #fff;

    background: var(--primary);

    border-color: var(--primary);
}

/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"] .withdraw-modal {
    background: linear-gradient(145deg, #030006, #08020f);

    border-color: rgba(255, 255, 255, 0.1) !important;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .withdraw-modal-header {
    background: rgba(255, 255, 255, 0.015);

    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .withdraw-input-group {
    background: rgba(255, 255, 255, 0.025);

    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .withdraw-input-icon {
    border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .withdraw-input-suffix {
    background: rgba(143, 50, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .withdraw-security-note {
    background: rgba(143, 50, 255, 0.07);

    border-color: rgba(143, 50, 255, 0.15);
}

[data-theme="dark"] .withdraw-wallet-box {
    background: rgba(255, 255, 255, 0.02);

    border-color: rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .withdraw-wallet-input {
    background: rgba(255, 255, 255, 0.025) !important;

    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {
    .withdraw-modal {
        border-radius: 18px;
    }

    .withdraw-modal-header {
        padding: 17px;
    }

    .withdraw-modal-body {
        padding: 19px;
    }

    .withdraw-modal-icon {
        width: 38px;
        height: 38px;

        border-radius: 10px;

        font-size: 16px;
    }

    .withdraw-modal-subtitle {
        display: none;
    }

    .withdraw-btn-primary,
    .withdraw-btn-cancel {
        min-height: 42px;
    }
}




/* =====================================================
           PAGE
        ====================================================== */

.recovery-page {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 40px 24px 70px;
}

/* =====================================================
           HERO
        ====================================================== */

.recovery-hero {
    position: relative;

    overflow: hidden;

    padding: 34px;

    background: radial-gradient(
            circle at 90% 0%,
            rgba(143, 50, 255, 0.2),
            transparent 35%
    ),
    linear-gradient(135deg, var(--surface), var(--surface-hover));

    border: 1px solid var(--border);

    border-radius: 24px;

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .recovery-hero {
    background: radial-gradient(
            circle at 88% 0%,
            rgba(143, 50, 255, 0.18),
            transparent 38%
    ),
    linear-gradient(135deg, #030006, #08030e);

    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
}

.recovery-hero::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -130px;
    top: -160px;

    border-radius: 50%;

    background: var(--primary);

    opacity: 0.08;

    filter: blur(30px);

    pointer-events: none;
}

.recovery-hero-content {
    position: relative;

    z-index: 1;
}

/* =====================================================
           HERO TOP
        ====================================================== */

.recovery-heading {
    display: flex;

    align-items: center;

    gap: 13px;
}

.recovery-hero-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: var(--primary-light);

    background: rgba(143, 50, 255, 0.1);

    border: 1px solid rgba(143, 50, 255, 0.22);

    border-radius: 14px;

    font-size: 21px;

    box-shadow: 0 0 25px var(--purple-glow);
}

.recovery-eyebrow {
    margin-bottom: 4px;

    color: var(--primary-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.recovery-heading-title {
    margin: 0;

    color: var(--text);

    font-size: 15px;

    font-weight: 700;
}

/* =====================================================
           LIVE STATUS
        ====================================================== */

.recovery-live-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    color: #22c55e;

    background: rgba(34, 197, 94, 0.07);

    border: 1px solid rgba(34, 197, 94, 0.16);

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;
}

.recovery-live-dot {
    width: 7px;
    height: 7px;

    background: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08),
    0 0 10px rgba(34, 197, 94, 0.3);
}

/* =====================================================
           HERO TITLE
        ====================================================== */

.recovery-title {
    margin: 28px 0 8px;

    color: var(--text);

    font-size: clamp(28px, 4vw, 42px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -1.3px;
}

.recovery-subtitle {
    max-width: 570px;

    margin: 0;

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.65;
}

/* =====================================================
           MAIN VALUE
        ====================================================== */

.recovery-value-area {
    margin-top: 42px;
}

.recovery-value-label {
    margin-bottom: 7px;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}

.recovery-value {
    color: var(--text);

    font-size: clamp(35px, 6vw, 58px);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;
}

.recovery-value-sub {
    margin-top: 8px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 600;
}

/* =====================================================
           PROGRESS
        ====================================================== */

.recovery-progress-area {
    max-width: 720px;

    margin-top: 32px;
}

.recovery-progress-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;
}

.recovery-progress-label {
    color: var(--text-muted);

    font-size: 10px;

    font-weight: 600;
}

.recovery-progress-percent {
    color: var(--primary-light);

    font-size: 11px;

    font-weight: 800;
}

.recovery-progress {
    height: 7px;

    overflow: hidden;

    background: rgba(143, 50, 255, 0.08);

    border-radius: 999px;
}

.recovery-progress .progress-bar {
    position: relative;

    background: linear-gradient(
            90deg,
            var(--purple-dark),
            var(--purple-primary),
            var(--purple-light)
    );

    border-radius: 999px;

    box-shadow: 0 0 18px var(--purple-glow);
}

.recovery-progress .progress-bar::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45px;
    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35));

    animation: recovery-shine 2.5s infinite;
}

@keyframes recovery-shine {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =====================================================
           CASE
        ====================================================== */

.recovery-case {
    margin-top: 22px;

    padding: 28px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 22px;

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .recovery-case {
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
}

/* =====================================================
           CASE HEADER
        ====================================================== */

.recovery-case-header {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--border-light);
}

.recovery-section-label {
    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.recovery-case-title {
    margin: 0;

    color: var(--text);

    font-size: 20px;

    font-weight: 800;

    letter-spacing: -0.4px;
}

.recovery-case-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    color: var(--primary-light);

    background: rgba(143, 50, 255, 0.08);

    border: 1px solid rgba(143, 50, 255, 0.16);

    border-radius: 999px;

    font-size: 9px;

    font-weight: 800;

    white-space: nowrap;
}

.recovery-case-status span {
    width: 6px;
    height: 6px;

    background: var(--primary);

    border-radius: 50%;

    box-shadow: 0 0 8px var(--primary);
}

/* =====================================================
           WALLET
        ====================================================== */

.recovery-wallet {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 22px 0;

    border-bottom: 1px solid var(--border-light);
}

.recovery-wallet-icon {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #f7931a;

    background: rgba(247, 147, 26, 0.1);

    border-radius: 50%;

    font-size: 20px;
}

.recovery-wallet-info {
    min-width: 100px;
}

.recovery-wallet-name {
    color: var(--text);

    font-size: 12px;

    font-weight: 800;
}

.recovery-wallet-network {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.recovery-wallet-address {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: auto;

    color: var(--text-muted);

    background: var(--surface-hover);

    border: 1px solid var(--border);

    padding: 6px 7px 6px 10px;

    border-radius: 8px;

    font-family: monospace;

    font-size: 10px;
}

.recovery-copy-btn {
    width: 25px;
    height: 25px;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--text-muted);

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 6px;

    font-size: 10px;
}

.recovery-copy-btn:hover {
    color: var(--primary);

    border-color: var(--primary);
}

/* =====================================================
           VALUES
        ====================================================== */

.recovery-case-values {
    padding: 23px 0;

    border-bottom: 1px solid var(--border-light);
}

.recovery-meta-label {
    margin-bottom: 5px;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 600;
}

.recovery-meta-value {
    color: var(--text);

    font-size: 14px;

    font-weight: 800;
}

/* =====================================================
           TIMELINE
        ====================================================== */

.recovery-timeline {
    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;
}

.recovery-timeline::before {
    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 8px;

    height: 1px;

    background: var(--border);
}

.recovery-timeline-item {
    position: relative;

    z-index: 1;

    width: 25%;

    color: var(--text-muted);
}

.timeline-dot {
    width: 17px;
    height: 17px;

    margin-bottom: 10px;

    background: var(--surface);

    border: 2px solid var(--border);

    border-radius: 50%;
}

.recovery-timeline-item.completed .timeline-dot {
    background: var(--primary);

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(143, 50, 255, 0.1);
}

.recovery-timeline-item.active .timeline-dot {
    background: var(--surface);

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(143, 50, 255, 0.1), 0 0 12px var(--purple-glow);
}

.timeline-title {
    color: var(--text);

    font-size: 9px;

    font-weight: 750;
}

.timeline-date {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.4;
}

.recovery-timeline-item.active .timeline-title {
    color: var(--primary-light);
}

/* =====================================================
           CASE FOOTER
        ====================================================== */

.recovery-case-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid var(--border-light);
}

.recovery-last-update {
    color: var(--text-muted);

    font-size: 9px;
}

.recovery-last-update i {
    margin-right: 4px;
}

.recovery-details-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--primary-light);

    font-size: 10px;

    font-weight: 750;

    transition: gap 0.2s ease, color 0.2s ease;
}

.recovery-details-link:hover {
    gap: 10px;

    color: var(--primary);
}

/* =====================================================
           HELP
        ====================================================== */

.recovery-help {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

    padding: 20px 23px;

    background: rgba(143, 50, 255, 0.05);

    border: 1px solid rgba(143, 50, 255, 0.12);

    border-radius: 17px;
}

.recovery-help-title {
    color: var(--text);

    font-size: 12px;

    font-weight: 800;
}

.recovery-help-text {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;
}

.recovery-help .btn {
    flex-shrink: 0;

    background: linear-gradient(
            135deg,
            var(--purple-primary),
            var(--purple-dark)
    );

    border: 0;

    box-shadow: 0 8px 20px var(--purple-glow);

    font-size: 10px;

    font-weight: 700;
}

/* =====================================================
           MOBILE
        ====================================================== */

@media (max-width: 767px) {
    .recovery-page {
        padding: 25px 15px 50px;
    }

    .recovery-hero {
        padding: 24px;

        border-radius: 19px;
    }

    .recovery-title {
        font-size: 31px;
    }

    .recovery-value-area {
        margin-top: 32px;
    }

    .recovery-value {
        font-size: 42px;
    }

    .recovery-case {
        padding: 20px;

        border-radius: 18px;
    }

    .recovery-case-header {
        flex-direction: column;
    }

    .recovery-wallet {
        flex-wrap: wrap;
    }

    .recovery-wallet-address {
        width: 100%;

        margin-left: 0;

        justify-content: space-between;
    }

    .recovery-timeline {
        flex-direction: column;

        gap: 18px;
    }

    .recovery-timeline::before {
        left: 8px;

        right: auto;

        top: 0;

        bottom: 0;

        width: 1px;

        height: auto;
    }

    .recovery-timeline-item {
        width: 100%;

        display: flex;

        align-items: flex-start;

        gap: 10px;
    }

    .timeline-dot {
        flex-shrink: 0;

        margin-bottom: 0;
    }

    .recovery-case-footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .recovery-help {
        align-items: flex-start;

        flex-direction: column;
    }

    .recovery-help .btn {
        width: 100%;
    }
}


/* =========================================================
         PAGE HEADER
      ========================================================= */
.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--purple-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-heading h1 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 25px;
    font-weight: 700;
}

.page-heading p {
    max-width: 650px;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}



/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
    .page-heading {
        align-items: flex-start;
    }

}

@media (max-width: 576px) {
    .page-heading {
        flex-direction: column;
    }
}


.account-menu {
    width: 100%;
}

.account-menu-title {
    margin-bottom: 10px;
    padding: 0 10px;

    color: var(--sidebar-heading, #8b8196);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .08em;
}


.account-menu .nav {
    gap: 5px;
}


/* =====================================================
   NAV ITEM
===================================================== */

.account-nav-link {

    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    min-height: 62px;

    padding: 9px 11px;

    color: var(--text-muted);

    background: transparent;

    border: 1px solid transparent;

    border-radius: 13px;

    text-decoration: none;

    transition:
            background .2s ease,
            color .2s ease,
            border-color .2s ease,
            transform .2s ease;

}


.account-nav-link:hover {

    color: var(--text);

    background: var(--surface-hover);

    border-color: var(--border-light);

    transform: translateX(2px);

}


/* =====================================================
   ICON
===================================================== */

.account-nav-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 11px;

    color: var(--text-muted);

    background: var(--icon-bg);

    border: 1px solid var(--border-light);

    border-radius: 10px;

    font-size: 17px;

    transition:
            background .2s ease,
            color .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;

}


.account-nav-link:hover .account-nav-icon {

    color: var(--primary);

    border-color:
            rgba(143, 50, 255, .18);

}


/* =====================================================
   CONTENT
===================================================== */

.account-nav-content {

    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.account-nav-title {

    color: inherit;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

}


.account-nav-description {

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.3;

    opacity: .8;

}


/* =====================================================
   ARROW
===================================================== */

.account-nav-arrow {

    color: var(--text-muted);

    font-size: 11px;

    opacity: 0;

    transform: translateX(-4px);

    transition:
            opacity .2s ease,
            transform .2s ease,
            color .2s ease;

}


.account-nav-link:hover .account-nav-arrow {

    opacity: .7;

    transform: translateX(0);

}


/* =====================================================
   ACTIVE
===================================================== */

.account-nav-link.active {

    color: var(--primary);

    background:
            linear-gradient(
                    90deg,
                    rgba(143, 50, 255, .12),
                    rgba(143, 50, 255, .045)
            );

    border-color:
            rgba(143, 50, 255, .18);

    box-shadow:
            0 6px 20px
            rgba(120, 0, 255, .06);

}


.account-nav-link.active::before {

    content: "";

    position: absolute;

    left: -1px;
    top: 13px;
    bottom: 13px;

    width: 3px;

    background:
            linear-gradient(
                    180deg,
                    var(--primary-light),
                    var(--primary)
            );

    border-radius: 0 4px 4px 0;

}


.account-nav-link.active .account-nav-icon {

    color: #fff;

    background:
            linear-gradient(
                    135deg,
                    var(--purple-primary),
                    var(--purple-dark)
            );

    border-color: transparent;

    box-shadow:
            0 5px 15px
            var(--purple-glow);

}


.account-nav-link.active .account-nav-description {

    color: var(--primary-light);

    opacity: .75;

}


.account-nav-link.active .account-nav-arrow {

    opacity: 1;

    color: var(--primary);

    transform: translateX(0);

}


/* =====================================================
   VERIFICATION ICON
===================================================== */

.verification-icon {

    color: #00c896;

}


.account-nav-link.active .verification-icon {

    color: #fff;

}


/* =====================================================
   DARK THEME
===================================================== */

[data-theme="dark"] .account-nav-link {

    color: rgba(255, 255, 255, .68);

}


[data-theme="dark"] .account-nav-link:hover {

    background:
            rgba(143, 50, 255, .07);

}


[data-theme="dark"] .account-nav-description {

    color: rgba(255, 255, 255, .40);

}


/* =========================================================
           KYC INFO PAGE
        ========================================================= */

.kyc-info-content {
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.kyc-info-heading {
    margin-bottom: 25px;
}

.kyc-info-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 8px;

    color: var(--purple-primary);

    font-size: 9px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .07em;
}

.kyc-info-heading h1 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 25px;
    font-weight: 700;
}

.kyc-info-heading p {
    max-width: 680px;

    margin: 0;

    color: var(--text-muted);

    font-size: 11px;
    line-height: 1.6;
}


/* =========================================================
   HERO
========================================================= */

.kyc-hero {
    position: relative;

    overflow: hidden;

    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 30px;

    padding: 28px;

    margin-bottom: 22px;

    background:
            radial-gradient(
                    circle at 90% 20%,
                    rgba(143, 50, 255, .20),
                    transparent 35%
            ),
            linear-gradient(
                    135deg,
                    rgba(143, 50, 255, .10),
                    transparent
            ),
            var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 16px;

    box-shadow:
            0 10px 35px rgba(0,0,0,.06);
}

.kyc-hero-content {
    position: relative;
    z-index: 2;
}

.kyc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    margin-bottom: 13px;

    background: rgba(143, 50, 255, .10);

    border: 1px solid rgba(143, 50, 255, .22);

    border-radius: 20px;

    color: var(--purple-light);

    font-size: 8px;
    font-weight: 600;
}

.kyc-hero h2 {
    max-width: 650px;

    margin: 0 0 9px;

    color: var(--text);

    font-size: 21px;
    font-weight: 700;
}

.kyc-hero p {
    max-width: 620px;

    margin: 0 0 18px;

    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.7;
}

.start-kyc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    height: 39px;

    padding: 0 17px;

    border: 0;
    border-radius: 8px;

    background:
            linear-gradient(
                    135deg,
                    var(--purple-primary),
                    var(--purple-dark)
            );

    color: white;

    font-size: 9px;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
            0 7px 20px var(--purple-glow);

    transition: .2s ease;
}

.start-kyc-btn:hover {
    color: white;

    transform: translateY(-1px);

    box-shadow:
            0 9px 25px var(--purple-glow-hover);
}


/* =========================================================
   HERO VISUAL
========================================================= */

.kyc-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.identity-visual {
    position: relative;

    width: 175px;
    height: 175px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(143,50,255,.18),
                    transparent 65%
            );
}

.identity-visual::before,
.identity-visual::after {
    content: "";

    position: absolute;

    border: 1px solid rgba(143,50,255,.25);

    border-radius: 50%;
}

.identity-visual::before {
    inset: 15px;
}

.identity-visual::after {
    inset: 35px;
}

.identity-icon {
    position: relative;
    z-index: 2;

    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
            linear-gradient(
                    135deg,
                    var(--purple-primary),
                    var(--purple-dark)
            );

    color: white;

    font-size: 31px;

    box-shadow:
            0 10px 35px var(--purple-glow);
}


/* =========================================================
   SECTION TITLE
========================================================= */

.section-title {
    margin-bottom: 13px;
}

.section-title h2 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.section-title p {
    margin: 0;

    color: var(--text-muted);

    font-size: 9px;
}


/* =========================================================
   BENEFITS
========================================================= */

.kyc-benefits {
    display: grid;

    grid-template-columns:
                repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 24px;
}

.benefit-card {
    padding: 18px;

    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 13px;

    transition:
            transform .2s ease,
            border-color .2s ease;
}

.benefit-card:hover {
    transform: translateY(-2px);

    border-color:
            rgba(143,50,255,.30);
}

.benefit-card-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 9px;

    background:
            rgba(143,50,255,.10);

    color: var(--purple-primary);

    font-size: 16px;
}

.benefit-card h3 {
    margin: 0 0 6px;

    color: var(--text);

    font-size: 11px;
    font-weight: 700;
}

.benefit-card p {
    margin: 0;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.6;
}


/* =========================================================
   WHAT YOU NEED
========================================================= */

.kyc-info-grid {
    display: grid;

    grid-template-columns:
                minmax(0, 1fr)
                330px;

    gap: 20px;

    align-items: start;
}

.requirements-card,
.process-card,
.security-card {
    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 14px;

    box-shadow:
            0 7px 25px rgba(0,0,0,.04);
}

.requirements-card {
    padding: 21px;
}

.requirements-card h2,
.process-card h2,
.security-card h2 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;
}

.card-description {
    margin: 0 0 17px;

    color: var(--text-muted);

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   REQUIREMENT
========================================================= */

.requirement {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 0;

    border-top: 1px solid var(--border-light);
}

.requirement-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--surface-hover);

    color: var(--purple-primary);

    font-size: 13px;
}

.requirement strong {
    display: block;

    margin-bottom: 3px;

    color: var(--text);

    font-size: 9px;
}

.requirement span {
    display: block;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.4;
}

.requirement-check {
    margin-left: auto;

    color: #22c55e;

    font-size: 12px;
}


/* =========================================================
   PROCESS
========================================================= */

.process-card {
    padding: 19px;
}

.process-step {
    position: relative;

    display: flex;

    gap: 10px;

    padding-bottom: 17px;
}

.process-step:last-child {
    padding-bottom: 0;
}

.process-step:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 13px;
    top: 28px;
    bottom: 3px;

    width: 1px;

    background: var(--border);
}

.process-number {
    position: relative;
    z-index: 2;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
            rgba(143,50,255,.10);

    border: 1px solid
    rgba(143,50,255,.18);

    color: var(--purple-primary);

    font-size: 8px;
    font-weight: 700;
}

.process-step strong {
    display: block;

    margin-bottom: 3px;

    color: var(--text);

    font-size: 9px;
}

.process-step span {
    display: block;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.5;
}


/* =========================================================
   SECURITY CARD
========================================================= */

.security-card {
    padding: 18px;

    margin-top: 15px;

    background:
            linear-gradient(
                    135deg,
                    rgba(34,197,94,.06),
                    transparent
            ),
            var(--surface);
}

.security-header {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;
}

.security-icon {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(34,197,94,.10);

    color: #22c55e;

    font-size: 12px;
}

.security-header strong {
    color: var(--text);

    font-size: 9px;
}

.security-card p {
    margin: 0;

    color: var(--text-muted);

    font-size: 8px;

    line-height: 1.6;
}


/* =========================================================
   BOTTOM NOTICE
========================================================= */

.kyc-notice {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 17px;

    margin-top: 20px;

    background: rgba(143,50,255,.05);

    border: 1px solid
    rgba(143,50,255,.12);

    border-radius: 11px;
}

.kyc-notice > i {
    color: var(--purple-primary);

    font-size: 17px;
}

.kyc-notice strong {
    display: block;

    margin-bottom: 2px;

    color: var(--text);

    font-size: 9px;
}

.kyc-notice span {
    color: var(--text-muted);

    font-size: 8px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .kyc-hero {
        grid-template-columns: 1fr;
    }

    .kyc-hero-visual {
        display: none;
    }

    .kyc-benefits {
        grid-template-columns: 1fr;
    }

    .kyc-info-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 576px) {

    .kyc-info-heading h1 {
        font-size: 21px;
    }

    .kyc-hero {
        padding: 20px;
    }

    .kyc-hero h2 {
        font-size: 18px;
    }

    .kyc-notice {
        align-items: flex-start;
    }

}

.kyc-progress-card {
    border: 1px solid #e8eaf0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(31, 35, 50, 0.06);
}
.kyc-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    border-bottom: 1px solid #edf0f4;
}
.kyc-progress-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}
.kyc-progress-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(111, 78, 246, 0.1);
    color: #6f4ef6;
    font-size: 21px;
}
.kyc-progress-heading h2 {
    margin: 0 0 4px;
    color: #191b25;
    font-size: 18px;
    font-weight: 700;
}
.kyc-progress-heading p {
    margin: 0;
    color: #8a8f9d;
    font-size: 13px;
}
.kyc-progress-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(24, 210, 107, 0.08);
    color: #159b53;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.kyc-progress-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #18d26b;
    box-shadow: 0 0 0 4px rgba(24, 210, 107, 0.1);
}
.kyc-progress-list {
    padding: 10px 18px;
}
.kyc-progress-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 10px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #f0f1f4;
    transition: all 0.2s ease;
}
.kyc-progress-item:last-child {
    border-bottom: 0;
}
a.kyc-progress-item:hover {
    padding-left: 15px;
    padding-right: 5px;
    border-radius: 14px;
}
.kyc-progress-item-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 19px;
}
.kyc-progress-item-icon.warning {
    background: rgba(245, 166, 35, 0.12);
    color: #e09a17;
}
.kyc-progress-item-icon.primary {
    background: rgba(111, 78, 246, 0.1);
    color: #6f4ef6;
}
.kyc-progress-item-icon.teal {
    background: rgba(0, 212, 170, 0.11);
    color: #00a98a;
}
.kyc-progress-item-icon.pending {
    background: rgba(245, 166, 35, 0.1);
    color: #e09a17;
}
.kyc-progress-item-icon.success {
    background: rgba(24, 210, 107, 0.1);
    color: #18a957;
}
.kyc-progress-item-content {
    min-width: 0;
    flex: 1;
}
.kyc-progress-item-content strong {
    display: block;
    margin-bottom: 4px;
    color: #242632;
    font-size: 14px;
    font-weight: 700;
}
.kyc-progress-item-content span {
    display: block;
    color: #8b909d;
    font-size: 12px;
    line-height: 1.45;
}
.kyc-progress-item-action {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6f4ef6;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.kyc-progress-item-action i {
    font-size: 15px;
}
.action-label {
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(111, 78, 246, 0.08);
}
.pending-text {
    color: #e09a17;
}
.success-text {
    color: #159b53;
}
.kyc-progress-footer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 8px 18px 18px;
    padding: 15px 16px;
    border: 1px solid rgba(0, 212, 170, 0.18);
    border-radius: 14px;
    background: rgba(0, 212, 170, 0.045);
}
.kyc-progress-footer-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 212, 170, 0.12);
    color: #00a98a;
    font-size: 14px;
}
.kyc-progress-footer strong {
    display: block;
    margin-bottom: 3px;
    color: #30333d;
    font-size: 12px;
}
.kyc-progress-footer span {
    display: block;
    color: #858b97;
    font-size: 11px;
    line-height: 1.5;
}
@media (max-width: 767px) {
    .kyc-progress-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }
    .kyc-progress-status {
        margin-left: 62px;
    }
    .kyc-progress-list {
        padding: 8px 12px;
    }
    .kyc-progress-item {
        gap: 11px;
        padding: 15px 7px;
    }
    .kyc-progress-item-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 17px;
    }
    .kyc-progress-item-content strong {
        font-size: 13px;
    }
    .kyc-progress-item-content span {
        font-size: 11px;
    }
    .kyc-progress-item-action {
        font-size: 11px;
    }
    .action-label {
        display: none;
    }
    .kyc-progress-footer {
        margin: 8px 12px 12px;
    }
}


/* =========================================================
   DOCUMENTS PAGE
========================================================= */

.documents-content {
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================================
   PAGE HEADING
========================================================= */

.documents-heading {
    margin-bottom: 22px;
}

.documents-heading h1 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 26px;
    font-weight: 700;
}

.documents-heading p {
    margin: 0;

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   SECURITY NOTICE
========================================================= */

.security-notice {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 16px;

    margin-bottom: 4px;

    border-radius: 12px;

    background: var(--badge-bg);
    border: 1px solid var(--badge-border);
}

.notice-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);
    color: var(--purple-primary);

    font-size: 16px;
}

.security-notice strong {
    display: block;

    color: var(--text);

    font-size: 12px;

    margin-bottom: 2px;
}

.security-notice span {
    display: block;

    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   CARD
========================================================= */

.document-card {
    background: var(--surface);

    border: 1px solid var(--border-light);

    border-radius: 16px;

    padding: 24px;

    box-shadow:
            0 8px 30px rgba(0, 0, 0, .08);

    transition:
            background-color .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
}

[data-theme="dark"] .document-card {
    box-shadow:
            0 10px 40px rgba(100, 0, 255, .06);
}

.document-card:hover {
    border-color: var(--badge-border);
}


/* =========================================================
   CARD HEADING
========================================================= */

.document-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;
}

.document-heading-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--icon-bg);
    color: var(--icon-color);

    font-size: 18px;
}

.document-card-heading h2 {
    margin: 0 0 3px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.document-card-heading p {
    margin: 0;

    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   UPLOAD ZONE
========================================================= */

.upload-zone {
    min-height: 285px;

    padding: 35px 20px;

    border-radius: 13px;

    border: 1.5px dashed var(--badge-border);

    background:
            radial-gradient(
                    circle at 50% 0%,
                    rgba(143, 50, 255, .08),
                    transparent 50%
            ),
            var(--surface);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    cursor: pointer;

    transition:
            border-color .2s ease,
            background-color .2s ease,
            transform .2s ease;
}

.upload-zone:hover,
.upload-zone.dragging {
    border-color: var(--purple-primary);

    background:
            radial-gradient(
                    circle at 50% 0%,
                    rgba(143, 50, 255, .15),
                    transparent 55%
            ),
            var(--surface-hover);
}

.upload-zone.dragging {
    transform: scale(1.005);
}


/* =========================================================
   UPLOAD ICON
========================================================= */

.upload-icon {
    width: 62px;
    height: 62px;

    margin-bottom: 15px;

    border-radius: 16px;

    background: var(--icon-bg);

    color: var(--purple-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;

    box-shadow:
            0 10px 30px var(--purple-glow);
}


/* =========================================================
   UPLOAD TEXT
========================================================= */

.upload-zone h3 {
    margin: 0 0 5px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.upload-zone > p {
    margin: 0 0 15px;

    color: var(--text-muted);

    font-size: 11px;
}


/* =========================================================
   BROWSE BUTTON
========================================================= */

.browse-button {
    height: 39px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border: 0;

    border-radius: 8px;

    background:
            linear-gradient(
                    135deg,
                    var(--purple-primary),
                    var(--purple-dark)
            );

    color: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
            0 6px 18px var(--purple-glow);
}

.browse-button:hover {
    box-shadow:
            0 8px 25px var(--purple-glow-hover);
}


/* =========================================================
   UPLOAD HELP
========================================================= */

.upload-help {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 17px;
}

.upload-help span {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 5px 8px;

    border-radius: 20px;

    background: var(--surface-hover);

    color: var(--text-muted);

    font-size: 9px;
}

.upload-help i {
    color: var(--purple-primary);
}


/* =========================================================
   SELECTED FILES
========================================================= */

.selected-files {
    display: none;

    margin-top: 15px;

    padding: 12px;

    border-radius: 10px;

    background: var(--surface-hover);

    border: 1px solid var(--border-light);
}

.selected-file {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 0;

    border-bottom: 1px solid var(--border-light);
}

.selected-file:last-child {
    border-bottom: 0;
}

.selected-file-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
}

.selected-file-icon.pdf {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}

.selected-file-icon.image {
    background: rgba(59, 130, 246, .10);
    color: #3b82f6;
}

.selected-file-icon.document {
    background: var(--icon-bg);
    color: var(--purple-primary);
}

.selected-file-info {
    min-width: 0;
    flex: 1;
}

.selected-file-info strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: 11px;
}

.selected-file-info span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;

    margin-top: 2px;
}

.remove-selected {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;
}

.remove-selected:hover {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}


/* =========================================================
   UPLOAD ACTIONS
========================================================= */

.upload-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 18px;
}

.clear-button {
    height: 40px;

    padding: 0 15px;

    border-radius: 8px;

    border: 1px solid var(--border);

    background: var(--button-bg);

    color: var(--button-text);

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

.clear-button:hover {
    background: var(--surface-hover);
}

.upload-button {
    height: 40px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border: 0;
    border-radius: 8px;

    background:
            linear-gradient(
                    135deg,
                    var(--purple-primary),
                    var(--purple-dark)
            );

    color: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
            0 6px 18px var(--purple-glow);
}

.upload-button:hover {
    box-shadow:
            0 8px 25px var(--purple-glow-hover);
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.requirement-item {
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 13px 0;

    border-bottom: 1px solid var(--border-light);
}

.requirement-item:last-of-type {
    border-bottom: 0;
}

.requirement-status {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
}

.requirement-status.completed {
    background: rgba(34, 197, 94, .10);
    color: #22c55e;
}

.requirement-status.pending {
    background: var(--icon-bg);
    color: var(--purple-primary);
}

.requirement-status.optional {
    background: var(--surface-hover);
    color: var(--text-muted);
}

.requirement-item strong {
    display: block;

    color: var(--text);

    font-size: 11px;

    margin-bottom: 2px;
}

.requirement-item span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   REQUIREMENTS FOOTER
========================================================= */

.requirements-footer {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    margin-top: 17px;
    padding: 11px;

    border-radius: 9px;

    background: var(--badge-bg);

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.5;
}

.requirements-footer i {
    color: var(--purple-primary);

    margin-top: 1px;
}


/* =========================================================
   UPLOADED DOCUMENTS
========================================================= */

.uploaded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 5px;
}

.document-count {
    padding: 6px 10px;

    border-radius: 20px;

    background: var(--badge-bg);
    border: 1px solid var(--badge-border);

    color: var(--badge-text);

    font-size: 9px;
    font-weight: 600;
}


/* =========================================================
   DOCUMENT ROW
========================================================= */

.document-row {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 14px 0;

    border-top: 1px solid var(--border-light);
}

.file-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}

.file-icon.pdf {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}

.file-icon.image {
    background: rgba(59, 130, 246, .10);
    color: #3b82f6;
}

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

.file-info strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--text);

    font-size: 11px;

    margin-bottom: 3px;
}

.file-info span {
    color: var(--text-muted);

    font-size: 9px;
}


/* =========================================================
   FILE STATUS
========================================================= */

.file-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 8px;

    border-radius: 20px;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}

.file-status.verified {
    background: rgba(34, 197, 94, .10);
    color: #22c55e;
}

.file-status.reviewing {
    background: rgba(245, 158, 11, .10);
    color: #f59e0b;
}


/* =========================================================
   FILE ACTIONS
========================================================= */

.file-action {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    border: 0;

    border-radius: 7px;

    background: var(--surface-hover);

    color: var(--text-muted);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
            color .15s ease,
            background-color .15s ease;
}

.file-action:hover {
    background: var(--icon-bg);
    color: var(--purple-primary);
}

.file-action.danger:hover {
    background: rgba(239, 68, 68, .10);
    color: #ef4444;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767.98px) {

    .documents-heading h1 {
        font-size: 22px;
    }

    .document-card {
        padding: 18px;
        border-radius: 13px;
    }

    .security-notice {
        align-items: flex-start;
    }

    .upload-zone {
        min-height: 260px;
        padding: 25px 15px;
    }

    .upload-help {
        gap: 5px;
    }

    .upload-help span:last-child {
        width: 100%;
        justify-content: center;
    }

    .upload-actions {
        flex-direction: column-reverse;
    }

    .upload-actions button {
        width: 100%;
    }

    .uploaded-header {
        align-items: flex-start;
        gap: 10px;
    }

    .document-row {
        flex-wrap: wrap;
    }

    .file-info {
        flex: 1 1 calc(100% - 55px);
    }

    .file-status {
        margin-left: 53px;
    }

    .file-action {
        margin-left: 0;
    }
}


@media (max-width: 450px) {

    .document-card-heading {
        align-items: flex-start;
    }

    .document-heading-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 15px;
    }

    .document-card-heading h2 {
        font-size: 14px;
    }

    .document-card-heading p {
        font-size: 9px;
    }

    .upload-zone h3 {
        font-size: 14px;
    }

    .upload-zone > p {
        font-size: 10px;
    }

    .uploaded-header {
        flex-direction: column;
    }

    .document-row {
        gap: 9px;
    }
}