.blog-shell,
.agent-login,
.agent-board,
.blog-editor,
.blog-review {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--text);
}

.blog-hero,
.blog-section,
.blog-category-hero,
.blog-article,
.blog-cta,
.agent-login__card,
.agent-board__hero,
.agent-board__panel,
.blog-editor__panel,
.blog-review__panel {
	border: 1px solid rgba(148, 163, 184, .20);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .070), rgba(255, 255, 255, .040)),
		rgba(7, 11, 22, .28);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
	padding: clamp(18px, 3vw, 30px);
}

.blog-hero,
.agent-board__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
	gap: 22px;
	align-items: center;
	margin-bottom: 20px;
	border-color: rgba(96, 165, 250, .26);
	background:
		radial-gradient(540px 260px at 12% 0%, rgba(96, 165, 250, .18), transparent 68%),
		radial-gradient(420px 260px at 88% 20%, rgba(34, 197, 94, .12), transparent 66%),
		linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .042)),
		rgba(7, 11, 22, .34);
}

.blog-section,
.blog-category-hero,
.blog-article,
.blog-cta,
.agent-board__panel,
.blog-editor__panel,
.blog-review__panel {
	margin-top: 18px;
}

.blog-section-label,
.agent-login__eyebrow,
.agent-board__eyebrow,
.blog-editor__eyebrow {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 7px 11px;
	border: 1px solid rgba(96, 165, 250, .34);
	border-radius: 999px;
	color: rgba(191, 219, 254, .96);
	font-size: 12px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: .08em;
	background: rgba(96, 165, 250, .08);
}

.blog-shell h1,
.agent-login h1,
.agent-board h1,
.blog-editor h1,
.blog-review h1 {
	margin: 14px 0 10px;
	color: var(--text);
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.08;
	letter-spacing: 0;
}

.blog-shell h2,
.agent-board__panel h2,
.blog-editor h2,
.blog-review h2 {
	color: var(--text);
}

.agent-board__panel h2 {
	margin: 0 0 14px;
	font-size: 24px;
}

.blog-shell p,
.agent-login p,
.agent-board p,
.blog-review p {
	margin-top: 0;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
}

.blog-grid,
.agent-board__grid,
.blog-editor__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.blog-grid--cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-card,
.agent-board__article {
	padding: 16px;
	border: 1px solid rgba(148, 163, 184, .16);
	border-radius: 14px;
	background: rgba(255, 255, 255, .035);
}

.blog-card__title,
.agent-board__title {
	margin-bottom: 7px;
	color: var(--text);
	font-size: 18px;
	font-weight: 850;
	line-height: 1.25;
}

.blog-card__title a,
.agent-board__title a {
	color: var(--text);
}

.blog-card__title a:hover,
.agent-board__title a:hover,
.blog-article__meta a:hover {
	color: #fff;
}

.blog-card__meta,
.agent-board__meta,
.blog-article__meta {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.45;
}

.blog-button,
.agent-login button,
.agent-board__button,
.blog-editor__button,
.blog-review__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	border: 1px solid rgba(96, 165, 250, .45);
	border-radius: 14px;
	padding: 9px 14px;
	background: linear-gradient(180deg, rgba(96, 165, 250, .28), rgba(96, 165, 250, .12));
	box-shadow: 0 22px 55px rgba(96, 165, 250, .14);
	color: #fff;
	font-weight: 850;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.blog-button:hover,
.agent-login button:hover,
.agent-board__button:hover,
.blog-editor__button:hover,
.blog-review__button:hover {
	border-color: rgba(96, 165, 250, .62);
	transform: translateY(-1px);
	color: #fff;
}

.blog-button--ghost,
.agent-board__button--ghost,
.blog-editor__button--ghost,
.blog-review__button--ghost {
	color: var(--muted);
	border-color: rgba(148, 163, 184, .26);
	background: rgba(255, 255, 255, .045);
	box-shadow: none;
}

.blog-button--ghost:hover,
.agent-board__button--ghost:hover,
.blog-editor__button--ghost:hover,
.blog-review__button--ghost:hover {
	color: #fff;
	border-color: rgba(96, 165, 250, .38);
	background: rgba(96, 165, 250, .08);
}

