/* ============================================================
   VU Help Indigo — for MyBB 1.8.x (built against 1.8.41 stock templates)
   Palette 3 — "Indigo Focus + Coral Energy" (DEFAULT)
   ============================================================ */

:root {
	--vh-primary:   #3730A3;
	--vh-deep:      #26206B;
	--vh-secondary: #8B85E8;
	--vh-accent:    #FF6B4A;
	--vh-cta:       #FF6B4A;
	--vh-cta-deep:  #DE4A2C;
	--vh-cta-text:  #FFFFFF;
	--vh-bg:        #F5F5FA;
	--vh-surface:   #FFFFFF;
	--vh-tint:      #ECEAF9;
	--vh-text:      #232338;
	--vh-muted:     #5D5C78;
	--vh-border:    #DCD9F0;
}

body {
	background: var(--vh-bg);
	color: var(--vh-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.55;
	text-align: left;
}

#container {
	color: var(--vh-text);
	font-family: inherit;
	font-size: 15.5px;
	line-height: 1.55;
	min-width: 0;
}

.wrapper {
	width: 94%;
	min-width: 0;
	max-width: 1240px;
	margin: 0 auto;
}

#content {
	background: transparent;
	padding: 18px 0 26px;
	width: auto !important;
}

a:link, a:visited { color: var(--vh-primary); text-decoration: none; }
a:hover, a:active { color: var(--vh-accent); text-decoration: underline; }

.smalltext { font-size: 12.5px; color: var(--vh-muted); }
.largetext { font-size: 17px; font-weight: 700; }
hr { background: var(--vh-border); color: var(--vh-border); }
::selection { background: var(--vh-secondary); color: #fff; }

#header {
	background: linear-gradient(120deg, var(--vh-deep) 0%, var(--vh-primary) 58%, var(--vh-secondary) 130%);
	box-shadow: 0 2px 14px rgba(20, 18, 50, 0.22);
}

#logo {
	background: transparent;
	border-bottom: none;
	padding: 22px 0 18px;
}

#logo img { max-height: 64px; width: auto; }

.vh-logo-text {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: #fff;
	line-height: 1.1;
}
.vh-logo-text small {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.82);
}

#header ul.menu li { margin: 0 4px; }
#logo ul.top_links { margin: 4px 0 0; font-weight: 600; }

#logo ul.top_links a {
	color: rgba(255, 255, 255, 0.92);
	background-image: none;
	padding-left: 8px;
	line-height: 1.4;
}
#logo ul.top_links a:hover { color: #fff; text-decoration: underline; }

.vh-ask-btn {
	display: inline-block;
	background: var(--vh-cta);
	color: var(--vh-cta-text) !important;
	font-weight: 700;
	font-size: 13.5px;
	padding: 8px 18px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.vh-ask-btn:hover { filter: brightness(1.06); text-decoration: none !important; }

#panel .upper {
	background: var(--vh-deep);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: none;
	padding: 9px 0;
	font-size: 13.5px;
}
#panel .upper a:link, #panel .upper a:visited { color: rgba(255, 255, 255, 0.9); }
#panel .upper a:hover, #panel .upper a:active { color: #fff; }

#panel .upper a.register,
#panel .upper a.login {
	background: var(--vh-cta);
	color: var(--vh-cta-text) !important;
	border-radius: 999px;
	padding: 3px 12px;
	font-weight: 700;
	margin-left: 6px;
}

#panel .lower {
	background: var(--vh-surface);
	color: var(--vh-muted);
	border-top: none;
	border-bottom: 1px solid var(--vh-border);
	padding: 7px 0;
	font-size: 13px;
}
#panel .lower a:link, #panel .lower a:visited { color: var(--vh-primary); }
#panel .lower a:hover, #panel .lower a:active { color: var(--vh-accent); }

#search input.textbox {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}
#search input.textbox::placeholder { color: rgba(255, 255, 255, 0.7); }

#search input.button {
	background: var(--vh-cta);
	color: var(--vh-cta-text);
	border: none;
	border-radius: 999px;
	padding: 5px 14px;
	font-weight: 700;
	cursor: pointer;
}

.navigation { color: var(--vh-muted); font-size: 13px; padding: 2px 0 6px; }
.navigation a:link, .navigation a:visited { color: var(--vh-primary); }
.navigation .active { color: var(--vh-text); font-weight: 700; }

