:root {
	/* backgrounds */
	--primary: rgb(38,28,58);
	--secondary: rgb(22,16,34);
	--third: #ddd;
	--border: rgb(58,38,92);

	/* text */
	--font-color: rgb(200,192,216);

	/* Links / anchors */
	--anchor:#a855f7;
	--anchor-hover:#d8b4fe;

	/* accent gradient used for nav/banners/highlights */
	--accent-gradient: linear-gradient(135deg, rgb(88,40,146) 0%, rgb(38,28,58) 100%);

	/* secondary accent (gold) - contrast color for CTAs/highlights */
	--accent2: #f0b429;
	--accent2-hover: #ffd466;
	--accent2-gradient: linear-gradient(135deg, #f0b429 0%, #b8780f 100%);

	/* widget/card surface - lighter than page bg for contrast */
	--card: rgb(48,36,72);

	/* buttons or alert boxes with different colors */
	--bg-danger: #3c0e0e;
	--color-danger: #9e5858;
	--border-danger: #350505;

	--bg-warning: #905c00;
	--color-warning: #39280a;
	--border-warning: #322001;

	--bg-info: #005d90;
	--color-info: #00263e;
	--border-info: #022530;

	--bg-success: #009039;
	--color-success: #003f0c;
	--border-success: #00380c;

	--bg-default: #0006;
	--color-default: #968452;
	--border-default: #000;
}



body {
	font-family: 'arial', sans-serif;
	color:var(--font-color);
	background:
		linear-gradient(rgba(17,11,26,0.86), rgba(17,11,26,0.93)),
		url("/veneria_assets/hero-bg.png?v=1791036843") center top / cover no-repeat fixed;
}


body, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none;color:var(--anchor); }
a:hover {color:var(--anchor-hover);}
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;transition-duration: 0s;}

nav .container > div > ul > li > ul {
	position: absolute;
	border: 2px solid;
	border-top:none !important;
	border-color: var(--border);
	width: 200px;
}

nav { border: 10px solid var(--primary); }
nav .container { padding-left: 10px; }
nav .container > div > ul > li,
.modIcon:hover > i:nth-child(2) { display: inline-block; }

nav .container > div > ul > li > a { padding: 20px; }
nav .container > div > ul > li:hover > ul,
nav .container > div > ul > li > a,
nav .container > div > ul > li > ul > li > a { display: block; }
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
nav .container, .preventCollapse, .ellipsis { overflow: hidden; }

.topPane { margin-bottom: 10px; }
.leftPane { width: 70%; }
.rightPane { width: 29%; }
.searchForm { width: 200px; }
.body { padding: 10px 0px; }
.header, .well, .smedia a {
	width: 100%;
}
td { padding: 10px 5px; }
.header { color: #d8b4fe; font-weight: bold; letter-spacing: .3px; }
.feedContainer { margin:2rem 0; }
.pull-left { float:left; }
.pull-right { float:right; }
.well, .header { width: auto; }
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }

.table-100 {
	width: 100%;
}

.banner {
    background: var(--accent-gradient), url("../img/header.png");
    background-blend-mode: overlay;
    height: 240px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 30px;
    border: 10px solid var(--primary);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(88,40,146,0.35);
}

input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 1em;
    border-radius: 6px;
    padding: 0 12px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus {
    outline: none;
    border-color: var(--anchor);
    box-shadow: 0 0 0 3px rgba(168,85,247,0.2);
}

input::placeholder {
    color: rgba(200,192,216,0.45);
}

#countDownTimer {
	line-height: 2.3;
	padding: 0px 10px;
	color: #d8b4fe;
}


.modIcon > i:nth-child(2),
.modIcon:hover > i:nth-child(1),
nav .container > div > ul > li > ul {
	display: none;
}

.loginForm {
    display: flex;
    flex-wrap: wrap;
}
button:hover {
	background: #0000004d;
}
button, input[type=submit], input[type=text], input[type=number] input[type=email], input[type=password] {
    margin-top: 10px;
}

input[type=search] {
	background: var(--primary);
}

.main {
	width: 1220px;
	margin: 5rem auto;
	position: relative;
	z-index: 1;
}




.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
}



.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 5px;
	border: 1px solid var(--third);
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
}

