/* Themes */
:root {
	color-scheme: dark;
	--bg-color: #0a0a0a;
	--hover-color: #1a1a1a;
	--grey-color: #333333;
	--lightgrey-color: #f0f0f0;
	--red-color: #ff4444;
	--red-hover: #cc0000;
}

/* Site Wide */
*, *:before, *:after {
	box-sizing: border-box;
}
html, body {
	background-color: var(--bg-color);
	color: var(--lightgrey-color);
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
}
[data-display="none"] {
	display: none;
}

/* Semantics */
body body-loading,
body body-page,
body body-page page-main,
body body-page page-main main-login,
body body-page page-main main-splash,
body body-page page-main main-splash splash-content,
body body-page page-main main-header,
body body-page page-main main-hub,
body body-page page-main main-hub hub-grid,
body body-page page-main main-hub hub-grid hub-card,
body body-page page-main main-hub hub-grid hub-card image-wrapper,
body body-page page-main main-exercise,
body body-page page-main main-exercise exercise-header,
body body-page page-main main-creatine,
body body-page page-main main-settings,
body body-page page-main main-grid,
body body-page page-main main-grid grid-card,
body body-page page-main main-grid grid-card image-wrapper,
body body-page page-main main-generator,
body body-page page-main main-generator form,
body body-page page-main main-generator form form-row,
body body-page page-main main-generator form form-row slider-container,
body body-page page-main main-program,
body body-page page-main main-program program-action,
body body-page page-main main-program program-action action-card,
body body-page page-main main-program program-action action-card image-wrapper,
body body-page page-main main-workout,
body body-page page-main main-workout workout-header,
body body-page page-main main-workout form,
body body-page page-main main-workout workout-sequence,
body body-page page-main main-workout workout-sequence sequence-item,
body body-page page-main main-workout form workout-steps,
body body-page page-main main-workout form workout-step,
body body-page page-main main-workout form workout-step step-title,
body body-page page-main main-workout form workout-step step-target,
body body-page page-main main-workout form workout-step step-input,
body body-page page-main main-workout rest-timer,
body body-page page-main main-workout rest-timer timer-bar,
body body-page page-main main-workout rest-timer timer-bar timer-fill,
body body-page page-main main-diary,
body body-page page-main main-diary diary-header,
body body-page page-main main-diary diary-list,
body body-page page-main main-diary diary-entry,
body body-page page-main main-diary diary-entry entry-head,
body body-page page-main main-diary diary-entry entry-details,
body body-page page-main main-diary diary-entry entry-details details-score,
body body-page page-main main-diary diary-entry entry-details details-goal,
body body-page page-main main-diary day-lift,
body body-page page-main main-diary lift-info,
body body-page page-main main-diary lift-stats,
body body-page page-main main-diary day-total,
body body-overlay,
body body-overlay overlay-content,
body body-overlay overlay-content content-background,
body body-overlay overlay-content content-section,
body body-overlay overlay-content content-section entry-session,
body body-overlay overlay-content content-section entry-score,
body body-overlay overlay-content content-section entry-goal,
body body-overlay overlay-content content-section entry-warning,
body body-overlay overlay-content content-section form {
	position: relative;
	display: flex;
}

/* Loading Bar */
body body-loading {
	background: var(--red-color);
	position: fixed;
	top: 0;
	left: 0;
	height: 0.2rem;
	width: 0%;
	transition: width 0.3s linear;
	z-index: 300;
}

/* Global Cancel Button */
body body-page page-main button[action="cancel"] {
    background-color: transparent;
    color: #777777;
    border: 1px solid #444444;
    padding: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 2rem;
    max-width: 400px;
    transition: background-color 0.2s, color 0.2s;
}
body body-page page-main button[action="cancel"]:hover {
    background-color: #222222;
    color: #ffffff;
}

/* Layout */
body body-page page-main {
	flex-direction: column;
	align-items: center;
	padding: 2rem;
	max-width: 500px;
	margin: 0 auto;
	min-height: 100vh;
}
body body-page page-main main-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
	width: 100%;
}
body body-page page-main main-header h2 {
	font-size: 3rem;
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
}
body body-page page-main main-header h2 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
body body-page page-main main-header h2 a:hover {
	color: var(--red-color);
}
body body-page page-main main-header span {
	color: #888888;
	font-size: 1.2rem;
	font-style: italic;
}

