styles.css

:root{
  --bg:#0b0f12
  --panel:#11161b
  --panel-2:#0f1419
  --text:#e6f0ea
  --muted:#8aa09a
  --green:#25c26e
  --red:#ff5c5c
  --border:#1c2228
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0
  background:radial-gradient(1200px 600px at 80% -100px,#1a2230,transparent),var(--bg)
  color:var(--text)
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif
}

.app-header{
  position:sticky
  top:0
  display:flex
  align-items:center
  justify-content:space-between
  padding:14px 18px
  border-bottom:1px solid var(--border)
  background:linear-gradient(180deg,rgba(11,15,18,.9),rgba(11,15,18,.6))
  backdrop-filter:saturate(140%) blur(6px)
  z-index:10
}
.app-header h1{margin:0;font-weight:700;font-size:18px}
.toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}

.container{max-width:1100px;margin:24px auto;padding:0 16px}

.controls{
  display:flex
  flex-wrap:wrap
  gap:12px
  align-items:center
  justify-content:space-between
  margin-bottom:16px
}

.range-buttons{display:flex;gap:8px}
.range-buttons button{
  padding:8px 12px
  background:var(--panel)
  color:var(--muted)
  border:1px solid var(--border)
  border-radius:8px
  cursor:pointer
}
.range-buttons button.active{background:#132118;color:#b6ffcf;border-color:#153d28}

.upload{display:flex;gap:8px}

.chart-card,.table-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2))
  border:1px solid var(--border)
  border-radius:14px
  padding:14px
  box-shadow:0 8px 30px rgba(0,0,0,.25)
}
.chart-card{margin-bottom:16px}
.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.chart-header h2{margin:0;font-size:16px}
.stats{color:var(--muted);font-size:14px}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{color:#a5b3ae;text-align:left;font-weight:600;border-bottom:1px solid var(--border);padding:10px 8px}
tbody td{padding:10px 8px;border-bottom:1px solid #12181d;color:#d7e4df}
tbody tr:hover{background:#0e141a}
.pnl-pos{color:var(--green)}
.pnl-neg{color:var(--red)}

.muted{color:var(--muted)}