:root {
	--bg: #f6f7f9;
	--surface: #ffffff;
	--text: #1d2330;
	--muted: #6b7385;
	--border: #dfe3ea;
	--accent: #3b6fd8;
	--accent-text: #ffffff;
	--danger: #c2413b;
	--chip: #e8eefb;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15181e;
		--surface: #1e222b;
		--text: #e3e6ec;
		--muted: #8f97a8;
		--border: #2f3542;
		--accent: #6d97ef;
		--accent-text: #0e1320;
		--danger: #e0655f;
		--chip: #27324a;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--bg);
	color: var(--text);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

.muted { color: var(--muted); }
.small { font-size: .85em; }
.error { color: var(--danger); }
.notice-text { color: var(--accent); }

.topbar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: .6rem 1.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 10;
}
.topbar .brand { font-weight: 700; color: var(--text); }
.topbar nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); }
.topbar nav a.active { color: var(--text); font-weight: 600; }
.topbar .logout { display: flex; align-items: center; gap: .5rem; margin: 0; }

.page { padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
.centered { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
}
.card.notice { border-color: var(--accent); }
.login { width: min(360px, 100%); display: flex; flex-direction: column; gap: .75rem; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .9em; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: .35rem; color: var(--text); }
input, select, textarea {
	font: inherit;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: .45rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button {
	font: inherit;
	cursor: pointer;
	border-radius: 6px;
	padding: .45rem .9rem;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
}
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
button.small { padding: .2rem .5rem; font-size: .85em; }
button.link { border: none; background: none; color: var(--accent); padding: 0; }

.inline-form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.stacked-form { display: flex; flex-direction: column; gap: .75rem; max-width: 360px; }

pre.secret {
	background: var(--bg);
	border: 1px dashed var(--border);
	padding: .75rem;
	border-radius: 6px;
	user-select: all;
	white-space: pre-wrap;
	word-break: break-all;
}

.qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 6px; }

table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
table.list th, table.list td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
table.list th { font-weight: 600; color: var(--muted); font-size: .85em; }
table.list tr.revoked td { color: var(--muted); }
table.list form { margin: 0; }
table.list tr.round td { background: var(--bg); border-top: 2px solid var(--border); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-top: 1rem; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .5rem; overflow: hidden; }
.tile img, .tile .noimage { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; border-radius: 4px; background: var(--bg); }
.tile .noimage { display: grid; place-items: center; color: var(--muted); font-size: .85em; }
.tile-name { font-weight: 600; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta { font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pager { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1rem; }
.pager a { padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 4px; }
.pager a.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* ---------- shared components ---------- */

#toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; padding: .6rem .9rem; box-shadow: 0 4px 16px rgb(0 0 0 / .15); max-width: 420px; }
.toast.error { border-left-color: var(--danger); }

.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--chip); border-radius: 999px; padding: .15rem .6rem; font-size: .85em; }
.chip button { border: none; background: none; padding: 0; color: var(--muted); font-size: 1.1em; line-height: 1; cursor: pointer; }
.chip.expansion { background: none; border: 1px dashed var(--muted); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.badge { display: inline-block; font-size: .72em; padding: .05rem .4rem; border-radius: 4px; background: var(--chip); color: var(--text); }
.badge.manual { background: #f4d27a; color: #3a2a00; }
.badge.inherited { background: #c8d8f8; color: #10254f; }
.badge.warn { background: #f3b2a8; color: #4a0d05; }
.badge.meaning { background: #d6ecd2; color: #133b12; }

.layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } .sidebar { order: 2; } }
.sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow: auto; }
.sidebar h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .9rem 0 .35rem; }
.sidebar h3:first-child { margin-top: 0; }
.facet { display: flex; justify-content: space-between; gap: .5rem; padding: .12rem .3rem; border-radius: 4px; cursor: pointer; font-size: .9em; }
.facet:hover { background: var(--chip); }
.facet .count { color: var(--muted); font-variant-numeric: tabular-nums; }

.searchbar { display: flex; gap: .5rem; }
.searchbar input { flex: 1; font-size: 1.05rem; padding: .6rem .8rem; }

.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--accent); border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; position: sticky; top: 3.4rem; z-index: 5; }
.toolbar .spacer { flex: 1; }

