:root {
    --bg-main: #0b0e11;
    --sidebar-bg: #12161a;
    --card-bg: #181a20;
    --card-border: rgba(255, 255, 255, 0.06);
    --primary-gradient: linear-gradient(135deg, #f0b90b 0%, #fcd535 100%);
    --secondary-gradient: linear-gradient(135deg, #2b3139 0%, #1e2329 100%);
    --text-main: #eaecef;
    --text-muted: #848e9c;
    --accent-purple: #f0b90b; /* Map purple selectors to gold for the Binance aesthetic */
    --success-green: #0ecb81;
    --danger-red: #f6465d;
    --input-bg: #2b3139;
    --gold-glow: 0 4px 20px rgba(240, 185, 11, 0.15);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    word-break: break-word; 
}

body { 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    display: flex; 
    height: 100vh; 
    overflow: hidden; 
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: #2b3139;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Remove Number Input Spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Sidebar styling */
.sidebar { 
    width: 260px; 
    background: var(--sidebar-bg); 
    border-right: 1px solid var(--card-border); 
    display: flex; 
    flex-direction: column; 
    padding: 20px 0; 
    flex-shrink: 0;
}
.sidebar-header {
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 20px;
    margin-bottom: 10px;
}
.logo { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    font-weight: 800; 
    font-size: 1.3rem; 
    padding: 0 25px; 
    color: #fff; 
    letter-spacing: 0.5px;
}
.logo i { 
    color: var(--accent-purple); 
    font-size: 1.5rem; 
    text-shadow: var(--gold-glow);
}
.side-nav { 
    flex: 1; 
}
.side-nav a { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 14px 25px; 
    color: var(--text-muted); 
    text-decoration: none; 
    font-size: 0.95rem; 
    font-weight: 500; 
    transition: all 0.2s ease;
}
.side-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.02);
}
.side-nav a.active { 
    color: #fff; 
    background: rgba(240, 185, 11, 0.08); 
    border-left: 4px solid var(--accent-purple); 
    font-weight: 600;
}

.sidebar-footer {
    padding: 0 20px;
}
.status-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px 15px;
}
.status-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-green);
    box-shadow: 0 0 8px var(--success-green);
}
.status-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    margin-top: 4px;
}

/* Main Content area */
.main-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    background-color: var(--bg-main);
}
.top-header { 
    padding: 20px 40px; 
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search-container { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    padding: 10px 18px; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    width: 400px; 
    transition: all 0.3s ease;
}
.search-container:focus-within {
    border-color: var(--accent-purple);
    box-shadow: var(--gold-glow);
}
.search-container i {
    color: var(--text-muted);
}
.search-container input { 
    background: none; 
    border: none; 
    color: #fff; 
    width: 100%; 
    outline: none; 
    font-size: 0.9rem;
}
.content-body { 
    flex: 1; 
    padding: 30px 40px; 
    overflow-y: auto; 
}

/* Mobile top & bottom navigation structures */
.mobile-top-bar {
    display: none;
}
.mobile-bottom-nav {
    display: none;
}

/* Tabs Navigation */
.dash-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}
.dash-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}
.dash-tab-btn.active {
    background: var(--card-bg);
    color: var(--accent-purple);
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dashboard-section {
    display: none;
    animation: fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.dashboard-section.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grids & Cards */
.primary-layout { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 24px; 
}
.primary-column { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}
.secondary-column { 
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stats-row { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
}
.stat-card { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    padding: 22px; 
    border-radius: 14px; 
    min-height: 130px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 185, 11, 0.2);
}
.balance-card { 
    background: linear-gradient(135deg, #1e2329 0%, #12161a 100%); 
    border: 1px solid var(--accent-purple); 
    box-shadow: var(--gold-glow); 
}
.balance-card .card-value {
    color: var(--accent-purple);
    text-shadow: 0 0 10px rgba(240, 185, 11, 0.1);
}
.card-label { 
    font-size: 0.8rem; 
    font-weight: 600; 
    color: var(--text-muted); 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-label i {
    font-size: 0.95rem;
}
.card-value { 
    font-size: 1.7rem; 
    font-weight: 800; 
    color: #fff;
    margin: 8px 0;
}
.card-sub { 
    font-size: 0.75rem; 
    color: var(--text-muted); 
}

.action-card { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    padding: 22px; 
    border-radius: 14px; 
}
.action-card h3 { 
    font-size: 0.95rem; 
    margin-bottom: 18px; 
    font-weight: 800; 
    color: #fff; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 3px solid var(--accent-purple);
    padding-left: 10px;
}

/* Mining Hub Banner */
.mining-hub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(24, 26, 32, 0.9) 0%, rgba(18, 22, 26, 0.95) 100%);
    border: 1px solid var(--card-border);
}
.hub-info h3 {
    border: none;
    padding-left: 0;
    margin-bottom: 6px;
}
.hub-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.btn-start {
    background: var(--primary-gradient);
    border: none;
    color: #000;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: var(--gold-glow);
}
.btn-start:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
.btn-start.active {
    background: var(--danger-red);
    color: #fff;
    box-shadow: 0 4px 15px rgba(246, 70, 93, 0.3);
}

/* Market Watch Ticker Widget */
.ticker-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 22px;
}
.ticker-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}
.ticker-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid var(--card-border);
}
.ticker-pair {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.ticker-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    color: #fff;
}
.ticker-change {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
}
.ticker-change.up { color: var(--success-green); }
.ticker-change.down { color: var(--danger-red); }

