/**
 * dashboard.css — "Crypto Pulse" design system
 * Donker fintech-thema met glasmorfisme, neon cyaan→violet gradient-accenten,
 * glow-effecten, een live-pulse en strakke typografie. Inclusief licht-thema,
 * sparklines, watchlist, marktoverzicht-balk en skeleton-loaders.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ============================ Design tokens ============================ */
.csd-dashboard {
	/* Donker (standaard) */
	--csd-bg: #070b14;
	--csd-bg-grad: radial-gradient(1200px 600px at 12% -10%, rgba(0,209,255,.10), transparent 60%),
	               radial-gradient(1000px 600px at 100% 0%, rgba(124,92,255,.12), transparent 55%),
	               #070b14;
	--csd-surface: rgba(255,255,255,.045);
	--csd-surface-2: rgba(255,255,255,.07);
	--csd-border: rgba(255,255,255,.09);
	--csd-border-strong: rgba(255,255,255,.16);
	--csd-text: #eaf0fb;
	--csd-muted: #8b94a7;
	--csd-buy: #00e6a8;
	--csd-sell: #ff4d6a;
	--csd-hold: #ffb13d;
	--csd-accent: #00d1ff;
	--csd-accent-2: #7c5cff;
	--csd-grad: linear-gradient(135deg, #00d1ff 0%, #7c5cff 100%);
	--csd-glow: 0 0 0 1px rgba(0,209,255,.0), 0 8px 30px rgba(0,0,0,.45);
	--csd-radius: 16px;
	--csd-radius-sm: 11px;

	background: var(--csd-bg-grad);
	color: var(--csd-text);
	border-radius: 22px;
	padding: 22px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	max-width: 1180px;
	margin: 0 auto;
	border: 1px solid var(--csd-border);
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	-webkit-font-smoothing: antialiased;
}

/* Licht-thema */
.csd-dashboard.csd-light {
	--csd-bg: #eef2f9;
	--csd-bg-grad: radial-gradient(1000px 500px at 10% -10%, rgba(0,209,255,.14), transparent 60%),
	               radial-gradient(900px 500px at 100% 0%, rgba(124,92,255,.14), transparent 55%),
	               #eef2f9;
	--csd-surface: rgba(255,255,255,.75);
	--csd-surface-2: rgba(255,255,255,.92);
	--csd-border: rgba(12,19,34,.10);
	--csd-border-strong: rgba(12,19,34,.18);
	--csd-text: #0c1322;
	--csd-muted: #5a647a;
	--csd-glow: 0 8px 30px rgba(40,60,120,.12);
}

.csd-dashboard * { box-sizing: border-box; }

/* ============================ Header / brand ============================ */
.csd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}
.csd-brand { display: flex; align-items: center; gap: 14px; }
.csd-logo {
	width: 44px; height: 44px;
	border-radius: 13px;
	background: var(--csd-grad);
	display: grid; place-items: center;
	position: relative;
	box-shadow: 0 8px 24px rgba(0,209,255,.35);
}
.csd-pulse-dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	position: relative;
}
.csd-pulse-dot::after {
	content: '';
	position: absolute; inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.7);
	animation: csd-pulse 1.8s ease-out infinite;
}
@keyframes csd-pulse {
	0%   { transform: scale(.6); opacity: .9; }
	100% { transform: scale(1.8); opacity: 0; }
}
.csd-title {
	margin: 0;
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	background: var(--csd-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.1;
}
.csd-subtitle { font-size: .78rem; color: var(--csd-muted); margin-top: 2px; }

.csd-header-actions { display: flex; align-items: center; gap: 10px; }
.csd-theme-toggle {
	width: 40px; height: 40px;
	border-radius: 11px;
	border: 1px solid var(--csd-border);
	background: var(--csd-surface);
	color: var(--csd-text);
	cursor: pointer;
	font-size: 1.05rem;
	transition: border-color .15s, transform .15s;
}
.csd-theme-toggle:hover { border-color: var(--csd-accent); transform: translateY(-1px); }

.csd-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 7px;
	border-radius: 11px;
	background: var(--csd-grad);
	color: #02101a; font-size: .74rem; font-weight: 800;
	box-shadow: 0 4px 14px rgba(0,209,255,.4);
}
.csd-badge[hidden] { display: none; }

