/* La2Dash Theme for L2JZ */
/* Applied on top of existing styles */

/* Reset and base */
* {margin:0; padding:0}
body {
	background: url('/i/bg.jpg') #241d15 top center no-repeat;
	background-attachment: fixed;
	background-size: cover;
	text-align: center;
	color: #e1e1e1;
	font-family: "Tahoma", Arial, sans-serif;
	font-size: 14px;
	min-width: 990px;
}

img {border: none}
a {outline: none; color: #e7c001; text-decoration: underline;}
a:hover {text-decoration: none; color: #fae657;}

/* Main wrapper */
.main_wrapper {
	width: 990px;
	min-height: 100vh;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

/* Top menu bar - La2Dash style - full width */
.top_menu {
	width: 100%;
	font: normal 14px "Tahoma";
	color: #60584d;
	text-align: center;
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	padding: 14px 20px;
	border-radius: 7px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.4);
	margin-bottom: 20px;
	box-sizing: border-box;
}
.top_menu a {
	color: #fff;
	text-decoration: none;
	padding: 0 12px;
	font-size: 14px;
	transition: all 0.3s;
	white-space: nowrap;
}
.top_menu a:hover {
	color: #fae657;
	text-shadow: 0px 0px 8px rgba(250, 230, 87, 0.5);
}


/* Server info bar - La2Dash style */
.server_info {
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.9) 0%, rgba(25, 20, 15, 0.9) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 15px 25px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.server_info .server_name {
	color: #f4dda8;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 2px #000;
	letter-spacing: 1px;
}
.server_info .server_name span {
	color: #e7c001;
	font-size: 14px;
	font-weight: normal;
	margin-left: 10px;
}

.server_info .server_name .hl {
	color: #e7c001;
	font-size: 26px;
	font-weight: 900;
	text-shadow: 0 0 8px rgba(231, 192, 1, 0.5), 1px 1px 2px #000;
}
.server_info .online_count {
	background: rgba(0,0,0,0.4);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 8px 15px;
	color: #aaa;
	font-size: 14px;
}
.server_info .online_count b {
	color: #4CAF50;
	font-size: 18px;
	text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
/* Status indicator next to online */
.server_status {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #4CAF50;
	border-radius: 50%;
	margin-right: 8px;
	box-shadow: 0 0 6px #4CAF50;
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Navigation section (breadcrumbs) - Hidden by user request */
#navigationSection {
	display: none;
}

/* Nav bar container */
.nav-bar {
	display: flex;
	align-items: center;
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 10px 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Navigation arrows */
.nav-arrows {
	display: flex;
	align-items: center;
	margin-right: 15px;
}

.nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(0,0,0,0.3);
	border: 1px solid #444;
	border-radius: 5px;
	color: #f4dda8 !important;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none !important;
	transition: all 0.3s;
}

.nav-btn:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
	color: #fae657 !important;
}

/* Status indicator */
.nav-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #4CAF50;
	border-radius: 50%;
	margin: 0 8px;
	box-shadow: 0 0 6px #4CAF50;
}

/* Breadcrumb section */
.nav-breadcrumb {
	flex: 1;
	color: #aaa;
	font-size: 12px;
	padding: 0 15px;
}

.nav-breadcrumb a {
	color: #e7c001 !important;
	text-decoration: none !important;
}

.nav-breadcrumb a:hover {
	color: #fae657 !important;
	text-decoration: underline !important;
}

/* Navigation actions */
.nav-actions {
	display: flex;
	align-items: center;
}

.nav-actions select {
	background: rgba(0,0,0,0.3);
	border: 1px solid #444;
	border-radius: 5px;
	color: #f4dda8;
	padding: 5px 10px;
	font-size: 11px;
	cursor: pointer;
}

.nav-actions select:hover {
	border-color: #e7c001;
}

/* Content layout wrapper - flexbox */
.content-wrapper {
	display: flex;
	gap: 20px;
	min-height: 500px;
	align-items: flex-start;
}

/* Main menu section (left sidebar) - La2Dash style - Auth only */
#mainMenuSection {
	width: 220px !important;
	min-width: 220px;
	background: transparent;
	border: none;
	padding: 0;
	flex-shrink: 0;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	position: sticky !important;
	top: 20px !important;
}

/* Map section */
#mapSection {
	position: relative !important;
	left: auto !important;
	top: auto !important;
}
#mapSection:empty {
	display: none;
}

/* Auth box container */
.auth-box {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}

