/* CSS Custom Properties — Dark Mode Default */
:root {
	--bg-body: #0a0b0e;
	--bg-main: #0f1117;
	--bg-sidebar: #161822;
	--bg-card: #1c1c1e;
	--bg-img-container: #121316;
	--border-card: #2c2c2e;
	--text-main: #f2f2f7;
	--text-muted: #a1a1aa;
	--title-color: #64d2ff;
	--badge-bg: rgba(10, 132, 255, 0.18);
	--badge-color: #64d2ff;
	--repo-box-bg: rgba(74, 144, 217, 0.12);
	--repo-box-border: rgba(74, 144, 217, 0.3);
	--input-bg: #1c1c1e;
	--input-border: #2c2c2e;
	--header-border: #2c2c2e;
	--btn-default-bg: #27272a;
	--btn-default-text: #f4f4f5;
}

/* Light Mode Overrides */
html[data-theme="light"] {
	--bg-body: #f8fafc;
	--bg-main: #ffffff;
	--bg-sidebar: #f1f5f9;
	--bg-card: #ffffff;
	--bg-img-container: #f0f3f8;
	--border-card: #e2e8f0;
	--text-main: #1e293b;
	--text-muted: #64748b;
	--title-color: #0056b3;
	--badge-bg: #eef5fc;
	--badge-color: #007aff;
	--repo-box-bg: rgba(170, 229, 164, 0.08);
	--repo-box-border: rgba(170, 229, 164, 0.25);
	--input-bg: #ffffff;
	--input-border: #cbd5e1;
	--header-border: #e2e8f0;
	--btn-default-bg: #e2e8f0;
	--btn-default-text: #1e293b;
}

/* Ambient Glow Background Effects */
body {
	position: relative;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	background-color: var(--bg-main) !important;
	color: var(--text-main) !important;
}

body::before {
	content: "";
	position: fixed;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	height: 550px;
	background: radial-gradient(circle, rgba(170, 229, 164, 0.16) 0%, rgba(170, 229, 164, 0.1) 45%, transparent 75%);
	pointer-events: none;
	z-index: 0;
	filter: blur(70px);
}

body::after {
	content: "";
	position: fixed;
	bottom: -150px;
	right: -100px;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(100, 210, 255, 0.14) 0%, rgba(191, 90, 242, 0.08) 45%, transparent 75%);
	pointer-events: none;
	z-index: 0;
	filter: blur(90px);
}

#sidebar {
	display: none !important;
}

#main {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--bg-main) !important;
	color: var(--text-main) !important;
}

#main > .inner {
	max-width: 1360px !important;
	margin: 0 auto !important;
	padding: 0 2em 0.1em 2em !important;
}

#wrapper {
	background-color: var(--bg-main) !important;
	color: var(--text-main) !important;
	padding: 0 !important;
}

#sidebar {
	background-color: var(--bg-sidebar) !important;
}

/* Sidebar Developer Profile (No Overlapping) */
#sidebar .image {
	margin: 0 0 14px 0 !important;
	display: block !important;
	float: none !important;
	width: 100% !important;
}
#sidebar .image img {
	width: 100% !important;
	max-width: 160px !important;
	height: auto !important;
	border-radius: 16px !important;
	box-shadow: 0 0 20px rgba(10, 132, 255, 0.35) !important;
}

#header {
	border-bottom-color: var(--header-border) !important;
}

#header .logo, #header .logo strong {
	color: var(--text-main) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-main) !important;
}

p, span, label, li {
	color: inherit;
}

/* Banner Layout & Developer Profile Avatar (No Overlapping) */
#banner {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 40px !important;
	padding: 3em 0 2em 0 !important;
}

#banner .content {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

#banner .image.object, #banner .image {
	flex: 0 0 220px !important;
	width: 220px !important;
	height: 220px !important;
	max-width: 220px !important;
	max-height: 220px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#banner .image.object img, #banner .image img {
	width: 210px !important;
	height: 210px !important;
	max-width: 210px !important;
	max-height: 210px !important;
	object-fit: cover !important;
	border-radius: 15% 30% 15% 0% !important;
	border: 3px solid rgba(170, 229, 164, 0.6) !important;
	box-shadow: 0 0 30px rgba(170, 229, 164, 0.45), 0 10px 30px rgba(0, 0, 0, 0.35) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#banner .image.object img:hover {
	transform: scale(1.04);
	box-shadow: 0 0 45px rgba(170, 229, 164, 0.65), 0 12px 35px rgba(0, 0, 0, 0.4) !important;
}

@media screen and (max-width: 980px) {
	#banner {
		flex-direction: column-reverse !important;
		text-align: center !important;
	}
	#banner .image.object, #banner .image {
		margin: 0 auto 24px auto !important;
	}
	#banner .image.object img, #banner .image img {
		width: 170px !important;
		height: 170px !important;
	}
	.repo-url-container {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.pm-buttons {
		justify-content: center !important;
	}
}

