@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");
@import url("examples.css");

:root {
  --ink: #e8eaed;
  --muted: #9aa0a6;
  --line: #2a3140;
  --paper: #0f1419;
  --white: #1a2130;
  --green: #6366f1;
  --teal: #818cf8;
  --blue: #4f46e5;
  --coral: #f87171;
  --gold: #fbbf24;
  --dark: #080b10;
}

body.dashboard-demo {
  font-family: "IBM Plex Sans", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

body.dashboard-demo .dashboard-nav,
body.dashboard-demo .demo-nav {
  padding: 14px clamp(20px, 4vw, 44px);
  background: rgba(8, 11, 16, 0.96);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

body.dashboard-demo .demo-nav strong {
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.dashboard-demo .demo-nav span {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

body.dashboard-demo .back-link {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
}

body.dashboard-demo .back-link:hover {
  color: var(--ink);
  border-color: rgba(232, 234, 237, 0.3);
}

body.dashboard-demo .pill-button {
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.32);
}

body.dashboard-demo .sidebar {
  background: var(--dark);
  border-right: 1px solid var(--line);
}

body.dashboard-demo .sidebar strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

body.dashboard-demo .sidebar a.active {
  color: var(--ink);
  background: rgba(99, 102, 241, 0.18);
  border-left: 2px solid var(--green);
}

body.dashboard-demo .sidebar a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}

body.dashboard-demo .dashboard-main {
  background: var(--paper);
}

body.dashboard-demo .dashboard-main h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

body.dashboard-demo .eyebrow {
  font-family: "JetBrains Mono", monospace;
  color: var(--teal);
  letter-spacing: 0.14em;
  font-weight: 500;
}

body.dashboard-demo .lead {
  color: var(--muted);
}

body.dashboard-demo .metric-card {
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
  transition: border-color 200ms ease;
}

body.dashboard-demo .metric-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
}

body.dashboard-demo .metric-card strong {
  font-variant-numeric: tabular-nums;
}

body.dashboard-demo .metric-card.tone-blue strong {
  color: var(--teal);
}

body.dashboard-demo .metric-card .delta.up {
  color: #34d399;
}

body.dashboard-demo .metric-card .delta.down {
  color: var(--coral);
}

body.dashboard-demo .spark {
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.35), transparent);
  opacity: 0.6;
}

body.dashboard-demo .table-panel,
body.dashboard-demo .analytics-chart {
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
}

body.dashboard-demo .analytics-chart {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

body.dashboard-demo th {
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.dashboard-demo td {
  border-color: var(--line);
}

body.dashboard-demo .status {
  color: var(--teal);
  background: rgba(99, 102, 241, 0.15);
}

body.dashboard-demo .status.info {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}

body.dashboard-demo .bar-row b {
  background: linear-gradient(180deg, var(--teal), var(--blue));
}

body.dashboard-demo .insight-panel {
  background: var(--white);
  border-color: var(--line);
}

body.dashboard-demo .dashboard-controls input,
body.dashboard-demo select {
  background: var(--white);
  border-color: var(--line);
  color: var(--ink);
}

body.dashboard-demo .ghost-button {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

body.dashboard-demo .ghost-button:hover {
  border-color: var(--green);
  color: var(--teal);
}

body.dashboard-demo .dashboard-banner {
  position: relative;
  margin: 0 0 28px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 21 / 6;
  border: 1px solid var(--line);
}

body.dashboard-demo .dashboard-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.72;
}

body.dashboard-demo .dashboard-banner figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 18px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 234, 237, 0.88);
  background: linear-gradient(transparent, rgba(8, 11, 16, 0.82));
}