/*
 * MykoModernBlue — light blue variation inspired by FluxBB's Air theme.
 * Keeps the modern responsive layout from MykoModern.
 */

@import url("MykoModern.css");

:root {
	--myko-bg: #eaf2f7;
	--myko-bg-soft: #f3f8fb;
	--myko-surface: #ffffff;
	--myko-surface-raised: #f7fafc;
	--myko-surface-soft: #e7f0f6;
	--myko-border: rgba(53, 112, 130, 0.16);
	--myko-border-strong: rgba(53, 112, 130, 0.28);
	--myko-text: #253746;
	--myko-muted: #667b89;
	--myko-accent: #397fb8;
	--myko-accent-bright: #236aa7;
	--myko-green: #4f8798;
	--myko-danger: #bd3f4b;
	--myko-shadow: 0 24px 70px rgba(37, 67, 87, 0.14);
}

html {
	background: var(--myko-bg);
	color-scheme: light;
}

body {
	background:
		radial-gradient(circle at 8% 0%, rgba(91, 153, 184, 0.18), transparent 34rem),
		radial-gradient(circle at 92% 14%, rgba(75, 128, 184, 0.13), transparent 32rem),
		linear-gradient(145deg, #e8f1f6 0%, #f7fafc 52%, #e6eef4 100%);
}

.pun .punwrap {
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--myko-shadow);
}

.pun a,
.pun a:link,
.pun a:visited {
	color: var(--myko-accent);
}

.pun a:hover,
.pun a:active,
.pun a:focus {
	color: #164d7a;
}

.pun a:focus-visible,
.pun button:focus-visible,
.pun input:focus-visible,
.pun select:focus-visible,
.pun textarea:focus-visible {
	outline-color: rgba(57, 127, 184, 0.35);
}

#brdheader .box {
	background:
		linear-gradient(110deg, rgba(79, 135, 152, 0.13), transparent 48%),
		linear-gradient(180deg, #fafdff, #f3f8fb);
}

#brdtitle h1 a,
#brdtitle h1 a:link,
#brdtitle h1 a:visited {
	background: linear-gradient(105deg, #244d69 12%, #397fb8 58%, #63a2c1);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#brdmenu {
	background: #e5eef4;
}

#brdmenu a,
#brdmenu a:link,
#brdmenu a:visited {
	color: #526d7d;
}

#brdmenu a:hover,
#brdmenu a:active,
#brdmenu a:focus,
#brdmenu .isactive a,
#brdmenu .isactive a:link,
#brdmenu .isactive a:visited {
	background: rgba(57, 127, 184, 0.13);
	color: #215f94;
}

#brdwelcome {
	background: rgba(242, 247, 250, 0.74);
}

.pun .blocktable .box,
.pun .blockform .box,
#adstats,
#adintro,
#adalerts,
#postpreview,
#posterror,
#punmisc #rules .box,
#punhelp .box,
.pun .blockpost {
	box-shadow: 0 10px 28px rgba(53, 91, 113, 0.07);
}

.pun .blocktable th,
#adminconsole fieldset th,
.pun .blockpost h2 {
	background: #edf4f8;
}

.pun .blocktable tr:hover td {
	background: #f5f9fc;
}

.pun .blocktable h3 a {
	color: #29485d;
}

.pun .blocktable h3 a:hover {
	color: var(--myko-accent);
}

.pun .blocktable .tclcon .icon {
	background: rgba(79, 135, 152, 0.24);
	border-color: rgba(79, 135, 152, 0.42);
	box-shadow: 0 0 0 5px rgba(79, 135, 152, 0.08);
}

.pun .blocktable .inew .tclcon .icon {
	background: #397fb8;
	border-color: #6aa4cc;
	box-shadow: 0 0 0 5px rgba(57, 127, 184, 0.11), 0 0 18px rgba(57, 127, 184, 0.18);
}

.pun .pagelink strong,
.pun .postlink a,
.pun .postlink a:link,
.pun .postlink a:visited,
.pun input[type="submit"],
.pun input[type="button"],
.pun button {
	background: var(--myko-accent);
	border-color: #6ba4cc;
	box-shadow: 0 8px 20px rgba(57, 127, 184, 0.17);
	color: #fff;
}

.pun .postlink a:hover,
.pun input[type="submit"]:hover,
.pun input[type="button"]:hover,
.pun button:hover {
	background: #236aa7;
	color: #fff;
}

.pun .blockpost .postbody,
.pun .blockpost .postfoot {
	background: #fff;
}

