:root {
  --bg: #07111f;
  --panel: rgba(15, 23, 42, 0.88);
  --panel-2: rgba(17, 24, 39, 0.94);
  --border: rgba(148, 163, 184, 0.18);
  --text: #e5edf8;
  --muted: #94a3b8;
  --accent: #06b6d4;
  --accent-2: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}
* { box-sizing: border-box; }
body {
  background:
    radial-gradient(circle at top left, rgba(6, 182, 212, 0.22), transparent 32rem),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 30rem),
    linear-gradient(135deg, #050b16, var(--bg));
  color: var(--text);
  min-height: 100vh;
}
.hero-card,.glass-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.soft-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: 0 18px 45px rgba(0,0,0,.20);
}
.gradient-text {
  background: linear-gradient(90deg, #67e8f9, #a78bfa, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.badge { border: 1px solid var(--border); background: rgba(15,23,42,.72); }
.dropzone { border: 1.5px dashed rgba(103,232,249,.35); transition: all .2s ease; }
.dropzone.dragover { border-color:#67e8f9; background:rgba(6,182,212,.10); transform: translateY(-2px); }
.loader { width: 28px; height: 28px; border-radius: 999px; border: 3px solid rgba(103,232,249,.25); border-top-color: #67e8f9; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.action-btn { width:100%; border-radius: 1rem; padding:.85rem 1.1rem; font-weight:800; transition:.18s ease; }
.action-btn:disabled { opacity:.45; cursor:not-allowed; }
.action-btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.07); }
.primary { background:#06b6d4; color:#04111f; }
.violet { background:#8b5cf6; color:white; }
.emerald { background:#10b981; color:#04111f; }
.dark { background:#172033; color:#e5edf8; border:1px solid var(--border); }
.slate { background:#334155; color:white; }
.input-label { display:block; color:#cbd5e1; font-size:.875rem; margin-bottom:.5rem; }
.input-control { width:100%; border-radius:1rem; background:#07111f; border:1px solid #334155; color:#fff; padding:.85rem 1rem; }
.dashboard-canvas {
  aspect-ratio: 16 / 9;
  width: min(100%, 1500px);
  margin: 0 auto;
  background:
    radial-gradient(circle at 12% 8%, rgba(6,182,212,.18), transparent 25rem),
    radial-gradient(circle at 90% 10%, rgba(139,92,246,.14), transparent 25rem),
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 30px 100px rgba(0,0,0,.38);
  overflow: hidden;
}
.dashboard-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.brand-mark span { display:block; font-weight:900; color:#67e8f9; letter-spacing:.02em; }
.brand-mark small { display:block; color:#94a3b8; font-size:.72rem; }
.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.85rem; }
.kpi-card { position:relative; overflow:hidden; min-height:92px; }
.kpi-card:before { content:''; position:absolute; inset:-1px auto auto -1px; width:5px; height:calc(100% + 2px); background:linear-gradient(180deg,var(--accent),var(--accent-2)); }
.kpi-title { color:#94a3b8; font-size:.75rem; margin-bottom:.35rem; }
.kpi-value { color:white; font-size:1.55rem; line-height:1.1; font-weight:950; word-break:break-word; }
.kpi-note { color:#64748b; font-size:.68rem; margin-top:.35rem; }
.charts-grid { display:grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap:.85rem; height: calc(100% - 178px); min-height:0; }
.chart-card { background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.15); border-radius:1.15rem; padding:.8rem; min-height:0; overflow:hidden; }
.chart-title { font-size:.95rem; font-weight:850; color:#fff; line-height:1.2; }
.chart-subtitle { color:#94a3b8; font-size:.68rem; margin-top:.1rem; }
.chart-box { height: calc(100% - 42px); min-height: 190px; }
.filter-chip { border:1px solid rgba(103,232,249,.35); background:rgba(6,182,212,.10); color:#e0faff; font-size:.75rem; border-radius:999px; padding:.35rem .65rem; }
.table-scroll { max-height: 430px; overflow:auto; }
.table-scroll table { border-collapse:collapse; width:100%; }
.table-scroll th,.table-scroll td { border-bottom:1px solid rgba(148,163,184,.15); padding:10px 12px; font-size:13px; white-space:nowrap; }
.table-scroll th { color:#67e8f9; background:rgba(15,23,42,.98); position:sticky; top:0; z-index:1; }
@media (max-width: 1100px) {
  .dashboard-canvas { aspect-ratio:auto; min-height: 1100px; }
  .dashboard-header { flex-direction:column; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .charts-grid { grid-template-columns:1fr; grid-template-rows: repeat(4, 320px); height:auto; }
}
@media (max-width: 640px) { .kpi-grid { grid-template-columns:1fr; } .dashboard-canvas { padding:1rem; } }
@media print { .no-export { display:none !important; } body { background:#0f172a !important; } }