body{font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;margin:0;color:#1f2937}.wrap{max-width:1100px;margin:0 auto;padding:24px}.hero{background:#0f4c81;color:white;padding:28px;border-radius:14px;margin-bottom:20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.card{background:white;border-radius:12px;padding:18px;box-shadow:0 2px 9px #0001}.btn,button,input[type=submit]{background:#0f4c81;color:white;border:0;border-radius:8px;padding:10px 14px;text-decoration:none;display:inline-block;cursor:pointer}.btn.secondary{background:#64748b}.btn.danger,button.danger{background:#b91c1c}.btn.good{background:#047857}input,select,textarea{width:100%;padding:10px;margin:6px 0 12px;border:1px solid #cbd5e1;border-radius:8px;box-sizing:border-box}table{width:100%;border-collapse:collapse;background:white}th,td{border-bottom:1px solid #e5e7eb;padding:9px;text-align:left}th{background:#e2e8f0}.nav{background:#111827;color:white;padding:10px 24px}.nav a{color:white;margin-right:16px}.status{padding:4px 8px;border-radius:20px;background:#e0f2fe}.warn{background:#fff7ed;border-left:5px solid #f97316;padding:12px}.ok{background:#ecfdf5;border-left:5px solid #10b981;padding:12px}.bad{background:#fef2f2;border-left:5px solid #ef4444;padding:12px}.bigtime{font-size:44px;font-weight:bold}.small{font-size:12px;color:#64748b}.strike{text-decoration:line-through;color:#991b1b}@media print{.nav,.noprint,.btn,button{display:none}.wrap{padding:0}.card{box-shadow:none}}

/* Simple landing page requested for SwimTimers */
.home-simple{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:#f5f8fb;}
.home-card{width:100%;max-width:420px;background:#fff;border-radius:14px;padding:2rem;box-shadow:0 10px 28px rgba(0,0,0,.10);text-align:center;}
.home-card h1{margin-top:0;margin-bottom:1.5rem;font-size:2rem;}
.role-form{display:flex;flex-direction:column;gap:1rem;text-align:left;}
.role-form select,.role-form button{font-size:1.05rem;padding:.85rem;border-radius:8px;border:1px solid #c9d3df;}
.role-form button{background:#0b5cab;color:#fff;border:0;font-weight:700;cursor:pointer;}
.role-form button:hover{background:#084b8d;}
.checkbox-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.25rem .75rem;margin:.5rem 0 1rem}.checkbox-list label{font-weight:400}.small{font-size:.9rem;color:#555}
.pending-review { background: #fff8df; }

/* v8 polished beta landing and role selection */
.welcome-body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.30), transparent 32%),
    linear-gradient(135deg,#063b69 0%, #0f4c81 46%, #38bdf8 100%);
  color:#0f172a;
}
.beta-shell,.role-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  box-sizing:border-box;
}
.beta-card,.role-card{
  width:100%;
  max-width:560px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.55);
  border-radius:28px;
  padding:34px;
  box-shadow:0 26px 70px rgba(2,6,23,.28);
  text-align:center;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  margin-bottom:10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-weight:800;
  letter-spacing:.03em;
}
.beta-card h1,.role-card h1{
  margin:8px 0 18px;
  font-size:2.25rem;
  color:#082f49;
}
.notice-panel{
  text-align:left;
  background:linear-gradient(180deg,#eff6ff,#f8fafc);
  border:1px solid #bfdbfe;
  border-radius:18px;
  padding:20px;
  margin:18px 0;
}
.notice-panel h2{
  margin:0 0 8px;
  color:#075985;
  font-size:1.25rem;
}
.notice-panel p{
  margin:0;
  line-height:1.55;
  font-size:1.05rem;
}
.ack-form,.polished-role-form{
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ack-line{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:14px;
  border-radius:14px;
  line-height:1.35;
}
.ack-line input{
  width:auto;
  margin:2px 0 0;
  transform:scale(1.2);
}
.primary-wide{
  width:100%;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#0f4c81,#0284c7);
  color:white;
  border:0;
  font-weight:800;
  font-size:1.05rem;
  box-shadow:0 12px 24px rgba(2,132,199,.28);
}
.primary-wide:hover{filter:brightness(.96);}
.polished-role-form select,.polished-role-form input{
  font-size:1.05rem;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  background:white;
}
.muted-center{
  text-align:center;
  color:#64748b;
  margin-top:-8px;
}
.pin-wrap{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:14px;
  border-radius:14px;
}
@media(max-width:560px){
  .beta-card,.role-card{padding:24px;border-radius:22px;}
  .beta-card h1,.role-card h1{font-size:1.8rem;}
}
.danger-card{border-left:6px solid #d9534f;}
.checkline{display:block;margin:12px 0;font-weight:500;}
.checkline input{width:auto;margin-right:8px;}

/* WebSocket stopwatch timing UI */
.stopwatch{font-size:3.2rem;font-weight:800;letter-spacing:.04em;margin:1rem 0;padding:1rem;border-radius:16px;background:#071d2b;color:#e8fbff;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-weight:700;font-size:.85rem}.badge.good{background:#dcfce7;color:#166534}.badge.danger{background:#fee2e2;color:#991b1b}.strike{text-decoration:line-through;color:#991b1b}.small{font-size:.9rem;color:#52606d}