:root {
	--bg: #071221;
	--panel: #0f2136;
	--panel-2: #142b45;
	--text: #eef6ff;
	--muted: #9fb4c8;
	--line: rgba(255,255,255,.12);
	--blue: #2f9bff;
	--cyan: #4de2c3;
	--yellow: #ffd45a;
	--red: #ff6464;
	--shadow: 0 18px 50px rgba(0,0,0,.28);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: radial-gradient(circle at top left, rgba(47,155,255,.18), transparent 34%), linear-gradient(180deg, #08182a 0%, #071221 55%, #06101b 100%);
	color: var(--text);
	min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 14px clamp(16px, 4vw, 56px);
	background: rgba(7,18,33,.9);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.brand img { width: 138px; max-height: 54px; object-fit: contain; }
.top-nav { display: flex; align-items: center; gap: 8px; }
.top-nav a {
	padding: 10px 13px;
	border-radius: 8px;
	color: #dbeeff;
	font-weight: 700;
	font-size: 14px;
}
.top-nav a:hover, .top-nav .nav-cta { background: var(--blue); color: #fff; }
.top-nav .staff-panel-link { background: var(--yellow); color: #302400; }
.nav-toggle { display: none; border: 0; border-radius: 8px; background: var(--panel-2); color: #fff; padding: 10px 12px; }

.news-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 56px; }
.hero-news {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 440px);
	gap: 24px;
	align-items: end;
	padding: clamp(24px, 5vw, 54px) 0 24px;
}
.eyebrow { color: var(--cyan); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: 13px; }
.hero-news h1, .article h1 { margin: 0; font-size: clamp(34px, 5vw, 62px); line-height: 1.02; }
.hero-news p { color: var(--muted); font-size: 18px; max-width: 640px; }
.search-box { display: flex; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid var(--line); padding: 8px; border-radius: 8px; }
.search-box input, .panel-form input, .panel-form select, .panel-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	background: rgba(255,255,255,.08);
	color: var(--text);
	border-radius: 8px;
	padding: 12px;
	font: inherit;
}
.search-box button, .panel-button, .panel-actions button, .actions-cell button, .login-box a {
	border: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--blue), #38c59c);
	color: white;
	font-weight: 900;
	padding: 12px 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ad-slot {
	min-height: 92px;
	border: 1px dashed rgba(255,255,255,.24);
	background: rgba(255,255,255,.055);
	border-radius: 8px;
	display: grid;
	place-items: center;
	color: rgba(255,255,255,.55);
	font-size: 13px;
	margin: 12px 0 22px;
}
.ad-side { min-height: 280px; }

.content-grid, .article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 28px;
	align-items: start;
}
.featured-grid, .news-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.featured-grid { margin-bottom: 34px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.section-title h2 { margin: 0; font-size: 24px; }
.section-title span { color: var(--muted); }

.news-card {
	overflow: hidden;
	background: rgba(15,33,54,.82);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
}
.card-image { position: relative; aspect-ratio: 16/9; background: #10243a; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.news-card:hover .card-image img { transform: scale(1.04); }
.card-image span, .category-pill {
	position: absolute;
	left: 12px;
	top: 12px;
	background: var(--yellow);
	color: #2c2200;
	font-weight: 900;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 12px;
}
.card-body { padding: 16px; }
.card-body time, .article-meta, .breadcrumbs, .card-meta { color: var(--muted); font-size: 13px; }
.card-body h2 { font-size: 20px; line-height: 1.18; margin: 8px 0; }
.card-body p { color: #c3d2e1; line-height: 1.55; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.read-more { color: var(--cyan); font-weight: 900; }

.news-sidebar { position: sticky; top: 90px; display: grid; gap: 18px; }
.news-sidebar section, .panel-card, .login-box {
	background: rgba(15,33,54,.82);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 18px;
	box-shadow: var(--shadow);
}
.news-sidebar h3 { margin: 0 0 12px; }
.side-link { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.side-link img { width: 72px; height: 52px; border-radius: 8px; object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .tag-row span { background: rgba(77,226,195,.14); color: #bffcef; padding: 8px 10px; border-radius: 8px; font-weight: 800; font-size: 13px; }

.breadcrumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 22px; }
.article { min-width: 0; }
.article-header { position: relative; padding-top: 42px; }
.article-header .category-pill { position: static; display: inline-flex; margin-bottom: 14px; }
.article-meta { display: flex; gap: 14px; margin: 16px 0 22px; flex-wrap: wrap; }
.article-image { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.share-row, .tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.share-row a { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: rgba(255,255,255,.08); font-weight: 800; }
.news-like {
	border: 1px solid rgba(77,226,195,.35);
	border-radius: 8px;
	padding: 9px 12px;
	background: rgba(77,226,195,.12);
	color: #dffef7;
	font-weight: 900;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	cursor: pointer;
}
.news-like.active {
	background: var(--yellow);
	color: #302400;
	border-color: var(--yellow);
}
.article-content { color: #e7f0fa; font-size: 18px; line-height: 1.76; }
.article-content h2, .article-content h3 { line-height: 1.2; margin-top: 32px; }
.article-content a { color: var(--cyan); font-weight: 800; }
.related { margin-top: 34px; }
.comments-section {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}
.comment-form {
	display: grid;
	gap: 10px;
	background: rgba(255,255,255,.055);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 18px;
}
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	background: rgba(255,255,255,.08);
	color: var(--text);
	border-radius: 8px;
	padding: 12px;
	font: inherit;
	resize: vertical;
}
.comment-form > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	color: var(--muted);
}
.comment-form button {
	border: 0;
	border-radius: 8px;
	background: var(--blue);
	color: #fff;
	font-weight: 900;
	padding: 10px 14px;
	cursor: pointer;
}
.comment-message { margin: 0; color: var(--cyan); }
.comments-list { display: grid; gap: 12px; }
.news-comment {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: rgba(15,33,54,.7);
}
.comment-avatar {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	display: grid;
	place-items: center;
	font-weight: 950;
}
.comment-body header {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
	color: var(--muted);
}
.comment-body strong { color: var(--text); }
.comment-body p { margin: 8px 0; color: #d7e6f4; line-height: 1.5; }
.comment-delete {
	border: 0;
	background: transparent;
	color: var(--red);
	font-weight: 800;
	padding: 0;
	cursor: pointer;
}
.comments-empty, .login-callout {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--muted);
	background: rgba(255,255,255,.055);
}
.pagination { display: flex; justify-content: center; gap: 8px; margin: 28px 0; }
.pagination a { padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; }
.pagination .active { background: var(--blue); border-color: var(--blue); }
.empty-state { padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.site-footer { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 28px; color: var(--muted); border-top: 1px solid var(--line); background: #06101b; }

.panel-body { display: grid; grid-template-columns: 250px 1fr; }
.panel-sidebar { min-height: 100vh; background: #08111f; border-right: 1px solid var(--line); padding: 22px; position: sticky; top: 0; }
.panel-brand { display: block; font-size: 22px; font-weight: 950; margin-bottom: 24px; }
.panel-sidebar nav { display: grid; gap: 8px; }
.panel-sidebar a { padding: 11px 12px; border-radius: 8px; color: #d8e8f7; font-weight: 800; }
.panel-sidebar nav a:hover { background: var(--panel-2); }
.panel-main { padding: 28px; min-width: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.panel-header p { margin: 0; color: var(--cyan); font-weight: 900; text-transform: uppercase; font-size: 12px; }
.panel-header h1 { margin: 3px 0 0; font-size: 34px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.stats-grid div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.stats-grid span { font-size: 34px; font-weight: 950; color: var(--yellow); }
.stats-grid p { margin: 6px 0 0; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--cyan); font-size: 13px; text-transform: uppercase; }
.panel-form { display: grid; gap: 16px; }
.panel-form label { display: grid; gap: 7px; color: #d9ebfb; font-weight: 800; }
.form-row { display: grid; gap: 16px; }
.form-row.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.check-line { align-content: end; grid-template-columns: auto 1fr; display: flex !important; align-items: center; }
.check-line input { width: auto; }
.schedule-box {
	display: flex !important;
	grid-template-columns: auto 1fr;
	align-items: flex-start;
	gap: 12px !important;
	background: rgba(255,212,90,.1);
	border: 1px solid rgba(255,212,90,.35);
	border-radius: 8px;
	padding: 14px;
}
.schedule-box input { width: auto; margin-top: 4px; }
.schedule-box strong { display: block; color: var(--yellow); }
.schedule-box small { display: block; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.panel-preview { width: 260px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; }
.panel-actions { display: flex; gap: 10px; align-items: center; }
.panel-actions a { color: var(--muted); }
.panel-notice { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; background: rgba(77,226,195,.13); border: 1px solid rgba(77,226,195,.35); }
.panel-notice.error { background: rgba(255,100,100,.13); border-color: rgba(255,100,100,.35); }
.actions-cell { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions-cell form { display: flex; gap: 8px; flex-wrap: wrap; }
.actions-cell .danger { background: var(--red); }
.panel-login { display: grid; place-items: center; padding: 24px; }
.login-box { width: min(440px, 100%); text-align: center; }
.login-box p { color: var(--muted); line-height: 1.55; }

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.top-nav { display: none; position: absolute; left: 14px; right: 14px; top: 74px; background: #08182a; border: 1px solid var(--line); border-radius: 8px; padding: 10px; flex-direction: column; align-items: stretch; }
	.top-nav.open { display: flex; }
	.hero-news, .content-grid, .article-grid, .panel-body { grid-template-columns: 1fr; }
	.featured-grid, .news-grid, .stats-grid, .form-row.two, .form-row.three { grid-template-columns: 1fr; }
	.news-sidebar { position: static; }
	.panel-sidebar { min-height: auto; position: static; }
	.article-image { aspect-ratio: 16/10; }
}