/* Auth title */
.auth-title {
	background: linear-gradient(to bottom, #3a3530 0%, #252015 100%);
	color: #f4dda8;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 12px 15px;
	border-bottom: 1px solid #444;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Auth form */
.auth-form {
	padding: 15px;
}

.auth-field {
	margin-bottom: 12px;
}

.auth-field label {
	display: block;
	color: #aaa;
	font-size: 11px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

/* Force all inputs in auth-box to same size (override .panel .text/.pass) */
.auth-box .text,
.auth-box .pass,
.auth-box input[type="text"],
.auth-box input[type="password"] {
	width: 100% !important;
	height: 34px !important;
	border: 2px solid #555 !important;
	background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%) !important;
	border-radius: 6px !important;
	font: normal 13px Tahoma !important;
	color: #333 !important;
	padding: 0 10px !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
}

.auth-box .text:focus,
.auth-box .pass:focus,
.auth-box input[type="text"]:focus,
.auth-box input[type="password"]:focus {
	border-color: #e7c001 !important;
	box-shadow: 0 0 8px rgba(231, 192, 1, 0.5), inset 0 2px 4px rgba(0,0,0,0.08) !important;
	outline: none !important;
}

/* Remember checkbox */
.auth-remember {
	margin-bottom: 15px;
}

.auth-remember label {
	display: flex;
	align-items: center;
	color: #888;
	font-size: 11px;
	cursor: pointer;
}

.auth-remember input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin-right: 6px;
	cursor: pointer;
}

/* Submit button */
.auth-submit {
	text-align: center;
	padding: 0 15px 15px 15px;
}

.auth-box .auth-submit input[type="submit"],
.auth-box .auth-submit .button,
.auth-box .button {
	width: 100% !important;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: linear-gradient(to bottom, #c73006 0%, #8a2505 100%) !important;
	color: #fff !important;
	font: bold 12px Tahoma !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
}

.auth-box .auth-submit input[type="submit"]:hover,
.auth-box .auth-submit .button:hover,
.auth-box .button:hover {
	background: linear-gradient(to bottom, #e74c13 0%, #a12d06 100%) !important;
	box-shadow: 0 3px 10px rgba(199, 48, 6, 0.4) !important;
}

/* Auth links (register/forgot) */
.auth-links {
	display: flex;
	justify-content: space-between;
	padding: 12px 15px;
	background: rgba(0,0,0,0.3);
	border-top: 1px solid #3a3530;
}

.auth-links a {
	color: #e7c001;
	font-size: 11px;
	text-decoration: none;
	transition: color 0.3s;
}

.auth-links a:hover {
	color: #fae657;
	text-decoration: underline;
}

/* User panel (when logged in) */
.user-info {
	padding: 15px;
	text-align: center;
}

.user-name {
	color: #f4dda8;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}

.user-links a {
	color: #e7c001;
	font-size: 12px;
	text-decoration: none;
}

.user-links a:hover {
	text-decoration: underline;
}

/* Message area */
#l2jz_message {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 12px 15px;
	margin-top: 15px;
	font-size: 11px;
	color: #aaa;
	line-height: 1.5;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
#l2jz_message:empty {
	display: none;
}
#l2jz_message a {
	color: #e7c001;
}

/* Central section (main content) */
#centralSection {
	flex: 1;
	min-width: 0;
	position: relative !important;
	left: auto !important;
	top: auto !important;
}

/* Top menu tabs */
#topMenuSection {
	margin-bottom: 15px;
}
#topMenuSection .menu {
	border: 1px solid #444;
	background: rgba(30, 50, 71, 0.9);
	border-radius: 7px;
	padding: 8px;
}
#topMenuSection a {
	font-size: 12px;
	color: #e7c001;
}
#topMenuSection a:hover {
	color: #fae657;
}

/* Page title */
#pageTitleSection {
	font-size: 18px;
	font-weight: bold;
	color: #f4dda8;
	text-shadow: 0 1px 2px #000;
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 12px 18px;
	margin-bottom: 15px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#pageTitleSection:empty {
	display: none;
}

/* Main content area */
#mainSection {
	background: rgba(30, 50, 71, 0.85);
	border: 1px solid #444;
	border-radius: 7px;
	padding: 15px;
	margin-bottom: 15px;
}

/* Hide empty mainSection */
#mainSection:empty {
	display: none;
}

/* Panel section */
#panelSection {
	margin-bottom: 15px;
}

/* Info section - where tables are displayed */
#infoSection {
	margin-bottom: 15px;
	min-height: 50px;
}

/* Hide empty panelSection */
#panelSection:empty {
	display: none;
}

/* Standard tables */
.standardTable {
	border: 1px solid #444;
	border-radius: 5px;
	overflow: hidden;
	width: 100%;
}
.standardTable thead {
	background: rgba(0,0,0,0.5);
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	color: #f4dda8;
}
.standardTable tbody {
	background: rgba(50, 74, 99, 0.8);
	text-align: center;
}
.standardTable td {
	padding: 5px 8px;
	border-bottom: 1px solid #333;
}
.standardTable tr:hover {
	background: rgba(231, 192, 1, 0.1);
}

/* Entity tables (char, item, monster info) */
.entityTable {
	border: 1px solid #444;
	border-radius: 7px;
	overflow: hidden;
	text-align: center;
	background: rgba(30, 50, 71, 0.9);
}
.entityTable .entityName {
	font-size: 16px;
	font-weight: bold;
	color: #f4dda8;
}
.entityTable .headTr {
	background: rgba(0,0,0,0.4);
	white-space: nowrap;
	color: #f4dda8;
}
.entityTable .bodyTr {
	background: rgba(50, 74, 99, 0.6);
}
.entityTable .sectionsPanel {
	border: 1px solid #444;
	background: rgba(30, 50, 71, 0.9);
	border-radius: 5px;
	padding: 5px;
}
.entityTable .sectionsPanel a {
	color: #e7c001;
	font-weight: bold;
}
.entityTable td {
	padding: 5px;
}

/* Table filters */
.tableFiltersPanel {
	padding-top: 15px;
}
.tableFiltersPanel li {
	display: inline;
}
.tableFiltersPanel a {
	background: rgba(0,0,0,0.5);
	border: 1px solid #444;
	border-radius: 5px;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	padding: 6px 12px;
	margin: 3px;
	display: inline-block;
	transition: all 0.3s;
}
.tableFiltersPanel a:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
}
.tableFiltersPanel a.active {
	background: rgba(231, 192, 1, 0.3);
	color: #f4dda8;
	border-color: #e7c001;
}

/* Panels (forms) - La2Dash style */
.panel .panelBody {
	border: 1px solid #444;
	background: rgba(30, 50, 71, 0.95);
	border-radius: 7px;
	text-align: center;
	padding: 20px;
}
.panel .panelName {
	font-size: 18px;
	font-weight: bold;
	color: #f4dda8;
	white-space: pre-wrap;
	text-shadow: 1px 1px 2px #000;
}

