/*
 * XP: matches the xp.team client window.
 * Layout comes from Cobalt.min.css, this file only re-skins it.
 * The page structure (window / title bar / tabs / content) is in style/XP/*.tpl.
 */
@import url(Cobalt.min.css);

:root {
	--xp-page: #000000;
	--xp-chrome: #1d1d1d;
	--xp-content: #181818;
	--xp-tab: #111111;
	--xp-group: #0e0e0e;
	--xp-edge-dark: #080400;
	--xp-edge-light: #2f3034;
	--xp-control-top: #262626;
	--xp-control-bottom: #1f1f1f;
	--xp-check-top: #292929;
	--xp-accent: #429ac1;
	--xp-accent-hover: #6ab4d6;
	--xp-accent-end: #141d21;
	--xp-text: #b4b4b4;
	--xp-text-bright: #ffffff;
	--xp-text-muted: #787878;
	--xp-row-line: #1d1d1d;
	--xp-row-hover: #131313;
}

/* Every box in the client has a 1px dark outer edge and a 1px light inner edge */

html, body {
	background-color: var(--xp-page);
	color: var(--xp-text);
}

/* Backdrop: vignette, top glow and dot grid. style/XP/backdrop.js adds the sparkles on top. */
html {
	min-height: 100%;
	background:
		radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.85) 100%),
		radial-gradient(ellipse 55% 40% at 50% 0%, rgba(66, 154, 193, 0.13), transparent 70%),
		radial-gradient(circle, rgba(66, 154, 193, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px,
		var(--xp-page);
	background-attachment: fixed;
}
body {
	background: transparent;
}
#xp-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}
.pun {
	color: var(--xp-text);
	scrollbar-color: var(--xp-edge-light) var(--xp-group);
}
.pun strong {
	color: var(--xp-text-bright);
}

/* Window */

.pun .punwrap {
	background-color: var(--xp-chrome);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light), 0 12px 60px rgba(66, 154, 193, 0.12);
	padding: 0 6px 6px 6px;
}

#brdheader {
	margin: 0;
}
#brdtitle h1 {
	font: 400 12px Verdana, Helvetica, Arial, sans-serif;
	padding: 7px 2px 6px 2px;
}
#brdtitle h1 a,
#brdtitle h1 a:link,
#brdtitle h1 a:visited {
	color: var(--xp-text-bright);
}
#brdtitle h1 a span {
	color: var(--xp-accent);
}

#brdcontent {
	background-color: var(--xp-content);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	padding: 1px;
}

/* Tabs */

#brdmenu {
	background-color: transparent;
	padding: 0;
}
#brdmenu ul {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}
#brdmenu li {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	position: relative;
	text-align: center;
	background-color: var(--xp-tab);
	box-shadow: inset 0 -1px 0 var(--xp-edge-light), inset 0 -2px 0 var(--xp-edge-dark), inset -1px 0 0 var(--xp-edge-light);
	border-right: 1px solid var(--xp-edge-dark);
}
#brdmenu li:last-child {
	border-right: 0;
	box-shadow: inset 0 -1px 0 var(--xp-edge-light), inset 0 -2px 0 var(--xp-edge-dark);
}
#brdmenu li.isactive {
	background-color: var(--xp-content);
	box-shadow: inset -1px 0 0 var(--xp-edge-light);
}
#brdmenu li a,
#brdmenu li a:link,
#brdmenu li a:visited {
	display: block;
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 400;
	color: var(--xp-text) !important;
	text-decoration: none;
}
#brdmenu li.isactive a,
#brdmenu li.isactive a:link,
#brdmenu li.isactive a:visited {
	color: var(--xp-accent) !important;
}
#brdmenu li a:hover,
#brdmenu li a:active {
	color: var(--xp-text-bright) !important;
	text-decoration: none;
}

#navnotifications {
	flex: 0 0 auto !important;
	margin-right: 0 !important;
}
#navnotifications > span {
	display: block;
	padding: 9px 14px;
	color: var(--xp-text);
}
#navnotifications > span:hover {
	color: var(--xp-text-bright);
}

#notifications-container {
	background-color: var(--xp-group);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light), 0 4px 10px rgba(0, 0, 0, .6);
	text-align: left;
}
#notifications-list .dateTime {
	color: var(--xp-text-muted);
}
.new-notification,
.old-notification {
	border-bottom: 1px solid var(--xp-row-line) !important;
}

/* Content area */

#brdbody {
	padding: 8px 8px 0 8px;
}
#brdwelcome {
	padding: 0 4px 8px 4px;
	color: var(--xp-text);
}

.pun .notice-bar {
	background-color: var(--xp-group);
	color: var(--xp-text-bright);
	border: 1px solid var(--xp-edge-dark);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	margin: 0 0 8px 0;
	font-weight: 400;
}
.pun .notice-bar a {
	color: var(--xp-accent);
}

/* Group boxes */

