/**
 * AnsPress Modern UI Overrides
 *
 * Structural upgrades on PUBLISHED question/answer + form pages.
 * Colors inherit from main.css and the theme.
 *
 * @since 4.5.0
 */

/* ------------------------------------------------------------------------- *
 * Color tokens — hard override to coral-red (#ff6f61)
 * ------------------------------------------------------------------------- */
#anspress,
#anspress * {
	--ap_color1: #ff6f61 !important;
}

/* =========================================================================
 * 0.1 KILL ALL main.css absolute vote positioning — GLOBAL overrides
 * ========================================================================= */

/* FIRST: kill .ap-content position:relative and padding-right leftovers */
#anspress .ap-content,
#anspress .ap-q-content.ap-content,
#anspress .answer .ap-content,
#anspress .answer.ap-content {
	position: static !important;
	padding-right: 0 !important;
}

/* Kill absolute avatar — make it normal flex child */
#anspress .ap-content > .ap-avatar,
#anspress .ap-q-content.ap-content > .ap-avatar,
#anspress .answer .ap-content > .ap-avatar {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* Kill absolute vote — make it normal flex child */
#anspress .ap-single-vote,
#answers .ap-single-vote,
#ap-best-answer .ap-single-vote {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	float: none !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	width: 64px !important;
}

/* ---- 旧的 vote 占位规则 — 竖排，被 section 12 新方案强化 ---- */
#anspress .ap-vote,
#answers .ap-vote {
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0 !important;
}

/* 干掉 .ap-vote 下所有的 .net-vote-count */
#anspress .ap-vote .net-vote-count,
#answers .ap-vote .net-vote-count {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* 干掉遗留的 "block 所有 .ap-vote > *" 规则 — 让 pill 按钮保持 inline-flex */
#anspress .ap-single-vote .ap-vote > *,
#anspress .ap-vote > * {
	display: inherit !important;
	width: auto !important;
}

/* =========================================================================
 * 0.2 KILL comment / .ap-cell clearfix ghosts — no left whitespace
 * ========================================================================= */
#anspress .ap-cell,
#anspress .ap-q-content.ap-content .ap-cell,
#anspress .answer .ap-content .ap-cell {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

#anspress .ap-cell::before,
#anspress .ap-cell::after,
#anspress .ap-cell.clearfix::before,
#anspress .ap-cell.clearfix::after {
	display: none !important;
	content: none !important;
	height: 0 !important;
}

/* New answer structure — vote on left, body on right (no clearfix ghosts) */
#anspress .answer .ap-content-flex,
#anspress .answer.ap-content .ap-content-flex {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 16px !important;
	position: static !important;
}

#anspress .answer .ap-answer-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	overflow: visible !important;
}

#anspress .answer .ap-answer-body .ap-cell {
	margin-left: 0 !important;
	padding-left: 0 !important;
	float: none !important;
}

#anspress .answer .ap-answer-body .ap-avatar-inline {
	display: none !important; /* Avatar already visible in question header */
}

/* Answer comment area — left-align, no whitespace */
#anspress .answer .ap-content .ap-comments,
#anspress .answer .ap-content apcomments,
#anspress .answer .ap-content apcomment {
	margin-left: 0 !important;
	padding-left: 0 !important;
	float: none !important;
}

/* Comment form inside answer — no left offset */
#anspress .answer .ap-content #ap-commentform,
#anspress .answer .ap-content .ap-commentform {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

#anspress .ap-cell-inner {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Comment area — kill any inherited whitespace */
#anspress apcomments,
#anspress .ap-comments,
#anspress apcomment {
	margin-left: 0 !important;
	padding-left: 0 !important;
	display: block !important;
}

#anspress apcomment .ap-avatar {
	display: none !important;
}

#anspress #ap-commentform,
#anspress .ap-commentform {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* =========================================================================
 * 0. GLOBAL BUTTON OVERRIDES — kill ALL old green (#8bc34a) everywhere
 * ========================================================================= */
#anspress .ap-btn,
#anspress .ap-btn-primary,
#anspress .ap-btn-ask,
#anspress button.ap-btn,
#anspress a.ap-btn,
#anspress .ap-btn.ap-btn-primary,
#anspress .ap-btn-primary.ap-btn,
#anspress input[type="submit"].ap-btn,
#anspress .ap-submit,
#anspress .ap-form-submit,
#anspress button[type="submit"],
#anspress input[type="button"].ap-btn {
	background: #ff6f61 !important;
	background-color: #ff6f61 !important;
	color: #fff !important;
	border-color: #ff6f61 !important;
}

