:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #111111;
	--muted: #666666;
	--link: #0044cc;
	--border: #cccccc;
	--panel: #f4f4f4;
	--error: #bb0000;
	--warn-bg: #fff8e1;
	--warn-border: #b08a00;
	--good: #006622;
	--chart-input: #2f6fd0;
	--chart-cached: #178a3c;
	--chart-output: #b06a00;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0d0d0d;
		--fg: #e6e6e6;
		--muted: #999999;
		--link: #6ea8ff;
		--border: #333333;
		--panel: #1a1a1a;
		--error: #ff6b6b;
		--warn-bg: #2a2200;
		--warn-border: #886600;
		--good: #4e9;
		--chart-input: #5b9bf5;
		--chart-cached: #3fbf6e;
		--chart-output: #e0a030;
	}
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--fg); }

body {
	font-family: serif;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	background: var(--bg);
	color: var(--fg);
}

a { color: var(--link); }
a:visited { color: var(--link); }

code, pre {
	font-family: monospace;
}

/* Code blocks — readable on the usage page, no horizontal scroll on mobile */
pre {
	background: var(--panel);
	border: 1px solid var(--border);
	padding: 0.6rem 0.8rem;
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.4;
}
pre code {
	background: none;
	border: none;
	padding: 0;
}
/* Inline code in prose */
:not(pre) > code {
	background: var(--panel);
	padding: 0.1rem 0.25rem;
	border-radius: 2px;
	font-size: 0.9em;
}

.muted { color: var(--muted); }
.error { color: var(--error); }

.container {
	max-width: 760px;
	margin: 0 auto;
	padding: 1.5rem 1rem 4rem;
}

/* Nav */
.nav {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
	margin-bottom: 1.5rem;
}
.nav .brand { font-weight: bold; text-decoration: none; color: var(--fg); }
.nav .links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.nav .header-links { margin-left: auto; }

/* Forms (no JS — plain HTML, default browser styles) */
.form-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.4rem 0; flex-wrap: wrap; }
.form-row label { min-width: 10rem; color: var(--muted); }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: normal; font-size: 0.85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.center, th.center { text-align: center; }

/* Scrollable table containers with sticky headers (col + row) */
.table-scroll { max-height: 400px; overflow: auto; border: 1px solid var(--border); }
.table-scroll table { width: max-content; min-width: 100%; }
.table-scroll thead th { position: sticky; top: 0; background: var(--bg); z-index: 2; white-space: nowrap; }
/* Row headers (first column) stay sticky on horizontal scroll */
.keys-table th[scope="row"], .models-table th[scope="row"] { position: sticky; left: 0; background: var(--bg); z-index: 1; }
/* Top-left corner cell needs higher z-index to sit above both sticky axes */
.keys-table thead th:first-child, .models-table thead th:first-child { z-index: 3; position: sticky; top: 0; left: 0; background: var(--bg); }

/* Banners / callouts */
.error-banner {
	background: var(--warn-bg);
	border: 1px solid var(--warn-border);
	padding: 0.6rem 0.8rem;
	margin: 1rem 0;
}
.callout {
	background: var(--warn-bg);
	border: 1px solid var(--warn-border);
	padding: 0.8rem;
	margin: 1rem 0;
}

/* Token + key inputs (readonly, full-width) */
.token-selectable, .key-input {
	width: 100%;
	word-break: break-all;
}

/* Collapsible switch-account under the token (native <details>, no JS) */
.switch-account { margin: 0.5rem 0 0; }
.switch-account > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }

/* Iframes on the landing page — no borders */
.live-frame, .keys-frame, .rate-frame {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0;
	display: block;
}
.live-frame, .rate-frame { min-height: 1.5rem; height: 1.5rem; }
.keys-frame { min-height: 16rem; }
.keys-fragment { display: flex; flex-direction: column; height: 100vh; }
.keys-fragment .table-scroll { flex: 1; overflow: auto; max-height: none; }
.keys-fragment form { flex-shrink: 0; }

/* Deposit section: QR on left, address + rate on right */
.deposit-box { display: flex; gap: 1rem; align-items: stretch; margin: 1rem 0; }
.deposit-qr { width: 160px; height: 160px; image-rendering: pixelated; }
.deposit-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.deposit-info p { margin: 0; }
.deposit-addr { word-break: break-all; font-size: 0.85rem; }

/* Pitch / content */
.pitch { margin: 2rem 0; }
.pitch blockquote { border-left: 3px solid var(--border); margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; font-style: italic; }
.pitch p { margin: 0.6rem 0; }

/* Comparison + savings */
.comparison { margin: 1.5rem 0; }
.comparison .savings { color: var(--good); font-weight: bold; }

/* Refresh link (no-JS reload inside an iframe) */
.refresh-link { font-size: 0.85rem; }

.stats-frame { width: 100%; height: 520px; border: 1px solid var(--border); margin: 0.5rem 0; display: block; }
.filter-box { border: 1px solid var(--border); padding: 0.8rem; margin: 1rem 0; }
.filter-box fieldset { border: 1px solid var(--border); margin: 0.6rem 0 0; padding: 0.5rem 0.8rem; }
.filter-box fieldset label { margin-right: 0.8rem; white-space: nowrap; }
.chart-grid { display: flex; flex-direction: column; gap: 2rem; }
.chart-wrap { width: 100%; min-width: 0; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }
/* SVG charts on the model detail page. Scalable, no JS. */
.chart { width: 100%; max-width: 720px; height: auto; display: block; }


/* Admin-specific helpers (shared sheet covers base) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.card { background: var(--panel); border: 1px solid var(--border); padding: 0.8rem; }
.card .num { font-size: 1.4rem; font-weight: bold; }
.card .label { color: var(--muted); font-size: 0.8rem; }
.section { margin: 1.5rem 0; }
.section h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.2rem; }
/* Subsection headings inside a section (e.g. Deposit, API Keys under Account).
   Lighter separator than h2 — they nest under it, not beside it. */
.section h3 { border-bottom: 1px solid var(--border); padding-bottom: 0.15rem; margin-top: 1.5rem; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 3px; }
.g { background: var(--good); }
.r { background: var(--error); }
.y { background: #e0b400; }
.gr { background: var(--muted); }