/* ============================================================
	RTB Whiteboard Styles
============================================================ */

/* ============================================================
	Variables / Base
============================================================ */

:root {
	--rtb-bg: #f4f6fa;
	--rtb-surface: #ffffff;
	--rtb-surface-soft: #f8fafc;
	--rtb-surface-muted: #fafafa;
	--rtb-ink: #0f172a;
	--rtb-text: #334155;
	--rtb-muted: #64748b;
	--rtb-border: rgba( 15, 23, 42, 0.08 );
	--rtb-border-strong: #d9dee7;
	--rtb-shadow: 0 18px 50px rgba( 15, 23, 42, 0.06 );
	--rtb-shadow-hover: 0 22px 60px rgba( 15, 23, 42, 0.1 );
	--rtb-radius: 24px;
	--rtb-radius-sm: 14px;
	--rtb-radius-md: 18px;
	--rtb-radius-lg: 22px;
	--rtb-max-width: 1180px;
	--rtb-pad: 24px;
	--rtb-focus: rgba( 45, 156, 219, 0.12 );
	--rtb-focus-border: rgba( 45, 156, 219, 0.5 );
}

* {
	box-sizing: border-box;
}

body {
	background: var( --rtb-bg );
	color: var( --rtb-ink );
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
	min-height: 100vh;
}

a {
	color: inherit;
}

.d-none {
	display: none !important;
}

/* ============================================================
	App Shell / Header
============================================================ */

.whiteboard-topbar {
	background: var( --rtb-surface );
	border-bottom: 1px solid var( --rtb-border );
	box-shadow: 0 8px 30px rgba( 15, 23, 42, 0.04 );
	position: sticky;
	top: 0;
	z-index: 100;
}

.whiteboard-topbar-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var( --rtb-max-width );
	min-height: 68px;
	padding: 0 var( --rtb-pad );
}