#anspress .ap-btn:hover,
#anspress .ap-btn-primary:hover,
#anspress .ap-btn-ask:hover,
#anspress button.ap-btn:hover,
#anspress a.ap-btn:hover,
#anspress .ap-submit:hover,
#anspress .ap-form-submit:hover,
#anspress button[type="submit"]:hover,
#anspress input[type="button"].ap-btn:hover {
	background: #ff5a4d !important;
	background-color: #ff5a4d !important;
	border-color: #ff5a4d !important;
	color: #fff !important;
}

/* Kill main.css hardcoded #8bc34a background on any button */
#anspress [style*="8bc34a"],
#anspress [style*="8BC34A"] {
	background-color: #ff6f61 !important;
	background: #ff6f61 !important;
}

:root {
	--ap-radius-sm:   6px;
	--ap-radius-md:   10px;
	--ap-radius-lg:   14px;
	--ap-shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
	--ap-shadow-md:   0 4px 14px rgba(0,0,0,0.08);
}

/* =========================================================================
 * 1. QUESTION HEADER — title + back-to-center button
 * ========================================================================= */
#anspress .ap-q-header {
	margin-bottom: 18px;
}

#anspress .ap-q-header .ap-back-center {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid #e5e7eb !important;
	border-radius: var(--ap-radius-pill, 9999px) !important;
	padding: 4px 12px !important;
	font-size: 12px !important;
	color: #6b7280 !important;
	text-decoration: none !important;
	margin-bottom: 12px;
	transition: all .18s ease;
	box-shadow: none !important;
	height: auto !important;
	font-weight: 500 !important;
}

#anspress .ap-q-header .ap-back-center:hover {
	background: #f3f4f6 !important;
	border-color: #d1d5db !important;
	color: inherit !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

#anspress .ap-q-title {
	font-size: 24px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: inherit !important;
	margin: 0 0 4px 0 !important;
	letter-spacing: -.01em !important;
}

#anspress .ap-q-title a {
	color: inherit !important;
	text-decoration: none;
}

/* =========================================================================
 * 2. QUESTION CARD — flex card layout
 * ========================================================================= */
#anspress .ap-q-content.ap-content,
#anspress .answer .ap-content,
#anspress .answer.ap-content {
	background: #fff !important;
	border-radius: var(--ap-radius-lg) !important;
	border: 1px solid #eef0f3 !important;
	box-shadow: var(--ap-shadow-sm) !important;
	padding: 22px 24px !important;
	margin-bottom: 18px !important;
	display: flex !important;
	gap: 22px !important;
	align-items: flex-start !important;
	transition: box-shadow .25s ease !important;
}

#anspress .answer .ap-content {
	padding: 18px 22px !important;
}

#anspress .ap-q-content.ap-content .ap-single-vote,
#anspress .answer .ap-content .ap-single-vote {
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 6px !important;
	position: static !important;
	margin: 0 !important;
	float: none !important;
	width: 44px !important;
	min-width: 44px !important;
	height: auto !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	align-self: flex-start !important;
}

/* Kill main.css absolute vote block — override to COLUMN (two pills stacked) */
#anspress .ap-q-content.ap-content .ap-single-vote .ap-vote,
#anspress .answer .ap-content .ap-single-vote .ap-vote,
#anspress .ap-q-content.ap-content .ap-single-vote .ap-vote-count,
#anspress .answer .ap-content .ap-single-vote .ap-vote-count {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	float: none !important;
	margin: 0 !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
}

/* KILL net-vote-count everywhere — DO NOT show the middle number */
#anspress .ap-q-content.ap-content .ap-single-vote .ap-vote .net-vote-count,
#anspress .answer .ap-content .ap-single-vote .ap-vote .net-vote-count,
#anspress .ap-q-content.ap-content .ap-single-vote .net-vote-count,
#anspress .answer .ap-content .ap-single-vote .net-vote-count,
#anspress .ap-q-content.ap-content .ap-single-vote .ap-vote-net-count,
#anspress .answer .ap-content .ap-single-vote .ap-vote-net-count {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	opacity: 0 !important;
}

/* Zero vote → subtle small dot (not big "0") */
#anspress .ap-single-vote .ap-vote-zero,
#anspress .ap-single-vote .net-vote-count.ap-vote-zero {
	font-size: 10px !important;
	font-weight: 400 !important;
	opacity: 0.4 !important;
	color: #9ca3af !important;
}

/* DEATH TO ALL main.css absolute vote leftovers — kill every possible variant */
#anspress .ap-single-vote .ap-vote-count,
#anspress .ap-single-vote .ap-vote-net-count,
#anspress .ap-single-vote > .ap-vote-count,
#anspress .ap-single-vote > .ap-vote-net-count {
	display: none !important;
	position: static !important;
}

#anspress .ap-q-content.ap-content > .ap-q-inner,
#anspress .ap-q-content.ap-content > .ap-cell,
#anspress .answer .ap-content > .ap-a-inner,
#anspress .answer .ap-content > .ap-cell {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
}

