:root {
	color-scheme: light dark;
	--bg: #f5f1ea;
	--bg-2: #fff1de;
	--bg-3: #dcead9;
	--ink: #1f1f1f;
	--muted: #6a5f54;
	--card: #fff7ee;
	--card-2: #f6eadc;
	--item-bg: #fffdf7;
	--accent: #b3512f;
	--accent-2: #2f6f68;
	--shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
	--border: 1px solid rgba(0, 0, 0, 0.1);
	--radius-lg: 14px;
	--radius-md: 10px;
	--radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #151414;
		--bg-2: #2a2020;
		--bg-3: #1d2b2a;
		--ink: #f0e6db;
		--muted: #b7a99a;
		--card: #1e1b1b;
		--card-2: #2a2422;
		--item-bg: #261f1d;
		--accent: #d36b41;
		--accent-2: #66b3a4;
		--shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
		--border: 1px solid rgba(240, 230, 219, 0.12);
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "IBM Plex Serif", "Georgia", serif;
	color: var(--ink);
	background: radial-gradient(1400px 800px at 10% -10%, var(--bg-2), transparent),
		radial-gradient(1200px 600px at 90% 0%, var(--bg-3), transparent),
		var(--bg);
}

.hidden {
	display: none !important;
}

.auth-gate {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}

.auth-card {
	width: min(420px, 100%);
	background: var(--card);
	border: var(--border);
	box-shadow: var(--shadow);
	border-radius: var(--radius-lg);
	padding: 16px;
	display: grid;
	gap: 12px;
}

.auth-card h2 {
	margin: 0;
	font-size: 20px;
}

.auth-hint {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}

.auth-card form {
	display: grid;
	gap: 10px;
}

.auth-card label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
}

.auth-card input {
	border-radius: var(--radius-md);
	border: var(--border);
	padding: 8px 10px;
	background: var(--item-bg);
	color: var(--ink);
}

.app-shell {
	min-height: 100vh;
}

