:root {
	--bg: #f4f6f9; --panel: #ffffff; --text: #1a2230; --muted: #6b7686;
	--border: #e2e7ef; --accent: #1f6feb; --accent-fg: #ffffff;
	--row-hover: #f0f5ff; --chip: #eef2f7; --danger: #b23b3b;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1420; --panel: #161d2b; --text: #e7ecf3; --muted: #93a0b4;
		--border: #263140; --accent: #4c8dff; --accent-fg: #0b1018;
		--row-hover: #1c2637; --chip: #202b3c; --danger: #ff6b6b;
	}
}
* { box-sizing: border-box; }
body {
	margin: 0; background: var(--bg); color: var(--text);
	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* browse page */
#pods header {
	position: sticky; top: 0; z-index: 5; background: var(--panel);
	border-bottom: 1px solid var(--border); padding: 14px 20px;
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
#pods header h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: .2px; }
#pods .count { color: var(--muted); font-size: 13px; }
.grow { flex: 1; }
#pods input[type="search"] {
	background: var(--bg); border: 1px solid var(--border); color: var(--text);
	border-radius: 8px; padding: 8px 12px; min-width: 240px; font-size: 14px;
}
#pods button {
	background: transparent; color: var(--accent); border: 1px solid var(--border); cursor: pointer;
	border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
}
#pods main { padding: 16px 20px 60px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 860px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
	position: sticky; top: 0; background: var(--panel); font-size: 12px; text-transform: uppercase;
	letter-spacing: .4px; color: var(--muted); cursor: pointer; user-select: none;
}
th[aria-sort="ascending"]::after { content: " ▲"; }
th[aria-sort="descending"]::after { content: " ▼"; }
tbody tr:hover { background: var(--row-hover); }
td.customer { white-space: normal; max-width: 280px; }
.sub { color: var(--muted); font-size: 12px; }
.qty { font-variant-numeric: tabular-nums; text-align: right; }
.actions { display: flex; gap: 8px; }
a.podbtn {
	text-decoration: none; background: var(--accent); color: var(--accent-fg);
	border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
a.podbtn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
a.podbtn.disabled { opacity: .4; pointer-events: none; }
.state { padding: 48px 20px; text-align: center; color: var(--muted); }
.state.error { color: var(--danger); }

/* notice pages (no-pod / error / chooser) */
.notice {
	max-width: 640px; margin: 12vh auto; padding: 0 24px; text-align: center;
}
.notice .icon { font-size: 44px; }
.notice h1, .notice h2 { margin: 8px 0; }
.notice .sub { color: var(--muted); font-size: 13px; }
.notice .choices { list-style: none; padding: 0; margin: 20px auto; max-width: 480px; text-align: left; }
.notice .choices li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--panel); }
.notice .choices a { font-weight: 600; color: var(--accent); text-decoration: none; margin-right: 8px; }