/* Form inputs - La2Dash style with white bg and glow */
.panel .text, .panel .pass {
	width: 160px;
	height: 22px;
	border: 0;
	background-color: #fff;
	border-radius: 7px;
	font: normal 14px Tahoma;
	color: #777;
	padding: 0 0 0 8px;
	margin: 5px 0;
	box-shadow: 0 0 3px #bdbcb9;
	-webkit-box-shadow: 0 0 3px #bdbcb9;
	-moz-box-shadow: 0 0 3px #bdbcb9;
	transition: box-shadow 0.3s, color 0.3s;
}
.panel .text:focus, .panel .pass:focus {
	color: #222;
	box-shadow: 0 0 9px #bdbcb9;
	-webkit-box-shadow: 0 0 9px #bdbcb9;
	-moz-box-shadow: 0 0 9px #bdbcb9;
	outline: none;
}

.panel .select {
	width: 165px;
	height: 22px;
	border: 0;
	background-color: #fff;
	background-image: none;
	border-radius: 7px;
	font: normal 14px Tahoma;
	color: #777;
	padding: 0 0 0 4px;
	margin: 0;
	box-shadow: 0 0 3px #bdbcb9;
	-webkit-box-shadow: 0 0 3px #bdbcb9;
	-moz-box-shadow: 0 0 3px #bdbcb9;
}
.panel .select:focus {
	color: #222;
	box-shadow: 0 0 9px #bdbcb9;
	-webkit-box-shadow: 0 0 9px #bdbcb9;
	-moz-box-shadow: 0 0 9px #bdbcb9;
	outline: none;
}

/* Checkbox styling */
.panel .checkbox {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* Button - La2Dash 3D style */
.panel .button {
	margin: 10px 2px 0 0;
	text-transform: uppercase;
	font: bold 12px Tahoma;
	color: #ffffff;
	background-color: #767676;
	padding: 6px 16px;
	border: 0;
	border-radius: 9px;
	cursor: pointer;
	box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #000,
		0px 2px 2px #000,
		2px 0 2px #000;
	-webkit-box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #000,
		0px 2px 2px #000,
		2px 0 2px #000;
	-moz-box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #000,
		0px 2px 2px #000,
		2px 0 2px #000;
	transition: background-color 0.3s;
}
.panel .button:hover {
	background-color: #b73006;
	box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #b73006,
		0px 2px 2px #b73006,
		2px 0 2px #b73006;
	-webkit-box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #b73006,
		0px 2px 2px #b73006,
		2px 0 2px #b73006;
	-moz-box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #b73006,
		0px 2px 2px #b73006,
		2px 0 2px #b73006;
}

/* Image button (like search arrows) */
.panel .image {
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.3s;
}
.panel .image:hover {
	opacity: 1;
}

/* Block elements */
.block {
	border: 1px solid #444;
	background: rgba(30, 50, 71, 0.9);
	border-radius: 5px;
	padding: 5px;
}

/* Tooltips */
.tooltipSection {
	border: 1px solid #000;
	background: rgba(36, 29, 21, 0.95);
	border-radius: 9px;
	padding: 10px 15px;
	color: #fff;
	box-shadow: 0 0 10px #000;
}

/* Tab sets */
.tabset_tabs {
	list-style-type: none;
	position: relative;
	z-index: 2;
	white-space: nowrap;
	bottom: 1px;
	text-align: left;
	padding-left: 0;
	margin: 0 0 -1px 0;
}
.tabset_tabs li {
	display: inline;
}
.tabset_tabs a {
	background: rgba(0,0,0,0.5) !important;
	border: 1px solid #444;
	border-radius: 5px 5px 0 0;
	text-decoration: none;
	padding: 5px 15px;
	font-weight: bold;
	font-size: 14px;
	margin-right: 2px;
}
.tabset_tabs a:hover {
	background: rgba(231, 192, 1, 0.2) !important;
}
.tabset_tabs a.active {
	background: rgba(30, 50, 71, 0.9) !important;
	color: #f4dda8;
	border-bottom-color: transparent;
}

.tabset_content {
	border: 1px solid #444;
	background: rgba(30, 50, 71, 0.9);
	border-radius: 0 7px 7px 7px;
	padding: 15px;
}

/* Button styling */
.abutton {
	background: rgba(0,0,0,0.5);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 4px 8px;
	font-size: 11px;
	white-space: nowrap;
	transition: all 0.3s;
}
.abutton:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
}
.abutton a {
	text-decoration: none;
	color: #e7c001;
}