/* Remove old absolute .ap-avatar positioning */
/* HIDE answer's left-column avatar — it duplicates with username in .ap-q-metas */
#anspress .answer .ap-content > .ap-avatar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	overflow: hidden !important;
}

/* Question avatar stays visible but slimmer */
#anspress .ap-q-content.ap-content > .ap-avatar {
	flex: 0 0 auto !important;
	margin: 0 12px 0 0 !important;
	position: static !important;
	float: none !important;
}

#anspress .ap-q-content.ap-content .ap-avatar,
#anspress .answer .ap-content .ap-avatar {
	border-radius: 50% !important;
	overflow: hidden !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
}

#anspress .ap-q-content.ap-content .ap-avatar img,
#anspress .answer .ap-content .ap-avatar img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
}

/* ★ KEY: make .ap-cell EAT all remaining space */
#anspress .answer .ap-content > .ap-cell,
#anspress .ap-q-content.ap-content > .ap-cell {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: auto !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Meta bar */
#anspress .ap-q-content .ap-q-metas,
#anspress .answer .ap-a-metas {
	background: transparent !important;
	border-bottom: 1px solid #eef0f3 !important;
	border-top: none !important;
	padding: 0 0 12px 0 !important;
	margin-bottom: 14px !important;
}

#anspress .ap-q-content .ap-cell-inner,
#anspress .answer .ap-cell-inner {
	border: none !important;
	border-radius: var(--ap-radius-md) !important;
}

/* =========================================================================
 * 3. VOTE BLOCK — fix top "0" display bug
 * ========================================================================= */
#anspress .ap-vote-count {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: center !important;
}

#anspress .ap-single-vote .ap-vote-count {
	position: static !important;
	top: auto !important;
	left: auto !important;
}

#anspress .ap-vote-count .ap-vote-net-count,
#anspress .ap-vote-count .net-vote-count {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	padding: 0 !important;
	height: auto !important;
	color: inherit !important;
	margin: 2px 0 !important;
	width: auto !important;
}

/* Fix old style ".ap-vote a" width conflict with main.css */
#anspress .ap-vote-count .ap-vote-buttons {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

#anspress .ap-vote-count .ap-vote-buttons .ap-vote,
#anspress .ap-vote-count .ap-vote-buttons .ap-vote a {
	width: 30px !important;
	height: 30px !important;
	line-height: 28px !important;
	border-radius: var(--ap-radius-sm) !important;
	border: 1px solid #e5e7eb !important;
	background: #f9fafb !important;
	color: #6b7280 !important;
	font-size: 14px !important;
	transition: all .18s ease !important;
	display: block !important;
	text-align: center !important;
}

#anspress .ap-vote-count .ap-vote-buttons .ap-vote a:hover {
	transform: translateY(-1px) !important;
	box-shadow: var(--ap-shadow-sm) !important;
	background: #fff !important;
	color: var(--ap_color1, #ff6f61) !important;
	border-color: var(--ap_color1, #ff6f61) !important;
}

/* =========================================================================
 * 4. POST FOOTER / ACTION BUTTONS (single page)
 * ========================================================================= */
#anspress .ap-q-content .ap-post-footer,
#anspress .answer .ap-post-footer {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	background: transparent !important;
	border-top: 1px solid #eef0f3 !important;
	padding-top: 12px !important;
	margin-top: 14px !important;
}

#anspress .ap-q-content .ap-post-footer > *,
#anspress .answer .ap-post-footer > * {
	float: none !important;
}

#anspress .ap-q-content .ap-post-footer .ap-btn,
#anspress .answer .ap-post-footer .ap-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid #e5e7eb !important;
	border-radius: var(--ap-radius-sm) !important;
	padding: 4px 12px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: inherit !important;
	text-decoration: none !important;
	transition: all .18s ease !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	height: auto !important;
	border-right: 1px solid #e5e7eb !important;
}

#anspress .ap-q-content .ap-post-footer .ap-btn:hover,
#anspress .answer .ap-post-footer .ap-btn:hover {
	background: rgba(0,0,0,0.03) !important;
	border-color: #d1d5db !important;
	transform: translateY(-1px) !important;
	text-decoration: none !important;
	color: inherit !important;
}

/* =========================================================================
 * 5. ACCEPTED ANSWER + TAGS + META ENHANCEMENTS
 * ========================================================================= */
#anspress .answer.best-answer .ap-content {
	border-color: #bbf7d0 !important;
	background: #f0fdf4 !important;
}

#anspress .ap-q-content .question-tags a,
#anspress .ap-q-content .ap-post-tags li a {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 11px !important;
	border-radius: var(--ap-radius-pill, 9999px) !important;
	font-size: 12px !important;
	background: rgba(0,0,0,0.04) !important;
	color: inherit !important;
	border: 1px solid rgba(0,0,0,0.08) !important;
	font-weight: 500 !important;
	margin-right: 6px !important;
	margin-bottom: 6px !important;
}

