@layer app {
	/* Shell: sidebar + main -------------------------------------------------------- */
	.shell {
		display: grid;
		min-height: 100vh;
	}

	@media (min-width: 64em) {
		.shell {
			grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
		}
	}

	.sidebar {
		background: var(--side-bg);
		color: var(--side-ink);
		display: flex;
		flex-direction: column;
		gap: var(--s-5);
		padding: var(--s-4);
		position: fixed;
		inset: 0 auto 0 0;
		width: min(var(--sidebar-w), 84vw);
		z-index: 60;
		transform: translateX(-102%);
		transition: transform 0.18s ease-out;
		overflow-y: auto;
	}

	.nav-open .sidebar {
		transform: none;
		box-shadow: var(--shadow-float);
	}

	.no-js .sidebar {
		position: static;
		transform: none;
		width: auto;
	}

	@media (min-width: 64em) {
		.sidebar {
			position: sticky;
			top: 0;
			height: 100vh;
			width: auto;
			transform: none;
			box-shadow: none;
		}
	}

	.sidebar .brand {
		color: #fff;
		font-size: var(--fs-base);
		padding: var(--s-2);
	}

	.sidebar nav {
		display: grid;
		gap: var(--s-5);
	}

	.nav-group h2 {
		font-size: var(--fs-xs);
		font-weight: 650;
		color: var(--side-ink-muted);
		padding: 0 var(--s-3);
		margin-bottom: var(--s-1);
		letter-spacing: 0.01em;
	}

	.nav-group ul {
		list-style: none;
		display: grid;
		gap: 2px;
	}

	.nav-link {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		min-height: 2.75rem;
		padding: 0 var(--s-3);
		border-radius: var(--r-control);
		color: var(--side-ink);
		text-decoration: none;
		font-size: var(--fs-sm);
		font-weight: 600;
		border-left: 3px solid transparent;
	}

	.nav-link:hover {
		background: rgb(255 255 255 / 0.07);
	}

	.nav-link[aria-current="page"] {
		background: var(--side-active);
		border-left-color: var(--accent);
		color: #fff;
	}

	.sidebar :focus-visible {
		box-shadow: 0 0 0 2px var(--side-bg), 0 0 0 4px #fff;
	}

	.scrim {
		position: fixed;
		inset: 0;
		background: rgb(10 20 26 / 0.5);
		z-index: 55;
		display: none;
	}

	.nav-open .scrim {
		display: block;
	}

	@media (min-width: 64em) {
		.scrim {
			display: none !important;
		}
	}

	.main-col {
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.topbar {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		min-height: 4rem;
		padding-inline: var(--s-4);
		background: var(--surface);
		border-bottom: 1px solid var(--rule);
		position: sticky;
		top: 0;
		z-index: 30;
	}

	.topbar .spacer {
		flex: 1;
	}

	.topbar .crumb {
		font-weight: 650;
		font-size: var(--fs-sm);
		color: var(--ink-muted);
	}

	@media (min-width: 64em) {
		.menu-toggle {
			display: none;
		}
	}

	.badge-count {
		position: absolute;
		top: 0.2rem;
		right: 0.1rem;
		min-width: 1.15rem;
		height: 1.15rem;
		padding: 0 0.3rem;
		border-radius: var(--r-pill);
		background: var(--danger);
		color: #fff;
		font-size: 0.7rem;
		font-weight: 750;
		line-height: 1.15rem;
		text-align: center;
	}

	.avatar {
		display: grid;
		place-items: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
		background: var(--primary-soft);
		color: var(--link);
		font-weight: 750;
		font-size: var(--fs-sm);
		border: 1px solid var(--rule);
	}

	.profile-trigger {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		min-height: 2.75rem;
		padding: 0 var(--s-2);
		border-radius: var(--r-control);
		font-size: var(--fs-sm);
		font-weight: 600;
	}

	.profile-trigger:hover {
		background: var(--surface-sunken);
	}

	.profile-trigger .name {
		display: none;
	}

	@media (min-width: 40em) {
		.profile-trigger .name {
			display: inline;
		}
	}

	.notice {
		display: grid;
		gap: 2px;
		padding: var(--s-2) var(--s-3);
		border-radius: var(--r-control);
		color: inherit;
		text-decoration: none;
		font-size: var(--fs-sm);
	}

	.notice:hover {
		background: var(--surface-sunken);
	}

	.notice.unread strong::before {
		content: "";
		display: inline-block;
		width: 0.5rem;
		height: 0.5rem;
		margin-right: var(--s-2);
		border-radius: 50%;
		background: var(--primary);
	}

	.notice small {
		color: var(--ink-muted);
	}

	.content {
		padding: var(--s-5) var(--s-4) var(--s-8);
		width: min(100%, 78rem);
	}

	@media (min-width: 48em) {
		.content {
			padding-inline: var(--s-6);
		}
	}

	.flash {
		margin-bottom: var(--s-5);
	}

	.narrow {
		max-width: 44rem;
	}

	.split {
		display: grid;
		gap: var(--s-5);
		align-items: start;
	}

	@media (min-width: 64em) {
		.split {
			grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		}
	}

	/* Dashboard ------------------------------------------------------------------ */
	.sample-banner {
		display: flex;
		gap: var(--s-3);
		align-items: flex-start;
		padding: var(--s-3) var(--s-4);
		margin-bottom: var(--s-5);
		border: 2px dashed var(--rule-strong);
		border-radius: var(--r-control);
		background: var(--surface);
		font-size: var(--fs-sm);
	}

	.sample-banner .icon {
		color: var(--warn);
		margin-top: 0.1em;
	}

	/* One continuous strip rather than four separate cards */
	.stat-strip {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		background: var(--surface);
		border: 1px solid var(--rule);
		border-radius: var(--r-panel);
		margin-bottom: var(--s-5);
		overflow: hidden;
	}

	@media (min-width: 64em) {
		.stat-strip {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.stat {
		padding: var(--s-4) var(--s-5);
		border-right: 1px solid var(--rule);
		border-bottom: 1px solid var(--rule);
		margin: 0 -1px -1px 0;
	}

	.stat dt {
		font-size: var(--fs-sm);
		color: var(--ink-muted);
		display: flex;
		gap: var(--s-2);
		align-items: center;
		flex-wrap: wrap;
	}

	.stat dd {
		margin: var(--s-1) 0 0;
		font-size: var(--fs-xl);
		font-weight: 750;
		line-height: 1.1;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
	}

	.stat small {
		display: block;
		font-size: var(--fs-xs);
		font-weight: 500;
		letter-spacing: 0;
		color: var(--ink-muted);
		margin-top: var(--s-1);
	}

	.chart {
		width: 100%;
		height: auto;
	}

	.chart .bar {
		fill: var(--primary);
	}

	.chart .bar-peak {
		fill: var(--accent);
	}

	.chart text {
		fill: var(--ink-muted);
		font-size: 12px;
		font-family: var(--font);
	}

	.chart .value {
		fill: var(--ink);
		font-weight: 650;
	}

	.chart .axis {
		stroke: var(--rule-strong);
	}

	.live-list {
		list-style: none;
		display: grid;
	}

	.live-list li {
		display: flex;
		justify-content: space-between;
		gap: var(--s-3);
		padding: var(--s-3) var(--s-5);
		border-bottom: 1px solid var(--rule);
		font-size: var(--fs-sm);
	}

	.live-list li:last-child {
		border-bottom: 0;
	}

	.live-list strong {
		font-variant-numeric: tabular-nums;
	}

	/* Design system page ----------------------------------------------------------- */
	.ds-section {
		margin-top: var(--s-7);
	}

	.ds-section > h2 {
		margin-bottom: var(--s-4);
		padding-bottom: var(--s-2);
		border-bottom: 1px solid var(--rule);
	}

	.swatches {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
		gap: var(--s-3);
	}

	.swatch {
		border: 1px solid var(--rule);
		border-radius: var(--r-control);
		overflow: hidden;
		font-size: var(--fs-xs);
		background: var(--surface);
	}

	.swatch i {
		display: block;
		height: 3.5rem;
	}

	.swatch span {
		display: block;
		padding: var(--s-2);
	}

	.sw-primary i {
		background: var(--primary);
	}

	.sw-primary-strong i {
		background: var(--primary-strong);
	}

	.sw-accent i {
		background: var(--accent);
	}

	.sw-ink i {
		background: var(--ink);
	}

	.sw-page i {
		background: var(--page);
	}

	.sw-surface i {
		background: var(--surface);
	}

	.sw-sunken i {
		background: var(--surface-sunken);
	}

	.sw-rule i {
		background: var(--rule);
	}

	.sw-ok i {
		background: var(--ok);
	}

	.sw-warn i {
		background: var(--warn);
	}

	.sw-danger i {
		background: var(--danger);
	}

	.type-sample {
		display: grid;
		gap: var(--s-3);
	}

	.demo-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		align-items: center;
	}

	.skeleton-card {
		display: grid;
		gap: var(--s-3);
		padding: var(--s-5);
	}
}