/* Quick Swap/Convert Widget */
.converter-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 22px;
}
.convert-input-box {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}
.convert-input-box input {
    background: none;
    border: none;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    outline: none;
    width: 60%;
}
.convert-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-border);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}
.swap-icon-container {
    display: flex;
    justify-content: center;
    margin: 4px 0;
}
.swap-icon-container i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2b3139;
    color: var(--accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    border: 1px solid var(--card-border);
    transition: transform 0.3s;
}
.swap-icon-container i:hover {
    transform: rotate(180deg);
}

/* Portfolio Allocation */
.allocation-panel {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid var(--card-border);
    margin-top: 15px;
}
.allocation-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.allocation-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 5px;
    display: flex;
    overflow: hidden;
}
.alloc-part {
    height: 100%;
}
.alloc-avail { background: var(--accent-purple); }
.alloc-staked { background: var(--success-green); }
.alloc-locked { background: #818cf8; }

/* User Profile Section */
.profile-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 25px;
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 22px;
    margin-bottom: 22px;
}
.profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #000;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--gold-glow);
}
.profile-meta h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}
.profile-meta p {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.user-badge-container {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.user-vip-badge {
    background: #2b3139;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
}
.user-verified-badge {
    background: rgba(14, 203, 129, 0.1);
    color: var(--success-green);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}
.profile-detail-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 15px;
}
.profile-detail-item label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.profile-detail-item span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    word-break: break-all;
}

.security-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.security-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--card-border);
    padding: 12px 18px;
    border-radius: 10px;
}
.security-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.security-left i {
    font-size: 1.1rem;
}
.security-left i.success { color: var(--success-green); }
.security-left i.warning { color: var(--accent-purple); }
.security-label {
    font-size: 0.85rem;
    font-weight: 600;
}
.security-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Recent Transactions */
.full-tx-list {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}
.tx-row { 
    display: flex; 
    align-items: center; 
    padding: 15px 0; 
    border-bottom: 1px solid var(--card-border); 
}
.tx-icon { 
    width: 36px; 
    height: 36px; 
    background: rgba(255, 255, 255, 0.04); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: 15px; 
    flex-shrink: 0;
}
.tx-icon.confirmed { color: var(--success-green); }
.tx-icon.pending { color: var(--accent-purple); }
.tx-info { 
    flex: 1; 
    min-width: 0; 
}
.tx-hash { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: #fff; 
    display: block; 
    margin-bottom: 3px; 
}
.tx-addr { 
    color: var(--accent-purple); 
    font-weight: 600; 
}
.tx-date { 
    font-size: 0.75rem; 
    color: var(--text-muted); 
}
.conf-badge { 
    color: var(--success-green); 
    font-weight: 700; 
}
.tx-track-side { 
    text-align: right; 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
}
.tx-amount { 
    font-weight: 800; 
    font-size: 1rem; 
}
.tx-fee { 
    font-size: 0.7rem; 
    color: var(--text-muted); 
    font-family: 'JetBrains Mono', monospace; 
}
.btn-track { 
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid var(--card-border); 
    color: #fff; 
    padding: 5px 12px; 
    border-radius: 6px; 
    font-size: 0.7rem; 
    font-weight: 700; 
    cursor: pointer; 
    transition: 0.2s; 
    align-self: flex-end; 
}
.btn-track:hover { 
    background: var(--accent-purple); 
    color: #000; 
    border-color: var(--accent-purple);
}
.amount-plus { color: var(--success-green); }
.amount-minus { color: var(--danger-red); }