.pagination_breadcrumb {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	outline: none;
	border-radius: 8px;
}

.tborder {
	background: transparent;
	border: none;
	padding: 0;
	border-spacing: 0 10px;
}

.thead {
	background: linear-gradient(120deg, var(--vh-deep), var(--vh-primary) 70%, var(--vh-secondary) 135%);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 16px;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(20, 18, 50, 0.16);
}
.thead a:link, .thead a:visited { color: #fff; }
.thead a:hover, .thead a:active { color: #fff; text-decoration: underline; }
.thead input.textbox, .thead select {
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.tcat {
	background: var(--vh-tint);
	color: var(--vh-text);
	border: none;
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.tcat a:link, .tcat a:visited { color: var(--vh-text); }

.trow1, .trow2 {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	padding: 12px 14px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.trow1:first-child, .trow2:first-child { border-radius: 10px 0 0 10px; }
.trow1:last-child, .trow2:last-child { border-radius: 0 10px 10px 0; }
.trow1:only-child, .trow2:only-child { border-radius: 10px; }
tr:hover > .trow1, tr:hover > .trow2 { box-shadow: 0 4px 14px rgba(20, 18, 50, 0.10); }

.forum_status { width: 34px; text-align: center; }
.forum_on, .forum_off, .forum_offclose, .forum_offlink { border-radius: 50%; }
.forum_on { box-shadow: 0 0 0 5px var(--vh-tint); }
.forum_off, .forum_offclose, .forum_offlink { opacity: 0.45; }
.subforumicon { opacity: 0.75; }

.trow_shaded { background: #FDECEA; border-color: #F3C1BB; }
.trow_selected, tr.trow_selected td { background: var(--vh-tint); }
.trow_sep {
	background: var(--vh-deep);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 7px 12px;
	font-weight: 700;
}

.tfoot {
	background: var(--vh-tint);
	color: var(--vh-muted);
	border: none;
	border-radius: 0 0 10px 10px;
	padding: 9px 12px;
}
.tfoot a:link, .tfoot a:visited { color: var(--vh-primary); }

.subject_new { font-weight: 700; }
.thread_start_datetime { color: var(--vh-muted); font-size: 12px; }

a.button:link, a.button:visited,
input.button {
	background: var(--vh-primary);
	color: #fff;
	border: 1px solid var(--vh-deep);
	border-radius: 999px;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(20, 18, 50, 0.14);
}
a.button span { background: none; display: inline-block; padding: 7px 16px; }
a.button:hover, input.button:hover { background: var(--vh-deep); color: #fff; text-decoration: none; }

a.button.new_thread_button,
a.button.new_reply_button,
input.button[name="submit"],
#search input.button {
	background: var(--vh-cta);
	border-color: var(--vh-cta-deep);
	color: var(--vh-cta-text);
}
a.button.new_thread_button:hover,
a.button.new_reply_button:hover,
input.button[name="submit"]:hover {
	background: var(--vh-cta-deep);
	color: var(--vh-cta-text);
}
a.button.small_button { font-size: 12px; }
a.button.small_button span { padding: 4px 10px; }

.postbit_buttons > a:link, .postbit_buttons > a:visited {
	background: var(--vh-surface);
	color: var(--vh-primary);
	border: 1px solid var(--vh-border);
	border-radius: 999px;
}
.postbit_buttons > a:hover { background: var(--vh-tint); color: var(--vh-deep); text-decoration: none; }
.postbit_buttons a span { background: none; padding: 3px 9px; }

button {
	background: var(--vh-primary);
	color: #fff;
	border: 1px solid var(--vh-deep);
	border-radius: 999px;
	padding: 6px 16px;
	font-weight: 600;
	cursor: pointer;
}
button:hover { background: var(--vh-deep); }

.pagination { font-size: 13px; padding: 6px 0; color: var(--vh-muted); }
.pagination a {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	border-radius: 8px;
	padding: 5px 11px;
	color: var(--vh-primary);
}
.pagination a:hover { background: var(--vh-primary); border-color: var(--vh-deep); color: #fff; text-decoration: none; }
.pagination .pagination_current {
	background: var(--vh-primary);
	border: 1px solid var(--vh-deep);
	border-radius: 8px;
	color: #fff;
	font-weight: 700;
	padding: 5px 11px;
}
.drop_go_page { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 8px; }

#posts_container { padding: 4px 0; }

.post {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(20, 18, 50, 0.05);
	margin-bottom: 16px;
	overflow: hidden;
}
.post .post_head {
	padding: 10px 16px;
	border-bottom: 1px solid var(--vh-border);
	background: var(--vh-tint);
	font-size: 13px;
}
.post .post_head span.post_date { color: var(--vh-muted); }
.post .post_author {
	background: var(--vh-surface);
	border-top: none;
	border-bottom: 1px solid var(--vh-border);
	padding: 12px 16px;
}
.post .post_author div.author_avatar img {
	border-radius: 50%;
	border: 2px solid var(--vh-tint);
	padding: 0;
	background: var(--vh-surface);
}
.post .post_author div.author_information { font-size: 14px; }
.post .post_author div.author_statistics { color: var(--vh-muted); font-size: 12.5px; }
.post .post_author .largetext { color: var(--vh-deep); }

.post_content { padding: 16px; font-size: 15.5px; }
.post_body { line-height: 1.65; }
.post_content .signature {
	border-top: 1px dashed var(--vh-border);
	color: var(--vh-muted);
	font-size: 13px;
	margin-top: 14px;
	padding-top: 10px;
}
.post_controls {
	background: var(--vh-tint);
	border-top: 1px solid var(--vh-border);
	padding: 8px 16px;
}
.post.unapproved_post { background: #FFF6E8; }
.post.unapproved_post .post_author { background: #FFF6E8; border-color: #F0D9AE; }
.ignored_post, .deleted_post_collapsed, .deleted_post_hidden { background: var(--vh-tint); border-radius: 10px; }

.post.classic .post_author {
	border: 1px solid var(--vh-border);
	border-radius: 12px;
	background: var(--vh-tint);
	margin: 0 1.5% 15px 0;
	padding: 14px 1%;
}
.post.classic .post_author div.author_avatar img { border-radius: 50%; }
.post.classic .post_content { padding-top: 2px; }

.online { color: var(--vh-secondary); font-weight: 700; }
.offline { color: var(--vh-muted); }
.reputation_positive { color: var(--vh-secondary); }
.reputation_negative { color: #C0392B; }
.repbox { border: 1px solid var(--vh-border); border-radius: 8px; background: var(--vh-tint); }

blockquote {
	border: 1px solid var(--vh-border);
	border-left: 4px solid var(--vh-accent);
	background: var(--vh-tint);
	border-radius: 0 10px 10px 0;
	margin: 10px 0;
	padding: 12px 14px;
}
blockquote cite {
	border-bottom: 1px solid var(--vh-border);
	color: var(--vh-deep);
	padding-bottom: 5px;
	margin-bottom: 8px;
}
blockquote cite > span { color: var(--vh-muted); }

.codeblock {
	background: #23222E;
	border: 1px solid #17161F;
	border-radius: 10px;
	padding: 12px 14px;
	color: #E8E6F5;
}
.codeblock .title { border-bottom: 1px solid #3A3850; color: #fff; padding-bottom: 5px; margin-bottom: 8px; }
.codeblock code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 13.5px; }

.pollbar { background: var(--vh-tint); border: 1px solid var(--vh-border); border-radius: 6px; }
.pollbar .percent { color: var(--vh-deep); font-weight: 700; }
.poll_votedfor { color: var(--vh-secondary); font-weight: 700; }
.highlight { background: #FFF3BF; padding: 0 2px; border-radius: 3px; }

input.textbox, textarea, select {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	border-radius: 8px;
	color: var(--vh-text);
	padding: 8px 11px;
	font: inherit;
	font-size: 14.5px;
}
input.textbox:focus, textarea:focus, select:focus {
	border-color: var(--vh-primary);
	outline: 2px solid var(--vh-tint);
	outline-offset: 0;
	box-shadow: 0 0 0 3px var(--vh-tint);
}
input.error, textarea.error, select.error { border-color: #C0392B; }
input.valid, textarea.valid, select.valid { border-color: var(--vh-secondary); }
label.error { color: #C0392B; }

fieldset {
	border: 1px solid var(--vh-border);
	border-radius: 10px;
	padding: 14px;
	background: var(--vh-surface);
}
fieldset.trow1, fieldset.trow2 { border-color: var(--vh-border); background: var(--vh-tint); }
.editor { border: 1px solid var(--vh-border); border-radius: 10px; }
.editor_control_bar { background: var(--vh-tint); border-top: 1px solid var(--vh-border); }

.red_alert {
	background: #FDECEA;
	border: 1px solid #E5A49E;
	border-radius: 10px;
	color: #7C211A;
	padding: 11px 14px;
}
.red_alert a:link, .red_alert a:visited { color: #7C211A; font-weight: 700; }

.pm_alert {
	background: #FFF6E0;
	border: 1px solid #EAD28A;
	border-radius: 10px;
	color: #6B5510;
	padding: 11px 14px;
}

div.error {
	background: #FDECEA;
	border: 1px solid #E5A49E;
	border-radius: 10px;
	color: #7C211A;
}
div.error p em { color: #7C211A; }
.success_message, .error_message { border-radius: 8px; padding: 8px 12px; }
.jGrowl-notification { border-radius: 10px; box-shadow: 0 6px 20px rgba(20, 18, 50, 0.22); font-size: 13.5px; }

.popup_menu {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	border-radius: 10px;
	box-shadow: 0 10px 26px rgba(20, 18, 50, 0.16);
	overflow: hidden;
}
.popup_menu .popup_item { padding: 8px 12px; }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover { background: var(--vh-tint); color: var(--vh-deep); }
.modal { border-radius: 12px; }

#footer { margin-top: 10px; }
#footer .upper {
	background: var(--vh-deep);
	border: none;
	color: rgba(255, 255, 255, 0.85);
	padding: 12px 0;
	font-size: 13px;
}
#footer .upper a:link, #footer .upper a:visited { color: #fff; }
#footer .upper select {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	padding: 3px 6px;
}
#footer .lower {
	background: var(--vh-tint);
	color: var(--vh-muted);
	padding: 12px 0 18px;
	font-size: 12.5px;
}
#footer .lower a:link, #footer .lower a:visited { color: var(--vh-primary); }
.bottommenu {
	background: var(--vh-surface);
	border: 1px solid var(--vh-border);
	border-radius: 10px;
}
.forum_legend, .thread_legend { color: var(--vh-muted); font-size: 12.5px; }

@media (max-width: 900px) {
	body { font-size: 15px; }
	.wrapper { width: 96%; }
	#logo { padding: 16px 0 12px; }
	#logo img { max-height: 50px; }
	.vh-logo-text { font-size: 24px; }
	.thead { font-size: 15px; padding: 10px 12px; }
	.trow1, .trow2 { padding: 10px; }
	.tcat td:nth-child(3), .tcat td:nth-child(4) { display: none; }
	.post_content { padding: 13px; }
	.pagination a, .pagination .pagination_current { padding: 6px 10px; }
}

@media (max-width: 600px) {
	body { font-size: 14.5px; }
	#header ul.menu li { margin: 0 2px; }
	#logo ul.top_links { text-align: left; margin-top: 8px; }
	#panel .upper, #panel .lower { font-size: 12.5px; }
	#search { float: none; margin-top: 8px; }
	#search input.textbox { width: 62%; min-height: 38px; }
	#search input.button { min-height: 38px; }
	a.button span { padding: 10px 18px; }
	.postbit_buttons > a { display: inline-block; margin: 2px 0; }
	.postbit_buttons a span { padding: 7px 12px; }
	.pagination a, .pagination .pagination_current { padding: 8px 12px; }
	.post.classic .post_author {
		float: none;
		width: auto;
		margin: 0 0 10px;
		border-left: 1px solid var(--vh-border);
		text-align: left;
	}
	.post.classic .post_author div.author_avatar { text-align: left; float: left; margin-right: 10px; }
	.post.classic .post_content { padding-left: 0; }
	.post .post_author { padding: 10px 12px; }
	.post .post_author div.author_statistics { display: none; }
	.tborder { border-spacing: 0 8px; }
	blockquote { padding: 10px 12px; }
	input.textbox, textarea, select { font-size: 16px; }
}