*, *::before, *::after { box-sizing: border-box; }

.timgym-wrap {
	max-width: 680px;
	margin: 0 auto;
	padding-bottom: 3rem;
}

.tg-empty {
	color: #71717a;
}

/* Week group */
.tg-week { margin-bottom: 2.5rem; }

.tg-week-header {
	font-size: 1rem;
	font-weight: 700;
	color: #18181b;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #18181b;
}

/* Day group */
.tg-day { margin-bottom: 1.25rem; }

.tg-day-header {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #71717a;
	margin: 0 0 0.4rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid #e4e4e7;
}

/* Event row */
.tg-event {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	background: #fff;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.tg-event-time {
	flex: 0 0 56px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #3f3f46;
	padding-top: 2px;
}

.tg-event-body { flex: 1; min-width: 0; }

.tg-event-title {
	font-weight: 600;
	font-size: 1rem;
}

.tg-event-location {
	font-size: 0.8rem;
	color: #71717a;
	margin-top: 2px;
}

.tg-attendees {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.tg-attendee {
	background: #fff;
	color: #3f3f46;
	border: 1px solid #e4e4e7;
	border-radius: 999px;
	font-size: 0.78rem;
	padding: 2px 10px;
}

.tg-attendee--self {
	background: #f0fdf4;
	color: #166534;
	border-color: #bbf7d0;
}

.tg-no-attendees {
	font-size: 0.78rem;
	color: #a1a1aa;
}

/* Auth banner */
.tg-auth-banner {
	background: #fff;
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	border: 1px solid #e4e4e7;
}

.tg-login-tabs {
	display: flex;
	border-bottom: 2px solid #e4e4e7;
	margin-bottom: 1rem;
}

.tg-ltab {
	background: none;
	border: none;
	padding: 0.35rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #71717a;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	font-family: inherit;
	transition: color .15s, border-color .15s;
}

.tg-ltab:hover        { color: #18181b; }
.tg-ltab--active      { color: #16a34a; border-bottom-color: #16a34a; }

.tg-auth-row {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.tg-login-intro {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	color: #52525b;
	line-height: 1.45;
}

.tg-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.78rem;
	font-weight: 600;
	color: #3f3f46;
}

.tg-field input {
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 0.85rem;
	font-family: inherit;
	width: 100%;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}

.tg-field input:focus {
	border-color: #16a34a;
	box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}

.tg-field--inline { flex: 1; min-width: 160px; }

.tg-login-submit {
	background: #16a34a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 7px 16px;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
	flex-shrink: 0;
}

.tg-login-submit:hover    { background: #15803d; }
.tg-login-submit:disabled { opacity: .6; cursor: default; }

.tg-auth-msg {
	margin-top: 0.6rem;
	font-size: 0.82rem;
	border-radius: 6px;
	padding: 8px 12px;
}

.tg-auth-msg--ok  { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.tg-auth-msg--err { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }

/* Spinner */
@keyframes tg-spin { to { transform: rotate(360deg); } }

.tg-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid #e4e4e7;
	border-top-color: #16a34a;
	border-radius: 50%;
	animation: tg-spin .65s linear infinite;
	flex-shrink: 0;
}

.tg-spinner-page {
	display: flex;
	justify-content: center;
	padding: 3rem 0;
}

.tg-btn .tg-spinner {
	width: 14px;
	height: 14px;
	border-width: 2px;
}

/* Action buttons */
.tg-actions {
	display: flex;
	flex-direction: row;
	gap: 0.3rem;
	flex-shrink: 0;
}

.tg-btn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid #d4d4d8;
	background: #fafafa;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}

.tg-plus:hover  { background: #dcfce7; border-color: #86efac; }
.tg-minus:hover { background: #fee2e2; border-color: #fca5a5; }