/* Premium Transfers Layout */
.transfer-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 24px; 
}
.premium-card { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    border-radius: 14px; 
    padding: 22px;
}

/* Form inputs */
.premium-input-group { 
    margin-bottom: 18px; 
}
.premium-input-group label { 
    display: block; 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: var(--text-muted); 
    margin-bottom: 8px; 
    letter-spacing: 0.5px; 
    text-transform: uppercase; 
}
.premium-input-wrapper { 
    display: flex; 
    align-items: center; 
    background: var(--input-bg); 
    border: 1px solid var(--card-border); 
    border-radius: 10px; 
    padding: 4px 15px; 
    transition: all 0.3s ease; 
}
.premium-input-wrapper:focus-within { 
    border-color: var(--accent-purple); 
    box-shadow: var(--gold-glow); 
}
.premium-input-wrapper i { 
    color: var(--text-muted); 
    font-size: 1rem; 
    margin-right: 12px; 
}
.premium-input-wrapper input { 
    background: transparent; 
    border: none; 
    color: #fff; 
    font-size: 1rem; 
    font-family: 'JetBrains Mono', monospace; 
    padding: 10px 0; 
    flex: 1;
    min-width: 0;
    outline: none; 
}
.currency-badge {
    background: var(--primary-gradient);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #000;
    margin-left: 10px;
    box-shadow: var(--gold-glow);
    white-space: nowrap;
    flex-shrink: 0;
}
.premium-input-wrapper .premium-select { 
    background: transparent; 
    border: none; 
    color: #fff; 
    font-size: 0.95rem; 
    padding: 10px 0; 
    width: 100%; 
    outline: none; 
    cursor: pointer; 
}
.premium-input-wrapper .premium-select option { 
    background-color: var(--card-bg); 
    color: #fff; 
}
.btn-premium { 
    width: 100%; 
    padding: 14px; 
    background: var(--primary-gradient); 
    border: none; 
    border-radius: 10px; 
    color: #000; 
    font-weight: 800; 
    font-size: 0.95rem; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 8px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    box-shadow: var(--gold-glow); 
}
.btn-premium:hover { 
    transform: translateY(-2px); 
    filter: brightness(1.1); 
}

/* Portfolio elements */
.wallet-list { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    max-height: 250px; 
    overflow-y: auto; 
    margin-bottom: 15px; 
}
.wallet-item { 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid var(--card-border); 
    border-radius: 10px; 
    padding: 12px 15px; 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}
.wallet-item:hover { 
    background: rgba(240, 185, 11, 0.05); 
    border-color: rgba(240, 185, 11, 0.2); 
    transform: translateX(4px); 
}
.wallet-item.active { 
    background: rgba(240, 185, 11, 0.06); 
    border-left: 4px solid var(--accent-purple); 
    border-color: rgba(240, 185, 11, 0.2); 
}
.wallet-icon { 
    width: 36px; 
    height: 36px; 
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.1rem; 
    color: var(--text-muted); 
    margin-right: 12px; 
}
.wallet-item.active .wallet-icon { 
    background: var(--primary-gradient); 
    color: #000; 
}
.wallet-name { 
    font-weight: 700; 
    font-size: 0.95rem; 
    color: #fff; 
}
.wallet-status { 
    font-size: 0.75rem; 
    color: var(--text-muted); 
}