.pun .blockpost dt strong {
	color: #29485d;
}

.pun .postmsg,
#punhelp code,
#punhelp samp {
	color: var(--myko-text);
}

.pun .quotebox {
	background: #eff6f8;
	border-color: #6d9faf;
	color: #3f5968;
}

.pun .quotebox cite {
	color: #397386;
}

.pun .codebox,
#punhelp .codebox code {
	background: #1d2d38;
	color: #eef6fa;
}

.pun .infldset,
#adintro .inbox,
#adstats .inbox,
.pun .blockform .forminfo,
.pun .error-info,
.pun .forminfo {
	background: #f7fafc;
}

.pun label,
.pun legend,
#adminconsole fieldset th,
.pun #viewprofile dt,
#adstats dt {
	color: #365b72;
}

.pun input[type="text"],
.pun input[type="password"],
.pun input[type="email"],
.pun input[type="file"],
.pun select,
.pun textarea {
	background: #fff;
	color: var(--myko-text);
}

.pun input[type="text"]:focus,
.pun input[type="password"]:focus,
.pun input[type="email"]:focus,
.pun select:focus,
.pun textarea:focus {
	background: #fbfdff;
	border-color: var(--myko-accent);
}

.pun .blockmenu a:hover,
.pun .blockmenu a:active,
.pun .blockmenu a:focus,
.pun .blockmenu .isactive a:link,
.pun .blockmenu .isactive a:visited {
	background: rgba(57, 127, 184, 0.1);
	color: #215f94;
}

#brdstats {
	background: #f5f9fb;
}

#brdfooter {
	background: #eaf2f6;
}

/* Redirect and status notices */

#punredirect {
	display: flex;
	justify-content: center;
	max-width: none;
	min-height: 100vh;
	padding: clamp(36px, 10vh, 96px) 20px 40px;
}

#punredirect .punwrap {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(53, 112, 130, 0.18);
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(37, 67, 87, 0.18);
	overflow: hidden;
	position: relative;
	width: min(100%, 620px);
}

#punredirect .punwrap::before {
	background: linear-gradient(90deg, #397fb8, #67a6ca 58%, #4f8798);
	content: "";
	display: block;
	height: 4px;
}

#punredirect #brdmain {
	margin: 0;
	padding: 0;
}

#punredirect .block {
	margin: 0;
}

#punredirect h2 {
	align-items: center;
	background: linear-gradient(135deg, #f7fbfd, #edf5fa);
	border: 0;
	border-bottom: 1px solid rgba(53, 112, 130, 0.14);
	color: #29485d;
	display: flex;
	font-size: 1.05rem;
	font-weight: 750;
	gap: 11px;
	letter-spacing: -0.01em;
	margin: 0;
	padding: 17px 22px;
}

#punredirect h2::before {
	align-items: center;
	background: #397fb8;
	border-radius: 50%;
	box-shadow: 0 5px 14px rgba(57, 127, 184, 0.24);
	color: #fff;
	content: "\2192";
	display: inline-flex;
	flex: 0 0 30px;
	font-size: 1rem;
	height: 30px;
	justify-content: center;
	line-height: 1;
	width: 30px;
}

#punredirect .box {
	background: transparent;
	border: 0;
	box-shadow: none;
}

#punredirect .inbox {
	padding: 22px;
}

#punredirect .inbox p {
	color: var(--myko-text);
	font-size: 0.97rem;
	line-height: 1.55;
	margin: 0;
}

#punredirect .inbox p > br {
	display: none;
}

#punredirect .inbox p > a {
	background: #edf6fc;
	border: 1px solid rgba(57, 127, 184, 0.2);
	border-radius: 11px;
	color: #236aa7;
	display: block;
	font-size: 0.88rem;
	font-weight: 650;
	margin-top: 18px;
	padding: 12px 14px;
}

#punredirect .inbox p > a::after {
	content: "  \2192";
}

#punredirect .inbox p > a:hover,
#punredirect .inbox p > a:focus {
	background: #e3f1fa;
	color: #164d7a;
	text-decoration: none;
}

#punredirect #brdfooter {
	display: none;
}

@media (max-width: 620px) {
	.pun .punwrap {
		background: rgba(255, 255, 255, 0.97);
	}

	#punredirect {
		align-items: center;
		padding: 18px 14px;
	}

	#punredirect .punwrap {
		border: 1px solid rgba(53, 112, 130, 0.18);
		border-radius: 17px;
	}

	#punredirect h2,
	#punredirect .inbox {
		padding-left: 17px;
		padding-right: 17px;
	}
}