.pun .block,
.pun .blocktable,
.pun .blockform,
.pun .blockpost,
.pun .blockmenu {
	background-color: var(--xp-group);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	padding: 1px;
	margin-bottom: 8px;
}
#punindex .blocktable,
.pun .blockpost {
	margin-bottom: 8px;
}
.pun .block2col .block,
.pun .block2col .blockform {
	margin-bottom: 0;
}

.pun .box,
.pun .blocktable .box,
.pun .blockpost .box,
.pun .blockmenu .box,
#brdheader .box {
	background-color: transparent;
	border: 0;
	border-radius: 0;
}

.pun h2,
.pun .blockpost h2 {
	background: linear-gradient(to right, var(--xp-accent), var(--xp-accent-end)) no-repeat left bottom / 100% 1px;
	border: 0;
	border-radius: 0;
	color: var(--xp-text-bright);
	font-size: 11px;
	font-weight: 400;
	padding: 6px 7px 7px 7px;
}
.pun h2 a:link,
.pun h2 a:visited {
	color: var(--xp-text);
}
.pun h2 a:hover,
.pun h2 a:active {
	color: var(--xp-accent);
}
.pun .blockpost h2 span.conr {
	color: var(--xp-text-muted);
}

/* Tables */

.pun th,
.pun .inbox thead .tcl,
.pun .inbox thead .tc2,
.pun .inbox thead .tc3,
.pun .inbox thead .tcr {
	background-color: transparent;
	border-color: var(--xp-row-line);
	border-bottom: 1px solid var(--xp-row-line);
	color: var(--xp-text-muted);
}
.pun td,
#brdfooter #modcontrols,
#adminconsole td,
#adminconsole th {
	border-color: var(--xp-row-line);
}
.pun .rowodd,
.pun .roweven,
.pun td.tc2,
.pun td.tc3,
.pun td.tcmod,
#adminconsole fieldset td,
#adstats dd,
#viewprofile dd,
#postpreview,
#brdfooter #modcontrols,
.pun #adminconsole fieldset th {
	background-color: transparent;
}
.pun .roweven:hover,
.pun .rowodd:hover {
	background-color: var(--xp-row-hover);
}
.pun .blockpost.rowodd,
.pun .blockpost.roweven,
.pun .blockpost.rowodd:hover,
.pun .blockpost.roweven:hover {
	background-color: var(--xp-group);
}
#viewscript dd {
	background-color: var(--xp-tab);
}

.pun .tcl h3 a,
.pun .tcl h3 a:link,
.pun .tcl h3 a:visited {
	color: var(--xp-text-bright);
}
.pun .tcl h3 a:hover {
	color: var(--xp-accent);
}
.pun .forumdesc,
.pun .inbox thead {
	color: var(--xp-text-muted);
}
.pun .stickytext {
	color: var(--xp-accent);
}

.pun .icon {
	border-color: var(--xp-edge-light);
}
.pun .iredirect .icon {
	border-color: var(--xp-row-line);
}
.pun .inew .icon {
	border-color: var(--xp-accent);
}

/* Links */

.pun a:link,
.pun a:visited {
	color: var(--xp-accent);
}
.pun a:hover,
.pun a:active,
.pun a:focus {
	color: var(--xp-accent-hover);
}
.pun .postmsg .postimg a:link img,
.pun .postmsg .postimg a:visited img {
	border-color: var(--xp-accent);
}
.pun .postmsg .postimg a:hover img,
.pun .postmsg .postimg a:active img,
.pun .postmsg .postimg a:focus img {
	border-color: var(--xp-accent-hover);
}
.pun .iclosed td.tcl a:link,
.pun .iclosed td.tcl a:visited,
.pun .postreport a:link,
.pun .postreport a:visited {
	color: var(--xp-text-muted);
}
.pun .iclosed td.tcl a:hover,
.pun .postreport a:hover {
	color: var(--xp-text);
}

.pun .usergroup-1,
.pun .usergroup-2,
.pun .usergroup-8,
.pun a:hover.usergroup-1,
.pun a:hover.usergroup-2,
.pun a:hover.usergroup-8 {
	color: var(--xp-accent) !important;
}

/* Side menus (profile / admin) behave like the client tabs */

.pun .blockmenu li a,
.pun .blockmenu li a:link,
.pun .blockmenu li a:visited {
	color: var(--xp-text) !important;
	font-weight: 400;
}
.pun .blockmenu li.isactive a,
.pun .blockmenu li.isactive a:link,
.pun .blockmenu li.isactive a:visited {
	color: var(--xp-accent) !important;
}
.pun .blockmenu li a:hover {
	color: var(--xp-text-bright) !important;
	text-decoration: none;
}

/* Posts */

.pun .blockpost .box,
.pun .postright,
.pun .postfootright,
.pun .deletemsg {
	background-color: var(--xp-group);
}
.pun .postleft,
.pun .postfootleft,
.pun .blockpost label {
	background-color: var(--xp-tab);
}
.pun .postright,
.pun .postfootright {
	border-left-color: var(--xp-tab);
}
.pun .codebox,
.pun .quotebox,
.pun .forminfo,
.pun .deletemsg,
.pun .blockpost label,
.pun .checklist {
	background-color: var(--xp-tab);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
}
.pun .usercontent * {
	color: var(--xp-text);
}
.pun hr {
	background-color: var(--xp-edge-light);
	color: var(--xp-edge-light);
}
#posterror li strong {
	color: var(--xp-text-bright);
}

