.tab-active{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.badge{min-width:18px;height:18px;padding:0 6px;border-radius:9999px;background:#ef4444;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.modal{position:fixed;inset:0;z-index:2000;display:none}
.modal.show{display:block}
.card{border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.pretty{box-shadow:0 10px 24px rgba(0,0,0,.05)}
.btn{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.5rem;background:#fff;font-size:13px}
.btn:hover{background:#f8fafc}
.btn-compact{padding:.35rem .55rem;font-size:12px}
.btn-icon{width:22px;height:22px;padding:0;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1}
.btn-danger{border-color:#fecaca;background:#fee2e2}
.btn-danger:hover{background:#fecaca}
.sb-card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:12px;transition:background .15s,box-shadow .15s,border-color .15s;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.sb-card:hover{background:#f8fafc}
.sb-card.active{background:#eff6ff;border-color:#93c5fd;box-shadow:0 0 0 2px #60a5fa inset,0 6px 12px rgba(59,130,246,.12)}
.sb-badge-text{padding:0 6px;line-height:1;font-size:11px}

/* High-contrast black/grey hover for nav tabs */
#tab-calendar:hover,
#tab-participants:hover,
#tab-admin:hover,
#tab-settings:hover{
  background:#e5e7eb;
  color:#000;
  border-color:#d1d5db;
}

.auth-backdrop{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.45);z-index:9999}
.auth-backdrop.show{display:grid}
.auth-card{width:min(420px,92vw);background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:24px}
.auth-title{font-size:18px;font-weight:700;margin-bottom:10px}
.auth-sub{font-size:12px;color:#6b7280;margin-bottom:16px}
.auth-field{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:10px;font-size:14px;margin-bottom:10px}
.auth-btn{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #111827;background:#111827;color:#fff;font-weight:600}
.auth-row{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.auth-small{font-size:12px;color:#6b7280}
.auth-link{font-size:12px;color:#111827;text-decoration:underline;cursor:pointer}
.auth-error{color:#b91c1c;font-size:12px;min-height:16px;margin:6px 0 0}

/* Progress ring - light grey track, green fill, top badge */
.prog-ring{width:28px;height:28px;display:inline-block;vertical-align:middle}
.prog-ring svg{width:100%;height:100%}
.prog-ring .bg{stroke:#e5e7eb;stroke-width:2}
.prog-ring .fg{stroke:#22c55e;stroke-width:5;stroke-linecap:round;transition:stroke-dasharray .3s ease}
.prog-ring .badge-bg{fill:#ffffff;fill-opacity:.4;stroke:#e5e7eb;stroke-width:1}
.prog-ring .badge-txt{fill:#111827;font-size:8px;font-weight:600}

/* Fit-to-screen Calendar overrides */
#view-calendar:not(.hidden){display:flex;flex-direction:column}
#view-calendar:not(.hidden) #calendar-grid > div{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
#view-calendar:not(.hidden) #calendar-grid #cells{flex:1 1 auto;min-height:0}
#view-calendar:not(.hidden) #calendar-grid #cells > button{height:var(--cal-cell-h,auto)!important}

/* Force Arial across the app */
html,body,button,input,select,textarea{font-family:Arial,Helvetica,sans-serif!important}
.font-mono{font-family:Arial,Helvetica,sans-serif!important}