:root{
  --bg:#0d0d0d;
  --panel:#111;
  --accent:#1a73e8;
  --danger:#b91c1c;
  --muted:#444;
  --text:#fff;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-align:center;
  padding:28px;
}

main{max-width:760px;margin:0 auto;}

h1{margin:6px 0 18px;font-size:26px}
h2{margin-top:26px;margin-bottom:8px;font-weight:600}

#stopky-display{
  font-size:44px;
  margin:18px 0;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:14px 20px;
  border-radius:10px;
  display:inline-block;
  min-width:320px;
}

.controls{margin-top:12px}
.controls button{
  background:var(--panel);
  color:var(--text);
  border:none;
  padding:10px 14px;
  margin:6px;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
}
.controls button:hover{filter:brightness(1.06)}

.controls button[onclick*="startStopky"]{background:var(--accent)}
.controls button[onclick*="startStopky"]:hover{filter:brightness(.95)}

.controls button[onclick*="saveTime"]{background:#1a73e8;}

.controls button[onclick*="Stop"]{background:#1a73e8;}

table{
  width:100%;
  max-width:560px;
  margin:12px auto 6px;
  border-collapse:collapse;
  background:transparent;
}

th,td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--muted);
  font-size:15px;
}

th{background:transparent;font-weight:700;color:#ddd}

.bottom-buttons{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.export, .delete{
  padding:10px 16px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-size:15px;
}

.export{background:var(--accent); color:white}
.export:hover{filter:brightness(.95)}
.delete{background:var(--danger); color:white}
.delete:hover{filter:brightness(.95)}

/* responzivně */
@media (max-width:480px){
  #stopky-display{font-size:32px; min-width:210px}
  .controls button{padding:8px 10px;font-size:14px}
}