/* Forms */

.pun fieldset {
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
}
.pun legend,
.pun legend span {
	color: var(--xp-text-bright);
	font-weight: 400;
}
.pun label,
.pun .checklist,
.pun .multiselect {
	color: var(--xp-text-muted);
}
.pun label strong {
	color: var(--xp-text-muted);
	font-weight: 400;
}

.pun input,
.pun select,
.pun textarea,
.pun .button,
.pun button {
	background: linear-gradient(var(--xp-control-top), var(--xp-control-bottom));
	color: var(--xp-text) !important;
	border: 1px solid var(--xp-edge-dark);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	padding: 3px 5px;
}
.pun textarea {
	background: var(--xp-control-bottom);
}
.pun input[type=submit],
.pun input[type=button],
.pun input[type=reset],
.pun .button,
.pun button {
	padding: 4px 14px;
	cursor: pointer;
}
.pun a.button:hover,
.pun input:hover,
.pun select:hover,
.pun button:hover {
	background: linear-gradient(#2c2c2c, #232323);
	border-color: var(--xp-edge-dark);
	color: var(--xp-text-bright) !important;
}
.pun textarea:hover {
	background: var(--xp-control-bottom);
}
.pun a.button:focus,
.pun input:focus,
.pun select:focus,
.pun textarea:focus,
.pun button:focus {
	outline: 0;
	border-color: var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-accent);
}
.pun a.button:disabled,
.pun a.button:disabled:hover,
.pun input:disabled,
.pun input:disabled:hover,
.pun select:disabled,
.pun select:disabled:hover {
	opacity: .5;
	background: linear-gradient(var(--xp-control-top), var(--xp-control-bottom));
	border: 1px solid var(--xp-edge-dark);
	color: var(--xp-text) !important;
}

.pun input[type=checkbox],
.pun input[type=radio],
.pun fieldset .rbox input[type=checkbox],
.pun fieldset .rbox input[type=radio] {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	padding: 0;
	vertical-align: middle;
	background: linear-gradient(var(--xp-check-top), var(--xp-control-bottom));
	cursor: pointer;
}
.pun input[type=radio] {
	border-radius: 50%;
}
.pun input[type=checkbox]:checked,
.pun input[type=radio]:checked {
	background: linear-gradient(#4ca7d0, #3a88ab);
}

/* Misc components */

.autocompletelist {
	color: var(--xp-text);
	background: var(--xp-group);
	border: 1px solid var(--xp-edge-light);
}
.autocompletelist li.autocompletelist-selected {
	background: var(--xp-chrome);
}
.spinner > div {
	background-color: var(--xp-text);
}
#payment-container fieldset,
#confirmation .status {
	background: var(--xp-tab);
	border: 1px solid var(--xp-edge-dark);
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
}
#payment-container .field {
	color: var(--xp-text);
}
.workshop-action {
	color: var(--xp-text);
}
.gs-navbar {
	background-image: none;
	background-color: var(--xp-chrome);
	border-radius: 0;
}
.gs-divider {
	background: linear-gradient(to right, var(--xp-accent), var(--xp-accent-end));
	height: 1px;
}

/* Profile > Name style picker */

.pun .xpn-preview {
	margin: 0;
	padding: 22px 0 16px;
	font-size: 24px;
	text-align: center;
}
.pun .xpn-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}
.pun .xpn-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px 8px 10px;
	background: var(--xp-group);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	cursor: pointer;
}
.pun .xpn-option:hover {
	background: var(--xp-row-hover);
}
.pun .xpn-option:has(input:checked) {
	box-shadow: inset 0 0 0 1px var(--xp-accent), 0 0 12px rgba(66, 154, 193, .25);
}
.pun .xpn-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.pun .xpn-option-name {
	font-size: 14px;
	font-weight: bold;
}
.pun .xpn-option-label {
	font-size: 11px;
	color: var(--xp-text-muted);
}
.pun .xpn-option:has(input:checked) .xpn-option-label {
	color: var(--xp-accent);
}
.pun .xpn-colors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 8px;
}
.pun .xp-discord-status {
	margin: 0;
	padding: 8px 10px;
	background: var(--xp-group);
	border: 1px solid var(--xp-edge-dark);
	border-left: 3px solid var(--xp-accent);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	color: var(--xp-text-bright);
}
.pun .xp-discord-status-bad {
	border-left-color: #e5534b;
}
.pun .xpn-colors input[type="color"] {
	width: 44px;
	height: 24px;
	padding: 1px;
	background: var(--xp-control-bottom);
	border: 1px solid var(--xp-edge-dark);
	box-shadow: inset 0 0 0 1px var(--xp-edge-light);
	cursor: pointer;
}