:root{
	--g-max:1200px;
	--g-gap:1.25rem;
	--g-card-bg:#ffffff;
	--g-body:#0f172a;
	--g-muted:#334155;
	--g-border:#e5e7eb;
	--g-accent:#4f46e5;
	--g-chip-bg:#eef2ff;
	--g-chip:#3730a3;
	--g-surface:#f8fafc;
	--g-grad:linear-gradient(135deg,#4f46e5 0%, #06b6d4 100%);
}

/* Base */
.guide-wrap,.guide-archive{
	color:var(--g-body);
	background:var(--g-surface);
	min-height:60vh;
	padding:40px 16px;
}

.guide-wrap > *, .guide-archive > *{
	max-width:var(--g-max);
	margin-left:auto;
	margin-right:auto;
}

/* Single */
.guide{
	background:var(--g-card-bg);
	border:1px solid var(--g-border);
	border-radius:14px;
	padding:24px;
	box-shadow:0 10px 20px rgba(2,6,23,.05);
}

.guide__header{display:grid;grid-template-columns:200px 1fr;gap:var(--g-gap);align-items:center;margin-bottom:16px}
.guide__thumb img{width:100%;height:auto;border-radius:10px;display:block}
.guide__title{font-size:clamp(1.6rem,2.3vw,2.25rem);margin:0}
.guide__meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--g-muted);margin-top:8px}
.guide__chip{display:inline-flex;align-items:center;border-radius:999px;background:var(--g-chip-bg);color:var(--g-chip);padding:6px 10px;font-size:.85rem;text-decoration:none;border:1px solid #e0e7ff}
.guide__content{line-height:1.8;font-size:1.05rem}
.guide__content h2{margin-top:1.5em}
.guide__content h3{margin-top:1.2em}
.guide__content p{margin:0 0 1em}
.guide__content blockquote{margin:1.2em 0;padding:14px 16px;border-left:4px solid var(--g-accent);background:linear-gradient(90deg, rgba(79,70,229,.08), transparent)}
.guide__content pre{background:#0b1020;color:#e5e7eb;padding:16px;border-radius:10px;overflow:auto}
.guide__content code{background:#0b1020;color:#e5e7eb;border-radius:6px;padding:2px 6px}
.guide__content a{color:var(--g-accent);text-decoration:none}
.guide__content a:hover{text-decoration:underline}

@media (max-width: 800px){
	.guide__header{grid-template-columns:1fr}
}

/* Archive grid */
.guide-archive__header{margin-bottom:20px}
.guide-archive__header h1{font-size:clamp(1.6rem,2.5vw,2.2rem);margin:0 0 6px;background:var(--g-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.guide-archive__description{color:var(--g-muted)}

/* Filter bar */
.guide-filter{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--g-card-bg);border:1px solid var(--g-border);padding:10px 12px;border-radius:12px;margin:10px 0;box-shadow:0 6px 16px rgba(2,6,23,.06);backdrop-filter:saturate(130%) blur(6px)}
.guide-filter__label{font-weight:600;color:var(--g-muted);margin-right:4px}
.guide-filter__btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--g-border);text-decoration:none;color:var(--g-body);background:#fff;transition:all .15s ease}
.guide-filter__btn:hover{transform:translateY(-1px);box-shadow:0 8px 14px rgba(2,6,23,.08)}
.guide-filter__btn.is-active{background:var(--g-chip-bg);color:var(--g-chip);border-color:#e0e7ff}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g-gap)}
@media (max-width: 1000px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.guide-grid{grid-template-columns:1fr}}

.guide-card{display:flex;flex-direction:column;background:var(--g-card-bg);border:1px solid var(--g-border);border-radius:14px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease}
.guide-card:hover{transform:translateY(-2px);box-shadow:0 12px 20px rgba(2,6,23,.08)}
.guide-card__thumb img{width:100%;height:auto;display:block}
.guide-card__body{padding:16px}
.guide-card__thumb{position:relative}
.guide-card__thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%, rgba(0,0,0,.1) 100%)}
.guide-card__title{font-size:1.1rem;margin:0 0 8px}
.guide-card__excerpt{color:var(--g-muted);margin:0 0 12px}
.guide-card__meta{color:var(--g-muted);font-size:.9rem}

.guide-archive__pagination{margin-top:24px;display:flex;justify-content:center}

/* Loading state */
.guide-archive.is-loading .guide-grid{opacity:.6;filter:saturate(.9)}
.guide-archive.is-loading .guide-card{position:relative}
.guide-archive.is-loading .guide-card:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 60%);background-size:200% 100%;animation:g-shimmer 1.2s infinite}

@keyframes g-shimmer{0%{background-position:-100% 0}100%{background-position:100% 0}}