/* Login Screen */
body body-page page-main main-login {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
body body-page page-main main-login h1 {
    color: var(--red-color);
    font-size: 3.5rem;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}
body body-page page-main main-login span {
    color: #aaaaaa;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    font-weight: bold;
}
body body-page page-main main-login button {
    background-color: #ffffff;
    color: #000000;
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: filter 0.2s;
}
body body-page page-main main-login button:hover {
    filter: brightness(0.8);
}

/* Nuke Program Button */
body body-page page-main button[data-action="reset-program"] {
    background-color: transparent;
    color: var(--red-color);
    border: 1px solid var(--red-color);
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    max-width: 400px;
    margin: 2rem auto;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    justify-content: center;
}
body body-page page-main button[data-action="reset-program"]:hover {
    background-color: var(--red-color);
    color: #ffffff;
}

/* Exercise Sub-Header */
body body-page page-main main-exercise exercise-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 1.5rem;
	width: 100%;
}
body body-page page-main main-exercise exercise-header h2 {
	font-size: 2.5rem;
	margin: 0;
	text-transform: uppercase;
	color: var(--red-color);
}

/* Program View Actions (The big middle buttons) */
body body-page page-main main-program {
	flex-direction: column;
	align-items: center;
	width: 100%;
}
body body-page page-main main-program program-action {
	flex-direction: row;
	justify-content: center;
	gap: 1.5rem;
	width: 100%;
	max-width: 350px;
}
body body-page page-main main-program program-action action-card {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, #99c2e3, #4a7aa6);
	border: 1px solid #111111;
	border-radius: 12px;
	padding: 1.5rem;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	width: 50%;
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 5px 15px rgba(0,0,0,0.8);
	transition: transform 0.2s, filter 0.2s;
}
body body-page page-main main-program program-action action-card:hover {
	transform: scale(1.05);
	filter: brightness(1.1);
}
body body-page page-main main-program program-action action-card image-wrapper {
	background: transparent;
	border: none;
	aspect-ratio: auto;
	height: 60px;
	margin-bottom: 0.5rem;
	align-items: center;
	justify-content: center;
}
body body-page page-main main-program program-action action-card image-wrapper::after {
	font-size: 4rem;
	color: rgba(255,255,255,0.5);
	text-shadow: 0 2px 4px rgba(0,0,0,0.8);
	z-index: 1;
	position: absolute;
	content: attr(data-letter);
}
body body-page page-main main-program program-action action-card image-wrapper img {
	position: relative;
	object-fit: contain;
	height: 100%;
	width: auto;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
	z-index: 2;
}
body body-page page-main main-program program-action action-card span {
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Bottom Navigation Grid (The 10 exercise squares) */
body body-page page-main main-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	width: 400px;
	margin-top: auto; 
	padding-top: 4rem;
}
body body-page page-main main-grid grid-card {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, #99c2e3, #4a7aa6);
	border: 2px solid #1a2a3a;
	border-radius: 8px;
	padding: 0.5rem;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 6px rgba(0,0,0,0.6);
}
body body-page page-main main-grid grid-card[active] {
	border-color: var(--red-color);
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 0 10px var(--red-color);
}
body body-page page-main main-grid grid-card image-wrapper {
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	background: transparent;
}
body body-page page-main main-grid grid-card image-wrapper::after {
	content: attr(data-letter);
	position: absolute;
	font-size: 3rem;
	font-weight: 900;
	color: rgba(0,0,0,0.5);
	text-transform: uppercase;
	z-index: 1;
}
body body-page page-main main-grid grid-card image-wrapper img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
}

/* Generator Form */
body body-page page-main main-generator {
	flex-direction: column;
	background-color: #151515;
	border: 2px solid #2a2a2a;
	padding: 2rem;
	border-radius: 8px;
	width: 100%;
	max-width: 500px;
	text-align: center;
}
body body-page page-main main-generator h3 {
	margin-top: 0;
	color: var(--red-color);
	text-transform: uppercase;
}
body body-page page-main main-generator form {
	flex-direction: column;
	width: 100%;
	margin-top: 1.5rem;
}
body body-page page-main main-generator form form-row {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
	width: 100%;
}
body body-page page-main main-generator form form-row label {
	font-weight: bold;
	color: #aaaaaa;
}
body body-page page-main main-generator form form-row input[type="number"], 
body body-page page-main main-generator form form-row select {
	background-color: #222222;
	color: #ffffff;
	border: 1px solid #444444;
	padding: 0.5rem;
	border-radius: 4px;
	width: 120px;
	font-size: 1rem;
}
body body-page page-main main-generator form button[type='submit'] {
	background-color: var(--red-color);
	color: #ffffff;
	border: none;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.2s;
}
body body-page page-main main-generator form button[type='submit']:hover {
	background-color: var(--red-hover);
}

