/**
 * Miloo Theme - Argon-Inspired Design
 * Tang Dynasty Red (#E60012) accent
 */

/* ==========================================================================
   1. Design Tokens (Argon-style HSL system)
   ========================================================================== */
:root {
	--themecolor: #E60012;
	--themecolor-R: 230; --themecolor-G: 0; --themecolor-B: 18;
	--themecolor-H: 355; --themecolor-S: 100; --themecolor-L: 45;
	--themecolor-rgbstr: 230, 0, 18;
	--themecolor-dark: #B8000E;
	--themecolor-dark2: #8B000A;
	--themecolor-light: #FF4D58;
	--themecolor-gradient: linear-gradient(150deg, #FF4D58 15%, #E60012 70%, #B8000E 94%);

	/* Tint/Shade system */
	--color-tint-70: rgb(238,77,85);
	--color-tint-80: rgb(242,102,109);
	--color-tint-86: rgb(244,127,133);
	--color-tint-92: rgb(248,163,167);
	--color-tint-95: rgb(250,189,192);

	/* Surface colors */
	--color-background: #F4F5F7;
	--color-foreground: #FFFFFF;
	--color-widgets: #FFFFFF;
	--color-widgets-disabled: #E9ECEF;
	--color-border: #DCE0E5;
	--color-border-on-foreground: #F3F3F3;
	--color-border-on-foreground-deeper: #EEEEEE;
	--color-text: #525F7F;
	--color-text-deeper: #212529;

	/* Shadows */
	--shadow-card: 0 0 2rem 0 rgba(136,152,170,.15);
	--shadow-card-hover: 0 0 3rem 0 rgba(136,152,170,.25);
	--shadow-sm: 0 0 .5rem 0 rgba(136,152,170,.1);
	--shadow-btn: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
	--shadow-btn-hover: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);

	/* Radii */
	--radius-card: 8px;
	--radius-btn: 6px;
	--radius-round: 50rem;

	/* Transitions */
	--transition: all .15s ease;
	--transition-slow: all .3s cubic-bezier(.25,.8,.25,1);

	/* Font */
	--font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text);
	background: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(var(--themecolor-rgbstr),.2); color: var(--color-text-deeper); }

a { color: var(--themecolor); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--themecolor-dark); }

img { max-width: 100%; height: auto; }

h1,h2,h3,h4,h5,h6 {
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-text-deeper);
	margin-bottom: .5rem;
}

/* ==========================================================================
   3. Header - Transparent Navbar (Argon-style)
   ========================================================================== */
#toolbar { position: relative; z-index: 1030; }

.header-global {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
}

.navbar-main {
	background: transparent !important;
	transition: background .3s ease, box-shadow .3s ease;
	padding: .75rem 0;
}

.navbar-main.navbar-scrolled {
	background: rgba(255,255,255,.95) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
}

.navbar-main .navbar-brand {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: #fff !important;
	transition: color .3s ease;
}

.navbar-main.navbar-scrolled .navbar-brand { color: var(--color-text-deeper) !important; }

.navbar-main .nav-link {
	color: rgba(255,255,255,.85) !important;
	font-weight: 600;
	font-size: .875rem;
	padding: .5rem 1rem !important;
	letter-spacing: .02em;
	transition: color .3s ease;
}

.navbar-main.navbar-scrolled .nav-link { color: rgba(0,0,0,.65) !important; }
.navbar-main .nav-link:hover,
.navbar-main.navbar-scrolled .nav-link:hover { color: var(--themecolor) !important; }

.navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar-main.navbar-scrolled .navbar-toggler { border-color: rgba(0,0,0,.2); }

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-main.navbar-scrolled .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Header actions */
.header-actions .btn-icon {
	color: rgba(255,255,255,.85);
	background: transparent;
	border: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all .3s ease;
	font-size: 1rem;
}

.header-actions .btn-icon:hover {
	background: rgba(255,255,255,.15);
	color: #fff;
}

.navbar-main.navbar-scrolled .header-actions .btn-icon {
	color: rgba(0,0,0,.55);
}

