:root {
	--bg: #f6f8fc;
	--surface: #ffffff;
	--surface-soft: #f9fbff;
	--ink: #101828;
	--muted: #667085;
	--faint: #98a2b3;
	--line: #e6eaf2;
	--primary: #4f46e5;
	--primary-dark: #3730a3;
	--primary-soft: #eef2ff;
	--success: #12b76a;
	--shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
	--shadow-soft: 0 10px 25px rgba(16, 24, 40, 0.06);
	--radius: 18px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--ink);
	font:
		16px/1.65 Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.09), transparent 32rem), linear-gradient(180deg, #fbfcff 0, #f6f8fc 34rem);
}

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

.wrap {
	max-width: 1120px;
	margin: auto;
	padding: 0 24px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.86);
	border-bottom: 1px solid rgba(230, 234, 242, 0.9);
	backdrop-filter: blur(18px);
}

.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 72px;
	gap: 20px;
}

.brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.brand-logo {
	display: block;
	width: 240px;
	height: auto;
	max-height: 60px;
}

.brand-subtitle {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1;
	padding-bottom: 8px;
	text-transform: uppercase;
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	color: #fff;
	background: linear-gradient(135deg, #635bff, #22c55e);
	box-shadow: 0 12px 25px rgba(79, 70, 229, 0.22);
}

.langs {
	display: flex;
	gap: 8px;
	padding: 5px;
	background: #f2f4f7;
	border: 1px solid #eaecf0;
	border-radius: 999px;
}

.langs a {
	padding: 7px 11px;
	border-radius: 999px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 750;
}

.langs .active {
	color: var(--ink);
	background: #fff;
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}

.page {
	padding-top: 44px;
	padding-bottom: 72px;
}

.home-hero {
	padding: 76px 0 62px;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.94), rgba(27, 117, 208, 0.9)), radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 20rem);
	color: #fff;
}

.hero-inner {
	max-width: 860px;
	text-align: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	color: var(--primary-dark);
	background: var(--primary-soft);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.home-hero .eyebrow {
	color: #fff;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.home-hero h1,
.category-hero h1,
.article h1 {
	margin: 16px 0 12px;
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.home-hero h1 {
	font-size: clamp(42px, 7vw, 72px);
}
.category-hero h1 {
	font-size: clamp(36px, 5vw, 56px);
}
.article h1 {
	font-size: clamp(34px, 5vw, 54px);
}

.home-hero p {
	max-width: 660px;
	margin: 0 auto 30px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 19px;
}

.search-box {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	max-width: 720px;
	margin: 0 auto;
	padding: 10px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
}

.search-box span {
	padding-left: 12px;
	color: var(--faint);
	font-size: 24px;
}

.search-box input {
	width: 100%;
	border: 0;
	outline: 0;
	color: var(--ink);
	font: inherit;
	font-size: 17px;
}

.search-box button,
button,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 13px;
	background: var(--primary);
	color: #fff;
	padding: 12px 18px;
	font: inherit;
	font-weight: 750;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}

.search-box button:hover,
button:hover,
.button:hover {
	background: var(--primary-dark);
	color: #fff;
}
.button.secondary {
	background: #667085;
	box-shadow: none;
}
.button.danger,
button.danger {
	background: #b42318;
	box-shadow: 0 10px 20px rgba(180, 35, 24, 0.18);
}
.button.danger:hover,
button.danger:hover {
	background: #912018;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 18px;
	margin: 0 0 18px;
}

.section-title h2 {
	margin: 0;
	font-size: 26px;
	letter-spacing: -0.025em;
}
.section-title p {
	margin: 0;
	color: var(--muted);
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
	gap: 18px;
}

.card,
.article,
.panel,
.empty-state,
.article-row {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	color: var(--ink);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.card:hover,
.article-row:hover {
	transform: translateY(-3px);
	border-color: #c7d2fe;
	box-shadow: var(--shadow);
	color: var(--ink);
}

.card-icon,
.category-icon,
.doc-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: var(--primary-soft);
	font-size: 23px;
}

.category-icon {
	width: 58px;
	height: 58px;
	margin-bottom: 18px;
	font-size: 28px;
}

.card h2,
.article-row h2 {
	margin: 0 0 5px;
	color: var(--ink);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.card p,
.article-row p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.card-arrow {
	color: var(--faint);
	font-size: 22px;
	line-height: 1;
}

.category-hero {
	max-width: 820px;
	margin: 0 0 30px;
}

.lead {
	color: var(--muted);
	font-size: 19px;
	margin: 0;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 650;
}

.breadcrumb a {
	color: var(--muted);
}
.breadcrumb a:hover {
	color: var(--primary);
}

.content-list {
	display: grid;
	gap: 12px;
	max-width: 900px;
}

.article-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: flex-start;
	padding: 18px;
	color: var(--ink);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.article-row small {
	display: block;
	color: var(--faint);
	font-weight: 750;
	margin-bottom: 3px;
}

.search-results {
	margin-bottom: 44px;
}

.empty-state {
	padding: 34px;
	color: var(--muted);
}

.empty-state h1,
.empty-state h2 {
	margin: 0 0 8px;
	color: var(--ink);
}
.empty-state p {
	margin: 0;
}

.article-page {
	display: flex;
	justify-content: center;
}

.article {
	width: min(100%, 860px);
	padding: 34px clamp(22px, 5vw, 58px);
}

.admin-edit-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 22px;
	padding: 12px 14px;
	border: 1px solid #c7d2fe;
	border-radius: 16px;
	background: #eef2ff;
}

.admin-edit-bar span {
	color: var(--primary-dark);
	font-size: 13px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.admin-edit-bar .button {
	padding: 9px 13px;
	border-radius: 11px;
	box-shadow: none;
}

.article-head {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 30px;
}

.updated {
	color: var(--faint);
	margin: 16px 0 0;
	font-size: 14px;
}

.article-content {
	color: #263041;
	font-size: 17px;
}

.article-content h2,
.article-content h3 {
	color: var(--ink);
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin-top: 34px;
}

.article-content p {
	margin: 0 0 18px;
}
.article-content ul,
.article-content ol {
	padding-left: 24px;
	margin: 0 0 20px;
}
.article-content li {
	margin: 6px 0;
}
.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--line);
	cursor: zoom-in;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}
.article-content img:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}
.article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	background: #fff;
}
.article-content th,
.article-content td {
	padding: 12px;
	border: 1px solid var(--line);
	text-align: left;
}
.article-content code {
	padding: 2px 6px;
	border-radius: 7px;
	background: #eef2ff;
	color: #3730a3;
}
.article-content pre {
	overflow: auto;
	padding: 18px;
	border-radius: 14px;
	background: #101828;
	color: #f9fafb;
}