.alert-default {
	background: var(--bg-default);
	color: var(--color-default);
	border-color: var(--border-default);
}
.alert-info {
	background: var(--bg-info);
	color: var(--color-info);
	border-color: var(--border-info);
}
.alert-success {
    background: var(--bg-success);
    color: var(--color-success);
    border-color: var(--border-success);
}
.alert-warning {
	background: var(--bg-warning);
	color: var(--color-warning);
	border-color: var(--border-warning);
}
.alert-danger {
	background: var(--bg-danger);
	color: var(--color-danger);
	border-color: var(--border-danger);
}
.alert-collapse {display:inline-block;}
.alert-size1 { font-size: 12px; }
.alert-size2 { font-size: 15px; }
.alert-size3 { font-size: 18px; }
.alert-size4 { font-size: 20px; }


nav .container > div > ul > li > ul > li > a:hover,
#countDownTimer, textarea,
footer, table, .feedContainer {
	background: var(--primary);
}

nav {
	background: var(--accent-gradient);
	box-shadow: 0 2px 20px rgba(88,40,146,0.25);
	border-bottom: 2px solid var(--accent2);
	position: relative;
	z-index: 50;
}

nav .container > div > ul > li > ul {
	z-index: 100;
}

.hero-banner {
	z-index: 1;
}

.well, .header, table, .alert-box, input, select, .banner, .feedContainer {
	border-radius: 10px;
}

.well {
	background: var(--card);
	box-shadow: 0 4px 18px rgba(0,0,0,0.45);
	border: 1px solid var(--border);
	border-top: 3px solid var(--accent2);
	border-radius: 10px;
	margin-bottom: 14px;
	padding: 0;
	overflow: hidden;
}

.well > .header {
	background: rgba(0,0,0,0.22);
	padding: 12px 16px;
	margin: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--border);
}

.well > .body {
	padding: 16px;
}

/* Nested wells (e.g. each form field wrapped in its own .well) should NOT
   repeat the card/border treatment - that's what was stacking up and
   looking messy. Reset them to plain spacing only. */
.well .well {
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: 12px;
}

.well .well:last-child {
	margin-bottom: 0;
}

.rightPane {
	box-sizing: border-box;
}

.rightPane > .well:last-child,
.leftPane > .well:last-child {
	margin-bottom: 0;
}

.header {
	border-radius: 10px 10px 0 0;
	border-bottom: 1px solid var(--border);
}

nav .container,
nav .container > div > ul > li > ul,
.leftPane, .rightPane, .topPane,
tr:nth-child(2n+1) {
	background: var(--secondary);
}

footer, .feedContainer,
nav .container, .topPane {
	border-bottom: 2px solid var(--border)
}

.header, .well, .smedia a {
	padding: 10px;
}

.alert-box {
	padding: 5px;
}

.vertical-menu a {
	color: var(--anchor) !important;
}

.loginForm .well {
	width: 100%;
}

.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 0;
}

#loginContainer li {
	text-align: right;
}

select {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}

input[type=radio], input[type=checkbox] {
	width: initial !important;
	height: initial !important;
}

#account-manage {
	width: initial !important;
}

.TableContentContainer .TableContent {
	border: initial !important;
}

/* ===== Hero banner ===== */
.hero-banner {
	position: relative;
	margin-top: 30px;
	height: 360px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	background: url("/veneria_assets/hero-bg.png?v=1791036843") center center / cover no-repeat;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22,16,34,0.15) 0%, rgba(22,16,34,0.35) 55%, rgba(22,16,34,0.92) 100%),
				linear-gradient(90deg, rgba(88,40,146,0.25) 0%, rgba(22,16,34,0.05) 60%);
}

.hero-content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}

.hero-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 20px;
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--border);
	font-size: 13px;
	letter-spacing: .5px;
	margin-bottom: 18px;
	color: var(--font-color);
}

.hero-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e04b4b;
	box-shadow: 0 0 8px #e04b4b;
}

.hero-status.is-online .hero-status-dot {
	background: #34d058;
	box-shadow: 0 0 8px #34d058;
	animation: heroDotPulse 1.6s ease-in-out infinite;
}

@keyframes heroDotPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

.hero-title {
	font-size: 48px;
	font-weight: 900;
	letter-spacing: 4px;
	margin: 0;
	color: #fff;
	text-shadow: 0 0 25px rgba(168,85,247,0.85), 0 0 60px rgba(168,85,247,0.5);
	animation: heroTitleGlow 4s ease-in-out infinite;
}