/* Bottom Nodes Bar */
.network-nodes-bar { 
    display: flex; 
    gap: 12px; 
    padding: 15px 30px; 
    background: #080a12; 
    border-top: 1px solid var(--card-border); 
    overflow-x: auto; 
}
.node-mini-card { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    padding: 8px 15px; 
    border-radius: 8px; 
    min-width: 130px; 
}
.node-id { 
    font-weight: 800; 
    font-size: 0.8rem; 
    color: var(--accent-purple); 
}
.node-ver { 
    font-size: 0.7rem; 
    color: var(--text-muted); 
}

/* Receive Funds Premium QR box */
.receive-premium { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
}
.qr-container-premium { 
    width: 150px; 
    height: 150px; 
    background: #ffffff; 
    border-radius: 12px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 8px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); 
}
.qr-container-premium img, .qr-container-premium canvas { 
    max-width: 100%; 
    max-height: 100%;
    margin: auto;
}
.address-box-premium { 
    background: var(--input-bg); 
    border: 1px solid var(--card-border); 
    padding: 12px 15px; 
    border-radius: 10px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    gap: 10px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}
.address-box-premium:hover { 
    border-color: var(--accent-purple); 
    background: rgba(240, 185, 11, 0.05); 
}

/* Management Section */
.management-section { 
    background: rgba(255, 255, 255, 0.01); 
    border-radius: 10px; 
    padding: 12px; 
    margin-bottom: 15px; 
    border: 1px solid var(--card-border); 
}
.management-label { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.75rem; 
    color: var(--text-muted); 
    font-weight: 700; 
    margin-bottom: 10px; 
}
.active-wallet-badge { 
    background: rgba(240, 185, 11, 0.1); 
    color: var(--accent-purple); 
    padding: 3px 6px; 
    border-radius: 4px; 
    font-weight: 800; 
}
.management-actions { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px; 
}
.btn-action { 
    background: rgba(255, 255, 255, 0.04); 
    border: 1px solid var(--card-border); 
    color: #fff; 
    padding: 8px; 
    border-radius: 6px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    font-size: 0.8rem; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
}
.btn-action:hover { 
    background: rgba(255, 255, 255, 0.08); 
}
.btn-action.danger:hover { 
    background: rgba(246, 70, 93, 0.15); 
    color: var(--danger-red); 
    border-color: rgba(246, 70, 93, 0.2); 
}
.portfolio-footer { 
    display: flex; 
    gap: 10px; 
}
.btn-premium.outline { 
    background: transparent; 
    border: 1px solid var(--accent-purple); 
    color: var(--accent-purple); 
    box-shadow: none; 
    padding: 10px; 
}
.btn-premium.outline:hover { 
    background: rgba(240, 185, 11, 0.05); 
}

/* Staking statistics */
.lock-option {
    transition: all 0.2s ease;
}
.lock-option:hover {
    border-color: var(--accent-purple);
    transform: translateY(-2px);
}

/* Toast alert */
.toast { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    background: var(--accent-purple); 
    color: #000; 
    padding: 12px 22px; 
    border-radius: 8px; 
    transform: translateY(200px); 
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
    font-weight: 700;
    box-shadow: var(--gold-glow);
    z-index: 9999;
}
.toast.show { 
    transform: translateY(0); 
}

/* Terminal Console widget */
.terminal-card { 
    background: #080a10; 
    border: 1px solid var(--card-border); 
    border-radius: 12px; 
    height: 400px; 
    display: flex; 
    flex-direction: column; 
    font-family: 'JetBrains Mono', monospace; 
}
.terminal-header { 
    background: #11141b; 
    padding: 8px 15px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: var(--text-muted); 
    border-radius: 12px 12px 0 0; 
    border-bottom: 1px solid var(--card-border);
}
.terminal-body { 
    flex: 1; 
    padding: 15px; 
    overflow-y: auto; 
    color: var(--accent-purple); 
    font-size: 0.85rem; 
    line-height: 1.4; 
}
.terminal-footer { 
    display: flex; 
    align-items: center; 
    padding: 8px 15px; 
    background: #11141b; 
    border-radius: 0 0 12px 12px; 
    border-top: 1px solid var(--card-border);
}
.terminal-footer span { 
    color: var(--accent-purple); 
    margin-right: 8px; 
    font-weight: bold; 
}
.terminal-footer input { 
    background: none; 
    border: none; 
    color: #fff; 
    width: 100%; 
    outline: none; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 0.85rem;
}