.article-back {
	margin: 34px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-weight: 750;
}

.image-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 34px;
	background: rgba(15, 23, 42, 0.84);
	backdrop-filter: blur(8px);
	cursor: zoom-out;
}

.image-lightbox img {
	max-width: min(1180px, 96vw);
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}

.image-lightbox-close {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	box-shadow: none;
	font-size: 28px;
	line-height: 1;
}

.image-lightbox-close:hover {
	background: #f2f4f7;
	color: var(--ink);
}

.site-footer {
	border-top: 1px solid var(--line);
	color: var(--muted);
	padding: 26px 0;
	font-size: 14px;
}

.muted {
	color: var(--muted);
}

.admin-body,
.admin-login-body {
	min-height: 100vh;
	background: radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 30rem), linear-gradient(135deg, #f8faff, #eef2ff);
}

.admin-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 22px;
	min-height: 72px;
	padding: 14px clamp(22px, 4vw, 46px);
	background: rgba(255, 255, 255, 0.88);
	border-bottom: 1px solid rgba(230, 234, 242, 0.9);
	backdrop-filter: blur(18px);
}

.admin-shell {
	min-height: calc(100vh - 72px);
}

.admin-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--ink);
	font-weight: 850;
	letter-spacing: -0.025em;
}

.admin-logo-image {
	display: block;
	width: 170px;
	height: auto;
	max-height: 50px;
}

.admin-logo-subtitle {
	color: var(--muted);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.16em;
	line-height: 1;
	padding-bottom: 3px;
	text-transform: uppercase;
}

.admin-logo-subtitle em {
	color: var(--primary);
	font-style: normal;
	letter-spacing: 0.08em;
}

.admin-main {
	min-width: 0;
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px clamp(22px, 4vw, 46px) 56px;
}

.admin-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 24px;
}

.admin-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.admin-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 750;
}

.admin-breadcrumbs a {
	color: var(--muted);
}
.admin-breadcrumbs a:hover {
	color: var(--primary);
}
.admin-breadcrumbs .translation-label span:last-child {
	color: var(--ink);
}
.admin-breadcrumbs a:hover .translation-label span:last-child {
	color: var(--primary);
}
.admin-breadcrumbs strong {
	color: var(--ink);
}
.admin-breadcrumbs > span {
	color: var(--faint);
}