/* ====================== Marktoverzicht-balk (stats) ==================== */
.csd-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}
.csd-stat {
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius-sm);
	padding: 12px 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.csd-stat-label { font-size: .68rem; color: var(--csd-muted); text-transform: uppercase; letter-spacing: .06em; }
.csd-stat-value { font-size: 1.12rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.csd-stat-sub { font-size: .74rem; font-weight: 600; margin-top: 2px; }
.csd-fg-gauge { height: 5px; border-radius: 3px; margin-top: 7px; background: linear-gradient(90deg, var(--csd-sell), var(--csd-hold), var(--csd-buy)); position: relative; }
.csd-fg-gauge::after { content: ''; position: absolute; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--csd-bg); left: var(--fg, 50%); transform: translateX(-50%); box-shadow: 0 0 8px rgba(255,255,255,.6); }

/* ============================ Tabs ============================ */
.csd-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: 13px;
	padding: 5px;
	margin-bottom: 20px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.csd-tab {
	background: transparent;
	border: none;
	color: var(--csd-muted);
	padding: 9px 16px;
	cursor: pointer;
	font-size: .88rem;
	font-weight: 600;
	border-radius: 9px;
	transition: color .15s, background .2s;
}
.csd-tab:hover { color: var(--csd-text); }
.csd-tab.is-active {
	color: #02101a;
	background: var(--csd-grad);
	box-shadow: 0 6px 18px rgba(0,209,255,.3);
}
.csd-light .csd-tab.is-active { color: #fff; }

.csd-panel { display: none; animation: csd-fade .3s ease; }
.csd-panel.is-active { display: block; }
@keyframes csd-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ====================== Toolbar (zoek/sorteer/watchlist) =============== */
.csd-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.csd-search, .csd-sort {
	background: var(--csd-surface);
	color: var(--csd-text);
	border: 1px solid var(--csd-border);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: .86rem;
	outline: none;
	transition: border-color .15s;
}
.csd-search:focus, .csd-sort:focus { border-color: var(--csd-accent); }
.csd-search { flex: 1; min-width: 160px; }
.csd-watch-toggle {
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	color: var(--csd-muted);
	border-radius: 10px;
	padding: 9px 14px;
	font-size: .84rem; font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}
.csd-watch-toggle.is-active { color: var(--csd-hold); border-color: var(--csd-hold); background: rgba(255,177,61,.12); }

.csd-panel-meta { font-size: .74rem; color: var(--csd-muted); margin-bottom: 12px; }

/* ============================ Coin grid / cards ======================= */
.csd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
	gap: 14px;
}
.csd-card {
	position: relative;
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius);
	padding: 16px;
	cursor: pointer;
	overflow: hidden;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.csd-card::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--csd-grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .15s;
	pointer-events: none;
}
.csd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.csd-card:hover::before { opacity: .8; }