.staking-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-premium.danger-outline {
    background: transparent;
    border: 1px solid var(--danger-red);
    color: var(--danger-red);
    box-shadow: none;
}
.btn-premium.danger-outline:hover {
    background: rgba(246, 70, 93, 0.1);
    box-shadow: 0 4px 15px rgba(246, 70, 93, 0.2);
}

/* ---------------------------------------------------------
   RESPONSIVE DESIGN (Binance App Mobile Feel)
   --------------------------------------------------------- */
@media (max-width: 1200px) {
    .primary-layout { 
        grid-template-columns: 1fr; 
    }
}

@media (max-width: 768px) {
    body { 
        flex-direction: column; 
        overflow: auto; 
        height: auto; 
    }

    /* Hide standard desktop sidebar */
    .sidebar { 
        display: none; 
    }

    /* Hide standard top header */
    .top-header {
        display: none;
    }

    /* Mobile header */
    .mobile-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--sidebar-bg);
        padding: 15px 20px;
        border-bottom: 1px solid var(--card-border);
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
    }
    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 1.15rem;
        color: #fff;
    }
    .mobile-logo i {
        color: var(--accent-purple);
        font-size: 1.35rem;
    }
    .mobile-profile-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary-gradient);
        color: #000;
        font-weight: bold;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Mobile floating bottom navbar */
    .mobile-bottom-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: var(--sidebar-bg);
        border-top: 1px solid var(--card-border);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        z-index: 2000;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
    }
    .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        gap: 4px;
        transition: all 0.2s;
    }
    .mobile-nav-btn i {
        font-size: 1.15rem;
    }
    .mobile-nav-btn span {
        font-size: 0.65rem;
        font-weight: 600;
    }
    .mobile-nav-btn.active {
        color: var(--accent-purple);
    }

    /* Adjust main content for mobile bottom nav space */
    .main-content {
        height: auto;
        overflow: visible;
        padding-bottom: 74px; /* offset bottom nav height + extra space */
    }
    .content-body {
        padding: 20px 15px;
    }
    
    /* Desktop Tab Navigation hidden on mobile */
    .dash-tabs {
        display: none;
    }

    /* Grid layouts scale down */
    .stats-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .transfer-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .profile-details-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .management-actions {
        grid-template-columns: 1fr;
    }
    .portfolio-footer {
        flex-direction: column;
    }
    .staking-actions {
        flex-direction: column;
        gap: 10px;
    }

    /* General card paddings */
    .action-card, .stat-card, .premium-card, .ticker-card, .converter-card, .profile-card {
        padding: 16px;
    }
    
    .card-value {
        font-size: 1.5rem;
    }
    
    /* Center text flow for transactions */
    .tx-flow-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tx-flow-center {
        margin: 5px auto;
    }
}

/* Premium Portfolios Layout */
.portfolio-premium-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 25px;
    align-items: start;
}

@media (max-width: 992px) {
    .portfolio-premium-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.portfolio-left-column, .portfolio-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Aggregate Card */
.portfolio-aggregate-card {
    background: linear-gradient(135deg, rgba(240, 185, 11, 0.15) 0%, rgba(24, 26, 32, 0.9) 100%);
    border: 1px solid rgba(240, 185, 11, 0.3);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    overflow: hidden;
}

.portfolio-aggregate-card::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f550';
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 8rem;
    color: rgba(240, 185, 11, 0.03);
    pointer-events: none;
}