.admin-logout {
	white-space: nowrap;
	box-shadow: none;
}

.admin-page-head h1 {
	margin: 12px 0 0;
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1;
	letter-spacing: -0.045em;
}

.admin-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 28px;
	border-radius: 24px;
	color: #fff;
	background: linear-gradient(135deg, rgba(79, 70, 229, 0.96), rgba(27, 117, 208, 0.9)), radial-gradient(circle at top left, rgba(255, 255, 255, 0.25), transparent 18rem);
	box-shadow: var(--shadow);
}

.admin-hero h2 {
	margin: 0 0 7px;
	font-size: 30px;
	letter-spacing: -0.035em;
}
.admin-hero p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}
.admin-hero .button {
	background: #fff;
	color: var(--primary-dark);
	box-shadow: none;
	white-space: nowrap;
}

.admin-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 22px 0;
}

.stat-card,
.admin-action-card,
.admin-list-card {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
	border-radius: 22px;
	box-shadow: var(--shadow-soft);
}

.stat-card {
	padding: 22px;
}
.stat-card span,
.stat-card small {
	display: block;
	color: var(--muted);
}
.stat-card strong {
	display: block;
	margin: 4px 0;
	font-size: 38px;
	line-height: 1;
	letter-spacing: -0.04em;
}

.admin-grid-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.admin-action-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 22px;
	color: var(--ink);
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

.admin-action-card:hover {
	transform: translateY(-3px);
	border-color: #c7d2fe;
	box-shadow: var(--shadow);
	color: var(--ink);
}

.admin-action-card h3 {
	margin: 0 0 4px;
	font-size: 19px;
}
.admin-action-card p {
	margin: 0;
	color: var(--muted);
}

.admin-content-layout {
	display: grid;
	gap: 24px;
}

.admin-list-card {
	overflow: hidden;
}

.admin-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 22px;
	border-bottom: 1px solid var(--line);
}

.admin-card-head.compact {
	padding: 0 0 18px;
	border-bottom: 0;
}

.admin-card-head h2 {
	margin: 0;
	font-size: 22px;
	letter-spacing: -0.025em;
}
.admin-card-head p {
	margin: 4px 0 0;
	color: var(--muted);
}

.table-wrap {
	overflow: auto;
}

.admin-form-panel {
	padding: 24px;
	margin: 0;
}

.form-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: end;
}

.form-row.two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.switch-field,
.checkbox-control {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 48px;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
}

.switch-field label,
.checkbox-control {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	margin-bottom: 0 !important;
	font-weight: 750;
}

.switch-field input,
.checkbox-control input,
.checkbox-input {
	width: 18px !important;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
}

.status-badge.success {
	color: #067647;
	background: #ecfdf3;
	border: 1px solid #abefc6;
}
.status-badge.muted {
	color: #344054;
	background: #f2f4f7;
	border: 1px solid #eaecf0;
}

.table-action {
	display: inline-flex;
	padding: 7px 10px;
	border-radius: 999px;
	background: var(--primary-soft);
	color: var(--primary-dark);
	font-weight: 800;
	font-size: 13px;
}

.table-actions,
.admin-inline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.article-delete-form,
.category-delete-form {
	margin: 0;
}

.table-actions {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.table-action {
	white-space: nowrap;
}

.table-action.secondary {
	background: #f2f4f7;
	color: #344054;
}

.table-main-link {
	color: var(--ink);
	font-weight: 750;
}

.table-main-link:hover {
	color: var(--primary);
}

.translation-label {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	margin-right: 12px;
}

.translation-locale {
	color: #98a2b3;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.06em;
}

.code-textarea {
	min-height: 340px;
	font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: 1.55;
}

.language-tabs {
	margin: 24px 0;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}

.language-tab-list {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--line);
	background: #f8faff;
}

.language-tab {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 9px 13px;
	background: transparent;
	color: var(--muted);
	box-shadow: none;
	font-weight: 850;
}

.language-tab span {
	font-size: 12px;
	font-weight: 750;
	color: inherit;
}

.language-tab.active {
	border-color: #c7d2fe;
	background: #fff;
	color: var(--primary-dark);
	box-shadow: 0 8px 18px rgba(16, 24, 40, 0.07);
}

.language-tab:hover {
	background: #fff;
	color: var(--primary-dark);
}

.language-panel {
	padding: 22px;
}

.language-panel[hidden] {
	display: none;
}

.language-panel-head {
	margin: 0 0 16px;
}

.language-panel-head h3 {
	margin: 0;
	font-size: 22px;
	letter-spacing: -0.025em;
}

