/* Modern, responsive styles for wallet tracker */
:root {
	--bg: #f6f7fb;
	--text: #0f172a;
	--muted: #64748b;
	--card: #ffffff;
	--border: #e2e8f0;
	--primary: #3b82f6;
	--success: #10b981;
	--danger: #ef4444;
	--warning: #f59e0b;
	--shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.dark-mode {
	--bg: #0b1020;
	--text: #e5e7eb;
	--muted: #9aa4b2;
	--card: #0f172a;
	--border: #1f2940;
	--primary: #60a5fa;
	--success: #34d399;
	--danger: #f87171;
	--warning: #fbbf24;
	--shadow: 0 10px 30px rgba(0,0,0,0.4);
}

html, body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Layout helpers */
.container { max-width: 1120px; }
.hero { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.25rem; box-shadow: var(--shadow); }
.kpi { display:flex; align-items:center; gap:.6rem; background: var(--card); border:1px solid var(--border); padding:.6rem .8rem; border-radius:12px; box-shadow: var(--shadow); }
.kpi .value { font-weight: 700; letter-spacing: .2px; }

/* Sidebar Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width: 240px; background: var(--card); border-right:1px solid var(--border); box-shadow: var(--shadow); position: sticky; top:0; height:100vh; padding: 1rem; }
.sidebar .brand { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.sidebar .nav { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; }
.sidebar .nav a { display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:10px; color: var(--text); text-decoration:none; }
.sidebar .nav a:hover, .sidebar .nav a.active { background: rgba(59,130,246,.12); color: var(--primary); }
.content { flex:1; padding: 1rem 1.25rem; }

.gradient-bg {
	background:
		radial-gradient(1200px 500px at 10% -10%, rgba(59,130,246,.20), transparent 60%),
		radial-gradient(800px 400px at 100% 0%, rgba(16,185,129,.18), transparent 50%),
		radial-gradient(600px 300px at 50% 120%, rgba(99,102,241,.20), transparent 55%),
		var(--bg);
}

.navbar {
	box-shadow: var(--shadow);
	border-bottom: 1px solid var(--border);
}
.app-navbar { background: var(--card) !important; border-bottom: 1px solid var(--border); }
.app-navbar .navbar-brand { font-weight:800; letter-spacing:.3px; }
.app-header { display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem; background: var(--card); border-bottom:1px solid var(--border); position: sticky; top:0; z-index:2; }

.card {
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	border-radius: 14px;
}

.glass {
	background: rgba(255,255,255,0.55);
	border: 1px solid rgba(255,255,255,0.35);
	box-shadow: 0 20px 40px rgba(2,6,23,.08);
	backdrop-filter: blur(12px);
}
.dark-mode .glass {
	background: rgba(15,23,42,0.55);
	border-color: rgba(255,255,255,0.08);
	box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(0.95); }
.btn { border-radius: 10px; }

.badge.bg-success { background: var(--success) !important; }
.badge.bg-danger { background: var(--danger) !important; }

.stat {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem 1rem;
	border: 1px dashed var(--border);
	border-radius: 12px;
}

.balance {
	font-weight: 700;
	letter-spacing: .2px;
}

.muted { color: var(--muted); }

.toggle-theme {
	background: rgba(59,130,246,.15);
	border: 1px solid var(--primary);
	border-radius: 999px;
	padding: .35rem .9rem;
	color: var(--text);
	font-weight: 600;
	box-shadow: 0 4px 14px rgba(59,130,246,.25);
}
.dark-mode .toggle-theme { background: rgba(96,165,250,.2); border-color: var(--primary); }

/* Chain filter buttons */
.chain-filter {
    transition: all 0.2s ease;
}

.chain-filter.active {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

/* ROI vs Cost basis bars */
.roi-cost-bar {
    min-width: 120px;
}

.roi-cost-bar .progress {
    background-color: var(--bs-light);
    border-radius: 3px;
}

.roi-cost-bar .progress-bar {
    border-radius: 3px;
    transition: width 0.3s ease;
}

.wallet-card {
	transition: transform .15s ease, box-shadow .15s ease;
}
.wallet-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.08); }

/* Input icons */
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-icon > .form-control { padding-left: 2.2rem; }

/* Chart card */
.card .card-body h5 { font-weight: 700; }
.chart-card { padding: .5rem 1rem; }

.fluct-up { color: var(--success); }
.fluct-down { color: var(--danger); }

@media (max-width: 768px) {
	.card { margin-bottom: 1rem; }
}

/* Auth screens */
.auth-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}
.auth-card {
	max-width: 520px;
	width: 100%;
	padding: 2rem 2rem;
}
.auth-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.auth-title { margin: 0; font-weight: 800; letter-spacing: .2px; font-size: 1.65rem; }
.auth-subtitle { margin: 0; color: var(--muted); font-size: .9rem; }

.form-control { border-radius: 12px; border-color: var(--border); height: 46px; }
.form-control:focus { box-shadow: 0 0 0 .2rem rgba(59,130,246,.15); border-color: var(--primary); }
.btn-auth { height: 48px; border-radius: 12px; font-weight: 700; letter-spacing: .2px; }
.btn-primary { box-shadow: 0 8px 16px rgba(59,130,246,.25); }
.btn-primary:active { transform: translateY(1px); }
.auth-footer { text-align: center; margin-top: .75rem; color: var(--muted); }
.auth-footer a { text-decoration: none; }

/* Brand lockup */
.brand {
	display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.2px;
}
.brand .logo {
	width:36px;height:36px;border-radius:10px;background: linear-gradient(135deg,var(--primary),#8b5cf6);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 14px rgba(59,130,246,.35);
}
.brand .name { font-size:1.05rem; }

/* Icon inputs */
.input-icon { position: relative; }
.input-icon .bi { position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--muted); }
.input-icon .form-control { padding-left: 40px; }

/* Dashboard premium bits */
.hero {
	background: radial-gradient(800px 300px at -10% -10%, rgba(59,130,246,.18), transparent 60%), radial-gradient(700px 260px at 110% -20%, rgba(16,185,129,.18), transparent 60%), var(--card);
	border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding: 1.25rem 1.25rem;
}
.kpi { display:flex; align-items:center; gap:.75rem; padding: .75rem 1rem; border:1px solid var(--border); border-radius:12px; }
.kpi .value { font-weight:800; font-size:1.1rem; }