.navbar-main.navbar-scrolled .header-actions .btn-icon:hover {
	background: rgba(0,0,0,.05);
	color: var(--themecolor);
}

/* Logo */
.site-logo-placeholder .logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--themecolor), var(--themecolor-dark));
	border-radius: 10px;
	color: #fff;
	font-size: 1.1rem;
	transition: all .3s ease;
	box-shadow: 0 4px 10px rgba(230,0,18,.3);
}

/* ==========================================================================
   4. Banner / Hero (Argon section-shaped)
   ========================================================================== */
.banner {
	position: relative;
	min-height: 420px;
	background: var(--themecolor-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 80px;
}

.banner::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 150px;
	background: var(--color-background);
	clip-path: ellipse(60% 100% at 50% 100%);
	z-index: 2;
}

.banner .shape {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.banner .shape span {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
}

.banner .shape span:nth-child(1) { width: 300px; height: 300px; top: -100px; left: -80px; }
.banner .shape span:nth-child(2) { width: 200px; height: 200px; top: 50px; right: -50px; }
.banner .shape span:nth-child(3) { width: 150px; height: 150px; bottom: 80px; left: 30%; }
.banner .shape span:nth-child(4) { width: 100px; height: 100px; top: 60px; right: 30%; }
.banner .shape span:nth-child(5) { width: 250px; height: 250px; bottom: -80px; right: 20%; }

.banner-container {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 2rem;
}

.banner-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff !important;
	margin-bottom: .5rem;
	text-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.banner-subtitle {
	font-size: 1.15rem;
	color: rgba(255,255,255,.75) !important;
	font-weight: 400;
}

/* Banner with custom background image */
.banner.has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.banner.has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.35);
	z-index: 0;
}

/* Banner scroll down indicator */
.banner .scroll-down {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: rgba(255,255,255,.6);
	font-size: 1.5rem;
	animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-10px); }
	60% { transform: translateX(-50%) translateY(-5px); }
}

/* ==========================================================================
   5. Main Content Layout
   ========================================================================== */
.site-content {
	padding-top: 2rem;
	padding-bottom: 3rem;
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   6. Cards (Argon-style: border-0, shadow)
   ========================================================================== */
.card {
	background: var(--color-foreground);
	border: 0 !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-card);
	transition: var(--transition-slow);
	overflow: hidden;
}

.card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.blog-card { height: 100%; }

.blog-card .card-img-top-wrap {
	display: block;
	overflow: hidden;
	position: relative;
}

.blog-card .card-img-top {
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

.blog-card:hover .card-img-top { transform: scale(1.05); }

.blog-card .card-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	font-size: 3rem;
	color: #dee2e6;
}

.blog-card:hover .card-img-placeholder { background: linear-gradient(135deg, #fff5f5, #ffe0e0); }
.blog-card:hover .card-img-placeholder i { color: rgba(230,0,18,.2); }

.blog-card .card-body { padding: 1.5rem 1.5rem .5rem; }

.blog-card .card-category a {
	font-size: .75rem;
	color: var(--themecolor);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.blog-card .card-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin: .5rem 0;
	line-height: 1.4;
}

.blog-card .card-title a {
	color: var(--color-text-deeper);
	transition: var(--transition);
}

.blog-card .card-title a:hover { color: var(--themecolor); }

.blog-card .card-text {
	color: var(--color-text);
	font-size: .875rem;
	line-height: 1.6;
}

.blog-card .card-footer {
	background: transparent;
	border-top: 1px solid var(--color-border-on-foreground);
	padding: .75rem 1.5rem;
}

.blog-card .post-meta {
	font-size: .8rem;
	color: #8898aa;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.blog-card .post-meta i { opacity: .5; margin-right: 2px; }

/* ==========================================================================
   7. Wallpaper Cards
   ========================================================================== */
.wallpaper-grid { display: flex; flex-wrap: wrap; }
.wallpaper-item { padding: .75rem; }

.wallpaper-card {
	background: var(--color-foreground);
	border: 0 !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: var(--transition-slow);
}

.wallpaper-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-3px);
}

.wallpaper-image-wrap {
	overflow: hidden;
	position: relative;
}

.wallpaper-image-wrap::before { content: ''; display: block; padding-bottom: 66%; }

.wallpaper-image-wrap .wallpaper-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.25,.8,.25,1);
}