.blog-actions,
.agent-board__actions,
.blog-editor__actions,
.blog-review__actions,
.blog-admin__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
}

.blog-editor__top {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 22px;
}

.blog-editor__lead {
	max-width: 760px;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.6;
}

.blog-article {
	border-color: rgba(96, 165, 250, .22);
}

.blog-article__content {
	max-width: 820px;
}

.blog-article__content h2,
.blog-article__content h3 {
	margin: 30px 0 10px;
	color: var(--text);
}

.blog-article__content p,
.blog-article__content li {
	color: rgba(226, 232, 240, .86);
	font-size: 16px;
	line-height: 1.75;
}

.blog-article__content code {
	padding: 2px 6px;
	border: 1px solid rgba(148, 163, 184, .20);
	border-radius: 8px;
	background: rgba(7, 11, 22, .58);
	color: rgba(191, 219, 254, .96);
}

.blog-article__content a {
	color: rgba(191, 219, 254, .98);
	font-weight: 850;
}

.blog-badge {
	display: inline-flex;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
	background: rgba(255, 255, 255, .06);
	color: var(--muted);
	border: 1px solid rgba(148, 163, 184, .18);
}

.blog-badge--review { background: rgba(245, 158, 11, .12); color: rgba(253, 230, 138, .95); border-color: rgba(245, 158, 11, .26); }
.blog-badge--revision { background: rgba(251, 113, 133, .12); color: rgba(254, 205, 211, .96); border-color: rgba(251, 113, 133, .28); }
.blog-badge--published { background: rgba(34, 197, 94, .12); color: rgba(187, 247, 208, .95); border-color: rgba(34, 197, 94, .26); }
.blog-badge--draft,
.blog-badge--scheduled { background: rgba(96, 165, 250, .12); color: rgba(191, 219, 254, .96); border-color: rgba(96, 165, 250, .26); }

.agent-login {
	width: min(100%, 620px);
	margin: 0 auto;
}

.agent-login label,
.blog-editor__field {
	display: grid;
	gap: 8px;
}

.agent-login label,
.blog-editor label {
	margin-top: 14px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.content.inner-content .agent-login input,
.content.inner-content .blog-editor .blog-editor__field input,
.content.inner-content .blog-editor .blog-editor__field select,
.content.inner-content .blog-editor .blog-editor__field textarea,
.content.inner-content .blog-review textarea {
	width: 100%;
	min-height: 40px;
	box-sizing: border-box;
	border: 1px solid rgba(148, 163, 184, .28);
	border-radius: 12px;
	padding: 9px 12px;
	background: rgba(7, 11, 22, .58);
	color: var(--text);
	font: inherit;
}

.content.inner-content .blog-editor textarea,
.content.inner-content .blog-review textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.45;
}

.content.inner-content .blog-editor textarea[name="article[markdown]"] {
	min-height: 460px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
}

.blog-editor__field--wide {
	grid-column: 1 / -1;
}

.blog-editor__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.blog-editor__check {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.content.inner-content .blog-editor__check input {
	width: auto;
	min-height: 0;
}

.blog-flash,
.agent-board__comment,
.blog-editor__note {
	margin: 12px 0;
	padding: 12px 14px;
	border: 1px solid rgba(245, 158, 11, .24);
	border-radius: 14px;
	background: rgba(245, 158, 11, .10);
	color: rgba(253, 230, 138, .95);
	font-weight: 800;
}

.blog-admin__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.blog-admin__stats span {
	display: inline-flex;
	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(148, 163, 184, .20);
	color: var(--muted);
	font-weight: 800;
}

.blog-admin__table-wrap {
	overflow-x: auto;
}

.blog-admin__table {
	width: 100%;
	min-width: 980px;
	border-collapse: collapse;
	color: var(--text);
}

.blog-admin__table th,
.blog-admin__table td {
	padding: 14px 12px;
	border-top: 1px solid rgba(148, 163, 184, .14);
	text-align: left;
	vertical-align: top;
}

.blog-admin__table th {
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 12px;
}

@media (max-width: 900px) {
	.blog-hero,
	.agent-board__hero,
	.blog-grid,
	.agent-board__grid,
	.blog-editor__grid,
	.blog-grid--cards {
		grid-template-columns: 1fr;
	}

	.blog-editor__top {
		display: block;
	}
}
