:root{
  --bg:#f5f7fb;--panel:#fff;--text:#222;--muted:#666;
  --start:#2ecc71;--stop:#e74c3c;--accent:#4c6fff;
  --shadow:0 12px 30px rgba(0,0,0,.08);--ring:rgba(76,111,255,.25);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);margin:0;display:grid;grid-template-rows:auto 1fr;
}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--panel);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.site-header .container{
  max-width:1100px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-left:calc(16px + var(--safe-left));
  padding-right:calc(16px + var(--safe-right));
}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:.2px}
.logo-mark{width:28px;height:28px;border-radius:50%;background:radial-gradient(120% 120% at 20% 20%,#6ee7f9,#7f6bff 60%,#4c6fff);box-shadow:0 4px 12px rgba(76,111,255,.3)}
.main-nav ul{margin:0;padding:0;list-style:none;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.main-nav a{text-decoration:none;color:var(--text);padding:8px 10px;border-radius:8px}
.main-nav a:hover{background:rgba(0,0,0,.04)}

/* Layout */
main{display:grid;place-items:center;padding:24px 16px 40px}
.stopwatch-container{
  position:relative;background:var(--panel);border-radius:16px;box-shadow:var(--shadow);
  padding:24px 20px 24px;width:100%;max-width:820px;text-align:center;border:1px solid rgba(0,0,0,.06)
}
h1{color:var(--text);margin:0 0 10px;font-size:22px;letter-spacing:.2px}

/* Display */
.display{
  font-size:clamp(40px,9vw,72px);
  font-family:'Courier New',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin:16px auto 18px;padding:.25em .5em;background:#f7f8fb;border-radius:12px;color:#222;
  border:1px solid rgba(0,0,0,.06);display:inline-block;white-space:nowrap;max-width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)
}

/* Primary circular controls */
.controls-primary{display:flex;justify-content:center;gap:18px;margin-bottom:12px}
.circle-btn{
  width:clamp(64px,12vw,88px);height:clamp(64px,12vw,88px);
  border:none;border-radius:50%;cursor:pointer;color:#fff;font-weight:700;letter-spacing:.3px;
  transition:transform .08s ease,box-shadow .2s ease,filter .2s ease;box-shadow:0 10px 18px rgba(0,0,0,.15)
}
.circle-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.2)}
.circle-btn:active{transform:scale(.98)}
.start-btn{background:linear-gradient(135deg,var(--start),#1faa57);box-shadow:0 12px 20px rgba(46,204,113,.35)}
.stop-btn{background:linear-gradient(135deg,var(--stop),#c0392b);box-shadow:0 12px 20px rgba(231,76,60,.35)}

/* Secondary controls */
.controls-secondary{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.btn{padding:10px 16px;font-size:14px;border:none;border-radius:10px;cursor:pointer;transition:background-color .15s ease,transform .05s ease;color:#fff}
.btn:active{transform:translateY(1px)}
.reset-btn{background:#4c6fff}.lap-btn{background:#ff9800}.export-btn{background:#7f6bff}

/* Fullscreen button */
.fullscreen-btn{
  position:absolute;top:14px;right:14px;width:clamp(36px,10vw,40px);height:clamp(36px,10vw,40px);
  border-radius:50%;border:1px solid rgba(0,0,0,.08);background:#fff;color:var(--text);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 12px rgba(0,0,0,.08)
}
.fullscreen-btn:hover{box-shadow:0 8px 16px rgba(0,0,0,.12)}

/* Laps */
.laps{margin-top:12px;text-align:left;max-height:min(40vh,220px);overflow-y:auto;border-top:1px dashed rgba(0,0,0,.08);padding-top:8px}
.lap-item{padding:8px 0;border-bottom:1px solid #eee;display:flex;justify-content:space-between;font-size:14px}
.lap-number{color:var(--muted)}
.lap-time{font-family:'Courier New',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.4px}
.export-options{margin-top:10px;display:none}.export-options.show{display:block}

/* Focus ring */
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 6px var(--ring)}

/* Footer */
.site-footer{
  background: var(--panel);
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 24px;
  color: var(--text);
}
.site-footer .container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* wraps to 2/1 cols automatically */
  gap: 24px;
}
.footer-grid > *{ min-width: 0; } /* allow content to shrink without overflow */

.footer-title{
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.footer-list{
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.footer-list li{ margin: 6px 0; }
.footer-list a{
  color: var(--text);
  text-decoration: none;
  word-break: break-word; /* prevent long words from overflowing */
}
.footer-list a:hover{ color: var(--accent); text-decoration: underline; }

/* Footer social icons */
.social-links{
  display:flex;
  gap:10px;
  margin-top:10px;
  padding:0;
  list-style:none;
}
.social-links li{ list-style:none; }
.social-links a{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--text);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 4px rgba(0,0,0,.06);
  transition:transform .06s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.social-links a:hover{
  color:var(--accent);
  border-color:rgba(76,111,255,.35);
  box-shadow:0 4px 10px rgba(76,111,255,.15);
  transform:translateY(-1px);
}
.social-links svg{ width:18px; height:18px; }

/* Bottom bar centered with safe-area padding */
.footer-bottom{
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #fafbff;
  font-size: 13px;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.footer-bottom .container{
  max-width: 1100px;
  width: 100%;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  text-align: center;
}

/* Page content card: left-aligned text, centered card */
.page-content{
  max-width: 900px;
  text-align: left;
}

/* Contact form layout */
.contact-form{
  display: grid;
  gap: 14px;
}
.form-group{
  display: grid;
  gap: 6px;
}
.form-group label{
  font-size: 14px;
  color: var(--muted);
}
.form-group input,
.form-group textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
}
.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.contact-form button[type="submit"]{
  justify-self: start;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.contact-form button[type="submit"]:hover{
  filter: brightness(0.95);
}
.contact-form button[type="submit"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* Modal */
.modal[hidden]{ display:none; }
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal-card{
  background: var(--panel);
  color: var(--text);
  width: clamp(260px, 90vw, 420px);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.08);
  padding: 18px 16px;
  text-align: center;
}
.modal-actions{ margin-top: 12px; display: flex; justify-content: center; gap: 10px; }
.modal-close{
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.modal-close:focus{ outline: none; box-shadow: 0 0 0 3px var(--ring); }  /* fixed: added dot */

/* Lock scroll when modal is open */
body.modal-open{ overflow: hidden; }

/* Small screens */
@media (max-width: 480px){
  .site-footer .container{ padding: 20px 12px; }
  .footer-title{ font-size: 13px; }
  .footer-list{ font-size: 13px; }
  .footer-grid{ gap: 16px; }
  .contact-form{ gap: 12px; }
  .form-group input, .form-group textarea{ padding: 10px 12px; }
}

/* Responsive */
@media (max-width:768px){.site-header .container{padding:10px 12px}.main-nav ul{gap:10px}.stopwatch-container{padding:20px 16px}}
@media (max-width:480px){
  .site-header .container{flex-direction:column;align-items:stretch;gap:8px}
  .main-nav ul{justify-content:space-between}
  h1{font-size:18px}.display{margin:12px auto;padding:12px}.controls-primary{gap:14px}.controls-secondary{gap:8px}
}
@media (max-height:520px){
  h1{font-size:18px}.display{font-size:clamp(28px,7vw,44px);padding:10px 12px}
  .controls-primary{gap:12px}.circle-btn{width:clamp(48px,12vw,60px);height:clamp(48px,12vw,60px)}
  .stopwatch-container{padding:16px 12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (min-width:1200px){.stopwatch-container{max-width:900px}.display{font-size:clamp(50px,5vw,78px)}

/* Center the card in fullscreen */
#stopwatchRoot:fullscreen,
#stopwatchRoot:-webkit-full-screen{
  display:grid;align-content:center;justify-items:center;width:100vw;height:100vh;margin:0;
  padding:calc(24px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));
  border-radius:0;border:none;box-shadow:none;background:var(--panel)
}
#stopwatchRoot:fullscreen .display,
#stopwatchRoot:-webkit-full-screen .display{font-size:clamp(48px,12vw,96px)}
#stopwatchRoot:fullscreen .laps,
#stopwatchRoot:-webkit-full-screen .laps{max-height:min(60vh,420px)}