/* ----------  Theme tokens  ---------- */
:root{
  --bg:#121417;          /* page background */
  --surface:#1e2228;     /* card background */
  --surface-h:#262b34;   /* card hover */
  --text:#f2f4f8;
  --text-soft:#a0a4ac;
  --accent:#3fa1ff;
  --accent-h:#60b4ff;
  --border:#2b3038;
  --radius:10px;
  --shadow:0 4px 12px rgba(0,0,0,.35);
  --font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ----------  Layout  ---------- */
*{box-sizing:border-box;margin:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  max-width:820px;
  margin:auto;
  padding:2rem 1rem 3rem;
  line-height:1.5;
}
header,footer{text-align:center;margin-bottom:2rem}
.logo{font-size:1.4em;vertical-align:-2px}

/* ----------  Cards  ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.6rem;
  margin-bottom:2rem;
  box-shadow:var(--shadow);
  transition:.25s background;
}
.card:hover{background:var(--surface-h)}

h1{font-size:1.9rem;margin-bottom:.6rem}
h2{font-size:1.3rem;margin-bottom:.8rem;color:var(--accent)}

/* ----------  Upload row / buttons ---------- */
.upload-row{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem}
input[type="file"]{color:var(--text-soft)}
.btn{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:.55rem 1rem;
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  transition:.2s background;
}
.btn:hover{background:var(--accent-h)}
.msg{margin-top:.4rem;color:var(--text-soft)}

/* ----------  Filter ---------- */
.filter{display:block;margin:.9rem 0;color:var(--text-soft)}
.filter input{
  margin-left:.4rem;
  padding:.35rem .5rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
}

/* ----------  Table ---------- */
.table-wrapper{overflow-x:auto;margin-top:1rem}
table{
  width:100%;border-collapse:collapse;font-size:.92rem;
}
th,td{padding:.55rem;text-align:left}
th{background:var(--surface-h);color:var(--accent);font-weight:600}
tr:nth-child(even){background:#1a1d22}
tr:hover{background:#252a32}
td:nth-child(3){text-align:right;width:90px}

/* ── modal overlay ───────────────────────── */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(2px);
  align-items:center;justify-content:center;
  z-index:1000;
}
.modal-content{
  background:#1f1f22;padding:1.5rem 2rem;
  border-radius:8px;box-shadow:0 2px 10px #000a;
  position:relative;max-width:440px;width:90%;
}
#closeModal{position:absolute;top:.5rem;right:.8rem;
  cursor:pointer;font-size:1.5rem;color:#ccc;}
#closeModal:hover{color:#fff}
#graph.btn:hover{box-shadow:0 0 6px var(--accent-h);}
#pie { display:block; margin:auto; }      /* centre the circle */
.legend{
  margin-top:1rem; font-size:.9rem; line-height:1.6;
  display:flex; flex-direction:column; gap:.2rem;
}
.legend span{ display:flex; align-items:center; gap:.4rem; }
.legend i{
  width:14px; height:14px; border-radius:3px;
  display:inline-block;
}