/* =========================================================================
 * 6. QUESTION LIST — match target: avatar+title+meta LEFT, stats RIGHT
 * ========================================================================= */
#anspress .ap-list-head {
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: var(--ap-radius-md) !important;
	padding: 12px 16px !important;
	margin-bottom: 10px !important;
	box-shadow: var(--ap-shadow-sm) !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

/* Kill old .pull-right float inside list-head (causes huge gaps on mobile) */
#anspress .ap-list-head .pull-right {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
}

#anspress .ap-list-head.clearfix::after,
#anspress .ap-list-head.clearfix::before {
	display: none !important;
	content: none !important;
}

#anspress .ap-list-head .ap-search-form {
	flex: 1 1 240px !important;
	margin: 0 !important;
	float: none !important;
	min-width: 240px !important;
}

#anspress .ap-list-head .ap-btn-ask {
	border-radius: var(--ap-radius-sm) !important;
	height: auto !important;
	padding: 7px 16px !important;
	font-weight: 600 !important;
	box-shadow: var(--ap-shadow-sm) !important;
	transition: all .18s ease !important;
	margin-left: auto !important;
	float: none !important;
	background: #ff6f61 !important;
	background-color: #ff6f61 !important;
	color: #fff !important;
	border-color: #ff6f61 !important;
}

#anspress .ap-list-head .ap-btn-ask:hover {
	transform: translateY(-1px) !important;
	box-shadow: var(--ap-shadow-md) !important;
	background: #ff5a4d !important;
	background-color: #ff5a4d !important;
}

/* Filters bar — one clean line, equal height */
#anspress .ap-list-head .ap-filters {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: none !important;
	overflow: visible !important;
	flex-shrink: 0 !important;
}

#anspress .ap-list-head .ap-filters .ap-filter,
#anspress .ap-list-head .ap-filters .ap-dropdown {
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

#anspress .ap-list-head .ap-filters .ap-filter-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: 34px !important;
	line-height: 1 !important;
	padding: 0 14px !important;
	border-radius: var(--ap-radius-sm) !important;
	border: 1px solid #e5e7eb !important;
	background: #fff !important;
	color: #374151 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#anspress .ap-list-head .ap-filters .ap-filter-toggle:hover {
	background: #f9fafb !important;
	border-color: #d1d5db !important;
}

#anspress .ap-list-head .ap-filters .ap-filter-active {
	color: var(--ap_color1, #ff6f61) !important;
	font-weight: 600 !important;
}

#anspress .ap-list-head .ap-filters #ap-filter-reset {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	height: 34px !important;
	line-height: 1 !important;
	padding: 0 14px !important;
	border-radius: var(--ap-radius-sm) !important;
	border: 1px solid #fecaca !important;
	background: #fff5f5 !important;
	color: #dc2626 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	margin: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
}

#anspress .ap-list-head .ap-filters #ap-filter-reset:hover {
	background: #fee2e2 !important;
}

/* List item — COMPACT single row */
#anspress .ap-questions-item {
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: var(--ap-radius-sm) !important;
	padding: 12px 14px !important;
	margin-bottom: 6px !important;
	box-shadow: none !important;
	transition: background .15s ease, border-color .15s ease !important;
}

#anspress .ap-questions-item:hover {
	background: #fafbfc !important;
	border-color: #d1d5db !important;
}

#anspress .ap-questions-inner {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

/* LEFT group: avatar + title + meta */
#anspress .ap-questions-main {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Avatar */
#anspress .ap-questions-item .ap-avatar {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	float: none !important;
}

#anspress .ap-questions-item .ap-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

/* Title + meta */
#anspress .ap-questions-item .ap-questions-summery {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#anspress .ap-questions-title {
	font-size: 14px !important;
	font-weight: 600 !important;
	margin: 0 0 2px 0 !important;
	display: block !important;
	line-height: 1.4 !important;
}

#anspress .ap-questions-title a {
	color: inherit !important;
	text-decoration: none !important;
}

#anspress .ap-questions-title a:hover {
	color: var(--ap_color6, #2488B7) !important;
}

#anspress .ap-questions-item .ap-display-question-meta {
	font-size: 11px !important;
	color: #9ca3af !important;
	margin: 0 !important;
}

#anspress .ap-questions-item .ap-display-meta-item {
	margin-right: 10px !important;
}

/* RIGHT: stats boxes */
#anspress .ap-questions-item .ap-list-counts {
	display: flex !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

#anspress .ap-questions-item .ap-questions-count {
	float: none !important;
	margin: 0 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 6px !important;
	background: #f9fafb !important;
	text-align: center !important;
	padding: 4px 8px !important;
	min-width: 44px !important;
	width: auto !important;
	height: auto !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 1px !important;
}

