<!-- FINANCIAL DASHBOARD WORKSPACE -->
<div class="dashboard-viewport">
    <!-- Sidebar Navigation -->
    <aside class="sidebar">
        <div class="brand">✨ ApexVault</div>
        <nav class="menu">
            <a href="#" class="menu-item active">📊 Overview</a>
            <a href="#" class="menu-item">💸 Clearances</a>
            <a href="#" class="menu-item">🛡️ Nodes</a>
            <a href="#" class="menu-item" onclick="window.location.href=window.location.origin">🚪 Terminate Session</a>
        </nav>
    </aside>

    <!-- Main Content Space -->
    <main class="main-content">
        <header class="content-header">
            <div>
                <h1>Liquidity Control Center</h1>
                <p>Node Clearance Status: <span class="status-badge">Active</span></p>
            </div>
            <div class="user-profile">
                <span class="avatar">💼</span>
                <span>System Client</span>
            </div>
        </header>

        <!-- Metric Grid -->
        <section class="metrics-grid">
            <div class="card">
                <h3>Available Settlement Balance</h3>
                <div class="value">$14,284,500.00</div>
                <span class="trend positive">↑ +2.4% from internal pool</span>
            </div>
            <div class="card">
                <h3>Escrowed Cleared Ledger</h3>
                <div class="value">$3,500,000.00</div>
                <span class="trend neutral">0.00% pending batching</span>
            </div>
        </section>
    </main>
</div>

<style>
/* ABSOLUTE FORCE REMOVAL OF WORDPRESS INTERFERENCE */
#wpadminbar, .ab-sub-wrapper, #wp-admin-bar-root-default { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; }
html { margin-top: 0px !important; padding-top: 0px !important; }
body { top: 0 !important; }

:root {
    --bg-main: #070a13;
    --bg-surface: #0f1626;
    --border-color: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #64748b;
    --accent: #2563eb;
}

body, html { margin: 0; padding: 0; background: var(--bg-main); font-family: -apple-system, sans-serif; color: var(--text-primary); height: 100vh; }
.dashboard-viewport { display: flex; height: 100vh; }

.sidebar { width: 260px; background: var(--bg-surface); border-right: 1px solid var(--border-color); padding: 30px 20px; display: flex; flex-direction: column; }
.brand { font-size: 1.3rem; font-weight: 700; margin-bottom: 40px; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu-item { color: var(--text-secondary); text-decoration: none; padding: 12px; border-radius: 6px; font-weight: 500; transition: 0.2s; }
.menu-item:hover, .menu-item.active { background: rgba(37, 99, 235, 0.1); color: var(--text-primary); }

.main-content { flex: 1; padding: 40px; overflow-y: auto; }
.content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.content-header h1 { margin: 0; font-size: 1.8rem; }
.content-header p { margin: 5px 0 0 0; color: var(--text-secondary); }
.status-badge { color: #4ade80; font-weight: 600; background: rgba(74, 222, 128, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
.user-profile { display: flex; align-items: center; gap: 10px; background: var(--bg-surface); padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color); }

.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card { background: var(--bg-surface); border: 1px solid var(--border-color); padding: 24px; border-radius: 12px; }
.card h3 { margin: 0 0 12px 0; font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.trend { font-size: 0.85rem; }
.trend.positive { color: #4ade80; }
.trend.neutral { color: #94a3b8; }
</style>