:root{--bg:#f4f7fb;--surface:rgba(255,255,255,.94);--text:#172033;--muted:#667085;--border:#e4e8f0;--accent:#4f46e5;--accent2:#0f766e;--shadow:0 20px 55px rgba(23,32,51,.1)}
body.dark{--bg:#0b1020;--surface:rgba(20,28,49,.96);--text:#f3f6ff;--muted:#aab4c8;--border:#2b3652;--accent:#818cf8;--accent2:#2dd4bf;--shadow:0 20px 55px rgba(0,0,0,.28)}
*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at 10% 10%,rgba(79,70,229,.1),transparent 30%),radial-gradient(circle at 90% 90%,rgba(15,118,110,.1),transparent 30%),var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;transition:.3s}
button{font:inherit}.topbar,.container,footer{width:min(1100px,calc(100% - 32px));margin:auto}.topbar{padding:34px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}h1{font-size:clamp(1.65rem,4vw,2.35rem)}.controls{display:flex;gap:10px}.control-btn,.small-btn,.buttons button{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:.2s}.control-btn:hover,.small-btn:hover,.buttons button:hover{transform:translateY(-2px)}.control-btn{width:44px;height:44px;border-radius:13px;font-weight:800}
.container{padding:18px 0 50px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:clamp(24px,5vw,42px);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.heading{display:flex;align-items:center;gap:12px;margin-bottom:34px}.heading h2{font-size:1.15rem}.badge{padding:6px 10px;border-radius:999px;background:rgba(79,70,229,.12);color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.08em}.badge.secondary{background:rgba(15,118,110,.12);color:var(--accent2)}
.clock,.stopwatch{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-weight:800;white-space:nowrap}.clock{font-size:clamp(3rem,9vw,5.7rem)}.stopwatch{font-size:clamp(2.5rem,7vw,4.7rem);margin-bottom:30px}.date{color:var(--muted);margin-top:14px}.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.buttons button{min-height:48px;border-radius:13px;font-weight:750}.buttons .primary{background:var(--accent);border-color:var(--accent);color:white}.laps-header{margin-top:34px;padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.small-btn{padding:8px 14px;border-radius:10px}.empty{color:var(--muted);padding:22px 0 4px;font-size:.92rem}.laps{list-style:none;margin-top:10px;max-height:220px;overflow-y:auto}.laps li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);color:var(--muted)}.laps li strong{color:var(--text)}footer{padding:0 0 28px;color:var(--muted);text-align:center;font-size:.88rem}
@media(max-width:800px){.container{grid-template-columns:1fr}.card{padding:26px}}@media(max-width:520px){.topbar{align-items:flex-start}.container,footer{width:calc(100% - 20px)}.card{border-radius:22px;padding:22px}.buttons{grid-template-columns:1fr}.clock{font-size:clamp(2.55rem,15vw,4rem)}.stopwatch{font-size:clamp(2.15rem,13vw,3.5rem)}}