.whiteboard-brand {
	color: var( --rtb-ink );
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.whiteboard-brand:hover,
.whiteboard-brand:focus {
	color: var( --rtb-ink );
}

.whiteboard-nav {
	align-items: center;
	display: flex;
	gap: 8px;
}

.whiteboard-nav-link {
	border-radius: 999px;
	color: var( --rtb-text );
	font-size: 0.92rem;
	font-weight: 800;
	padding: 0.55rem 0.85rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.whiteboard-nav-link:hover,
.whiteboard-nav-link:focus {
	background: rgba( 15, 23, 42, 0.06 );
	color: var( --rtb-ink );
}

.whiteboard-main {
	min-height: calc( 100vh - 68px );
	padding: 36px 0 56px;
}

/* ============================================================
	Shared Layout / Typography
============================================================ */

.page-header,
.whiteboard-workout-layout,
.whiteboard-history-layout,
.whiteboard-profile-layout,
.whiteboard-admin-layout,
.whiteboard-login-layout,
.admin-card-grid,
.dashboard-grid {
	margin-left: auto;
	margin-right: auto;
	max-width: var( --rtb-max-width );
	padding-left: var( --rtb-pad );
	padding-right: var( --rtb-pad );
}

.page-header {
	margin-bottom: 28px;
}

.eyebrow,
.page-header .eyebrow {
	color: var( --rtb-muted );
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.page-header h1 {
	color: var( --rtb-ink );
	font-size: clamp( 2.4rem, 5vw, 4.4rem );
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 1;
	margin: 0 0 14px;
}

.lead,
.page-header .lead {
	color: #475569;
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
	max-width: 680px;
}

.whiteboard-card {
	background: var( --rtb-surface );
	border: 1px solid var( --rtb-border );
	border-radius: var( --rtb-radius );
	box-shadow: var( --rtb-shadow );
	padding: 24px;
}

.whiteboard-card h3 {
	color: var( --rtb-ink );
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0 0 8px;
}

.whiteboard-muted {
	color: var( --rtb-muted );
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
	Shared Forms / Buttons / Alerts
============================================================ */

.whiteboard-button {
	align-items: center;
	background: var( --rtb-ink );
	border: 1px solid var( --rtb-ink );
	border-radius: var( --rtb-radius-sm );
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 900;
	justify-content: center;
	margin-top: 12px;
	padding: 13px 18px;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.whiteboard-button:hover,
.whiteboard-button:focus {
	background: #1e293b;
	border-color: #1e293b;
	color: #ffffff;
}

.whiteboard-button:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.whiteboard-button-secondary {
	background: #ffffff;
	border-color: var( --rtb-border-strong );
	color: var( --rtb-ink );
}

.whiteboard-button-secondary:hover,
.whiteboard-button-secondary:focus {
	background: var( --rtb-surface-soft );
	border-color: #cbd5e1;
	color: var( --rtb-ink );
}

.whiteboard-button-secondary:disabled {
	background: #f1f5f9;
	color: #94a3b8;
}

.whiteboard-alert {
	border-radius: var( --rtb-radius-md );
	font-size: 1rem;
	font-weight: 700;
	margin: 0 auto 24px;
	max-width: var( --rtb-max-width );
	padding: 16px 18px;
}

.whiteboard-alert-info {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1d4ed8;
}

.whiteboard-alert-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.whiteboard-form-message {
	font-size: 0.9rem;
	font-weight: 800;
	min-height: 22px;
	padding-top: 4px;
}

.whiteboard-form-message-success {
	color: #15803d;
}

.whiteboard-form-message-error {
	color: #b91c1c;
}

.whiteboard-result-form,
.whiteboard-login-form,
.whiteboard-admin-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.whiteboard-result-form label,
.whiteboard-login-form label,
.whiteboard-admin-field label,
.whiteboard-history-control-group label {
	color: var( --rtb-ink );
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.whiteboard-result-form input,
.whiteboard-result-form select,
.whiteboard-result-form textarea,
.whiteboard-login-form input,
.whiteboard-admin-field input,
.whiteboard-admin-field select,
.whiteboard-history-control-group select {
	background: #ffffff;
	border: 1px solid var( --rtb-border-strong );
	border-radius: var( --rtb-radius-sm );
	color: var( --rtb-ink );
	font-size: 1rem;
	width: 100%;
}

.whiteboard-result-form input,
.whiteboard-result-form select,
.whiteboard-result-form textarea,
.whiteboard-login-form input {
	padding: 13px 14px;
}

.whiteboard-admin-field input,
.whiteboard-admin-field select,
.whiteboard-history-control-group select {
	min-height: 48px;
	padding: 0 14px;
}

.whiteboard-result-form input:focus,
.whiteboard-result-form select:focus,
.whiteboard-result-form textarea:focus,
.whiteboard-login-form input:focus,
.whiteboard-admin-field input:focus,
.whiteboard-admin-field select:focus,
.whiteboard-history-control-group select:focus {
	border-color: var( --rtb-focus-border );
	box-shadow: 0 0 0 4px var( --rtb-focus );
	outline: none;
}

/* ============================================================
	Badges / Pills
============================================================ */

.whiteboard-pill,
.whiteboard-result-type-pill,
.whiteboard-result-type-mini,
.whiteboard-admin-badge {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.whiteboard-pill {
	background: rgba( 214, 31, 38, 0.1 );
	border: 1px solid rgba( 214, 31, 38, 0.16 );
	color: #b42335;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	padding: 0.5rem 0.75rem;
}

.whiteboard-result-type-pill,
.whiteboard-result-type-mini {
	background: #ffffff;
	border: 1px solid rgba( 220, 53, 69, 0.18 );
	color: #b42335;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	padding: 0.5rem 0.75rem;
}

.whiteboard-result-type-pill {
	margin-top: 4px;
}

.whiteboard-admin-badge {
	background: #ffffff;
	border: 1px solid var( --rtb-border );
	color: #475569;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	padding: 0.42rem 0.65rem;
}

.whiteboard-admin-badge-active {
	background: #dcfce7;
	border-color: #86efac;
	color: #166534;
}

.whiteboard-admin-badge-inactive {
	background: #fee2e2;
	border-color: #fecaca;
	color: #991b1b;
}

/* ============================================================
	Today / Workout Screen
============================================================ */

.whiteboard-workout-layout {
	padding-bottom: 48px;
}

.whiteboard-workout-shell {
	align-items: flex-start;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax( 0, 1fr ) 360px;
}

.whiteboard-workout-card {
	overflow: hidden;
	padding: 0;
}

.whiteboard-workout-card-top {
	align-items: flex-start;
	background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
	border-bottom: 1px solid var( --rtb-border );
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 24px;
}

.whiteboard-workout-card-top h2 {
	color: var( --rtb-ink );
	font-size: clamp( 1.8rem, 3vw, 2.6rem );
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 12px 0 8px;
}

.whiteboard-workout-sections {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.whiteboard-workout-section {
	background: var( --rtb-surface-muted );
	border: 1px solid var( --rtb-border );
	border-radius: 20px;
	overflow: hidden;
}

.whiteboard-workout-section-heading {
	align-items: center;
	background: rgba( 15, 23, 42, 0.04 );
	border-bottom: 1px solid var( --rtb-border );
	color: var( --rtb-ink );
	display: flex;
	font-size: 0.82rem;
	font-weight: 900;
	justify-content: space-between;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 14px 18px;
	text-transform: uppercase;
}

.whiteboard-workout-section-content,
.whiteboard-workout-wod-body {
	color: var( --rtb-text );
	font-size: 1rem;
	line-height: 1.65;
	padding: 16px 18px 18px;
}

.whiteboard-workout-section-content p,
.whiteboard-variant-content p,
.whiteboard-workout-format-content p,
.whiteboard-stimulus-content p {
	margin: 0;
}

.whiteboard-workout-section-content p + p,
.whiteboard-variant-content p + p,
.whiteboard-workout-format-content p + p,
.whiteboard-stimulus-content p + p {
	margin-top: 0.65rem;
}

.whiteboard-workout-section-content strong,
.whiteboard-variant-content strong,
.whiteboard-workout-format-content strong,
.whiteboard-stimulus-content strong {
	color: var( --rtb-ink );
	font-weight: 900;
}

.whiteboard-workout-section-warmup .whiteboard-workout-section-heading {
	background: rgba( 255, 193, 7, 0.12 );
	border-bottom-color: rgba( 255, 193, 7, 0.3 );
	color: #9a6700;
}

.whiteboard-workout-section-strength .whiteboard-workout-section-heading {
	background: rgba( 111, 66, 193, 0.1 );
	border-bottom-color: rgba( 111, 66, 193, 0.25 );
	color: #5a32a3;
}

.whiteboard-workout-section-wod .whiteboard-workout-section-heading {
	background: rgba( 220, 53, 69, 0.1 );
	border-bottom-color: rgba( 220, 53, 69, 0.25 );
	color: #b42335;
}

.whiteboard-workout-section-accessory .whiteboard-workout-section-heading {
	background: rgba( 32, 201, 151, 0.1 );
	border-bottom-color: rgba( 32, 201, 151, 0.25 );
	color: #0f7a5c;
}

.whiteboard-workout-section-cooldown .whiteboard-workout-section-heading {
	background: rgba( 13, 110, 253, 0.1 );
	border-bottom-color: rgba( 13, 110, 253, 0.25 );
	color: #0a58ca;
}

.whiteboard-workout-format {
	background: #f8fbff;
	border: 1px solid #cfe4f7;
	border-radius: 16px;
	margin-bottom: 16px;
	padding: 16px;
}

.whiteboard-workout-format-label {
	color: var( --rtb-ink );
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.whiteboard-workout-format-content {
	color: var( --rtb-ink );
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.45;
}

.whiteboard-variant-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.whiteboard-variant-card {
	background: #f8f8fc;
	border: 1px solid #d9ddf6;
	border-radius: 16px;
	overflow: hidden;
}

.whiteboard-variant-title {
	border-bottom: 1px solid var( --rtb-border );
	color: var( --rtb-ink );
	font-size: 0.95rem;
	font-weight: 900;
	padding: 13px 16px;
}

.whiteboard-variant-content {
	color: var( --rtb-text );
	font-size: 1rem;
	line-height: 1.6;
	padding: 14px 16px 16px;
}

.whiteboard-variant-elite {
	background: rgba( 93, 107, 255, 0.06 );
	border-color: rgba( 93, 107, 255, 0.15 );
}

.whiteboard-variant-competitive {
	background: rgba( 93, 107, 255, 0.04 );
	border-color: rgba( 93, 107, 255, 0.12 );
}

.whiteboard-variant-performance {
	background: rgba( 93, 107, 255, 0.025 );
	border-color: rgba( 93, 107, 255, 0.1 );
}

.whiteboard-variant-lifestyle {
	background: rgba( 0, 184, 148, 0.05 );
	border-color: rgba( 0, 184, 148, 0.14 );
}

.whiteboard-stimulus {
	border-top: 1px solid rgba( 15, 23, 42, 0.1 );
	margin-top: 16px;
	padding-top: 16px;
}

.whiteboard-stimulus-title {
	color: var( --rtb-muted );
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.whiteboard-stimulus-content {
	color: var( --rtb-text );
	font-size: 0.96rem;
	line-height: 1.6;
}

.whiteboard-workout-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 92px;
}

.whiteboard-result-form {
	margin-top: 18px;
}

.whiteboard-result-form label {
	margin-top: 8px;
}

.whiteboard-whiteboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.whiteboard-whiteboard-row {
	align-items: center;
	background: var( --rtb-surface-soft );
	border: 1px solid var( --rtb-border );
	border-radius: 16px;
	display: flex;
	gap: 12px;
	padding: 12px;
}

.whiteboard-whiteboard-rank {
	align-items: center;
	background: var( --rtb-ink );
	border-radius: 999px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 30px;
	font-size: 0.82rem;
	font-weight: 900;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.whiteboard-whiteboard-main {
	flex: 1 1 auto;
	min-width: 0;
}

.whiteboard-whiteboard-name {
	color: var( --rtb-ink );
	font-size: 0.96rem;
	font-weight: 900;
	line-height: 1.2;
}

.whiteboard-whiteboard-meta {
	color: var( --rtb-muted );
	font-size: 0.78rem;
	font-weight: 800;
	margin-top: 3px;
	text-transform: uppercase;
}

.whiteboard-whiteboard-score {
	color: var( --rtb-ink );
	font-size: 1rem;
	font-weight: 900;
	white-space: nowrap;
}

/* ============================================================
	Workout History Screen
============================================================ */

.whiteboard-history-layout {
	padding-bottom: 48px;
}

.whiteboard-history-controls {
	align-items: flex-end;
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.whiteboard-history-control-group {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
}

.whiteboard-history-button {
	flex: 0 0 auto;
	margin-top: 0;
	min-height: 48px;
}

.whiteboard-history-list {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.whiteboard-history-card {
	color: inherit;
	display: block;
	padding: 22px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.whiteboard-history-card:hover,
.whiteboard-history-card:focus {
	border-color: rgba( 15, 23, 42, 0.16 );
	box-shadow: var( --rtb-shadow-hover );
	color: inherit;
	transform: translateY( -2px );
}

.whiteboard-history-card-top {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 18px;
}

.whiteboard-history-card h2 {
	color: var( --rtb-ink );
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 10px;
}

.whiteboard-history-card p {
	color: var( --rtb-muted );
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0;
}

.whiteboard-history-empty {
	color: var( --rtb-muted );
	font-size: 1rem;
	font-weight: 800;
	grid-column: 1 / -1;
	text-align: center;
}

.whiteboard-history-pagination {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 28px;
}

.whiteboard-history-pagination span {
	color: var( --rtb-muted );
	font-size: 0.95rem;
	font-weight: 900;
}

/* ============================================================
	Profile / My Results Screen
============================================================ */

.whiteboard-profile-layout {
	padding-bottom: 48px;
}

.whiteboard-profile-summary {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}

.whiteboard-profile-summary h2 {
	color: var( --rtb-ink );
	font-size: clamp( 1.8rem, 3vw, 2.6rem );
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0 0 8px;
}

.whiteboard-profile-stat {
	align-items: center;
	background: var( --rtb-ink );
	border-radius: var( --rtb-radius-lg );
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 110px;
	min-width: 150px;
	padding: 18px;
	text-align: center;
}

.whiteboard-profile-stat span {
	font-size: 2.6rem;
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
}

.whiteboard-profile-stat small {
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-top: 8px;
	text-transform: uppercase;
}

.whiteboard-profile-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.whiteboard-result-card {
	align-items: stretch;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 22px;
}

.whiteboard-result-card-main {
	flex: 1 1 auto;
	min-width: 0;
}

.whiteboard-result-card-top {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.whiteboard-result-card h2 {
	color: var( --rtb-ink );
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.18;
	margin: 0 0 8px;
}

.whiteboard-result-card-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.whiteboard-result-card-meta span {
	background: #f1f5f9;
	border: 1px solid var( --rtb-border );
	border-radius: 999px;
	color: #475569;
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.05em;
	padding: 0.4rem 0.65rem;
	text-transform: uppercase;
}

.whiteboard-result-notes {
	background: var( --rtb-surface-soft );
	border: 1px solid var( --rtb-border );
	border-radius: var( --rtb-radius-sm );
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 14px 0 0;
	padding: 12px 14px;
}

.whiteboard-result-card-score {
	align-items: flex-end;
	display: flex;
	flex: 0 0 150px;
	flex-direction: column;
	justify-content: center;
	text-align: right;
}

.whiteboard-result-card-score span {
	color: var( --rtb-ink );
	font-size: 2rem;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.whiteboard-result-card-score small {
	color: var( --rtb-muted );
	font-size: 0.76rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-top: 6px;
	text-transform: uppercase;
}

.whiteboard-result-card-link {
	background: var( --rtb-ink );
	border-radius: 999px;
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 900;
	margin-top: 14px;
	padding: 0.55rem 0.8rem;
	text-decoration: none;
}

.whiteboard-result-card-link:hover,
.whiteboard-result-card-link:focus {
	background: #1e293b;
	color: #ffffff;
}

.whiteboard-profile-empty {
	text-align: center;
}

.whiteboard-profile-empty h2 {
	color: var( --rtb-ink );
	font-size: 1.6rem;
	font-weight: 900;
	margin: 0 0 8px;
}

.whiteboard-profile-empty p {
	color: var( --rtb-muted );
	font-size: 1rem;
	margin: 0 0 18px;
}

/* ============================================================
	Login Screen
============================================================ */

.whiteboard-login-layout {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: calc( 100vh - 68px - 72px );
	padding-bottom: 48px;
}

.whiteboard-login-card {
	max-width: 520px;
	padding: 34px;
	width: 100%;
}

.whiteboard-login-header {
	margin-bottom: 26px;
}

.whiteboard-login-header h1 {
	color: var( --rtb-ink );
	font-size: clamp( 2.2rem, 5vw, 3.6rem );
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 1;
	margin: 0 0 14px;
}

.whiteboard-login-form .whiteboard-button {
	margin-top: 16px;
	width: 100%;
}

.whiteboard-login-error {
	margin: 0 0 20px;
	max-width: none;
}

/* ============================================================
	Admin Landing
============================================================ */

.admin-card-grid,
.dashboard-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin-top: 32px;
}

.admin-card,
.dashboard-card {
	background: var( --rtb-surface );
	border: 1px solid var( --rtb-border );
	border-radius: var( --rtb-radius );
	box-shadow: 0 18px 50px rgba( 15, 23, 42, 0.08 );
	color: inherit;
	display: block;
	padding: 28px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.admin-card:hover,
.admin-card:focus,
.dashboard-card:hover,
.dashboard-card:focus {
	border-color: rgba( 15, 23, 42, 0.16 );
	box-shadow: 0 24px 70px rgba( 15, 23, 42, 0.12 );
	color: inherit;
	transform: translateY( -2px );
}

.admin-card-label {
	color: var( --rtb-muted );
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.admin-card h2,
.dashboard-card h2 {
	color: var( --rtb-ink );
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.1;
	margin: 0 0 10px;
}

.admin-card p,
.dashboard-card p {
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* ============================================================
	Admin Users
============================================================ */

.whiteboard-admin-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 48px;
}

.whiteboard-admin-user-create h2,
.whiteboard-admin-users-card h2 {
	color: var( --rtb-ink );
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin: 0 0 18px;
}

.whiteboard-admin-form {
	gap: 16px;
}

.whiteboard-admin-form-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.whiteboard-admin-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.whiteboard-admin-users-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.whiteboard-admin-user-row {
	background: var( --rtb-surface-soft );
	border: 1px solid var( --rtb-border );
	border-radius: var( --rtb-radius-md );
	overflow: hidden;
}

.whiteboard-admin-user-row summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	list-style: none;
	padding: 16px 18px;
}

.whiteboard-admin-user-row summary::-webkit-details-marker {
	display: none;
}

.whiteboard-admin-user-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.whiteboard-admin-user-main strong {
	color: var( --rtb-ink );
	font-size: 1rem;
	font-weight: 900;
}

.whiteboard-admin-user-main span {
	color: var( --rtb-muted );
	font-size: 0.9rem;
	font-weight: 700;
}

.whiteboard-admin-user-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.whiteboard-admin-user-edit-form {
	background: #ffffff;
	border-top: 1px solid var( --rtb-border );
	padding: 18px;
}

.whiteboard-admin-user-meta {
	color: var( --rtb-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	font-weight: 700;
	gap: 12px;
}

/* ============================================================
	Responsive
============================================================ */

@media ( max-width: 991.98px ) {
	.whiteboard-workout-shell {
		grid-template-columns: 1fr;
	}

	.whiteboard-workout-sidebar {
		position: static;
	}

	.whiteboard-variant-grid,
	.whiteboard-admin-form-grid {
		grid-template-columns: 1fr;
	}

	.whiteboard-history-list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 800px ) {
	.admin-card-grid,
	.dashboard-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 767.98px ) {
	:root {
		--rtb-pad: 16px;
	}

	.whiteboard-topbar-inner {
		min-height: 62px;
	}

	.whiteboard-brand {
		font-size: 1.1rem;
	}

	.whiteboard-nav {
		gap: 2px;
	}

	.whiteboard-nav-link {
		font-size: 0.82rem;
		padding: 0.45rem 0.55rem;
	}

	.whiteboard-main {
		padding: 28px 0 42px;
	}

	.page-header {
		margin-bottom: 22px;
	}

	.page-header h1 {
		font-size: 2.35rem;
	}

	.whiteboard-card {
		border-radius: 20px;
		padding: 18px;
	}

	.whiteboard-workout-layout,
	.whiteboard-history-layout,
	.whiteboard-profile-layout,
	.whiteboard-admin-layout {
		padding-bottom: 36px;
	}

	.whiteboard-workout-card-top {
		flex-direction: column;
		padding: 18px;
	}

	.whiteboard-workout-sections {
		gap: 12px;
		padding: 18px;
	}

	.whiteboard-workout-section {
		border-radius: 18px;
	}

	.whiteboard-workout-section-heading {
		padding: 13px 14px;
	}

	.whiteboard-workout-section-content,
	.whiteboard-workout-wod-body {
		padding: 14px;
	}

	.whiteboard-workout-wod-heading {
		align-items: center;
		flex-direction: row;
	}

	.whiteboard-result-type-mini {
		font-size: 0.64rem;
		padding: 0.42rem 0.58rem;
	}

	.whiteboard-history-controls {
		align-items: stretch;
		flex-direction: column;
	}

	.whiteboard-history-list {
		grid-template-columns: 1fr;
	}

	.whiteboard-history-card {
		padding: 18px;
	}

	.whiteboard-history-pagination {
		flex-direction: column;
	}

	.whiteboard-profile-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
	}

	.whiteboard-profile-stat {
		min-height: 0;
		width: 100%;
	}

	.whiteboard-result-card {
		flex-direction: column;
		gap: 16px;
		padding: 18px;
	}

	.whiteboard-result-card-score {
		align-items: flex-start;
		flex: 0 0 auto;
		text-align: left;
	}

	.whiteboard-result-card-score span {
		font-size: 1.8rem;
	}

	.whiteboard-login-layout {
		align-items: flex-start;
		min-height: auto;
		padding-bottom: 42px;
		padding-top: 32px;
	}

	.whiteboard-login-card {
		border-radius: var( --rtb-radius-lg );
		padding: 24px;
	}

	.whiteboard-login-header h1 {
		font-size: 2.4rem;
	}

	.whiteboard-admin-user-row summary {
		align-items: flex-start;
		flex-direction: column;
	}

	.whiteboard-admin-user-badges {
		justify-content: flex-start;
	}

	.admin-card,
	.dashboard-card {
		padding: 24px;
	}
}

/* ============================================================
	Admin Debug / API Preview Screens
============================================================ */

.whiteboard-admin-debug-card {
	overflow: hidden;
	padding: 0;
}

.whiteboard-admin-debug-header {
	align-items: center;
	background: linear-gradient( 180deg, #ffffff 0%, #f8fafc 100% );
	border-bottom: 1px solid rgba( 15, 23, 42, 0.08 );
	display: flex;
	gap: 18px;
	justify-content: space-between;
	padding: 24px;
}

.whiteboard-admin-debug-header h2 {
	color: #0f172a;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
}

.whiteboard-admin-debug-header p {
	color: #64748b;
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0;
}

.whiteboard-admin-debug-link {
	background: #0f172a;
	border-radius: 999px;
	color: #ffffff;
	flex: 0 0 auto;
	font-size: 0.84rem;
	font-weight: 900;
	padding: 0.65rem 0.9rem;
	text-decoration: none;
}

.whiteboard-admin-debug-link:hover,
.whiteboard-admin-debug-link:focus {
	background: #1e293b;
	color: #ffffff;
}

.whiteboard-admin-debug-output {
	background: #020617;
	color: #e2e8f0;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	max-height: 620px;
	overflow: auto;
	padding: 24px;
	white-space: pre-wrap;
	word-break: break-word;
}

.whiteboard-admin-debug-alert {
	margin: 24px;
	max-width: none;
}

.whiteboard-admin-auth-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	padding: 24px;
}

.whiteboard-admin-auth-item {
	background: #f8fafc;
	border: 1px solid rgba( 15, 23, 42, 0.08 );
	border-radius: 18px;
	padding: 18px;
}

.whiteboard-admin-auth-item span {
	color: #64748b;
	display: block;
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.whiteboard-admin-auth-item strong {
	color: #0f172a;
	display: block;
	font-size: 1rem;
	font-weight: 900;
	word-break: break-word;
}

@media ( max-width: 767.98px ) {
	.whiteboard-admin-debug-header {
		align-items: flex-start;
		flex-direction: column;
		padding: 20px;
	}

	.whiteboard-admin-debug-link {
		text-align: center;
		width: 100%;
	}

	.whiteboard-admin-debug-output {
		font-size: 0.82rem;
		padding: 18px;
	}

	.whiteboard-admin-auth-grid {
		grid-template-columns: 1fr;
		padding: 20px;
	}
}

.whiteboard-my-result {
	background: #f8fafc;
	border: 1px solid rgba( 15, 23, 42, 0.08 );
	border-radius: 18px;
	margin-top: 18px;
	padding: 16px;
}

.whiteboard-my-result span {
	color: #64748b;
	display: block;
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.whiteboard-my-result strong {
	color: #0f172a;
	display: block;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.whiteboard-my-result p {
	color: #64748b;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 8px 0 0;
}

.whiteboard-button-delete {
	margin-top: 0;
}

.whiteboard-button-delete:hover,
.whiteboard-button-delete:focus {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

/* ============================================================
	Result Notes / Score Guidance
============================================================ */

.whiteboard-field-help {
	color: var( --rtb-muted );
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.4;
	margin: -4px 0 4px;
}

.whiteboard-whiteboard-notes {
	color: #64748b;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 6px;
	text-transform: none;
}

.whiteboard-result-notes strong {
	color: var( --rtb-ink );
	font-weight: 900;
}

.whiteboard-result-private-notes {
	background: #fff7ed;
	border-color: #fed7aa;
	color: #9a3412;
}


/* ============================================================
	Profile Filters
============================================================ */

.whiteboard-profile-controls {
	align-items: flex-end;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax( 220px, 1.5fr ) repeat( 3, minmax( 150px, 1fr ) );
	margin-bottom: 24px;
}

.whiteboard-profile-control-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.whiteboard-profile-control-group label {
	color: #0f172a;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.whiteboard-profile-control-group input,
.whiteboard-profile-control-group select {
	background: #ffffff;
	border: 1px solid #d9dee7;
	border-radius: 14px;
	box-sizing: border-box;
	color: #0f172a;
	font-size: 1rem;
	min-height: 48px;
	padding: 0 14px;
	width: 100%;
}

.whiteboard-profile-control-group input:focus,
.whiteboard-profile-control-group select:focus {
	border-color: rgba( 45, 156, 219, 0.5 );
	box-shadow: 0 0 0 4px rgba( 45, 156, 219, 0.12 );
	outline: none;
}

@media ( max-width: 991.98px ) {
	.whiteboard-profile-controls {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.whiteboard-profile-control-search {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 767.98px ) {
	.whiteboard-profile-controls {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
	Profile Password
============================================================ */

.whiteboard-profile-password-card {
	margin-bottom: 24px;
}

.whiteboard-profile-password-header {
	margin-bottom: 18px;
}

.whiteboard-profile-password-header h2 {
	color: #0f172a;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
}

.whiteboard-profile-password-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.whiteboard-profile-password-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.whiteboard-profile-password-form .whiteboard-button {
	align-self: flex-start;
	margin-top: 0;
}

@media ( max-width: 991.98px ) {
	.whiteboard-profile-password-grid {
		grid-template-columns: 1fr;
	}

	.whiteboard-profile-password-form .whiteboard-button {
		width: 100%;
	}
}

/* ============================================================
	Mobile Menu
============================================================ */

.whiteboard-menu-toggle {
	align-items: center;
	background: #ffffff;
	border: 1px solid var( --rtb-border-strong );
	border-radius: 999px;
	color: var( --rtb-ink );
	cursor: pointer;
	display: none;
	font-size: 0.9rem;
	font-weight: 900;
	gap: 8px;
	padding: 0.55rem 0.85rem;
}

.whiteboard-menu-toggle:hover,
.whiteboard-menu-toggle:focus {
	background: var( --rtb-surface-soft );
	outline: none;
}

.whiteboard-menu-toggle:focus-visible {
	border-color: var( --rtb-focus-border );
	box-shadow: 0 0 0 4px var( --rtb-focus );
}

.whiteboard-menu-toggle-icon {
	display: inline-block;
	height: 12px;
	position: relative;
	width: 16px;
}

.whiteboard-menu-toggle-icon::before,
.whiteboard-menu-toggle-icon::after,
.whiteboard-menu-toggle-icon {
	border-top: 2px solid currentColor;
}

.whiteboard-menu-toggle-icon::before,
.whiteboard-menu-toggle-icon::after {
	content: "";
	left: 0;
	position: absolute;
	width: 16px;
}

.whiteboard-menu-toggle-icon::before {
	top: 4px;
}

.whiteboard-menu-toggle-icon::after {
	top: 10px;
}

.whiteboard-nav-link-active {
	background: rgba( 15, 23, 42, 0.08 );
	color: var( --rtb-ink );
}

@media ( max-width: 767.98px ) {
	.whiteboard-topbar {
		overflow: visible;
	}

	.whiteboard-topbar-inner {
		position: relative;
	}

	.whiteboard-menu-toggle {
		display: inline-flex;
	}

	.whiteboard-nav {
		background: #ffffff;
		border: 1px solid var( --rtb-border );
		border-radius: 20px;
		box-shadow: 0 24px 70px rgba( 15, 23, 42, 0.16 );
		display: none;
		flex-direction: column;
		gap: 6px;
		left: 16px;
		padding: 10px;
		position: absolute;
		right: 16px;
		top: calc( 100% + 10px );
		z-index: 200;
	}

	.whiteboard-menu-open .whiteboard-nav {
		display: flex;
	}

	.whiteboard-nav-link {
		align-items: center;
		border-radius: 14px;
		display: flex;
		font-size: 1rem;
		justify-content: space-between;
		padding: 0.85rem 0.95rem;
		width: 100%;
	}

	.whiteboard-nav-link-logout {
		background: #fef2f2;
		color: #991b1b;
		margin-top: 4px;
	}

	.whiteboard-nav-link-logout:hover,
	.whiteboard-nav-link-logout:focus {
		background: #fee2e2;
		color: #991b1b;
	}
}

/* ============================================================
	Mobile Polish
============================================================ */

@media ( max-width: 767.98px ) {
	.whiteboard-main {
		padding-top: 24px;
	}

	.page-header h1 {
		font-size: 2.15rem;
		line-height: 1.05;
	}

	.page-header .lead,
	.lead {
		font-size: 1rem;
		line-height: 1.55;
	}

	.whiteboard-card {
		padding: 16px;
	}

	.whiteboard-workout-card-top {
		padding: 18px 16px;
	}

	.whiteboard-workout-card-top h2 {
		font-size: 1.75rem;
		line-height: 1.08;
	}

	.whiteboard-workout-sections {
		padding: 16px;
	}

	.whiteboard-workout-section-heading {
		font-size: 0.78rem;
		padding: 12px 13px;
	}

	.whiteboard-workout-section-content,
	.whiteboard-workout-wod-body,
	.whiteboard-variant-content {
		font-size: 0.96rem;
		line-height: 1.55;
		padding: 13px;
	}

	.whiteboard-workout-format {
		margin-bottom: 12px;
		padding: 13px;
	}

	.whiteboard-result-form input,
	.whiteboard-result-form select,
	.whiteboard-result-form textarea,
	.whiteboard-login-form input {
		font-size: 16px;
	}

	.whiteboard-button {
		min-height: 48px;
	}

	.whiteboard-whiteboard-row {
		align-items: flex-start;
	}

	.whiteboard-profile-password-card {
		margin-bottom: 18px;
	}

	.whiteboard-result-card-top {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.whiteboard-result-card h2,
	.whiteboard-history-card h2 {
		font-size: 1.15rem;
	}

	.whiteboard-history-pagination {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		width: 100%;
	}

	.whiteboard-history-pagination .whiteboard-button {
		margin-top: 0;
	}

	.whiteboard-history-pagination span {
		align-self: center;
		text-align: center;
		white-space: nowrap;
	}

	.whiteboard-history-pagination .whiteboard-button:first-child {
		justify-self: start;
	}

	.whiteboard-history-pagination .whiteboard-button:last-child {
		justify-self: end;
	}

	.whiteboard-admin-user-main span {
		word-break: break-word;
	}

	.whiteboard-admin-form .whiteboard-button {
		width: 100%;
	}
}

/* ============================================================
	Profile Password Collapse
============================================================ */

.whiteboard-profile-password-details {
	margin-bottom: 24px;
	padding: 0;
}

.whiteboard-profile-password-details[open] {
	padding-bottom: 24px;
}

.whiteboard-profile-password-summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	list-style: none;
	padding: 24px;
}

.whiteboard-profile-password-summary::-webkit-details-marker {
	display: none;
}

.whiteboard-profile-password-summary h2 {
	color: var( --rtb-ink );
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	margin: 0 0 6px;
}

.whiteboard-profile-password-toggle-text {
	background: var( --rtb-surface-soft );
	border: 1px solid var( --rtb-border-strong );
	border-radius: 999px;
	color: var( --rtb-ink );
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	padding: 0.55rem 0.75rem;
	text-transform: uppercase;
}

.whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-text {
	background: var( --rtb-ink );
	border-color: var( --rtb-ink );
	color: #ffffff;
}

.whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-text::before {
	content: "Close";
}

.whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-text {
	font-size: 0;
}

.whiteboard-profile-password-details[open] .whiteboard-profile-password-toggle-text::before {
	font-size: 0.78rem;
}

.whiteboard-profile-password-form {
	border-top: 1px solid var( --rtb-border );
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 24px;
	padding-top: 24px;
}

.whiteboard-profile-password-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.whiteboard-profile-password-form .whiteboard-button {
	align-self: flex-start;
	margin-top: 0;
}

/* ============================================================
	App Footer
============================================================ */

.whiteboard-footer {
	background: #ffffff;
	border-top: 1px solid var( --rtb-border );
	margin-top: 24px;
}

.whiteboard-footer-inner {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var( --rtb-max-width );
	padding: 22px var( --rtb-pad );
}

.whiteboard-footer-brand,
.whiteboard-footer-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.whiteboard-footer-brand strong {
	color: var( --rtb-ink );
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.whiteboard-footer-brand span,
.whiteboard-footer-meta span {
	color: var( --rtb-muted );
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.35;
}

.whiteboard-footer-meta {
	text-align: right;
}

/* ============================================================
	Mobile Polish: Password / Pagination / Footer
============================================================ */

@media ( max-width: 991.98px ) {
	.whiteboard-profile-password-grid {
		grid-template-columns: 1fr;
	}

	.whiteboard-profile-password-form .whiteboard-button {
		width: 100%;
	}
}

@media ( max-width: 767.98px ) {
	.whiteboard-profile-password-details {
		margin-bottom: 18px;
	}

	.whiteboard-profile-password-details[open] {
		padding-bottom: 18px;
	}

	.whiteboard-profile-password-summary {
		align-items: flex-start;
		padding: 18px;
	}

	.whiteboard-profile-password-summary h2 {
		font-size: 1.25rem;
	}

	.whiteboard-profile-password-form {
		margin: 0 18px;
		padding-top: 18px;
	}

	.whiteboard-history-pagination {
		align-items: center;
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr auto 1fr;
		width: 100%;
	}

	.whiteboard-history-pagination .whiteboard-button {
		margin-top: 0;
		min-height: 44px;
		padding-left: 14px;
		padding-right: 14px;
	}

	.whiteboard-history-pagination span {
		align-self: center;
		font-size: 0.85rem;
		text-align: center;
		white-space: nowrap;
	}

	.whiteboard-history-pagination .whiteboard-button:first-child {
		justify-self: start;
	}

	.whiteboard-history-pagination .whiteboard-button:last-child {
		justify-self: end;
	}

	.whiteboard-footer {
		margin-top: 10px;
	}

	.whiteboard-footer-inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding-bottom: 28px;
		padding-top: 20px;
	}

	.whiteboard-footer-meta {
		text-align: left;
	}
}

/* ============================================================
	Whiteboard Hype
============================================================ */

.whiteboard-whiteboard-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 9px;
}

.whiteboard-hype-button,
.whiteboard-hype-own {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 0.74rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.5rem 0.72rem;
	text-transform: uppercase;
}

.whiteboard-hype-button {
	background: #ffffff;
	border: 1px solid var( --rtb-border-strong );
	color: var( --rtb-ink );
	cursor: pointer;
}

.whiteboard-hype-button:hover,
.whiteboard-hype-button:focus {
	background: var( --rtb-ink );
	border-color: var( --rtb-ink );
	color: #ffffff;
	outline: none;
}

.whiteboard-hype-button:disabled {
	cursor: wait;
	opacity: 0.7;
}

.whiteboard-hype-button-active {
	background: #fef3c7;
	border-color: #fbbf24;
	color: #92400e;
}

.whiteboard-hype-button-active:hover,
.whiteboard-hype-button-active:focus {
	background: #fbbf24;
	border-color: #f59e0b;
	color: #78350f;
}

.whiteboard-hype-own {
	background: #f1f5f9;
	border: 1px solid var( --rtb-border );
	color: var( --rtb-muted );
}

.whiteboard-hype-count {
	color: var( --rtb-muted );
	font-size: 0.82rem;
	font-weight: 800;
}

@media ( max-width: 767.98px ) {
	.whiteboard-whiteboard-actions {
		margin-top: 8px;
	}

	.whiteboard-hype-button,
	.whiteboard-hype-own {
		font-size: 0.7rem;
		padding: 0.48rem 0.65rem;
	}
}