.wallpaper-card:hover .wallpaper-img { transform: scale(1.08); }

/* Hover overlay */
.wallpaper-image-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 50%);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 1;
	pointer-events: none;
}

.wallpaper-card:hover .wallpaper-image-wrap::after { opacity: 1; }

.wallpaper-card .card-body { padding: .75rem 1rem; }

.wallpaper-card .wallpaper-title {
	font-size: .875rem;
	font-weight: 600;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wallpaper-card .wallpaper-title a { color: var(--color-text-deeper); }
.wallpaper-card .wallpaper-title a:hover { color: var(--themecolor); }

.wallpaper-card .card-footer {
	background: transparent;
	border-top: 1px solid var(--color-border-on-foreground);
	padding: .5rem 1rem;
	display: flex;
	gap: 6px;
}

.wallpaper-card .card-footer .btn {
	font-size: .75rem;
	padding: 4px 12px;
	font-weight: 600;
	flex: 1;
}

/* ==========================================================================
   8. Single Post
   ========================================================================== */
.single-post-article {
	background: var(--color-foreground);
	border-radius: var(--radius-card);
	padding: 2.5rem;
	margin-bottom: 2rem;
	box-shadow: var(--shadow-sm);
}

.single-post-article .entry-title {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: .75rem;
}

.single-post-article .post-meta {
	color: #8898aa;
	font-size: .875rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border-on-foreground);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.single-post-article .post-meta i { opacity: .5; margin-right: 3px; }

.single-post-article .entry-thumbnail {
	margin-bottom: 2rem;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.single-post-article .entry-thumbnail img { display: block; width: 100%; }

.single-post-article .entry-content {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text);
}

.single-post-article .entry-content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 2.5rem 0 1rem;
	padding-left: 14px;
	border-left: 4px solid var(--themecolor);
}

.single-post-article .entry-content h3 { font-size: 1.25rem; margin: 2rem 0 .75rem; }

.single-post-article .entry-content p { margin-bottom: 1.25rem; }

.single-post-article .entry-content img {
	border-radius: var(--radius-card);
	margin: 1.5rem 0;
	box-shadow: var(--shadow-card);
}

.single-post-article .entry-content blockquote {
	border-left: 4px solid var(--themecolor);
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, #fff5f5, #fff);
	margin: 1.5rem 0;
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	font-style: italic;
	color: #666;
}

.single-post-article .entry-tags {
	margin: 2rem 0 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.single-post-article .entry-tags a {
	background: var(--color-background);
	padding: 5px 14px;
	border-radius: var(--radius-round);
	font-size: .8rem;
	color: var(--color-text);
	font-weight: 500;
	transition: var(--transition);
}

.single-post-article .entry-tags a:hover {
	background: var(--themecolor);
	color: #fff;
	box-shadow: var(--shadow-btn);
}

/* Share buttons */
.share-buttons {
	margin: 1.5rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--color-border-on-foreground);
	border-bottom: 1px solid var(--color-border-on-foreground);
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.share-buttons .share-label { font-weight: 600; margin-right: .5rem; font-size: .875rem; }

.share-buttons a {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: .9rem;
	transition: var(--transition);
}

.share-buttons a:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }

