:root{
  --bg:#111;
  --panel:#222;
  --text:#eee;
  --muted:#aaa;
  --line:#333;
  --accent:#4a90e2;
  --twitch:#9146FF;
  --success:#6eff6e;
  --warn:#ffcc66;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  margin-top:50px;
}

input,select{
  margin:5px;
  padding:6px;
  font-size:16px;
  border-radius:6px;
  border:none;
}
input[type="number"]{
  width:100px;
  text-align:center;
}

button{
  padding:8px 20px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
button:hover{
  background:#5aa0ff;
  box-shadow:0 0 12px #9146FF66;
  transform:scale(1.05);
}

.result{
  margin-top:20px;
  background:var(--panel);
  padding:15px;
  border-radius:8px;
  display:inline-block;
  text-align:left;
  width:min(900px,95vw);
}

table{
  border-collapse:collapse;
  width:100%;
  margin-top:10px;
}

th,td{
  border-bottom:1px solid var(--line);
  padding:6px;
  text-align:right;
  transition:background .2s ease;
}
td:first-child,th:first-child{text-align:left}
tr:hover{background:#181818}
th{color:var(--accent)}
th.twitch,td.twitch{color:var(--twitch);font-weight:bold}
tr.total-row{background:#1a1a1a;font-weight:bold;border-top:2px solid #555}
tr.total-row td.streamer{color:var(--success);font-weight:bold}

.highlight{
  font-size:1.6em;
  color:var(--success);
  font-weight:bold;
  text-align:center;
  margin-top:15px;
  opacity:0;
  transform:scale(.9);
  transition:all .6s ease;
}
.highlight.visible{opacity:1;transform:scale(1);text-shadow:0 0 10px #6eff6e88}

.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:6px;
  background:#333;
  color:#ddd;
  font-size:12px;
  margin-left:6px;
}
.note{font-size:14px;color:var(--muted);margin-top:5px}
.warn{color:var(--warn)}

.export-btn{
  display:inline-block;
  margin:20px 0 8px;
  padding:10px 24px;
  background:#222;
  border:1px solid #555;
  color:#ccc;
  border-radius:8px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  font-size:15px;
}
.export-btn:hover{
  background:#2a2a2a;
  color:#fff;
  border-color:var(--twitch);
  box-shadow:0 0 14px #9146FF88;
  transform:scale(1.05);
}

#warn-msg{color:var(--warn);font-size:14px;margin-top:6px}

footer{
  margin:24px auto 40px;
  font-size:12px;
  color:#888;
  text-align:center;
  line-height:1.4;
  max-width:800px;
}
a,a:visited,a:hover,a:active{color:#ccc;text-decoration:none}
a:hover{font-weight:bold}