#anspress .ap-questions-item .ap-questions-count span {
	border: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	display: block !important;
	line-height: 1 !important;
	color: #374151 !important;
}

#anspress .ap-questions-item .ap-questions-count em {
	font-style: normal !important;
	font-size: 10px !important;
	color: #9ca3af !important;
	text-transform: lowercase !important;
}

/* Answers count — green when has accepted */
#anspress .ap-questions-item.has-accepted .ap-questions-count.ap-questions-acount {
	background: #dcfce7 !important;
	border-color: #bbf7d0 !important;
}
#anspress .ap-questions-item.has-accepted .ap-questions-count.ap-questions-acount span {
	color: #16a34a !important;
}

/* =========================================================================
 * 7. ASK QUESTION PAGE — header + form
 * ========================================================================= */
#anspress .ap-ask-header {
	margin-bottom: 24px !important;
}

#anspress .ap-ask-header .ap-back-center {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: transparent !important;
	background-image: none !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 9999px !important;
	padding: 4px 12px !important;
	font-size: 12px !important;
	color: #6b7280 !important;
	text-decoration: none !important;
	margin-bottom: 14px !important;
	transition: all .18s ease;
	box-shadow: none !important;
	height: auto !important;
	font-weight: 500 !important;
	float: none !important;
}

#anspress .ap-ask-header .ap-back-center:hover {
	background: #f3f4f6 !important;
	border-color: #d1d5db !important;
	color: inherit !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

#anspress .ap-ask-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 6px 0 !important;
	color: inherit !important;
}

#anspress .ap-ask-subtitle {
	font-size: 14px !important;
	color: #888 !important;
	margin: 0 !important;
}

/* Form card */
#anspress #ask_form,
#anspress #ap-post-form,
#anspress #answer_form {
	background: #fff !important;
	border-radius: var(--ap-radius-lg) !important;
	border: 1px solid #eef0f3 !important;
	box-shadow: var(--ap-shadow-sm) !important;
	padding: 28px !important;
	margin-top: 0 !important;
}

#anspress .ap-form-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	margin-bottom: 10px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid #eef0f3 !important;
	color: #374151 !important;
}

#anspress .ap-form-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
	color: #374151 !important;
}

#anspress .ap-form-control {
	border: 1px solid #e5e7eb !important;
	border-radius: var(--ap-radius-sm) !important;
	box-shadow: none !important;
	padding: 10px 14px !important;
	height: auto !important;
	font-size: 14px !important;
	transition: border-color .18s ease, box-shadow .18s ease !important;
	background: #fff !important;
	color: inherit !important;
}

#anspress input[type="text"].ap-form-control {
	height: auto !important;
}

#anspress .ap-form-control:focus,
#anspress textarea.ap-form-control:focus {
	border-color: var(--ap_color6, #2488B7) !important;
	box-shadow: 0 0 0 3px rgba(36,136,183,0.1) !important;
	outline: none !important;
}

/* TinyMCE description field wrapper */
#anspress .ap-field-description {
	border: 1px solid #e5e7eb !important;
	border-radius: var(--ap-radius-sm) !important;
	background: #fff !important;
	overflow: hidden !important;
	margin-top: 4px !important;
}

/* TinyMCE toolbar polish — tiny buttons */
#anspress .mce-toolbar-grp {
	background: #fafafa !important;
	border-bottom: 1px solid #e5e7eb !important;
	padding: 4px !important;
}

#anspress .mce-btn-group {
	border-right: 1px solid #e5e7eb !important;
}

#anspress .mce-btn {
	border: none !important;
	background: transparent !important;
}

#anspress .mce-btn button {
	border-radius: 4px !important;
	border: none !important;
	padding: 1px 5px !important;
	background: transparent !important;
	color: #555 !important;
}

#anspress .mce-btn button:hover {
	background: #e5e7eb !important;
}

#anspress .mce-edit-area {
	border: none !important;
	padding: 8px 10px !important;
}

/* Submit button */
#anspress .ap-form-fields-wrap .ap-btn-submit,
#anspress .btn-submit-ans,
#anspress input[type="submit"].ap-btn,
#anspress #answer_form .btn-submit-ans {
	background: var(--ap_color1, #ff6f61) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--ap-radius-sm) !important;
	padding: 9px 22px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	height: auto !important;
	box-shadow: var(--ap-shadow-sm) !important;
	transition: all .18s ease !important;
	float: none !important;
	background-image: none !important;
}

#anspress .ap-form-fields-wrap .ap-btn-submit:hover,
#anspress .btn-submit-ans:hover {
	transform: translateY(-1px) !important;
	box-shadow: var(--ap-shadow-md) !important;
	filter: brightness(0.95);
}

/* Form field rows spacing */
#anspress .ap-form-group,
#anspress .ap-form-fields {
	margin-bottom: 16px !important;
}

