* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #f8fafc;
	color: #0f172a;
	-webkit-text-size-adjust: 100%;
	overscroll-behavior-y: none;
}
.container {
	max-width: 820px;
	margin: 0 auto;
	padding: 16px;
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.header {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 12px;
}
.header h1 { margin: 0 0 4px; font-size: 24px; }
.status { margin: 0; color: #475569; font-size: 13px; min-height: 18px; }

.tabs { display: flex; gap: 8px; margin: 14px 0; }
.tab-btn { flex: 1; border: 0; border-radius: 10px; background: #e2e8f0; color: #1e293b; padding: 10px; font-weight: 600; position: relative; }
.tab-btn.active { background: #1d4ed8; color: #fff; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.screen.hidden, .hidden { display: none !important; }

label { display: block; margin: 8px 0 4px; color: #334155; font-size: 13px; }
input, textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; font-size: 14px; background: #fff; }

.row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.row.space { justify-content: space-between; align-items: center; }

button, .button-like { border: 0; border-radius: 10px; padding: 10px 12px; background: #1d4ed8; color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
button.secondary { background: #475569; }
button.danger { background: #b91c1c; }
button:disabled { opacity: 0.6; cursor: default; }

.feed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.feed li { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 10px; padding: 10px; cursor: pointer; }
.feed li.unread { border-color: #60a5fa; background: #eff6ff; }
.item-new { font-size: 11px; font-weight: 700; color: #1d4ed8; margin-bottom: 4px; }
.title { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 4px; }
.meta { font-size: 12px; color: #64748b; }

.feed li.read { opacity: 0.95; }

.badge { min-width: 18px; height: 18px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.tab-badge { position: absolute; top: 4px; right: 8px; }
.muted { color: #64748b; font-size: 12px; }

.dialog { width: min(92vw, 760px); border: 0; border-radius: 12px; padding: 0; }
.dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.detail-content { white-space: pre-wrap; line-height: 1.5; max-height: 60vh; overflow: auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; }

@media (max-width: 640px) {
	.container { padding: 12px; }
	.header h1 { font-size: 22px; }
	.row { gap: 6px; }
	button, .button-like { width: 100%; }
}