.language-panel-head p {
	margin: 4px 0 0;
	color: var(--muted);
}

.tox-tinymce {
	border: 1px solid var(--line) !important;
	border-radius: 16px !important;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
	background: #fff !important;
}

.media-library-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.media-library-modal.active {
	display: flex;
}

.media-library-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.48);
	backdrop-filter: blur(5px);
}

.media-library-dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	width: min(100%, 980px);
	max-height: min(760px, calc(100vh - 48px));
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}

.media-library-head,
.media-library-tools {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
}

.media-library-head {
	justify-content: space-between;
}

.media-library-head h2 {
	margin: 0;
	font-size: 24px;
	letter-spacing: -0.035em;
}

.media-library-head p {
	margin: 4px 0 0;
	color: var(--muted);
}

.media-library-close {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 999px;
	font-size: 28px;
	line-height: 1;
}

.media-library-tools input {
	width: 100%;
}

.media-library-status {
	padding: 18px 20px;
	color: var(--muted);
}

.media-library-status[hidden] {
	display: none;
}

.media-library-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	overflow: auto;
	padding: 20px;
}

.media-library-item {
	display: grid;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 18px;
	color: var(--ink);
	text-align: left;
	background: #fff;
	box-shadow: none;
}

.media-library-item:hover {
	transform: translateY(-2px);
	border-color: rgba(27, 117, 208, 0.28);
	box-shadow: var(--shadow-soft);
}

.media-library-thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	background: #f3f6fb;
}

.media-library-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-library-name {
	overflow: hidden;
	font-size: 13px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.media-library-meta {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.admin-login-body {
	display: grid;
	place-items: center;
	padding: 24px;
}

.login-card {
	width: min(100%, 440px);
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--shadow);
}

.login-head {
	margin: 28px 0 20px;
}
.login-head h1 {
	margin: 12px 0 6px;
	font-size: 38px;
	letter-spacing: -0.045em;
	line-height: 1;
}
.login-head p {
	margin: 0;
	color: var(--muted);
}

.form-error {
	padding: 12px 14px;
	border: 1px solid #fecdca;
	border-radius: 13px;
	color: #b42318;
	background: #fffbfa;
}

.full-button {
	width: 100%;
	margin-top: 6px;
}

.admin {
	max-width: 1120px;
	margin: 32px auto;
	padding: 0 20px;
}
.admin form {
	max-width: 860px;
}
.panel {
	padding: 24px;
	margin-top: 24px;
}
.admin-form-panel {
	margin: 0;
}

.field {
	margin: 14px 0;
}
.field label {
	display: block;
	font-weight: 750;
	margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	font: inherit;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 3px solid rgba(79, 70, 229, 0.15);
	border-color: #818cf8;
}

.field textarea {
	min-height: 180px;
}

fieldset {
	margin: 22px 0;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px;
	background: #fff;
}

legend {
	padding: 0 8px;
	font-weight: 800;
}

table {
	background: #fff;
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

th,
td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

th {
	color: var(--muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
tr:last-child td {
	border-bottom: 0;
}

.notice {
	padding: 14px 16px;
	background: #ecfdf3;
	color: #067647;
	border: 1px solid #abefc6;
	border-radius: 12px;
}

@media (max-width: 700px) {
	.wrap {
		padding: 0 18px;
	}
	.top {
		min-height: auto;
		padding: 14px 0;
		align-items: flex-start;
		flex-direction: column;
	}
	.home-hero {
		padding: 52px 0 44px;
	}
	.search-box {
		grid-template-columns: auto 1fr;
		padding: 9px;
	}
	.search-box button {
		grid-column: 1 / -1;
		width: 100%;
	}
	.section-title {
		display: block;
	}
	.grid {
		grid-template-columns: 1fr;
	}
	.card,
	.article-row {
		grid-template-columns: auto 1fr;
	}
	.card-arrow {
		display: none;
	}
	.article {
		padding: 26px 20px;
	}
}

@media (max-width: 980px) {
	.admin-topbar {
		grid-template-columns: 1fr auto;
		gap: 12px;
	}
	.admin-topbar .admin-breadcrumbs {
		grid-column: 1 / -1;
		order: 3;
	}
	.admin-stats,
	.admin-grid-two {
		grid-template-columns: 1fr;
	}
	.admin-page-head,
	.admin-hero,
	.admin-card-head {
		align-items: flex-start;
		flex-direction: column;
	}
	.form-row {
		grid-template-columns: 1fr;
	}
}