.portfolio-aggregate-card .agg-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.portfolio-aggregate-card .agg-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    margin: 10px 0 5px 0;
}

.portfolio-aggregate-card .agg-value small {
    font-size: 1.2rem;
    color: var(--accent-purple);
}

.portfolio-aggregate-card .agg-footer {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}

.portfolio-aggregate-card .agg-stat label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.portfolio-aggregate-card .agg-stat span {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

/* Wallet Cards Grid */
.wallet-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Glassmorphic Credit Card Style Wallet Item */
.crypto-card-premium {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.crypto-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(240, 185, 11, 0.1), transparent 60%);
    pointer-events: none;
}

.crypto-card-premium.active {
    border-color: var(--accent-purple);
    background: rgba(240, 185, 11, 0.04);
    box-shadow: 0 4px 20px rgba(240, 185, 11, 0.08);
}

.crypto-card-premium:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 185, 11, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

.crypto-card-premium .card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.crypto-card-premium .card-chip-icon {
    width: 30px;
    height: 24px;
    background: linear-gradient(135deg, #f3d06e 0%, #c49219 100%);
    border-radius: 4px;
    position: relative;
}

.crypto-card-premium .card-chip-icon::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 14px;
    height: 16px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
}

.crypto-card-premium .card-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-purple);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.crypto-card-premium .card-mid {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
}

.crypto-card-premium .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.crypto-card-premium .card-wallet-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

.crypto-card-premium .card-addr-preview {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.crypto-card-premium .card-active-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 8px;
    height: 8px;
    background: var(--success-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--success-green);
    display: none;
}

.crypto-card-premium.active .card-active-indicator {
    display: block;
}

/* Inspector styles */
.selected-wallet-inspector {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.selected-wallet-inspector .inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.selected-wallet-inspector .inspector-balance-section .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.selected-wallet-inspector .inspector-balance-section .val {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 5px;
}

.selected-wallet-inspector .inspector-balance-section .val small {
    font-size: 1rem;
    color: var(--accent-purple);
}

.selected-wallet-inspector .inspector-balance-section .sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.selected-wallet-inspector .inspector-address-section .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.selected-wallet-inspector .address-copy-box {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.selected-wallet-inspector .address-copy-box:hover {
    border-color: var(--accent-purple);
    background: rgba(240, 185, 11, 0.03);
}

.selected-wallet-inspector .address-copy-box span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-wallet-inspector .address-copy-box i {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-left: 10px;
}

.selected-wallet-inspector .address-copy-box:hover i {
    color: var(--accent-purple);
}

.selected-wallet-inspector .inspector-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: rgba(0, 0, 0, 0.15);
    padding: 15px;
    border-radius: 10px;
}

.selected-wallet-inspector .status-item label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.selected-wallet-inspector .status-item span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.selected-wallet-inspector .inspector-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.selected-wallet-inspector .inspector-actions .btn-action {
    height: 42px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
}

.selected-wallet-inspector .inspector-actions .btn-action.danger {
    grid-column: span 2;
    background: rgba(246, 70, 93, 0.1);
    color: var(--danger-red);
    border: 1px solid rgba(246, 70, 93, 0.2);
}

.selected-wallet-inspector .inspector-actions .btn-action.danger:hover {
    background: var(--danger-red);
    color: #fff;
}

/* Security warnings list */
.backup-advisory-card .advisory-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.backup-advisory-card .advisory-header h4 {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

.backup-advisory-card .checklist-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.backup-advisory-card .checklist-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.backup-advisory-card .checklist-item i {
    font-size: 0.85rem;
    margin-top: 2px;
}

.backup-advisory-card .checklist-item.done i {
    color: var(--success-green);
}

.backup-advisory-card .checklist-item.warning i {
    color: var(--danger-red);
}

.backup-advisory-card .checklist-item.info i {
    color: var(--accent-purple);
}

.portfolio-actions-footer {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 12px;
    margin-top: 15px;
}

.section-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-subheader h4 {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-text-action {
    background: none;
    border: none;
    color: var(--accent-purple);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.btn-text-action:hover {
    filter: brightness(1.2);
}