.tile { position: relative; cursor: pointer; transition: border-color .1s; }
.tile.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tile .check { position: absolute; top: .55rem; left: .55rem; width: 1.1rem; height: 1.1rem; }
.tile .badges { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; flex-direction: column; align-items: flex-end; }
.tile-name a { color: var(--text); }
.tile .badge.variants { border: none; cursor: pointer; font: inherit; font-size: .72em; }
.tile .badge.variants:hover { outline: 1px solid var(--accent); }
.tile .badge.picked { background: var(--accent); color: var(--accent-text); font-weight: 600; }

/* Variant popup: a group's base and variants, four per row, each selectable. */
.variant-popup { position: fixed; z-index: 50; width: min(452px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgb(0 0 0 / .22); padding: .6rem; }
.variant-popup-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 .1rem .5rem; }
.variant-popup-head .spacer { flex: 1; }
.variant-popup-head strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.variant-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
.variant-cell { position: relative; border: 1px solid var(--border); border-radius: 6px; padding: .25rem; cursor: pointer; text-align: center; font-size: .78em; }
.variant-cell:hover { border-color: var(--accent); }
.variant-cell.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.variant-cell.match { background: var(--chip); }
.variant-cell img, .variant-cell .noimage { width: 100%; aspect-ratio: 1; object-fit: contain; display: grid; place-items: center; background: var(--bg); border-radius: 4px; color: var(--muted); }
.variant-cell a { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15rem; }
.variant-cell .check { position: absolute; top: .35rem; left: .35rem; pointer-events: none; }
.variant-cell .badge.first { position: absolute; top: .3rem; right: .3rem; background: var(--accent); color: var(--accent-text); }

dialog { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 1.25rem; width: min(560px, 92vw); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin-top: 0; }
dialog .actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.gallery-main { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
.gallery-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.gallery-thumbs img { width: 72px; height: 72px; object-fit: contain; background: var(--bg); border: 2px solid transparent; border-radius: 6px; cursor: pointer; }
.gallery-thumbs img.active { border-color: var(--accent); }
.variant-strip { display: flex; gap: .5rem; flex-wrap: wrap; }
.variant-strip a { display: flex; flex-direction: column; align-items: center; font-size: .8em; color: var(--text); }
.variant-strip img { width: 84px; height: 84px; object-fit: contain; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.variant-strip a.current img { border: 2px solid var(--accent); }
.variant-strip.disabled > div { display: flex; flex-direction: column; align-items: center; }
.variant-strip.disabled img { opacity: .55; }

.field-row { display: grid; grid-template-columns: 110px 1fr auto; gap: .5rem; align-items: start; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: none; }
.field-row .label { color: var(--muted); font-size: .9em; padding-top: .35rem; }
.field-row input, .field-row select, .field-row textarea { width: 100%; }
.field-row .meta { display: flex; gap: .3rem; align-items: center; padding-top: .3rem; }
.tags-input { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--border); border-radius: 6px; padding: .25rem .35rem; background: var(--bg); }
.tags-input input { border: none; outline: none; background: none; flex: 1; min-width: 6rem; padding: .2rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .92em; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-all; }

.stat-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .9rem; min-width: 110px; }
.stat .value { font-size: 1.35rem; font-weight: 650; }
.stat .label { color: var(--muted); font-size: .8em; }
.state { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-weight: 600; font-size: .85em; background: var(--chip); }
.state.Running { background: #bfe8c6; color: #0d3b16; }
.state.Unreachable, .state.Error { background: #f3b2a8; color: #4a0d05; }
.state.Paused, .state.OutsideSchedule { background: #e6dfc4; color: #3c3410; }

table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ok { color: #2f8f46; }
.bad { color: var(--danger); }
.scroll-x { overflow-x: auto; }

/* The hidden attribute must win over display rules of components. */
[hidden] { display: none !important; }
table.list td code { word-break: break-all; }

@media (max-width: 700px) {
	.topbar { flex-wrap: wrap; gap: .4rem .9rem; padding: .5rem .75rem; position: static; }
	.topbar nav { order: 3; flex-basis: 100%; gap: .35rem .9rem; font-size: .92em; }
	.topbar .logout { margin-left: auto; }
	.page { padding: .75rem; }
	.toolbar { top: 0; }
}

.footer { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .75rem 1.25rem 1.25rem; max-width: 1400px; margin: 0 auto; color: var(--muted); font-size: .8em; }