/* Table specific colors */
.table tbody .icon {background: transparent;}
.table tbody .icon img {border: 1px solid #444; border-radius: 3px;}
.table tbody .chance .low {color: #FF6A6A;}
.table tbody .chance .medium {color: #8888FF;}
.table tbody .chance .high {color: #4CAF50;}

/* Links with special styling */
a.bigPageName {color: #f4dda8; text-decoration: none;}
a.bigPageName:hover {color: #fae657;}
a.bigPageName .aName {font-size: 16px; font-weight: bold; color: #f4dda8;}

/* Table jump panel */
.tableJumpPanelName {
	font-size: 13px;
	font-weight: bold;
	color: #f4dda8;
}

/* Server features on welcome page */
.server-features {
	max-width: 700px;
	margin: 0 auto;
	text-align: left;
	padding: 10px;
}
.server-features h2 {
	color: #f4dda8;
	margin-top: 20px;
	border-bottom: 1px solid #444;
	padding-bottom: 5px;
	text-shadow: 0px 1px 0px #742812;
}
.server-features ul {
	margin: 10px 0;
	padding-left: 20px;
}
.server-features li {
	margin: 5px 0;
	color: #e1e1e1;
}
.server-features ul ul {
	margin: 5px 0 5px 15px;
}
.server-features a {
	color: #e7c001;
}

/* Footer */
.footer {
	font: normal 12px "Tahoma";
	width: 100%;
	margin-top: 40px;
	text-align: center;
	background: rgba(25, 20, 14, 0.9);
	padding: 15px 0;
	border-radius: 7px 7px 0 0;
	border-top: 1px solid #444;
}
.footer a {
	color: #e7c001;
	margin: 0 10px;
}
.footer .copy {
	font-size: 10px;
	color: #888;
	margin-top: 10px;
}

/* Message boxes - La2Dash style */
.info, .ok, .warning, .error, .validation {
	border: 1px dotted;
	margin: 10px 0;
	padding: 15px 5px 17px 45px;
	background-repeat: no-repeat;
	background-position: 10px center;
	font: normal 11px "Tahoma";
	border-radius: 18px;
}
.info {
	color: #00529B;
	background-color: #BDE5F8;
	border-color: #00529B;
}
.ok {
	color: #4F8A10;
	background-color: #DFF2BF;
	border-color: #4F8A10;
}
.warning {
	color: #9F6000;
	background-color: #FEEFB3;
	border-color: #9F6000;
}
.error {
	color: #D8000C;
	background-color: #FFBABA;
	border-color: #D8000C;
}
.validation {
	color: #D63301;
	background-color: #FFCCBA;
	border-color: #D63301;
}

/* Fieldset - La2Dash style */
fieldset {
	margin: 0 0 20px 0;
	padding: 5px 5px 17px 12px;
	border-top: 2px solid #e7e7e7;
	border-left: 1px dashed #e7e7e7;
	border-right: 1px dashed #e7e7e7;
	border-bottom: 2px solid #e7e7e7;
	border-radius: 18px;
}
fieldset legend {
	font: normal 17px "Tahoma";
	color: #f4dda8;
	margin: 0 0 0 15px;
	padding: 0 5px;
}
fieldset small {
	font: normal 10px "Tahoma";
	color: #aaaaaa;
}
fieldset ul {
	margin: 0 0 0 35px;
}

/* Quick search inputs in menu */
#mainMenuSection input[type="text"] {
	width: 55px;
	height: 18px;
	border: 0;
	background-color: #fff;
	border-radius: 5px;
	font: normal 10px Tahoma;
	color: #777;
	padding: 0 0 0 4px;
	box-shadow: 0 0 3px #bdbcb9;
}
#mainMenuSection input[type="text"]:focus {
	color: #222;
	box-shadow: 0 0 6px #e7c001;
	outline: none;
}
/* Search button (arrow) */
#mainMenuSection input[type="image"] {
	opacity: 0.7;
	transition: opacity 0.3s;
}
#mainMenuSection input[type="image"]:hover {
	opacity: 1;
}

/* Login form in sidebar */
#mainMenuSection .block input[type="text"],
#mainMenuSection .block input[type="password"] {
	width: 110px;
	height: 22px;
	border: 0;
	background-color: #fff;
	border-radius: 7px;
	font: normal 12px Tahoma;
	color: #777;
	padding: 0 0 0 8px;
	margin: 4px 0;
	box-shadow: 0 0 3px #bdbcb9;
}
#mainMenuSection .block input[type="text"]:focus,
#mainMenuSection .block input[type="password"]:focus {
	color: #222;
	box-shadow: 0 0 9px #bdbcb9;
	outline: none;
}
#mainMenuSection .block input[type="submit"],
#mainMenuSection .block .button {
	margin-top: 5px;
	text-transform: uppercase;
	font: bold 10px Tahoma;
	color: #ffffff;
	background-color: #767676;
	padding: 5px 14px;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	box-shadow:
		-1px -1px 2px #fff,
		1px 1px 2px #000;
	transition: background-color 0.3s;
}
#mainMenuSection .block input[type="submit"]:hover,
#mainMenuSection .block .button:hover {
	background-color: #b73006;
}
/* Login form labels */
#mainMenuSection .block td[align="right"] {
	color: #aaa;
	font-size: 11px;
	padding-right: 5px;
}
/* Checkbox in login form */
#mainMenuSection .block input[type="checkbox"] {
	width: 14px;
	height: 14px;
	cursor: pointer;
}

/* Links styled as buttons */
.button_link {
	display: inline-block;
	margin: 5px 2px;
	text-transform: uppercase;
	font: bold 11px Tahoma;
	color: #ffffff !important;
	background-color: #767676;
	padding: 5px 12px;
	border: 0;
	border-radius: 9px;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow:
		-1px -2px 2px #fff,
		-1px 0 2px #fff,
		0 -1px 2px #fff,
		2px 2px 2px #000,
		0px 2px 2px #000,
		2px 0 2px #000;
}
.button_link:hover {
	background-color: #b73006;
	color: #fff !important;
}

/* Fade background effect for blocks */
.fade_bg {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 7px;
	padding: 10px;
}

/* Character/item tables row highlighting */
.table tbody tr:nth-child(even) {
	background: rgba(40, 60, 80, 0.5);
}
.table tbody tr:nth-child(odd) {
	background: rgba(50, 74, 99, 0.5);
}
.table tbody tr:hover {
	background: rgba(231, 192, 1, 0.15) !important;
}

/* Section header with navigation and search */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 12px 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.section-nav {
	flex: 1;
	line-height: 1.6;
}

.section-title {
	color: #f4dda8;
	font-weight: bold;
	font-size: 12px;
	margin-right: 8px;
}

.section-nav a {
	color: #e7c001;
	text-decoration: none;
	font-size: 12px;
	transition: color 0.3s;
}

