@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --card-bg: linear-gradient(145deg,#ffffff,#e6e6e6);
  --card-shadow: 10px 10px 20px #d1d9e6, -10px -10px 20px #ffffff;
  --muted: #6b7280;
}
html.dark {
  --card-bg: linear-gradient(145deg,#1f2937,#111827);
  --card-shadow: 6px 6px 15px #0b0f14, -6px -6px 15px #2f3a4b;
  --muted: #9ca3af;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Card */
.card {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card:hover { transform: translateY(-4px); }

/* Head & title */
.myhead { padding: 20px; margin: auto; }
.card-head { margin-bottom: 8px; }
.card-title { font-weight: 700; color: #4f46e5; }
html.dark .card-title { color: #a5b4fc; }

/* body content */
.card-body { padding-top: 8px; }

/* standard time display */
.time-display {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  text-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
html.dark .time-display { color: #f8fafc; text-shadow:none; }

/* BIG stopwatch display */
.time-display-sw {
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #0b1220;
}
html.dark .time-display-sw { color: #f8fafc; }

/* buttons */
.btn {
  padding: 10px 8px;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  box-shadow: 0 6px 18px rgba(79,70,229,0.12);
  border: none;
}
.btn:hover { transform: translateY(-3px); }

/* small inputs */
.small-input {
  width: 72px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.04), inset -2px -2px 6px rgba(255,255,255,0.9);
}
html.dark .small-input {
  background: #111827;
  color: #e6eef8;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.6), inset -2px -2px 6px rgba(255,255,255,0.02);
}

/* progress */
.progress-wrap { width: 100%; }
.progress-bar {
  width: 100%; height: 10px;
  background: linear-gradient(90deg,#f3f4f6,#e5e7eb);
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
html.dark .progress-bar { background: linear-gradient(90deg,#111827,#1f2937); }
.progress-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#6366f1,#a855f7);
  transition: width 0.6s linear;
}

/* lap list */
.lap-list { max-height: 160px; overflow-y: auto; margin-top: 8px; font-size: 0.92rem; }
.lap-list div { display:flex; justify-content:space-between; padding: 6px 8px; border-radius:6px; margin-bottom:6px; background: rgba(0,0,0,0.03); }
html.dark .lap-list div { background: rgba(255,255,255,0.03); }

/* nav */
.nav-btn {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 8px;
  border-radius: 8px;
  transition: transform .12s ease, background .12s;
}
.nav-btn.active {
  color: #4f46e5;
  background: linear-gradient(90deg, rgba(79,70,229,0.08), rgba(168,85,247,0.06));
  transform: translateY(-2px);
}
.nav-btn i { display: inline-flex; }

/* header buttons */
#soundTestBtn, #soundToggle { font-weight:700; }

/* responsiveness tweaks */
@media (min-width:768px) {
  .time-display { font-size:2.6rem; }
  .time-display-sw { font-size:4rem; }
}