#sidebar .toggle {
	display: none !important;
}

.repo-box {
	background: var(--repo-box-bg) !important;
	border: 1px solid var(--repo-box-border) !important;
	border-radius: 30px;
	padding: 24px;
	margin: 24px 0;
	box-shadow: 0 0 30px rgba(170, 229, 164, 0.15);
}

.repo-url-container {
	display: flex;
	align-items: center;
	background: var(--input-bg) !important;
	border: 1px solid var(--input-border) !important;
	color: var(--text-main) !important;
	border-radius: 8px;
	padding: 6px 12px;
	max-width: 480px;
	margin-top: 10px;
}

.repo-url-text {
	flex: 1;
	font-family: monospace;
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-main) !important;
}

.copy-btn {
	background: linear-gradient(45deg, #0000ff 0%, #ff0000 100%);
	color: #fff !important;
	border: none;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.copy-btn:hover {
	background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
	filter: blur(1px);
}

.pm-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	color: #000000;
}

.pm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	display: inline-block;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s, opacity 0.15s;
}

.pm-btn:hover {
	transform: translateY(-2px);
	opacity: 0.95;
filter: blur(1px);
}

.pm-btn img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.pm-sileo { background-image:
linear-gradient(45deg, #0000ff 0%, #ff0000 100%),
		  url("wa/sblurred.png");

background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, cover;
background-position: center, center;

background-clip: text, border-box;
-webkit-background-clip: text, border-box;

-webkit-text-fill-color: transparent;
}
.pm-zebra { background-image:
linear-gradient(45deg, #0000ff 0%, #ff0000 100%),
		  url("wa/zblurred.png");

background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, cover;
background-position: center, center;

background-clip: text, border-box;
-webkit-background-clip: text, border-box;

-webkit-text-fill-color: transparent;
}
.pm-cydia { background-image:
linear-gradient(45deg, #0000ff 0%, #ff0000 100%),
		  url("wa/cblurred.png");

background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, cover;
background-position: center, center;

background-clip: text, border-box;
-webkit-background-clip: text, border-box;

-webkit-text-fill-color: transparent;
}

/* Theme Toggle Header Button */
.theme-toggle-btn {
	background: var(--btn-default-bg);
	color: var(--btn-default-text) !important;
	border: 1px solid var(--border-card);
	border-radius: 20px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: transform 0.15s ease, background 0.2s ease;
}
.theme-toggle-btn:hover {
	transform: scale(1.04);
}

.posts {
	display: flex !important;
	flex-direction: column !important;
	gap: 36px !important;
	margin: 0 0 2em 0 !important;
	width: 100% !important;
}

.posts article, .tweak-card {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 1.2em 0 !important;
	box-sizing: border-box !important;
	clear: both !important;
}

.posts article:before, .posts article:after {
	display: none !important;
}

.tweak-card {
	background: var(--bg-card) !important;
	border: 1px solid var(--border-card) !important;
	color: var(--text-main) !important;
	border-radius: 24px;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch;
	min-height: 800px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.tweak-card:hover {
	transform: translateY(-6px) scale(1.003);
	border-color: rgba(10, 132, 255, 0.4) !important;
	box-shadow: 0 24px 60px rgba(10, 132, 255, 0.25);
}

.tweak-card .image-container {
	flex: 0 0 60%;
	width: 60%;
	max-width: 60%;
	background: var(--bg-img-container) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-right: 1px solid var(--border-card) !important;
	padding: 14px;
	box-sizing: border-box;
	cursor: zoom-in;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.tweak-card .image-container img {
	max-height: 780px;
	max-width: 100%;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(0,0,0,0.35);
	transition: transform 0.3s ease;
	-webkit-user-drag: none;
}

/* Compact Image Card Layout for Icon / Graphic PNG Tweaks */
.tweak-card.compact-img-card {
	min-height: 420px !important;
}
.tweak-card.compact-img-card .image-container {
	flex: 0 0 45% !important;
	width: 45% !important;
	max-width: 45% !important;
	padding: 24px !important;
}
.tweak-card.compact-img-card .image-container img {
	max-height: 340px !important;
	max-width: 80% !important;
	width: auto !important;
	object-fit: contain !important;
}
.tweak-card.compact-img-card .tweak-content {
	flex: 0 0 55% !important;
	width: 55% !important;
	max-width: 55% !important;
	padding: 32px 36px !important;
}
@media screen and (max-width: 1024px) {
	.tweak-card.compact-img-card .image-container {
		min-height: 320px !important;
		max-height: 400px !important;
	}
	.tweak-card.compact-img-card .image-container img {
		max-height: 320px !important;
	}
}
@media screen and (max-width: 767px) {
	.tweak-card.compact-img-card .image-container {
		min-height: 240px !important;
		max-height: 300px !important;
		padding: 16px !important;
	}
	.tweak-card.compact-img-card .image-container img {
		max-height: 240px !important;
	}
}

.tweak-content {
	padding: 44px 38px;
	flex: 0 0 40%;
	width: 40%;
	max-width: 40%;
	box-sizing: border-box;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tweak-badge {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, rgba(10, 132, 255, 0.18), rgba(94, 92, 230, 0.18)) !important;
	border: 1px solid rgba(10, 132, 255, 0.35) !important;
	color: #64d2ff !important;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	align-self: flex-start;
}
html[data-theme="light"] .tweak-badge {
	background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1)) !important;
	border-color: rgba(0, 122, 255, 0.25) !important;
	color: #007aff !important;
}

.tweak-title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.5px;
	margin: 0 0 16px 0;
	word-wrap: break-word;
	background: linear-gradient(135deg, #64d2ff 0%, #0a84ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: opacity 0.2s ease;
}

.tweak-title a {
	background: linear-gradient(135deg, #64d2ff 0%, #0a84ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-decoration: none !important;
	border-bottom: none !important;
}
html[data-theme="light"] .tweak-title, html[data-theme="light"] .tweak-title a {
	background: linear-gradient(135deg, #0056b3 0%, #5856d6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.tweak-title a:hover {
	opacity: 0.85;
}

.tweak-desc {
	font-size: 16px;
	color: var(--text-muted) !important;
	margin-bottom: 16px;
	line-height: 1.65;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.tweak-features {
	margin: 12px 0 20px 0;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	flex: 1;
}
html[data-theme="light"] .tweak-features {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
}
.tweak-features h4 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--title-color) !important;
	margin: 0 0 10px 0;
}
.tweak-features ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tweak-features li {
	font-size: 13.5px;
	color: var(--text-main);
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.4;
	padding-left: 0 !important;
}
.tweak-features li::before {
	content: "✓";
	color: #64d2ff;
	font-weight: bold;
	font-size: 14px;
	flex-shrink: 0;
}
html[data-theme="light"] .tweak-features li::before {
	color: #007aff;
}

.tweak-actions {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tweak-actions li {
	margin: 0;
	padding: 0;
}

.tweak-actions .btn-detail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #007aff, #0056b3);
	color: #fff !important;
	padding: 14px 34px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	touch-action: manipulation;
}

.tweak-actions .btn-detail:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 122, 255, 0.5);
	background: linear-gradient(135deg, #0062cc, #004499);
}

/* Input and Search Styling */
input[type="text"], input[type="search"] {
	background-color: var(--input-bg) !important;
	border: 1px solid var(--input-border) !important;
	color: var(--text-main) !important;
	border-radius: 8px;
}
.tweak-actions {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tweak-actions li {
	margin: 0;
	padding: 0;
}
.tweak-actions .btn-detail {
	display: inline-block;
	text-align: center;
	background: #007aff;
	color: #fff !important;
	padding: 14px 32px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
	touch-action: manipulation;
}
.tweak-actions .btn-detail:hover {
	background: #0056b3;
}

/* iPad Responsive Layout (Portrait & Medium Displays: 768px - 1024px) */
@media screen and (max-width: 1024px) {
	.tweak-card {
		flex-direction: column !important;
		min-height: auto !important;
	}
	.tweak-card .image-container {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		height: auto !important;
		min-height: 550px;
		max-height: 720px;
		padding: 16px;
		border-right: none;
		border-bottom: 1px solid #e1e4e8;
	}
	@media (prefers-color-scheme: dark) {
		.tweak-card .image-container {
			border-bottom-color: #2c2c2e;
		}
	}
	.tweak-card .image-container img {
		max-height: 680px;
	}
	.tweak-content {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
		padding: 32px 28px;
	}
}

/* iPhone Mobile Responsive Layout (< 768px) */
@media screen and (max-width: 767px) {
	#main > .inner {
		padding: 0 14px 0.1em 14px !important;
	}
	.tweak-card {
		border-radius: 16px;
		margin-bottom: 24px !important;
	}
	.tweak-card .image-container {
		min-height: 400px;
		max-height: 70vh;
		padding: 10px;
	}
	.tweak-card .image-container img {
		max-height: 65vh;
		border-radius: 10px;
	}
	.tweak-content {
		padding: 22px 16px;
	}
	.tweak-title {
		font-size: 21px;
		margin-bottom: 10px;
	}
	.tweak-desc {
		font-size: 15px;
		line-height: 1.55;
		margin-bottom: 18px;
	}
	.tweak-actions {
		width: 100%;
	}
	.tweak-actions li {
		width: 100%;
	}
	.tweak-actions .btn-detail {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 14px;
		font-size: 16px;
	}
}