header {
	padding: 24px clamp(16px, 4vw, 40px);
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.title {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

h1 {
	margin: 0;
	font-size: clamp(24px, 3vw, 36px);
	letter-spacing: 0.5px;
}

.subtitle {
	color: var(--muted);
	font-size: 14px;
}

.actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.user-pill {
	font-size: 12px;
	background: color-mix(in srgb, var(--card-2) 70%, transparent);
	border: var(--border);
	border-radius: var(--radius-md);
	padding: 4px 8px;
}

button {
	border: none;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background: var(--accent);
	color: #fffaf4;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 10px 20px rgba(179, 81, 47, 0.3);
}

button.secondary {
	background: color-mix(in srgb, var(--card-2) 70%, transparent);
	color: var(--ink);
	box-shadow: none;
	border: var(--border);
}

button:hover {
	transform: translateY(-2px);
}

.status {
	margin: 0 clamp(16px, 4vw, 40px) 10px;
	font-size: 13px;
	color: var(--muted);
}

.control-panel {
	margin: 0 clamp(16px, 4vw, 40px) 16px;
	display: grid;
	gap: 14px;
}

.main-page {
	padding: 0 clamp(16px, 4vw, 40px) 40px;
}

.layout {
	display: grid;
	grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.sidebar {
	background: var(--card);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: 12px;
	box-shadow: var(--shadow);
	display: grid;
	gap: 12px;
	position: sticky;
	top: 16px;
}

.sidebar-header {
	display: grid;
	gap: 10px;
}

.sidebar-header h3 {
	margin: 0;
	font-size: 15px;
}

.feed-select {
	display: none;
	width: 100%;
	border-radius: var(--radius-md);
	border: var(--border);
	padding: 8px 10px;
	background: var(--item-bg);
	color: var(--ink);
}

.category-filter {
	display: block;
}

.feed-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.feed-group {
	font-size: 11px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 12px;
}

.feed-link {
	background: color-mix(in srgb, var(--card-2) 65%, transparent);
	border: var(--border);
	border-radius: var(--radius-md);
	padding: 6px 8px;
	text-align: left;
	font-size: 13px;
	color: var(--ink);
	cursor: pointer;
	box-shadow: none;
	font-weight: 500;
}

.feed-link.active {
	background: var(--accent-2);
	color: #f7f1e7;
}

.content {
	display: grid;
	gap: 14px;
}

.content.single-feed .grid {
	grid-template-columns: minmax(0, 1fr);
}

.view-controls {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.view-controls .secondary.active {
	background: var(--accent-2);
	color: #f7f1e7;
	border-color: transparent;
}

.mixed {
	display: grid;
	gap: 14px;
}

.mixed-header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.mixed-lists {
	display: grid;
	gap: 12px;
}

.mixed .item {
	grid-template-columns: 64px 1fr;
}

.item-source {
	font-size: 12px;
	color: var(--muted);
}

.admin-page {
	margin: 0 clamp(16px, 4vw, 40px) 40px;
	display: grid;
	gap: 16px;
}

.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.admin-feed-list {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	align-items: start;
}

.admin-feed-row {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
	padding: 10px;
	border-radius: var(--radius-md);
	border: var(--border);
	background: var(--item-bg);
	align-items: start;
}

.admin-feed-row input {
	border-radius: var(--radius-sm);
	border: var(--border);
	padding: 6px 8px;
	background: var(--card);
	color: var(--ink);
	width: 100%;
	min-width: 0;
}

.admin-feed-row .status {
	margin: 0;
	font-size: 12px;
}

.admin-feed-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

@media (min-width: 900px) {
	.admin-feed-actions {
		flex-wrap: nowrap;
	}
}

@media (max-width: 1100px) {
	.admin-feed-row {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	.admin-feed-actions {
		flex-wrap: wrap;
	}
}

	.main-page,
	.admin-page,
	main {
		padding-left: 0;
		padding-right: 0;
	}

	.control-panel {
		margin-left: 0;
		margin-right: 0;
	}

	.sidebar,
	.feed-card,
	.panel-block,
	.admin-feed-row {
		border-radius: 0;
	}

.panel-block {
	background: var(--card);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: 12px;
	display: grid;
	gap: 10px;
}

.panel-block h3 {
	margin: 0;
	font-size: 16px;
	color: var(--ink);
}

.form-row {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.form-row input {
	border-radius: var(--radius-md);
	border: var(--border);
	padding: 8px 10px;
	background: var(--item-bg);
	color: var(--ink);
}

main {
	padding: 0 clamp(16px, 4vw, 40px) 40px;
}

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

.feed-card {
	background: var(--card);
	border-radius: var(--radius-lg);
	padding: 12px;
	border: var(--border);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	min-height: 240px;
}

.feed-card.dragging {
	opacity: 0.6;
	transform: scale(0.98);
}

.feed-header {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

.feed-title {
	margin: 0;
	font-size: 18px;
	color: var(--ink);
}

.feed-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--muted);
}

.feed-tabs {
	display: flex;
	gap: 8px;
}

.tab-button {
	border: var(--border);
	background: color-mix(in srgb, var(--card-2) 70%, transparent);
	color: var(--ink);
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	font-size: 12px;
	box-shadow: none;
}

.tab-button.active {
	background: var(--accent-2);
	color: #f7f1e7;
}

.drag-handle {
	cursor: grab;
	padding: 3px 6px;
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--card) 70%, transparent);
	border: var(--border);
}

.items-wrap {
	display: grid;
	gap: 12px;
}

.items {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}

.tab-panel {
	display: none;
}

.tab-panel.active {
	display: grid;
}

.item {
	padding: 8px 10px;
	border-radius: var(--radius-md);
	background: var(--item-bg);
	border: var(--border);
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	align-items: start;
}

.item.no-image {
	grid-template-columns: 1fr;
}

.item-media {
	width: 72px;
	height: 72px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: color-mix(in srgb, var(--card-2) 55%, transparent);
	border: var(--border);
}

.item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.item-content {
	display: grid;
	gap: 6px;
}

.item.read {
	opacity: 0.55;
}

.item-title {
	font-weight: 600;
	text-decoration: none;
	color: var(--ink);
}

.item-desc {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.item.expanded .item-desc {
	display: block;
	-webkit-line-clamp: unset;
	max-height: none;
	white-space: normal;
}

.item-meta {
	font-size: 12px;
	color: var(--muted);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
}

.item-actions button {
	padding: 6px 10px;
	font-size: 12px;
	box-shadow: none;
}

.load-more {
	align-self: flex-start;
}

.empty {
	color: var(--muted);
	font-size: 14px;
}

.error {
	color: #c2553e;
	font-size: 13px;
}

@media (prefers-color-scheme: dark) {
	button {
		color: #1c1412;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	}

	.feed-title,
	.feed-card .feed-title {
		color: #ffffff;
	}
}

@media (max-width: 720px) {
	header {
		flex-direction: column;
		align-items: flex-start;
	}

	.actions {
		width: 100%;
	}

	.grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.layout {
		grid-template-columns: 1fr;
	}

	.sidebar {
		position: static;
	}

	.feed-select {
		display: block;

	.grid {
		gap: 0;
	}

	.feed-card {
		box-shadow: none;
		border: none;
		border-bottom: var(--border);
		padding-left: 0;
		padding-right: 0;
	}

	.mixed,
	.mixed-lists {
		padding-left: 0;
		padding-right: 0;
	}

	.mixed .items {
		gap: 0;
	}

	.mixed .item {
		border-radius: 0;
		border: none;
		border-bottom: var(--border);
		padding-left: 0;
		padding-right: 0;
	}

	.item {
		border-radius: 0;
		border: none;
		border-bottom: var(--border);
		padding-left: 0;
		padding-right: 0;
	}
	}

	.feed-list {
		display: none;
	}
}