/* Jock Slider Styles */
body body-page page-main main-generator form form-row slider-container {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	margin-top: 0.5rem;
}
body body-page page-main main-generator form form-row slider-container span {
	color: #777777;
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
}
body body-page page-main main-generator form form-row slider-container input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex-grow: 1;
	max-width: 250px;
	background: transparent;
	margin: 0;
}
body body-page page-main main-generator form form-row slider-container input[type="range"]:focus {
	outline: none;
}
body body-page page-main main-generator form form-row slider-container input[type="range"]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: #111111;
	border: 1px solid #444444;
	border-radius: 4px;
}
body body-page page-main main-generator form form-row slider-container input[type="range"]::-webkit-slider-thumb {
	border: 2px solid #ffffff;
	height: 18px;
	width: 18px;
	border-radius: 50%;
	background: var(--red-color);
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -6px;
}
body body-page page-main main-generator form form-row slider-container input[type="range"]::-moz-range-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	background: #111111;
	border: 1px solid #444444;
	border-radius: 4px;
}
body body-page page-main main-generator form form-row slider-container input[type="range"]::-moz-range-thumb {
	border: 2px solid #ffffff;
	height: 14px;
	width: 14px;
	border-radius: 50%;
	background: var(--red-color);
	cursor: pointer;
}

/* Active Workout View */
body body-page page-main main-workout {
	flex-direction: column;
	align-items: center;
	background-color: #151515;
	border: 2px solid #2a2a2a;
	padding: 2rem;
	border-radius: 8px;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
body body-page page-main main-workout workout-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
	width: 100%;
}
body body-page page-main main-workout workout-header h2 {
	font-size: 2.5rem;
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
	color: var(--red-color);
}
body body-page page-main main-workout workout-header span {
	color: #aaaaaa;
	font-size: 1.2rem;
	font-weight: bold;
}
body body-page page-main main-workout workout-sequence {
	flex-direction: row;
	gap: 1.5rem;
	margin-bottom: 2rem;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}
body body-page page-main main-workout workout-sequence sequence-item {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444444;
	transition: color 0.3s, transform 0.3s;
}
body body-page page-main main-workout workout-sequence sequence-item[active] {
	color: var(--lightgrey-color);
	transform: scale(1.3);
	text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
body body-page page-main main-workout workout-sequence sequence-item[done] {
	color: var(--red-color);
}
body body-page page-main main-workout form {
	flex-direction: column;
	width: 100%;
}
body body-page page-main main-workout form workout-steps {
	width: 100%;
	flex-direction: column;
	align-items: center;
}
body body-page page-main main-workout form workout-step {
	width: 100%;
	flex-direction: column;
	align-items: center;
	background: #0f0f0f;
	border: 1px solid #333333;
	border-radius: 8px;
	padding: 3rem 2rem;
	margin-bottom: 2rem;
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.5);
}
body body-page page-main main-workout form workout-step step-title {
	font-size: 1.4rem;
	color: #777777;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
body body-page page-main main-workout form workout-step step-target {
	font-size: 2.5rem;
	color: #ffffff;
	margin: 1rem 0 2.5rem 0;
	align-items: center;
	flex-direction: column;
}
body body-page page-main main-workout form workout-step step-target span {
	font-size: 8rem;
	font-weight: 900;
	color: var(--red-color);
	line-height: 1;
	margin-top: 1rem;
	text-shadow: 0 5px 15px rgba(255,68,68,0.3);
}
body body-page page-main main-workout form workout-step step-input {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2.5rem;
	background: #151515;
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid #444444;
	width: 100%;
}
body body-page page-main main-workout form workout-step step-input input {
	background: #222222;
	color: #ffffff;
	border: 2px solid #555555;
	border-radius: 4px;
	font-size: 2.5rem;
	text-align: center;
	width: 100px;
	padding: 0.5rem;
	font-weight: bold;
}
body body-page page-main main-workout form workout-step step-input span {
	font-size: 1.2rem;
	color: #aaaaaa;
	text-transform: uppercase;
	font-weight: bold;
}
body body-page page-main main-workout form button,
body body-page page-main main-workout rest-timer button {
	background-color: var(--red-color);
	color: #ffffff;
	border: none;
	padding: 1.5rem 2rem;
	font-size: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.2s;
}
body body-page page-main main-workout form button:hover,
body body-page page-main main-workout rest-timer button:hover {
	background-color: var(--red-hover);
}
body body-page page-main main-workout rest-timer {
	flex-direction: column;
	align-items: center;
	width: 100%;
	background: #0f0f0f;
	border: 1px solid #333333;
	border-radius: 8px;
	padding: 4rem 2rem;
	margin-bottom: 2rem;
	box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.5);
}
body body-page page-main main-workout rest-timer h3 {
	color: var(--lightgrey-color);
	font-size: 1.8rem;
	text-transform: uppercase;
	margin: 0 0 1rem 0;
	letter-spacing: 2px;
}
body body-page page-main main-workout rest-timer time-left {
	font-size: 7rem;
	font-weight: 900;
	color: var(--red-color);
	margin-bottom: 3rem;
	line-height: 1;
	text-shadow: 0 5px 15px rgba(255,68,68,0.3);
}
body body-page page-main main-workout rest-timer timer-bar {
	width: 100%;
	height: 12px;
	background: #222222;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 3rem;
	border: 1px solid #444444;
}
body body-page page-main main-workout rest-timer timer-bar timer-fill {
	height: 100%;
	width: 100%;
	background: var(--red-color);
	transition: width 1s linear;
}