#anspress .ap-form-fields-wrap {
	border-bottom: none !important;
	padding: 0 !important;
}

#anspress .ap-form-fields-wrap .ap-btn-cancel {
	color: #888 !important;
	font-size: 13px !important;
	margin-left: 12px !important;
	text-decoration: none !important;
}

#anspress .ap-form-fields-wrap .ap-btn-cancel:hover {
	color: inherit !important;
	text-decoration: underline !important;
}

/* Description helper — fix the weird white-on-gray text */
#anspress .ap-field-desc,
#anspress .ap-field-help {
	font-size: 12px !important;
	color: #888 !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 4px 0 0 0 !important;
	float: none !important;
	height: auto !important;
	border: none !important;
	box-shadow: none !important;
}

/* =========================================================================
 * 8. RELATED QUESTIONS — 2-column grid (already exists, keep it)
 * ========================================================================= */
#anspress .ap-related-questions {
	margin-top: 24px !important;
	padding: 20px !important;
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: var(--ap-radius-md) !important;
	box-shadow: var(--ap-shadow-sm) !important;
}

#anspress .ap-related-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	margin: 0 0 14px 0 !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #eef0f3 !important;
}

#anspress .ap-related-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2px 12px !important;
}

#anspress .ap-related-item {
	margin: 0 !important;
}

#anspress .ap-related-link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	color: inherit !important;
	transition: background .15s ease !important;
}

#anspress .ap-related-link:hover {
	background: #f9fafb !important;
	text-decoration: none !important;
}

#anspress .ap-related-title-text {
	font-size: 13px !important;
	line-height: 1.4 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	margin: 0 !important;
}

#anspress .ap-related-stats {
	display: flex !important;
	gap: 4px !important;
	flex-shrink: 0 !important;
}

#anspress .ap-related-stats span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px !important;
	height: 24px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	border-radius: 4px !important;
	background: #f3f4f6 !important;
	color: #6b7280 !important;
	padding: 0 5px !important;
}

#anspress .ap-related-stats .ap-r-votes {
	color: var(--ap_color1, #ff6f61) !important;
	background: rgba(139,195,74,0.1) !important;
}

#anspress .ap-related-stats .ap-r-answers.has-answers {
	color: #16a34a !important;
	background: rgba(22,163,74,0.1) !important;
}

/* =========================================================================
 * 9. SIDEBAR — widgets as clean cards
 * ========================================================================= */
#anspress .ap-question-right,
#anspress .ap-col-3,
#anspress .ap-col-4 {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#anspress .ap-question-right > .widget,
#anspress .ap-col-3 > .widget,
#anspress .ap-col-4 > .widget,
#anspress .ap-question-right .ap-widget,
#anspress .ap-col-3 .ap-widget,
#anspress .ap-col-4 .ap-widget {
	background: #fff !important;
	border: 1px solid #eef0f3 !important;
	border-radius: var(--ap-radius-md) !important;
	box-shadow: var(--ap-shadow-sm) !important;
	padding: 18px !important;
	margin-bottom: 0 !important;
}

#anspress .ap-question-right .widget-title,
#anspress .ap-col-3 .widget-title,
#anspress .ap-col-4 .widget-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	margin: 0 0 14px 0 !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #eef0f3 !important;
	color: #1f2937 !important;
}

/* Widget list reset */
#anspress .ap-question-right ul,
#anspress .ap-col-3 ul,
#anspress .ap-col-4 ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

#anspress .ap-question-right ul li,
#anspress .ap-col-3 ul li,
#anspress .ap-col-4 ul li {
	border-bottom: none !important;
	padding: 0 !important;
	margin-bottom: 8px !important;
}

/* =========================================================================
 * 10. PAGINATION
 * ========================================================================= */
#anspress .ap-pagination,
#anspress .pagination {
	display: flex !important;
	gap: 6px !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 14px 0 !important;
}

#anspress .ap-pagination a,
#anspress .pagination a,
#anspress .ap-pagination span,
#anspress .pagination span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	border-radius: var(--ap-radius-sm) !important;
	background: #fff !important;
	border: 1px solid #e5e7eb !important;
	color: inherit !important;
	font-size: 13px !important;
	text-decoration: none !important;
	float: none !important;
	margin: 0 !important;
	transition: all .15s ease !important;
}

