:root {
  --bg: #050a14;
  --panel: linear-gradient(100deg, rgba(15, 24, 42, 0.95), rgba(3, 9, 25, 0.95));
  --card-border: rgba(247, 184, 60, 0.34);
  --text: #d1d5db;
  --muted: #9ca3af;
  --accent: #ffca3a;
  --buy: #00ffc3;
  --sell: #ff4f87;
  --metric-bg: rgba(34, 29, 15, 0.66);
  --row-bg: linear-gradient(90deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.15));
}

body.light {
  --bg: #f4f7ff;
  --panel: linear-gradient(100deg, rgba(255, 255, 255, 0.97), rgba(241, 245, 255, 0.97));
  --card-border: rgba(184, 134, 30, 0.45);
  --text: #1f2937;
  --muted: #475569;
  --metric-bg: rgba(255, 248, 226, 0.8);
  --row-bg: linear-gradient(90deg, rgba(226, 232, 240, 0.68), rgba(241, 245, 249, 0.45));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.noise {
  position: fixed;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.14) 0.8px, transparent 0),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.14) 0.8px, transparent 0);
  background-size: 4px 4px, 3px 3px;
}

.demo-shell {
  width: min(1560px, calc(100vw - 18px));
  margin: 10px auto;
  display: grid;
  gap: 16px;
  grid-template-columns: 240px minmax(0, 1fr);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),0 14px 24px rgba(0,0,0,0.25);
}

/* Sidebar */
.sidebar { min-height: calc(100vh - 22px); display: flex; flex-direction: column; padding: 14px 10px; }
.sidebar h1 { color: var(--accent); margin: 2px 10px 14px; font-size: 24px; font-weight: 800; }
nav { display: grid; gap: 10px; padding: 0 2px; }
.menu-link { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 14px; padding: 10px 12px; border-radius: 11px; background: rgba(30,41,59,0.48); border: 1px solid transparent; }
.menu-link span { width: 20px; text-align: center; }
.menu-link.active { border-color: rgba(247,184,60,0.62); background: linear-gradient(90deg, rgba(59,45,18,0.72), rgba(49,46,33,0.5)); }
.theme-btn { margin: auto 6px 4px; width: max-content; border: 1px solid var(--card-border); background: rgba(8,12,24,0.55); color: var(--text); border-radius: 10px; font-size: 16px; padding: 9px 12px; cursor: pointer; }

/* Content Grid */
.content-grid { display: grid; gap: 16px; grid-template-columns: 2fr 1.42fr 1.42fr; grid-template-areas: "chart chart order" "portfolio signal history"; }
.card { padding: 14px 16px; scroll-margin-top: 14px; }
.chart-card { grid-area: chart; }
.order-card { grid-area: order; }
.portfolio-card { grid-area: portfolio; }
.signal-panel { grid-area: signal; }
.history-card { grid-area: history; }

h2 { margin: 2px 0 12px; font-size: 22px; line-height: 1.1; }
#chart { width: 100%; height: 255px; display: block; border-radius: 10px; }

.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:8px; }
.metrics p { margin:0; padding:10px; border-radius:10px; border:1px solid rgba(247,184,60,0.45); background: var(--metric-bg); display:flex; flex-direction:column; gap:6px; }
.metrics span { color: var(--muted); font-size:14px; }
.metrics strong { font-size:18px; }

.order-list,.signal-log,.trade-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.order-list li,.signal-log li,.trade-list li { border-radius:9px; background:var(--row-bg); padding:9px 11px; display:flex; justify-content:space-between; font-size:14px; }

.portfolio-grid { display:grid; gap:10px; }
.signal-card { border-radius:11px; padding:10px 12px; margin-bottom:10px; }
.price-up { color: var(--buy); }
.price-down { color: var(--sell); }

/* -----------------------------
   Centered Glass Footer
------------------------------ */
.dashboard-footer {
  width: min(1560px,calc(100vw-18px));
  margin: 22px auto 28px;
  padding: 18px 24px;
  border-radius: 14px;
  backdrop-filter: blur(16px);
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(247,184,60,0.25);
  text-align:center; /* Center all content */
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

body.light .dashboard-footer { background: rgba(255,255,255,0.7); }

.dashboard-footer p { margin:6px 0; font-size:13px; color:var(--muted); text-align:center; }
.dashboard-footer .footer-product { color:var(--accent); font-weight:600; }
.dashboard-footer .footer-link { display:inline-flex; align-items:center; gap:6px; color:var(--accent); text-decoration:none; font-weight:500; transition: all 0.25s ease; }
.dashboard-footer .footer-link:hover { text-shadow:0 0 8px rgba(255,202,58,0.6); transform: translateY(-1px); }

/* Responsive */
@media(max-width:900px){.demo-shell{grid-template-columns:1fr;} .sidebar{position:static;}}
@media(max-width:1300px){
  .demo-shell{grid-template-columns:220px 1fr;}
  .content-grid{grid-template-columns:1fr;grid-template-areas:"chart" "order" "portfolio" "signal" "history";}
  .sidebar{min-height:auto;position:sticky;top:12px;}
}