.share-buttons .fa-weibo { background: #E6162D; }
.share-buttons .fa-weixin { background: #07C160; }
.share-buttons .fa-twitter { background: #1DA1F2; }
.share-buttons .fa-facebook { background: #1877F2; }
.share-buttons .fa-pinterest { background: #BD081C; }

/* Post Navigation */
.post-navigation { margin: 2rem 0; }

.post-nav-link {
	display: block;
	padding: 1.25rem;
	background: var(--color-foreground);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-slow);
}

.post-nav-link:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

.post-nav-link .nav-label {
	font-size: .75rem;
	color: #8898aa;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	margin-bottom: 4px;
}

.post-nav-link .nav-title { font-weight: 600; font-size: .9rem; color: var(--color-text-deeper); }

/* Author Box */
.author-box {
	background: var(--color-foreground);
	border-radius: var(--radius-card);
	padding: 1.5rem;
	margin: 1.5rem 0;
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.author-box .author-avatar img { border-radius: 50%; box-shadow: var(--shadow-sm); }

/* ==========================================================================
   9. Comments
   ========================================================================== */
.comments-area {
	background: var(--color-foreground);
	border-radius: var(--radius-card);
	padding: 2rem 2.5rem;
	margin-top: 2rem;
	box-shadow: var(--shadow-sm);
}

.comments-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--themecolor);
}

.comment-list { list-style: none; padding: 0; }

.comment-list .comment-body {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-border-on-foreground);
}

.comment-list .children { list-style: none; padding-left: 2rem; }

.comment-author .fn { font-weight: 600; }

.comment-respond { margin-top: 2rem; }

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	padding: 10px 14px;
	font-size: .9rem;
	transition: var(--transition);
	width: 100%;
	font-family: var(--font-family);
	background: var(--color-foreground);
}

.comment-form textarea:focus,
.comment-form input:focus {
	border-color: var(--themecolor);
	box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr),.1);
	outline: none;
}

.comment-form .submit {
	background: var(--themecolor);
	color: #fff;
	border: none;
	padding: 10px 28px;
	border-radius: var(--radius-btn);
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: var(--transition);
	box-shadow: var(--shadow-btn);
}

.comment-form .submit:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-btn-hover);
}

/* ==========================================================================
   10. Sidebar (Argon-style: clean, elevated)
   ========================================================================== */
.widget-area .widget {
	background: var(--color-widgets);
	border-radius: var(--radius-card);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-sm);
	transition: var(--transition-slow);
}

.widget-area .widget:hover { box-shadow: var(--shadow-card); }

.widget-area .widget-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 1rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--themecolor);
	text-transform: none;
	letter-spacing: .02em;
}

.widget-area .widget ul { list-style: none; padding: 0; margin: 0; }

.widget-area .widget ul li {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border-on-foreground);
	font-size: .9rem;
}

.widget-area .widget ul li:last-child { border-bottom: 0; }

.widget-area .widget ul li a { color: var(--color-text); transition: var(--transition); }

.widget-area .widget ul li a:hover { color: var(--themecolor); padding-left: 4px; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.site-footer {
	background: #172B4D;
	color: rgba(255,255,255,.7);
	margin-top: 4rem;
	padding-top: 3rem;
}

.footer-widgets { padding-bottom: 2rem; }

.footer-widgets .widget-title {
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.footer-widgets .widget ul { list-style: none; padding: 0; }

.footer-widgets .widget ul li { padding: 5px 0; }

.footer-widgets a { color: rgba(255,255,255,.6); font-size: .875rem; }

.footer-widgets a:hover { color: #fff; padding-left: 4px; }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 1.25rem 0;
	font-size: .85rem;
}

.footer-copyright { color: rgba(255,255,255,.5); }

.footer-social a {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	margin-left: 6px;
	font-size: .9rem;
	transition: var(--transition);
}

.footer-social a:hover { background: var(--themecolor); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   12. Buttons
   ========================================================================== */
.btn {
	font-weight: 600;
	font-size: .875rem;
	padding: .625rem 1.25rem;
	border-radius: var(--radius-btn);
	letter-spacing: .025em;
	transition: var(--transition);
	text-transform: none;
	box-shadow: var(--shadow-btn);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-btn-hover); }

.btn-primary {
	background: var(--themecolor);
	border-color: var(--themecolor);
	color: #fff;
}

.btn-primary:hover { background: var(--themecolor-dark); border-color: var(--themecolor-dark); }

.btn-outline-primary {
	color: var(--themecolor);
	border-color: var(--themecolor);
	background: transparent;
	box-shadow: none;
}

.btn-outline-primary:hover {
	background: var(--themecolor);
	border-color: var(--themecolor);
	color: #fff;
	box-shadow: var(--shadow-btn);
}

.btn-download {
	background: var(--themecolor);
	border-color: var(--themecolor);
	color: #fff;
}

.btn-neutral {
	background: #fff;
	border-color: #fff;
	color: var(--themecolor);
}

/* ==========================================================================
   13. Floating Action Buttons (FAB)
   ========================================================================== */
.float-action-buttons {
	position: fixed;
	right: 1.5rem;
	bottom: 5rem;
	z-index: 1040;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.fabtn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-foreground);
	border: 0;
	box-shadow: var(--shadow-card);
	color: var(--color-text);
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition-slow);
	text-decoration: none;
}