#anspress .ap-pagination a:hover,
#anspress .pagination a:hover {
	border-color: var(--ap_color6, #2488B7) !important;
	color: var(--ap_color6, #2488B7) !important;
	text-decoration: none !important;
}

/* =========================================================================
 * 10. MOBILE RESPONSIVE
 * ========================================================================= */
@media (max-width: 768px) {
	#anspress .ap-q-content.ap-content,
	#anspress .answer .ap-content {
		flex-direction: column !important;
		gap: 14px !important;
		padding: 16px !important;
	}

	#anspress .ap-q-title {
		font-size: 20px !important;
	}

	/* list-head: stack tightly */
	#anspress .ap-list-head {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 10px 12px !important;
		gap: 8px !important;
	}

	#anspress .ap-list-head .ap-btn-ask {
		width: 100% !important;
		text-align: center !important;
		margin-left: 0 !important;
	}

	#anspress .ap-list-head .ap-search-form {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	/* Filters on mobile — wrap nicely but no extra gap */
	#anspress .ap-list-head .ap-filters {
		flex-wrap: wrap !important;
		gap: 6px !important;
		margin: 0 !important;
	}

	#anspress .ap-questions-item {
		flex-wrap: wrap !important;
	}

	/* Two-column layout collapses to single column on mobile */
	#anspress .ap-row.ap-row,
	#anspress > .ap-row {
		display: block !important;
	}

	#anspress #ap-lists.ap-col-9,
	#anspress .ap-question-right.ap-col-3,
	#anspress .ap-q-left.ap-col-8,
	#anspress .ap-question-right.ap-col-4 {
		width: 100% !important;
		float: none !important;
		margin: 0 0 12px 0 !important;
	}

	#anspress .ap-related-list {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
 * 11. PSEUDONYM (fake question author) — no click, no hover-link
 * ========================================================================= */
#anspress .ap-pseudonym-user,
#anspress .ap-pseudonym-user * {
	pointer-events: none !important;
	cursor: default !important;
}

#anspress .ap-pseudonym-user a,
#anspress .ap-pseudonym-user a:link,
#anspress .ap-pseudonym-user a:visited,
#anspress .ap-pseudonym-user a:hover,
#anspress .ap-pseudonym-user a:active {
	color: inherit !important;
	text-decoration: none !important;
	cursor: default !important;
	pointer-events: none !important;
}

#anspress span.ap-pseudonym-user {
	color: inherit !important;
	font-weight: inherit !important;
}

/* =========================================================================
 * 12. VOTE BLOCK — TWO BIG PILL BUTTONS side by side
 *     （暴力覆盖 main.css 旧规则）
 * ========================================================================= */

/* ========= 杀手级重置 — 干掉 main.css 所有旧布局 ========= */
#anspress .ap-single-vote,
#anspress .ap-single-vote *,
#anspress .ap-single-vote .ap-vote,
#anspress .ap-single-vote .ap-vote * {
	/* 先全干掉旧的 */
	background-image: none !important;
}

/* 外层 wrapper — 竖排 */
#anspress .ap-single-vote,
#anspress .answer .ap-single-vote,
#anspress #question .ap-single-vote {
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 44px !important;
	min-width: 44px !important;
	float: none !important;
	align-self: flex-start !important;
}

/* 内层 .ap-vote wrapper — 竖排（两个 pill 上下堆） */
#anspress .ap-single-vote .ap-vote,
#anspress .ap-single-vote.ap-vote,
#anspress .ap-single-vote .ap-vote.net-vote {
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	background-clip: unset !important;
}

/* ========= 干掉中间那个 net-vote-count ========= */
#anspress .ap-single-vote .net-vote-count,
#anspress .ap-single-vote .ap-vote-count,
#anspress .ap-single-vote > .net-vote-count,
#anspress .ap-single-vote > .ap-vote-count,
#anspress .ap-single-vote .ap-vote .net-vote-count,
#anspress .ap-single-vote .ap-vote .ap-vote-count,
#anspress .ap-vote.net-vote .net-vote-count {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	position: absolute !important;
	left: -9999px !important;
	overflow: hidden !important;
}

/* ========= PILL BUTTON — 两个独立按钮，填满 44px 宽度 ========= */
#anspress .ap-single-vote .vote-btn,
#anspress .ap-single-vote .ap-vote .vote-btn {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3px !important;
	height: 36px !important;
	width: 100% !important;
	max-width: 44px !important;
	min-width: 0 !important;
	padding: 0 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	color: #6b7280 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
	transition: all .18s ease !important;
	cursor: pointer !important;
	user-select: none !important;
	box-sizing: border-box !important;
	float: none !important;
	position: static !important;
	margin: 0 !important;
}

/* 图标 */
#anspress .ap-single-vote .vote-btn .vote-icon,
#anspress .ap-single-vote .ap-vote .vote-btn .vote-icon {
	font-size: 15px !important;
	line-height: 1 !important;
	display: inline-flex !important;
}

/* 数字 */
#anspress .ap-single-vote .vote-btn .vote-count,
#anspress .ap-single-vote .ap-vote .vote-btn .vote-count {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: #374151 !important;
	font-variant-numeric: tabular-nums !important;
}