.section-nav a:hover {
	color: #fae657;
	text-decoration: underline;
}

/* Category tabs (main item categories) */
.category-tabs {
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid #444;
}

.category-tabs a {
	font-weight: bold;
}

/* Type filters (subcategories) */
.type-filters {
	font-size: 11px;
}

.type-filters a {
	font-size: 11px;
}

.section-search {
	display: flex;
	align-items: center;
}

.section-search input[type="text"]#tableFilter {
	width: 200px;
	height: 30px;
	border: 1px solid #555;
	background: rgba(0,0,0,0.4);
	border-radius: 5px;
	font: normal 12px Tahoma;
	color: #fff;
	padding: 0 10px;
	box-sizing: border-box;
}

.section-search input[type="text"]:focus {
	border-color: #e7c001;
	box-shadow: 0 0 6px rgba(231, 192, 1, 0.4);
	outline: none;
}

.section-search input[type="text"]::placeholder {
	color: #888;
}


/* ==================== */
/* Registration Form     */
/* ==================== */

/* Remove mainSection styling when it contains the register form */
#mainSection:has(.register-form-container) {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
}

/* Remove panelBody styling inside register form */
.register-form-container .panelBody,
.panelBody:has(.register-form-container) {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.register-form-container {
	display: flex;
	justify-content: center;
	padding: 0;
	text-align: left;
}

.register-form-box {
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	width: 100%;
	max-width: 500px;
	overflow: hidden;
}

.register-title {
	background: linear-gradient(to bottom, #3a3530 0%, #252320 100%);
	color: #f4dda8;
	font: bold 16px Tahoma;
	padding: 15px 20px;
	text-align: center;
	text-shadow: 0 1px 2px #000;
	border-bottom: 1px solid #4a4540;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.register-form {
	padding: 25px 30px;
}

.register-field {
	margin-bottom: 18px;
}

.register-field label {
	display: block;
	color: #aaa;
	font: bold 11px Tahoma;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Force all register form inputs to same style (override .panel .text/.pass) */
.register-form-box .text,
.register-form-box .pass,
.register-field input[type="text"],
.register-field input[type="password"] {
	width: 100% !important;
	height: 40px !important;
	border: 2px solid #555 !important;
	background: linear-gradient(to bottom, #fff 0%, #f5f5f5 100%) !important;
	border-radius: 6px !important;
	font: normal 14px Tahoma !important;
	color: #333 !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
}

.register-form-box .text:focus,
.register-form-box .pass:focus,
.register-field input[type="text"]:focus,
.register-field input[type="password"]:focus {
	border-color: #e7c001 !important;
	box-shadow: 0 0 10px rgba(231, 192, 1, 0.4), inset 0 2px 4px rgba(0,0,0,0.1) !important;
	outline: none !important;
}

.register-submit {
	margin-top: 25px;
	text-align: center;
}

.register-submit input[type="submit"],
.register-submit .button {
	width: 100% !important;
	padding: 14px 30px !important;
	border: none !important;
	border-radius: 8px !important;
	background: linear-gradient(to bottom, #c73006 0%, #8a2505 100%) !important;
	color: #fff !important;
	font: bold 14px Tahoma !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	cursor: pointer !important;
	box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	transition: all 0.3s ease !important;
}

.register-submit input[type="submit"]:hover,
.register-submit .button:hover {
	background: linear-gradient(to bottom, #e74c13 0%, #a12d06 100%) !important;
	box-shadow: 0 4px 12px rgba(199, 48, 6, 0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
	transform: translateY(-1px);
}

.register-submit input[type="submit"]:active,
.register-submit .button:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

.register-message {
	padding: 12px;
	margin-top: 15px;
	text-align: center;
	border-radius: 5px;
}

.register-info {
	background: rgba(0,0,0,0.3);
	padding: 20px 25px;
	border-top: 1px solid #3a3530;
}

.register-info p {
	color: #aaa;
	font-size: 13px;
	margin: 0 0 10px 0;
}

.register-info ul {
	margin: 0;
	padding-left: 20px;
}

.register-info li {
	color: #888;
	font-size: 12px;
	margin-bottom: 5px;
}

/* ==================== */
/* General Panel Inputs */
/* ==================== */

/* Forgot password form and other panels */
.panelBody .text,
.panelBody .pass {
	height: 36px;
	border: 2px solid #555;
	background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
	border-radius: 6px;
	font: normal 13px Tahoma;
	color: #333;
	padding: 0 12px;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
}

.panelBody .text:focus,
.panelBody .pass:focus {
	border-color: #e7c001;
	box-shadow: 0 0 8px rgba(231, 192, 1, 0.5), inset 0 2px 4px rgba(0,0,0,0.08);
	outline: none;
}

/* ==================== */
/* Loading Indicator     */
/* ==================== */

/* Loading overlay for infoSection */
#infoSection.loading {
	position: relative;
	min-height: 200px;
}

#infoSection.loading::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(20, 30, 40, 0.85);
	z-index: 10;
	border-radius: 7px;
}

#infoSection.loading::after {
	content: 'Загрузка данных...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #f4dda8;
	font-size: 14px;
	font-weight: bold;
	z-index: 11;
	text-shadow: 0 0 10px rgba(231, 192, 1, 0.5);
	animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* Spinner animation alternative */
.loading-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(231, 192, 1, 0.3);
	border-radius: 50%;
	border-top-color: #e7c001;
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ==================== */
/* La2Dash Table Styles */
/* ==================== */

/* Main data tables in infoSection */
#infoSection table,
.standardTable,
.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: linear-gradient(to bottom, rgba(30, 50, 71, 0.95) 0%, rgba(25, 40, 55, 0.95) 100%);
	border: 1px solid #3a4550;
	border-radius: 7px;
	overflow: hidden;
	box-shadow: 0 3px 10px rgba(0,0,0,0.4);
	margin-bottom: 15px;
}

/* Table header */
#infoSection table thead tr,
#infoSection table tr.headTr,
.standardTable thead tr,
.table thead tr {
	background: linear-gradient(to bottom, #3a3530 0%, #252320 100%);
}

#infoSection table thead td,
#infoSection table thead th,
#infoSection table tr.headTr td,
.standardTable thead td,
.standardTable thead th,
.table thead td,
.table thead th {
	padding: 10px 12px;
	color: #f4dda8;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	border-bottom: 2px solid #4a4540;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.3s;
}

#infoSection table thead td:hover,
#infoSection table thead th:hover,
.standardTable thead td:hover,
.standardTable thead th:hover {
	background: rgba(231, 192, 1, 0.2);
}

/* Table body */
#infoSection table tbody tr,
#infoSection table tr.bodyTr,
.standardTable tbody tr,
.table tbody tr {
	transition: background 0.2s;
}

#infoSection table tbody tr:nth-child(odd),
.standardTable tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd) {
	background: rgba(40, 60, 85, 0.6);
}

#infoSection table tbody tr:nth-child(even),
.standardTable tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
	background: rgba(50, 75, 100, 0.6);
}

#infoSection table tbody tr:hover,
.standardTable tbody tr:hover,
.table tbody tr:hover {
	background: rgba(231, 192, 1, 0.15) !important;
}

#infoSection table tbody td,
.standardTable tbody td,
.table tbody td {
	padding: 8px 10px;
	color: #e1e1e1;
	font-size: 12px;
	text-align: center;
	border-bottom: 1px solid rgba(60, 80, 100, 0.5);
	vertical-align: middle;
}

/* NAME column should be left-aligned */
#infoSection table tbody td.name,
#infoSection table tbody td:nth-child(2),
.standardTable tbody td.name,
.table tbody td.name {
	text-align: left;
}

/* Header NAME column also left-aligned */
#infoSection table thead td:nth-child(2),
#infoSection table tr.headTr td:nth-child(2) {
	text-align: left;
}

/* Item icons in tables */
#infoSection table tbody td img,
.standardTable tbody td img,
.table tbody td img {
	border: 1px solid #444;
	border-radius: 4px;
	background: rgba(0,0,0,0.3);
	vertical-align: middle;
}

/* Item names in tables */
#infoSection table tbody td a,
.standardTable tbody td a,
.table tbody td a {
	color: #e7c001;
	text-decoration: none;
	transition: color 0.3s;
}

#infoSection table tbody td a:hover,
.standardTable tbody td a:hover,
.table tbody td a:hover {
	color: #fae657;
	text-decoration: underline;
}

/* Crystal type colors */
.crystal_none, .crystal_ng { color: #aaa; }
.crystal_d { color: #8BC34A; }
.crystal_c { color: #03A9F4; }
.crystal_b { color: #9C27B0; }
.crystal_a { color: #FF9800; }
.crystal_s { color: #f44336; }

/* Drop chance colors */
.chance .low { color: #FF6B6B; }
.chance .medium { color: #64B5F6; }
.chance .high { color: #81C784; }

/* Hide the old tableFiltersPanel since filter is in header now */
.tableFiltersPanel {
	display: none !important;
}

/* Jump tables panel (group filters) */
.tableJumpPanel {
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 12px 15px;
	margin-bottom: 15px;
	text-align: center;
}

.tableJumpPanel a {
	display: inline-block;
	background: rgba(0,0,0,0.4);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 6px 12px;
	margin: 3px;
	color: #e7c001;
	font-size: 12px;
	text-decoration: none;
	transition: all 0.3s;
}

.tableJumpPanel a:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
}

.tableJumpPanel a.active {
	background: rgba(231, 192, 1, 0.3);
	border-color: #e7c001;
	color: #f4dda8;
}

/* Tab filter panel */
.tabFilterPanel {
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	padding: 10px 15px;
	margin-bottom: 15px;
	text-align: center;
}

.tabFilterPanel a {
	display: inline-block;
	background: rgba(0,0,0,0.4);
	border: 1px solid #444;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 2px;
	color: #e7c001;
	font-size: 11px;
	text-decoration: none;
	transition: all 0.3s;
}

.tabFilterPanel a:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
}

.tabFilterPanel a.active {
	background: rgba(231, 192, 1, 0.3);
	border-color: #e7c001;
	color: #f4dda8;
}

/* ==================== */
/* Account Page Styles   */
/* ==================== */

/* Remove mainSection styling for account page */
#mainSection:has(.account-card) {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
}

/* Account info card */
.account-card {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	overflow: hidden;
}

.account-card-header {
	background: linear-gradient(to bottom, #3a3530 0%, #252320 100%);
	padding: 18px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #4a4540;
}

.account-card-name {
	color: #f4dda8;
	font-size: 22px;
	font-weight: bold;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	letter-spacing: 1px;
}

.account-card-badge {
	color: #aaa;
	font-size: 12px;
	background: rgba(0,0,0,0.3);
	border: 1px solid #555;
	border-radius: 5px;
	padding: 6px 12px;
}

.account-card-badge span {
	color: #e7c001;
	font-weight: bold;
}

.account-card-body {
	padding: 20px 25px;
}

.account-info-grid {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.account-info-item {
	flex: 1;
	min-width: 140px;
	background: rgba(0,0,0,0.2);
	border: 1px solid #3a3530;
	border-radius: 5px;
	padding: 12px 15px;
}

.account-info-label {
	color: #888;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.account-info-value {
	color: #e1e1e1;
	font-size: 14px;
	font-weight: bold;
}

.account-card-footer {
	background: rgba(0,0,0,0.3);
	border-top: 1px solid #3a3530;
	padding: 15px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.account-sections {
	display: flex;
	align-items: center;
	gap: 10px;
}

.account-sections-label {
	color: #888;
	font-size: 12px;
}

.account-sections a {
	color: #e7c001;
	font-weight: bold;
	text-decoration: none;
}

.account-sections a:hover {
	color: #fae657;
	text-decoration: underline;
}

.account-actions {
	display: flex;
	gap: 10px;
}

/* Account form cards (changeMyPass, changeMyEmail) */
.account-form-card {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5);
	overflow: hidden;
	max-width: 500px;
}

/* Remove panelBody styling when it wraps account form */
.panelBody:has(.account-form-card) {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.account-form-title {
	background: linear-gradient(to bottom, #3a3530 0%, #252320 100%);
	color: #f4dda8;
	font-size: 14px;
	font-weight: bold;
	padding: 12px 20px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 1px solid #4a4540;
}

.account-form-body {
	padding: 20px 25px;
}

.account-form-field {
	margin-bottom: 15px;
}

.account-form-field label {
	display: block;
	color: #aaa;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

/* Override .panel .text/.pass for account forms */
.account-form-field .text,
.account-form-field .pass {
	width: 100% !important;
	height: 36px !important;
	border: 2px solid #555 !important;
	background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%) !important;
	border-radius: 6px !important;
	font: normal 13px Tahoma !important;
	color: #333 !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important;
	transition: all 0.3s ease !important;
	margin: 0 !important;
}

.account-form-field .text:focus,
.account-form-field .pass:focus {
	border-color: #e7c001 !important;
	box-shadow: 0 0 8px rgba(231, 192, 1, 0.5), inset 0 2px 4px rgba(0,0,0,0.08) !important;
	outline: none !important;
}

.account-form-row {
	display: flex;
	gap: 15px;
}

.account-form-row .account-form-field {
	flex: 1;
}

.account-form-submit {
	margin-top: 20px;
	text-align: center;
}

/* Account panels container */
.account-panels {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.account-panel-section {
	display: flex;
	justify-content: center;
}

.account-admin-row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	justify-content: center;
}

.account-admin-row .panel {
	flex: 1;
	min-width: 180px;
}

/* Account page - default panels styling (changePass, changeAccess, changeEmail, moveChar) */
.account-panels .panel .panelBody {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%) !important;
	border: 1px solid #3a3530 !important;
	border-radius: 7px !important;
	padding: 20px !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5) !important;
}

.account-panels .panel .panelName {
	color: #f4dda8 !important;
	font-size: 14px !important;
	font-weight: bold !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: normal !important;
}

/* Account page - inputs inside default panels */
.account-panels .panel .panelBody .text,
.account-panels .panel .panelBody .pass {
	width: 100% !important;
	height: 36px !important;
	border: 2px solid #555 !important;
	background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%) !important;
	border-radius: 6px !important;
	font: normal 13px Tahoma !important;
	color: #333 !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important;
	transition: all 0.3s ease !important;
	margin: 5px 0 !important;
}

.account-panels .panel .panelBody .text:focus,
.account-panels .panel .panelBody .pass:focus {
	border-color: #e7c001 !important;
	box-shadow: 0 0 8px rgba(231, 192, 1, 0.5), inset 0 2px 4px rgba(0,0,0,0.08) !important;
	outline: none !important;
}

/* Account page - all buttons (forms + panels) */
.account-panels .panel .button,
.account-panels .button,
.account-form-submit .button,
.account-actions .button {
	background: linear-gradient(to bottom, #c73006 0%, #8a2505 100%) !important;
	border: 0 !important;
	border-radius: 7px !important;
	color: #fff !important;
	font: bold 12px Tahoma !important;
	text-transform: uppercase !important;
	padding: 10px 20px !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2) !important;
	transition: all 0.3s ease !important;
	margin: 10px 0 0 0 !important;
}

.account-panels .panel .button:hover,
.account-panels .button:hover,
.account-form-submit .button:hover,
.account-actions .button:hover {
	background: linear-gradient(to bottom, #e74c13 0%, #a12d06 100%) !important;
	box-shadow: 0 3px 10px rgba(199, 48, 6, 0.4) !important;
}

/* Account page - panel table layout fixes */
.account-panels .panel .panelBody table {
	width: 100%;
	border-collapse: collapse;
}

.account-panels .panel .panelBody td {
	padding: 4px 6px;
	color: #aaa;
	font-size: 12px;
	text-transform: uppercase;
	vertical-align: middle;
}

/* ==================== */
/* User Menu in Sidebar  */
/* ==================== */

.user-menu {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 10px;
}

.user-menu a {
	display: block;
	padding: 8px 12px;
	background: rgba(0,0,0,0.3);
	border: 1px solid #3a3530;
	border-radius: 5px;
	color: #e7c001;
	font-size: 12px;
	text-decoration: none;
	transition: all 0.3s;
}

.user-menu a:hover {
	background: rgba(231, 192, 1, 0.2);
	border-color: #e7c001;
	color: #fae657;
}

/* ==================== */
/* Account Pages        */
/* ==================== */

/* Remove mainSection styling for account pages */
#mainSection:has(.account-page-container) {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
}

.account-page-container {
	max-width: 500px;
	margin: 0 auto;
}

.account-page-header {
	background: linear-gradient(to bottom, rgba(40, 35, 30, 0.95) 0%, rgba(25, 20, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 7px 7px 0 0;
	padding: 20px 25px;
	text-align: center;
	border-bottom: none;
}

.account-page-header h2 {
	color: #f4dda8;
	font-size: 18px;
	margin: 0 0 8px 0;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.account-page-header p {
	color: #888;
	font-size: 12px;
	margin: 0;
}

.account-page-content {
	background: linear-gradient(to bottom, rgba(35, 30, 25, 0.95) 0%, rgba(20, 18, 15, 0.95) 100%);
	border: 1px solid #3a3530;
	border-radius: 0 0 7px 7px;
	padding: 20px 25px;
}

.account-page-content .account-form-card {
	border: none;
	box-shadow: none;
	max-width: none;
}

.account-page-content .account-form-body {
	padding: 0;
}

/* ==================== */
/* Donation Page        */
/* ==================== */

.donate-warning {
	background: linear-gradient(to bottom, #5a3a1a 0%, #4a2a10 100%);
	border: 1px solid #8a5a2a;
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 15px;
	color: #f4c87a;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.donate-warning strong {
	color: #ffcc55;
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
}

.donate-box {
	background: linear-gradient(to bottom, rgba(30, 40, 50, 0.5) 0%, rgba(20, 30, 40, 0.5) 100%);
	border: 1px solid #3a4550;
	border-radius: 7px;
	overflow: hidden;
}

.donate-info {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 15px 20px;
	background: rgba(0,0,0,0.3);
	border-bottom: 1px solid #3a4550;
}

.donate-rate {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rate-label {
	color: #888;
	font-size: 12px;
}

.rate-value {
	color: #4CAF50;
	font-size: 14px;
	font-weight: bold;
}

.donate-form {
	padding: 25px;
}

.donate-field {
	margin-bottom: 20px;
}

.donate-field label {
	display: block;
	color: #aaa;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.donate-select,
.donate-input {
	width: 100%;
	height: 42px;
	border: 2px solid #555;
	background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
	border-radius: 6px;
	font: normal 14px Tahoma;
	color: #333;
	padding: 0 12px;
	box-sizing: border-box;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
}

.donate-select:focus,
.donate-input:focus {
	border-color: #e7c001;
	box-shadow: 0 0 8px rgba(231, 192, 1, 0.5), inset 0 2px 4px rgba(0,0,0,0.08);
	outline: none;
}

.donate-result {
	background: rgba(0,0,0,0.3);
	border: 1px solid #3a4550;
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 20px;
}

.result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}

.result-row:first-child {
	border-bottom: 1px solid #3a4550;
}

.result-row span:first-child {
	color: #888;
	font-size: 13px;
}

.result-row span:last-child {
	color: #e1e1e1;
	font-size: 14px;
	font-weight: bold;
}

.coins-value {
	color: #4CAF50 !important;
	font-size: 16px !important;
}

.donate-submit {
	text-align: center;
	margin-bottom: 15px;
}

.donate-btn {
	width: 100%;
	padding: 14px 30px;
	border: none;
	border-radius: 8px;
	background: linear-gradient(to bottom, #4CAF50 0%, #388E3C 100%);
	color: #fff;
	font: bold 14px Tahoma;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
	transition: all 0.3s ease;
}

.donate-btn:hover {
	background: linear-gradient(to bottom, #66BB6A 0%, #43A047 100%);
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}

.donate-btn:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.donate-note {
	text-align: center;
	color: #666;
	font-size: 11px;
	font-style: italic;
}

/* Payment Methods */
.payment-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.payment-method {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	background: rgba(0,0,0,0.3);
	border: 1px solid #3a3530;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s;
}

.payment-method:hover {
	background: rgba(231, 192, 1, 0.1);
	border-color: #e7c001;
}

.payment-method input[type="radio"] {
	margin: 0;
	cursor: pointer;
}

.payment-method input[type="radio"]:checked + .payment-icon + span {
	color: #e7c001;
}

.payment-method:has(input[type="radio"]:checked) {
	border-color: #e7c001;
	background: rgba(231, 192, 1, 0.15);
}

.payment-icon {
	font-size: 18px;
}

.payment-method span:last-child {
	color: #d0d0d0;
	font-size: 13px;
}

/* Payment Modal */
.payment-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
}

.payment-modal-content {
	background: linear-gradient(to bottom, #2a2520 0%, #1a1510 100%);
	border: 1px solid #4a4540;
	border-radius: 10px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.payment-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #3a3530;
}

.payment-modal-header h3 {
	margin: 0;
	color: #e7c001;
	font-size: 16px;
}

.payment-modal-close {
	background: none;
	border: none;
	color: #888;
	font-size: 24px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.payment-modal-close:hover {
	color: #e7c001;
}

.payment-modal-body {
	padding: 20px;
}

.payment-info {
	background: rgba(0,0,0,0.3);
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 20px;
}

.payment-info p {
	margin: 8px 0;
	color: #d0d0d0;
	font-size: 13px;
}

.payment-info p strong {
	color: #e7c001;
}

.payment-actions {
	display: flex;
	gap: 10px;
}

.payment-actions .donate-btn {
	flex: 1;
}

.donate-btn-cancel {
	background: linear-gradient(to bottom, #555 0%, #333 100%) !important;
}

.donate-btn-cancel:hover {
	background: linear-gradient(to bottom, #666 0%, #444 100%) !important;
}

.donate-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Responsive adjustments */
@media screen and (max-width: 1000px) {
	.main_wrapper {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.content-wrapper {
		flex-direction: column;
	}
	#mainMenuSection {
		width: 100% !important;
		min-width: 100% !important;
		margin-bottom: 15px;
		position: relative !important;
	}
	#centralSection {
		width: 100%;
	}
	.section-header {
		flex-direction: column;
		gap: 10px;
	}
	.section-search {
		width: 100%;
	}
}