.fabtn:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
	color: var(--themecolor);
}

.fabtn.back-to-top { display: none; }

.fabtn.back-to-top.visible { display: flex; }

/* ==========================================================================
   14. Breadcrumbs
   ========================================================================== */
.breadcrumb-wrapper {
	background: transparent;
	padding: 0 0 .75rem;
}

.breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
	font-size: .8rem;
}

.breadcrumb-item a { color: #8898aa; }

.breadcrumb-item a:hover { color: var(--themecolor); }

.breadcrumb-item.active { color: var(--color-text); }

/* ==========================================================================
   15. Pagination
   ========================================================================== */
.pagination-nav { margin-top: 2rem; }

.pagination { justify-content: center; gap: 4px; }

.pagination .page-link {
	border-radius: var(--radius-btn) !important;
	border: 1px solid var(--color-border);
	background: var(--color-foreground);
	color: var(--color-text);
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	transition: var(--transition);
}

.pagination .page-item.active .page-link {
	background: var(--themecolor);
	border-color: var(--themecolor);
	color: #fff;
	box-shadow: 0 3px 8px rgba(var(--themecolor-rgbstr),.3);
}

.pagination .page-link:hover {
	background: var(--color-background);
	border-color: var(--themecolor);
	color: var(--themecolor);
}

/* ==========================================================================
   16. Section Headers
   ========================================================================== */
.section-title {
	font-size: 1.35rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	color: var(--color-text-deeper);
}

/* ==========================================================================
   17. Home Welcome (Dark variant)
   ========================================================================== */
.home-welcome {
	background: linear-gradient(150deg, #172B4D, #1a174d);
	border-radius: var(--radius-card);
	padding: 2.5rem;
	margin-bottom: 2rem;
	color: #fff;
	box-shadow: var(--shadow-card);
}

.home-welcome-title { font-size: 1.75rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }

.home-welcome-desc { color: rgba(255,255,255,.6); font-size: 1rem; margin-bottom: 1.25rem; }

.home-welcome-stats { display: flex; gap: 2rem; }

.home-welcome-stats .stat-item { color: rgba(255,255,255,.5); font-size: .85rem; }

.home-welcome-stats .stat-item strong {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin-right: 4px;
}

/* ==========================================================================
   18. Dark Mode
   ========================================================================== */
body.dark-mode {
	--color-background: #1a1a1a;
	--color-foreground: #2d2d2d;
	--color-widgets: #333;
	--color-widgets-disabled: #3a3a3a;
	--color-border: #444;
	--color-border-on-foreground: #3a3a3a;
	--color-border-on-foreground-deeper: #444;
	--color-text: #bbb;
	--color-text-deeper: #eee;
	--shadow-card: 0 0 2rem 0 rgba(0,0,0,.3);
	--shadow-card-hover: 0 0 3rem 0 rgba(0,0,0,.4);
	--shadow-sm: 0 0 .5rem 0 rgba(0,0,0,.2);
	color-scheme: dark;
}

body.dark-mode .navbar-main.navbar-scrolled {
	background: rgba(30,30,30,.95) !important;
}

body.dark-mode .navbar-main.navbar-scrolled .navbar-brand,
body.dark-mode .navbar-main.navbar-scrolled .nav-link { color: rgba(255,255,255,.85) !important; }

body.dark-mode .blog-card .card-img-placeholder {
	background: linear-gradient(135deg, #333, #444);
}

body.dark-mode .single-post-article .entry-content blockquote {
	background: linear-gradient(135deg, #2a1520, #2d2d2d);
}

body.dark-mode .comment-form textarea,
body.dark-mode .comment-form input {
	background: var(--color-foreground);
	border-color: var(--color-border);
	color: var(--color-text);
}

body.dark-mode .entry-tags a { background: #333; color: #ccc; }

body.dark-mode .breadcrumb-wrapper { background: transparent; }

body.dark-mode .site-footer { background: #111; }

body.dark-mode .pagination .page-link { background: var(--color-foreground); }

/* ==========================================================================
   19. Left Sidebar Layout (Argon default)
   ========================================================================== */
body.left-sidebar .row {
	flex-direction: row-reverse;
}

body.left-sidebar #primary { order: 2; }
body.left-sidebar #secondary { order: 1; }

/* ==========================================================================
   20. Animations
   ========================================================================== */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.miloo-blog-grid > [class*="col"],
.wallpaper-item {
	animation: fadeInUp .5s ease both;
}

.miloo-blog-grid > *:nth-child(1),
.wallpaper-item:nth-child(1) { animation-delay: 0s; }
.miloo-blog-grid > *:nth-child(2),
.wallpaper-item:nth-child(2) { animation-delay: .06s; }
.miloo-blog-grid > *:nth-child(3),
.wallpaper-item:nth-child(3) { animation-delay: .12s; }
.miloo-blog-grid > *:nth-child(4),
.wallpaper-item:nth-child(4) { animation-delay: .18s; }
.miloo-blog-grid > *:nth-child(5),
.wallpaper-item:nth-child(5) { animation-delay: .24s; }
.miloo-blog-grid > *:nth-child(6),
.wallpaper-item:nth-child(6) { animation-delay: .3s; }

/* ==========================================================================
   21. Accessibility
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--themecolor);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	background: var(--themecolor);
	color: #fff;
	padding: 10px 20px;
	z-index: 10000;
	border-radius: 0 0 var(--radius-btn) var(--radius-btn);
	font-weight: 600;
}

.skip-link:focus { top: 0; }

/* ==========================================================================
   22. Search Form
   ========================================================================== */
.search-form .form-control {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-btn);
	padding: 10px 16px;
	font-size: .875rem;
	transition: var(--transition);
}

.search-form .form-control:focus {
	border-color: var(--themecolor);
	box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr),.1);
	outline: none;
}

/* ==========================================================================
   23. 404 Page
   ========================================================================== */
.error-404-title {
	font-size: 120px;
	font-weight: 700;
	color: var(--themecolor);
	line-height: 1;
}

/* ==========================================================================
   24. Responsive
   ========================================================================== */
@media (max-width: 991px) {
	.banner { min-height: 320px; }
	.banner-title { font-size: 1.75rem; }
	.banner::after { height: 80px; }
	.site-content { padding-top: 1.5rem; }
	.single-post-article { padding: 1.5rem; }
}

@media (max-width: 767px) {
	.banner { min-height: 280px; padding-top: 70px; }
	.banner-title { font-size: 1.35rem; }
	.banner-subtitle { font-size: .9rem; }
	.single-post-article { padding: 1rem; }
	.single-post-article .entry-title { font-size: 1.35rem; }
	.comments-area { padding: 1.25rem; }
	.float-action-buttons { right: .75rem; bottom: 4rem; }
	.fabtn { width: 38px; height: 38px; }
	.home-welcome { padding: 1.5rem; }
	.home-welcome-stats { flex-direction: column; gap: .5rem; }
}

/* ==========================================================================
   25. Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	html { scroll-behavior: auto; }
}