/* ===== 赞成 pill ===== */
#anspress .ap-single-vote .vote-btn.vote-up:hover,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-up:hover {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	color: #16a34a !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(22,163,74,0.12) !important;
	text-decoration: none !important;
}
#anspress .ap-single-vote .vote-btn.vote-up:hover .vote-count,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-up:hover .vote-count {
	color: #16a34a !important;
}
#anspress .ap-single-vote .vote-btn.vote-up.voted,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-up.voted {
	background: #16a34a !important;
	border-color: #16a34a !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(22,163,74,0.25) !important;
}
#anspress .ap-single-vote .vote-btn.vote-up.voted .vote-count,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-up.voted .vote-count {
	color: #ffffff !important;
}

/* ===== 反对 pill ===== */
#anspress .ap-single-vote .vote-btn.vote-down:hover,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-down:hover {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
	color: #dc2626 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(220,38,38,0.12) !important;
	text-decoration: none !important;
}
#anspress .ap-single-vote .vote-btn.vote-down:hover .vote-count,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-down:hover .vote-count {
	color: #dc2626 !important;
}
#anspress .ap-single-vote .vote-btn.vote-down.voted,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-down.voted {
	background: #dc2626 !important;
	border-color: #dc2626 !important;
	color: #ffffff !important;
	box-shadow: 0 2px 8px rgba(220,38,38,0.25) !important;
}
#anspress .ap-single-vote .vote-btn.vote-down.voted .vote-count,
#anspress .ap-single-vote .ap-vote .vote-btn.vote-down.voted .vote-count {
	color: #ffffff !important;
}

/* ===== disable 状态 ===== */
#anspress .ap-single-vote .vote-btn.disable,
#anspress .ap-single-vote .ap-vote .vote-btn.disable {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}
#anspress .ap-single-vote .vote-btn.disable:hover,
#anspress .ap-single-vote .ap-vote .vote-btn.disable:hover {
	transform: none !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
	background: #ffffff !important;
	border-color: #e5e7eb !important;
	color: #6b7280 !important;
}

/* =========================================================================
 * 13. "ADD A COMMENT" — hammer it with ALL selector variations
 * ========================================================================= */
#anspress a.ap-btn-newcomment,
#anspress .ap-btn-newcomment,
.ap-btn-newcomment {
	float: right !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 14px !important;
	margin-bottom: 8px !important;
	margin-left: 12px !important;
	margin-right: 0 !important;
	padding: 7px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	text-decoration: none !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
	transition: all .18s ease !important;
	cursor: pointer !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	height: auto !important;
	max-width: none !important;
	width: auto !important;
	visibility: visible !important;
	opacity: 1 !important;
}

#anspress a.ap-btn-newcomment:hover,
#anspress .ap-btn-newcomment:hover,
.ap-btn-newcomment:hover {
	background: #fff !important;
	color: var(--ap_color1, #ff6f61) !important;
	border-color: var(--ap_color1, #ff6f61) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
	text-decoration: none !important;
}

/* =========================================================================
 * 14. POST FOOTER — clean spacing + gear button polish
 * ========================================================================= */
#anspress .ap-content .ap-post-footer,
#anspress .ap-post-footer {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px 8px !important;
	background: transparent !important;
	border-top: 1px solid #eef0f3 !important;
	padding: 12px 0 4px 0 !important;
	margin-top: 14px !important;
	align-items: center !important;
	font-size: 13px !important;
	color: #6b7280 !important;
}

#anspress .ap-content .ap-post-footer > *,
#anspress .ap-post-footer > * {
	float: none !important;
}

/* Footer gear (settings) button — push to the right, proper size */
#anspress .ap-post-footer postActions,
#anspress .ap-post-footer .ap-dropdown,
#anspress .ap-post-footer .ap-actions-handle {
	margin-left: auto !important;
}

#anspress .ap-post-footer .ap-actions-handle {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	border: 1px solid #e5e7eb !important;
	background: #f9fafb !important;
	color: #6b7280 !important;
	transition: all .18s ease !important;
	font-size: 15px !important;
	cursor: pointer !important;
	padding: 0 !important;
}

#anspress .ap-post-footer .ap-actions-handle:hover {
	background: #fff !important;
	color: #374151 !important;
	border-color: #d1d5db !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* =========================================================================
 * 15. ap-cell bottom breathing room
 * ========================================================================= */
#anspress .ap-content .ap-cell,
#anspress .ap-cell {
	padding-bottom: 8px !important;
}

/* =========================================================================
 * 16. Mobile — vote pills slightly smaller
 * ========================================================================= */
@media only screen and (max-width: 768px) {
	#anspress .ap-single-vote,
	#anspress .ap-single-vote .ap-vote {
		gap: 5px !important;
		width: 40px !important;
		min-width: 40px !important;
	}
	#anspress .ap-single-vote .vote-btn,
	#anspress .ap-single-vote .ap-vote .vote-btn {
		height: 32px !important;
		max-width: 40px !important;
		padding: 0 4px !important;
		font-size: 12px !important;
	}
}