/* Diary View */
body body-page page-main main-diary {
    flex-direction: column;
    align-items: center;
    background-color: #151515;
    border: 2px solid #2a2a2a;
    padding: 2rem;
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
body body-page page-main main-diary diary-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
    width: 100%;
}
body body-page page-main main-diary diary-header h2 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    color: var(--red-color);
}
body body-page page-main main-diary diary-header span {
    color: #aaaaaa;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body body-page page-main main-diary diary-list {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    margin-bottom: 2rem;
}
body body-page page-main main-diary diary-entry {
    flex-direction: column;
    background: #0f0f0f;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 1.5rem;
    border-left: 4px solid var(--red-color);
}
body body-page page-main main-diary diary-entry[status="failed"] {
    border-left-color: #555555;
}
body body-page page-main main-diary diary-entry entry-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
body body-page page-main main-diary diary-entry entry-head entry-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--lightgrey-color);
}
body body-page page-main main-diary diary-entry entry-head entry-status {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--red-color);
    background: rgba(255, 68, 68, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}
body body-page page-main main-diary diary-entry[status="failed"] entry-head entry-status {
    color: #888888;
    background: rgba(136, 136, 136, 0.1);
}
body body-page page-main main-diary diary-entry entry-details {
    font-size: 1.2rem;
    color: #aaaaaa;
}
body body-page page-main main-diary empty-diary {
    font-size: 1.2rem;
    color: #777777;
    margin-bottom: 2rem;
    font-style: italic;
}
body body-page page-main main-diary diary-entry {
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}
body body-page page-main main-diary diary-entry:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}
body body-page page-main main-diary diary-entry entry-details {
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
body body-page page-main main-diary diary-entry entry-details entry-score {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
}
body body-page page-main main-diary diary-entry entry-details entry-goal {
    color: #777777;
    font-size: 1rem;
}
body body-page page-main main-diary date-divider {
    color: var(--red-color);
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1.5rem 0 0.5rem 0;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #333333;
    padding-bottom: 0.5rem;
    letter-spacing: 2px;
}
body body-page page-main main-diary date-divider:first-child {
    margin-top: 0;
}

/* Master Diary Grouped Styles */
body body-page page-main main-diary diary-entry[status="master"] {
    border-left: 1px solid #333333;
    cursor: default;
}
body body-page page-main main-diary diary-entry[status="master"]:hover {
    filter: none;
    transform: none;
}
body body-page page-main main-diary day-lift {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #222222;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
body body-page page-main main-diary lift-info {
    flex-direction: column;
}
body body-page page-main main-diary lift-name {
    color: var(--lightgrey-color);
    font-weight: bold;
    font-size: 1.1rem;
}
body body-page page-main main-diary lift-session {
    color: #777777;
    font-size: 0.9rem;
    margin-left: 1rem;
    margin-top: 0.2rem;
}
body body-page page-main main-diary lift-stats {
    flex-direction: column;
    align-items: flex-end;
}
body body-page page-main main-diary lift-reps {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
}
body body-page page-main main-diary lift-status {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0.2rem;
}
body body-page page-main main-diary lift-status[status="passed"] {
    color: var(--red-color);
}
body body-page page-main main-diary lift-status[status="failed"] {
    color: #888888;
}
body body-page page-main main-diary day-total {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
}
body body-page page-main main-diary day-total span:first-child {
    color: #aaaaaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
body body-page page-main main-diary day-total span:last-child {
    color: var(--red-color);
    font-weight: bold;
    font-size: 1.3rem;
}

/* Overlay UI */
body body-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 500;
}
body body-overlay overlay-content {
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	margin: auto;
	padding-top: 3rem;
	padding-bottom: 3rem;
	width: 100%;
}
body body-overlay overlay-content content-background {
	background: rgba(10, 10, 10, 0.9);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
body body-overlay overlay-content content-section {
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--bg-color);
	border: 2px solid var(--red-color);
	padding: 3rem;
	min-width: 300px;
	max-width: 500px;
	z-index: 2;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
body body-overlay overlay-content content-section h2 {
	color: var(--red-color);
	font-size: 3rem;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
}
body body-overlay overlay-content content-section span {
	font-size: 1.2rem;
	color: #ffffff;
	margin-bottom: 2rem;
	font-weight: bold;
}
body body-overlay overlay-content content-section button {
	background: var(--red-color);
	color: #ffffff;
	border: none;
	padding: 1rem 2rem;
	font-size: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	transition: background-color 0.2s;
}
body body-overlay overlay-content content-section button:hover {
	background: var(--red-hover);
}

/* Custom Popup Formatting */
body body-overlay overlay-content content-section[data-type="diary"],
body body-overlay overlay-content content-section[data-type="nuke"] {
    align-items: flex-start;
}
body body-overlay overlay-content content-section[data-type="diary"] h2 {
    font-size: 2rem;
    text-align: left;
    width: 100%;
}
body body-overlay overlay-content content-section[data-type="nuke"] h2 {
    font-size: 2rem;
    color: var(--red-color);
    text-align: center;
    width: 100%;
}
body body-overlay overlay-content content-section entry-session {
    color: #ffffff;
    text-align: left;
    width: 100%;
    margin-bottom: 0.5rem;
}
body body-overlay overlay-content content-section entry-score {
    color: #ffffff;
    text-align: left;
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    font-weight: bold;
}
body body-overlay overlay-content content-section entry-goal {
    color: #aaaaaa;
    text-align: left;
    width: 100%;
    margin-bottom: 2.5rem;
    font-size: 1.2rem;
}
body body-overlay overlay-content content-section entry-warning {
    color: var(--red-color);
    text-align: center;
    width: 100%;
    margin-bottom: 2.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}
body body-overlay overlay-content content-section form {
    width: 100%;
    flex-direction: row;
    gap: 1rem;
    margin: 0;
}
body body-overlay overlay-content content-section button[data-type="delete"] {
    background-color: #444444;
}
body body-overlay overlay-content content-section button[data-type="delete"]:hover {
    background-color: #555555;
}
body body-overlay overlay-content content-section button[data-type="cancel"] {
    background-color: var(--red-color);
}
body body-overlay overlay-content content-section button[data-type="close"] {
    background-color: #444444;
    width: 100%;
}

/* Home Page Hub Grid */
body body-page page-main main-hub {
    flex-direction: column;
    width: 100%;
    align-items: center;
    max-width: 400px;
    margin: 0 auto;
}
body body-page page-main main-hub hub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}
body body-page page-main main-hub hub-grid hub-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #99c2e3, #4a7aa6);
    border: 1px solid #111111;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 5px 15px rgba(0,0,0,0.8);
    transition: transform 0.2s, filter 0.2s;
}
body body-page page-main main-hub hub-grid hub-card:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
body body-page page-main main-hub hub-grid hub-card image-wrapper {
    background: transparent;
    border: none;
    height: 60px;
    margin-bottom: 0.5rem;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
body body-page page-main main-hub hub-grid hub-card image-wrapper::after {
    font-size: 4rem;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    z-index: 1;
    position: absolute;
    content: attr(data-letter);
}
body body-page page-main main-hub hub-grid hub-card span {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
body body-page page-main main-exercise,
body body-page page-main main-creatine,
body body-page page-main main-settings {
    flex-direction: column;
    align-items: center;
    width: 100%;
}