.csd-card-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.csd-card-top img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.csd-coin-name { font-weight: 700; font-size: .98rem; letter-spacing: -.01em; }
.csd-coin-symbol { color: var(--csd-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }

.csd-price { font-size: 1.32rem; font-weight: 800; margin: 2px 0 3px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.csd-change { font-size: .82rem; font-weight: 700; }
.csd-change.up { color: var(--csd-buy); }
.csd-change.down { color: var(--csd-sell); }

/* Sparkline */
.csd-spark { width: 100%; height: 38px; margin: 10px 0 4px; display: block; }

/* Watchlist-ster */
.csd-star {
	position: absolute; top: 12px; right: 12px;
	background: transparent; border: none;
	color: var(--csd-muted); font-size: 1.15rem; line-height: 1;
	cursor: pointer; padding: 2px; z-index: 2;
	transition: color .15s, transform .15s;
}
.csd-star:hover { transform: scale(1.2); color: var(--csd-hold); }
.csd-star.is-active { color: var(--csd-hold); text-shadow: 0 0 10px rgba(255,177,61,.6); }

/* Signaal-pill met glow */
.csd-signal {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 11px; border-radius: 9px;
	font-weight: 800; font-size: .76rem; letter-spacing: .04em;
	margin-top: 9px;
}
.csd-signal::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.csd-signal.BUY  { background: rgba(0,230,168,.14); color: var(--csd-buy); }
.csd-signal.SELL { background: rgba(255,77,106,.14); color: var(--csd-sell); }
.csd-signal.HOLD { background: rgba(255,177,61,.14); color: var(--csd-hold); }
.csd-signal.GOLDEN { background: rgba(0,230,168,.14); color: var(--csd-buy); }
.csd-signal.DEATH  { background: rgba(255,77,106,.14); color: var(--csd-sell); }

/* Confidence-balk */
.csd-confidence { margin-top: 12px; }
.csd-confidence-label { display: flex; justify-content: space-between; font-size: .72rem; color: var(--csd-muted); margin-bottom: 5px; }
.csd-bar { height: 7px; border-radius: 4px; background: var(--csd-border); overflow: hidden; }
.csd-bar-fill { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.csd-bar-fill.BUY  { background: linear-gradient(90deg, #00e6a8, #00d1ff); }
.csd-bar-fill.SELL { background: linear-gradient(90deg, #ff4d6a, #ff7a3d); }
.csd-bar-fill.HOLD { background: linear-gradient(90deg, #ffb13d, #ffd84d); }

.csd-timestamp { font-size: .68rem; color: var(--csd-muted); margin-top: 9px; }

/* ============================ Tabel ============================ */
.csd-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.csd-table th, .csd-table td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--csd-border); }
.csd-table th { color: var(--csd-muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.csd-table tbody tr { transition: background .15s; }
.csd-table tbody tr:hover { background: var(--csd-surface); }

/* ============================ States ============================ */
.csd-loading, .csd-error, .csd-empty { padding: 32px; text-align: center; color: var(--csd-muted); }
.csd-error { color: var(--csd-sell); }
.csd-spinner {
	width: 30px; height: 30px;
	border: 3px solid var(--csd-border);
	border-top-color: var(--csd-accent);
	border-radius: 50%;
	margin: 0 auto 12px;
	animation: csd-spin .8s linear infinite;
}
@keyframes csd-spin { to { transform: rotate(360deg); } }

/* Skeleton-loaders */
.csd-skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 14px; }
.csd-skel {
	height: 188px; border-radius: var(--csd-radius);
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	position: relative; overflow: hidden;
}
.csd-skel::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
	transform: translateX(-100%);
	animation: csd-shimmer 1.4s infinite;
}
@keyframes csd-shimmer { 100% { transform: translateX(100%); } }

/* ============================ Knoppen ============================ */
.csd-push-btn {
	background: var(--csd-grad);
	color: #02101a;
	border: none;
	padding: 11px 18px;
	border-radius: 11px;
	cursor: pointer;
	font-weight: 700; font-size: .88rem;
	margin-top: 12px;
	box-shadow: 0 8px 22px rgba(0,209,255,.3);
	transition: transform .15s, box-shadow .15s, opacity .15s;
}
.csd-light .csd-push-btn { color: #fff; }
.csd-push-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,209,255,.4); }
.csd-push-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ============================ Backtest ============================ */
.csd-controls, .csd-alert-form {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius);
	padding: 16px; margin-bottom: 16px;
	backdrop-filter: blur(10px);
}
.csd-control { display: flex; flex-direction: column; gap: 5px; }
.csd-control label { font-size: .7rem; color: var(--csd-muted); text-transform: uppercase; letter-spacing: .05em; }
.csd-control select, .csd-control input {
	background: var(--csd-bg);
	color: var(--csd-text);
	border: 1px solid var(--csd-border);
	border-radius: 10px;
	padding: 9px 11px; font-size: .88rem; min-width: 130px;
}
.csd-light .csd-control select, .csd-light .csd-control input { background: #fff; }

.csd-bt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.csd-kpi {
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius); padding: 16px; text-align: center;
	backdrop-filter: blur(10px);
}
.csd-kpi-value { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.csd-kpi-label { font-size: .72rem; color: var(--csd-muted); margin-top: 4px; }
.csd-bt-meta { font-size: .74rem; color: var(--csd-muted); margin-bottom: 6px; }
.csd-bt-breakdown { font-size: .86rem; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.csd-bt-breakdown .csd-signal { margin-top: 0; }
.csd-bt-subtitle { margin: 18px 0 8px; font-size: 1rem; font-family: 'Space Grotesk', sans-serif; }
.csd-bt-note { font-size: .72rem; color: var(--csd-muted); font-style: italic; margin-top: 14px; line-height: 1.5; }

/* Utility kleuren */
.csd-dashboard .up { color: var(--csd-buy); }
.csd-dashboard .down { color: var(--csd-sell); }

/* ============================ Modal ============================ */
.csd-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.csd-modal[hidden] { display: none; }
.csd-modal-overlay { position: absolute; inset: 0; background: rgba(2,6,14,.72); backdrop-filter: blur(4px); }
.csd-modal-dialog {
	position: relative;
	background: var(--csd-bg-grad);
	color: var(--csd-text);
	border: 1px solid var(--csd-border-strong);
	border-radius: 20px;
	width: 100%; max-width: 880px; max-height: 92vh; overflow-y: auto;
	padding: 20px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
	animation: csd-pop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes csd-pop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.csd-modal-close {
	position: absolute; top: 12px; right: 14px;
	width: 32px; height: 32px; border-radius: 9px;
	background: var(--csd-surface); border: 1px solid var(--csd-border);
	color: var(--csd-muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.csd-modal-close:hover { color: var(--csd-text); border-color: var(--csd-accent); }
.csd-modal-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 36px; }
.csd-modal-header img { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.csd-modal-price { font-size: 1.3rem; font-weight: 800; margin-left: auto; font-variant-numeric: tabular-nums; }
.csd-modal-ts { width: 100%; font-size: .72rem; color: var(--csd-muted); margin-top: 4px; }

.csd-modal-tabs { display: flex; gap: 4px; background: var(--csd-surface); border: 1px solid var(--csd-border); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.csd-mtab { background: transparent; border: none; color: var(--csd-muted); padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: .88rem; border-radius: 8px; }
.csd-mtab.is-active { color: #02101a; background: var(--csd-grad); }
.csd-light .csd-mtab.is-active { color: #fff; }
.csd-mpanel { display: none; }
.csd-mpanel.is-active { display: block; }

/* ============================ Grafiek ============================ */
.csd-chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .8rem; margin-bottom: 12px; }
.csd-chart-toolbar label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--csd-muted); }
.csd-chart-range { background: var(--csd-surface); color: var(--csd-text); border: 1px solid var(--csd-border); border-radius: 9px; padding: 6px 9px; }
.csd-chart-legend { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: .72rem; }
.csd-lg::before { content: '— '; }
.csd-lg-ma20 { color: var(--csd-accent); }
.csd-lg-ma50 { color: var(--csd-hold); }
.csd-lg-ema { color: #00bcd4; }
.csd-lg-forecast { color: #a78bfa; }
.csd-lg-dotbuy { color: var(--csd-buy); }
.csd-lg-dotsell { color: var(--csd-sell); }
.csd-lg-buy { color: var(--csd-buy); }
.csd-lg-sell { color: var(--csd-sell); }
.csd-lg-dotbuy::before, .csd-lg-dotsell::before, .csd-lg-buy::before, .csd-lg-sell::before { content: ''; }

.csd-chart-host { position: relative; width: 100%; min-height: 260px; }
.csd-cross { position: absolute; width: 1px; background: var(--csd-text); opacity: .4; pointer-events: none; top: 0; }
.csd-tip {
	position: absolute; pointer-events: none;
	background: rgba(2,6,14,.92); border: 1px solid var(--csd-border-strong);
	border-radius: 8px; padding: 7px 9px; font-size: .72rem; line-height: 1.4;
	white-space: nowrap; z-index: 5;
}
.csd-chart-signals { margin-top: 10px; }
.csd-chart-ts { font-size: .72rem; color: var(--csd-muted); margin-bottom: 6px; }
.csd-sig-events { display: flex; flex-wrap: wrap; gap: 8px; }
.csd-sig-ev { font-size: .74rem; background: var(--csd-surface); border: 1px solid var(--csd-border); border-radius: 9px; padding: 5px 9px; }
.csd-sig-ev .csd-signal { margin-top: 0; }
.csd-detail-events { font-size: .82rem; line-height: 1.6; margin-top: 12px; }

/* ============================ Prijsalerts ============================ */
.csd-alert-intro { font-size: .85rem; color: var(--csd-muted); margin-bottom: 12px; }
.csd-alert-items { list-style: none; margin: 0; padding: 0; }
.csd-alert-items li {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 13px; border: 1px solid var(--csd-border); border-radius: 11px;
	margin-bottom: 8px; font-size: .88rem; background: var(--csd-surface);
}
.csd-alert-del { background: transparent; border: none; color: var(--csd-sell); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.csd-alert-del:hover { opacity: .7; }

/* --- Portfolio --- */
.csd-pf-summary { margin: 4px 0 16px; }
.csd-pf-del { background: transparent; border: none; color: var(--csd-sell); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.csd-pf-del:hover { opacity: .7; }

/* --- Nieuws --- */
.csd-news-list { display: flex; flex-direction: column; gap: 8px; }
.csd-news-item {
	display: block;
	text-decoration: none;
	color: var(--csd-text);
	background: var(--csd-surface);
	border: 1px solid var(--csd-border);
	border-radius: 11px;
	padding: 12px 14px;
	transition: border-color .15s, transform .12s;
}
a.csd-news-item:hover { border-color: var(--csd-accent); transform: translateY(-1px); }
.csd-news-title { font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.csd-news-meta { font-size: 0.72rem; color: var(--csd-muted); margin-top: 5px; }
.csd-news-sent { font-weight: 800; }
.csd-news-sent.up { color: var(--csd-buy); }
.csd-news-sent.down { color: var(--csd-sell); }

/* ============================ Frontend-instellingen ================= */
.csd-settings-info {
	background: var(--csd-surface); border: 1px solid var(--csd-border);
	border-radius: var(--csd-radius); padding: 20px; line-height: 1.6;
	backdrop-filter: blur(10px);
}
.csd-settings-info code { background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 5px; }
.csd-light .csd-settings-info code { background: rgba(0,0,0,.08); }

.csd-disclaimer { margin-top: 20px; font-size: .72rem; color: var(--csd-muted); font-style: italic; text-align: center; }

/* ============================ Responsive ============================ */
@media (max-width: 640px) {
	.csd-dashboard { padding: 16px; border-radius: 16px; }
	.csd-grid, .csd-skel-grid { grid-template-columns: 1fr 1fr; }
	.csd-tab { padding: 8px 11px; font-size: .8rem; }
	.csd-modal-dialog { padding: 14px; }
	.csd-chart-legend { margin-left: 0; width: 100%; }
}
@media (max-width: 440px) {
	.csd-grid, .csd-skel-grid { grid-template-columns: 1fr; }
}

/* ============================ Admin (back-end) ===================== */
.csd-settings-wrap .form-table th { width: 280px; }