:root {
--ecd-bg: #f8fafc;
--ecd-surface: rgba(255, 255, 255, 0.88);
--ecd-surface-solid: #ffffff;
--ecd-text: #0f172a;
--ecd-muted: #64748b;
--ecd-border: rgba(148, 163, 184, 0.24);
--ecd-grid: rgba(148, 163, 184, 0.22);
--ecd-blue: #2563eb;
--ecd-cyan: #0891b2;
--ecd-green: #16a34a;
--ecd-yellow: #ca8a04;
--ecd-red: #dc2626;
--ecd-purple: #7c3aed;
--ecd-orange: #ea580c;
--ecd-gray: #64748b;
}
.ecd-dashboard {
color: var(--ecd-text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 2rem auto;
max-width: 1180px;
}
.ecd-dashboard * {
box-sizing: border-box;
}
.ecd-shell {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%),
radial-gradient(circle at top right, rgba(22, 163, 74, 0.14), transparent 32%),
linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.88));
border: 1px solid var(--ecd-border);
border-radius: 28px;
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
overflow: hidden;
padding: clamp(18px, 3vw, 32px);
position: relative;
}
.ecd-topbar {
align-items: flex-start;
display: flex;
gap: 18px;
justify-content: space-between;
margin-bottom: 22px;
}
.ecd-eyebrow {
color: var(--ecd-blue);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
margin: 0 0 0.4rem;
text-transform: uppercase;
}
.ecd-topbar h2 {
color: var(--ecd-text);
font-size: clamp(1.65rem, 4vw, 3rem);
letter-spacing: -0.055em;
line-height: 0.98;
margin: 0;
}
.ecd-subline {
color: var(--ecd-muted);
font-size: 1rem;
margin: 0.7rem 0 0;
max-width: 720px;
}
.ecd-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
.ecd-date,
.ecd-refresh,
.ecd-chart-head span {
background: rgba(255, 255, 255, 0.72);
border: 1px solid var(--ecd-border);
border-radius: 999px;
color: var(--ecd-muted);
display: inline-flex;
font-size: 0.84rem;
font-weight: 750;
line-height: 1;
padding: 0.72rem 0.88rem;
white-space: nowrap;
}
.ecd-refresh {
color: var(--ecd-text);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ecd-refresh:hover {
border-color: rgba(37, 99, 235, 0.45);
box-shadow: 0 12px 26px rgba(37, 99, 235, 0.16);
transform: translateY(-1px);
}
.ecd-alert {
background: rgba(202, 138, 4, 0.10);
border: 1px solid rgba(202, 138, 4, 0.22);
border-radius: 18px;
color: #854d0e;
margin: 0 0 18px;
padding: 14px 16px;
}
.ecd-alert-error {
background: rgba(220, 38, 38, 0.10);
border-color: rgba(220, 38, 38, 0.20);
color: #991b1b;
}
.ecd-card-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 16px;
}
.ecd-stat {
background: var(--ecd-surface);
border: 1px solid var(--ecd-border);
border-radius: 22px;
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
min-height: 132px;
padding: 18px;
position: relative;
overflow: hidden;
}
.ecd-stat::before {
background: var(--ecd-blue);
border-radius: 999px;
content: "";
height: 62px;
opacity: 0.13;
position: absolute;
right: -14px;
top: -18px;
width: 62px;
}
.ecd-tone-green::before { background: var(--ecd-green); }
.ecd-tone-yellow::before { background: var(--ecd-yellow); }
.ecd-tone-red::before { background: var(--ecd-red); }
.ecd-tone-purple::before { background: var(--ecd-purple); }
.ecd-tone-gray::before { background: var(--ecd-gray); }
.ecd-stat span,
.ecd-stat em {
color: var(--ecd-muted);
display: block;
font-size: 0.84rem;
font-style: normal;
font-weight: 700;
}
.ecd-stat strong {
color: var(--ecd-text);
display: block;
font-size: clamp(1.75rem, 2.8vw, 2.35rem);
letter-spacing: -0.06em;
line-height: 1;
margin: 18px 0 8px;
}
.ecd-stat small {
color: var(--ecd-muted);
font-size: 0.86rem;
letter-spacing: -0.01em;
}
.ecd-chart-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ecd-chart-card {
background: var(--ecd-surface);
border: 1px solid var(--ecd-border);
border-radius: 24px;
box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
min-height: 392px;
padding: 18px;
}
.ecd-chart-wide {
grid-column: span 2;
}
.ecd-chart-head {
align-items: flex-start;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 14px;
}
.ecd-chart-head h3 {
color: var(--ecd-text);
font-size: 1.08rem;
letter-spacing: -0.025em;
line-height: 1.2;
margin: 0;
}
.ecd-chart-head p {
color: var(--ecd-muted);
font-size: 0.9rem;
margin: 0.32rem 0 0;
}
.ecd-canvas-wrap {
height: 300px;
position: relative;
}
.ecd-chart-wide .ecd-canvas-wrap {
height: 330px;
}
.ecd-attribution {
color: var(--ecd-muted);
font-size: 0.8rem;
margin: 18px 2px 0;
}
.ecd-loading .ecd-skeleton,
.ecd-is-fetching .ecd-refresh {
animation: ecdPulse 1.2s ease-in-out infinite;
}
.ecd-skeleton {
background: linear-gradient(90deg, rgba(226, 232, 240, 0.65), rgba(248, 250, 252, 0.95), rgba(226, 232, 240, 0.65));
background-size: 220% 100%;
border-radius: 18px;
}
.ecd-skeleton-pill {
height: 42px;
width: 150px;
}
.ecd-skeleton-card {
height: 132px;
}
.ecd-skeleton-chart {
height: 340px;
}
@keyframes ecdPulse {
0% { background-position: 0% 50%; opacity: 0.72; }
50% { background-position: 100% 50%; opacity: 1; }
100% { background-position: 0% 50%; opacity: 0.72; }
}
@media (max-width: 900px) {
.ecd-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ecd-chart-grid {
grid-template-columns: 1fr;
}
.ecd-chart-wide {
grid-column: span 1;
}
}
@media (max-width: 640px) {
.ecd-dashboard {
margin: 1rem 0;
}
.ecd-shell {
border-radius: 20px;
padding: 16px;
}
.ecd-topbar,
.ecd-chart-head {
display: block;
}
.ecd-actions {
justify-content: flex-start;
margin-top: 14px;
}
.ecd-card-grid {
grid-template-columns: 1fr;
}
.ecd-chart-card {
min-height: 360px;
padding: 14px;
}
.ecd-canvas-wrap,
.ecd-chart-wide .ecd-canvas-wrap {
height: 270px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--ecd-bg: #020617;
--ecd-surface: rgba(15, 23, 42, 0.78);
--ecd-surface-solid: #0f172a;
--ecd-text: #f8fafc;
--ecd-muted: #94a3b8;
--ecd-border: rgba(148, 163, 184, 0.20);
--ecd-grid: rgba(148, 163, 184, 0.15);
}
.ecd-shell {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 34%),
radial-gradient(circle at top right, rgba(22, 163, 74, 0.18), transparent 32%),
linear-gradient(135deg, rgba(2, 6, 23, 0.96), rgba(15, 23, 42, 0.92));
}
.ecd-date,
.ecd-refresh,
.ecd-chart-head span {
background: rgba(15, 23, 42, 0.72);
}
.ecd-skeleton {
background: linear-gradient(90deg, rgba(30, 41, 59, 0.70), rgba(51, 65, 85, 0.72), rgba(30, 41, 59, 0.70));
background-size: 220% 100%;
}
}