.hero-title a {
	color: inherit !important;
	text-decoration: none;
}

@keyframes heroTitleGlow {
	0%, 100% { text-shadow: 0 0 25px rgba(168,85,247,0.85), 0 0 60px rgba(168,85,247,0.5); }
	50% { text-shadow: 0 0 35px rgba(216,180,254,0.95), 0 0 80px rgba(168,85,247,0.7); }
}

.hero-tagline {
	color: var(--font-color);
	font-size: 16px;
	letter-spacing: 1px;
	margin: 10px 0 28px;
}

.hero-buttons {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: .3px;
	border: 1px solid var(--border);
	transition: transform .15s ease, box-shadow .15s ease;
}

.hero-btn:hover {
	transform: translateY(-2px);
}

.hero-btn-primary {
	background: var(--accent2-gradient);
	color: #221705 !important;
	box-shadow: 0 4px 20px rgba(240,180,41,0.45);
}

.hero-btn-secondary {
	background: rgba(255,255,255,0.08);
	color: #fff !important;
}

.hero-btn-tertiary {
	background: transparent;
	color: var(--font-color) !important;
}

@media (max-width: 900px) {
	.hero-title { font-size: 30px; letter-spacing: 2px; }
	.hero-banner { height: 320px; }
}

/* ===== Widget emphasis (login / search / status etc.) ===== */
.widget .header, #loginContainer .header, .rightPane .header {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.widget .header a, #loginContainer .header a, .rightPane .header a {
	color: #fff !important;
}

.widget .header i, #loginContainer .header i, .rightPane .header i {
	color: var(--accent2);
	margin-right: 6px;
	width: 16px;
	text-align: center;
}

.rightPane .well {
	transition: transform .15s ease, box-shadow .15s ease;
}

.rightPane .well:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(0,0,0,0.55);
}

.loginForm input[type="submit"],
.searchForm input[type="submit"] {
	background: var(--accent-gradient);
	color: #fff;
	font-weight: bold;
	border: none;
	border-radius: 6px;
	letter-spacing: .5px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 13px;
}

.loginForm input[type="submit"]:hover,
.searchForm input[type="submit"]:hover {
	box-shadow: 0 0 14px rgba(168,85,247,0.6);
}

.loginForm label {
	color: rgba(200,192,216,0.8);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	display: block;
	margin-bottom: 4px;
}

#loginContainer center h3,
#loginContainer center p {
	margin: 10px 0 0;
}

#loginContainer center h3 a {
	font-size: 14px;
}

#loginContainer center p a {
	font-size: 12px;
	color: rgba(200,192,216,0.7) !important;
}

/* ===== Top nav category headers (Main / Account / Community / Library / Support / Shop) ===== */
nav .container > div > ul > li > a {
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
	color: #fff !important;
	border-bottom: 2px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}

nav .container > div > ul > li > a i {
	color: var(--anchor);
	margin-right: 6px;
}

nav .container > div > ul > li:hover > a {
	border-bottom: 2px solid var(--anchor);
	color: var(--anchor-hover) !important;
}

nav .container > div > ul > li > ul {
	background: var(--primary);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

nav .container > div > ul > li > ul > li > a {
	text-transform: none;
	font-weight: normal;
	letter-spacing: normal;
	font-size: 13px;
	border-bottom: none;
}

nav .container > div > ul > li > ul > li > a:hover {
	color: var(--anchor-hover) !important;
}

/* ===== Discord follow button ===== */
.discord-follow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	border-radius: 8px;
	background: linear-gradient(135deg, #5865F2 0%, #404bc9 100%);
	color: #fff !important;
	font-weight: bold;
	font-size: 14px;
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 16px rgba(88,101,242,0.35);
}

.discord-follow-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(88,101,242,0.55);
}

/* Stare tla tabel MyAAC (bgcolor) -> paleta violet/gold */
[bgcolor="#0F1114" i], [bgcolor="#191C21" i], [bgcolor="#1E2128" i], [bgcolor="#F1E0C6" i], [bgcolor="#D4C0A1" i] {
  background-color: #1a1230 !important;
}
[bgcolor="#191C21" i] { background-color: #160f22 !important; }
[bgcolor="#1E2128" i] { background-color: #241a3a !important; }
[bgcolor="#0F1114" i] { background-color: #3a265c !important; color: #f0b429 !important; }