:root {
	color-scheme: dark;
	--bg: #070b14;
	--surface: #0f1726;
	--surface-soft: #121c2d;
	--surface-raised: #172236;
	--ink: #e8eef8;
	--muted: #98a8bd;
	--label: #c9d5e6;
	--line: #26354c;
	--line-soft: #1b293e;
	--brand: #69a7ff;
	--brand-strong: #3b82f6;
	--brand-soft: #10284d;
	--brand-soft-strong: #173a70;
	--accent: #2dd4bf;
	--warning: #f6c453;
	--danger: #ff8a80;
	--success-bg: #063a30;
	--success-ink: #5eead4;
	--warning-bg: #3a2a08;
	--neutral-bg: #1c2738;
	--topbar-bg: rgba(10, 15, 26, 0.9);
	--brand-mark-bg: #e8eef8;
	--brand-mark-ink: #0b1020;
	--auth-brand-bg: #0b1220;
	--auth-brand-ink: #f8fafc;
	--auth-brand-muted: #a7b7cd;
	--nav-hover: #172236;
	--active-bg: #132a4d;
	--item-hover: #121e31;
	--code-bg: #050916;
	--code-ink: #dbeafe;
	--message-bg: #ffffff;
	--message-ink: #101828;
	--toggle-track: #2563eb;
	--shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f4f6f9;
	--surface: #ffffff;
	--surface-soft: #f8fafc;
	--surface-raised: #ffffff;
	--ink: #101828;
	--muted: #667085;
	--label: #344054;
	--line: #d8dee8;
	--line-soft: #eaedf3;
	--brand: #2563eb;
	--brand-strong: #1746a2;
	--brand-soft: #eef4ff;
	--brand-soft-strong: #dbeafe;
	--accent: #0f766e;
	--warning: #b7791f;
	--danger: #b42318;
	--success-bg: #ecfdf3;
	--success-ink: #027a48;
	--warning-bg: #fffaeb;
	--neutral-bg: #f2f4f7;
	--topbar-bg: rgba(255, 255, 255, 0.92);
	--brand-mark-bg: #111827;
	--brand-mark-ink: #ffffff;
	--auth-brand-bg: #111827;
	--auth-brand-ink: #ffffff;
	--auth-brand-muted: #cbd5e1;
	--nav-hover: #eef2f7;
	--active-bg: #ffffff;
	--item-hover: #f8fbff;
	--code-bg: #0f172a;
	--code-ink: #e2e8f0;
	--message-bg: #ffffff;
	--message-ink: #101828;
	--toggle-track: #d8dee8;
	--shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	letter-spacing: 0;
}
a { color: inherit; }
code, .docs-code, .api-key-box {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
code { color: var(--brand); overflow-wrap: anywhere; word-break: break-word; }
.app-shell { min-height: 100vh; }
.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 68px;
	padding: 12px 28px;
	background: var(--topbar-bg);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(18px);
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 750;
	color: var(--ink);
}
.brand-mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--brand-mark-bg);
	color: var(--brand-mark-ink);
	font-size: 12px;
	letter-spacing: 0;
}
.top-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
}
.top-nav-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 7px 12px;
	border-radius: 6px;
	color: var(--muted);
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}
.top-nav-link:hover { color: var(--ink); background: var(--nav-hover); }
.top-nav-link.is-active {
	background: var(--active-bg);
	color: var(--brand);
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font-weight: 750;
	white-space: nowrap;
}
.theme-toggle:hover { background: var(--surface-soft); }
.theme-toggle-track {
	position: relative;
	display: inline-flex;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: var(--toggle-track);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.theme-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.22);
	transform: translateX(18px);
	transition: transform .18s ease;
}
:root[data-theme="light"] .theme-toggle-knob { transform: translateX(0); }
.app-main {
	width: min(1680px, 100%);
	margin: 0 auto;
	padding: 24px 28px 32px;
}
.page-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}
.eyebrow {
	margin: 0 0 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.page-title {
	margin: 0;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1;
	font-weight: 780;
}
.metric-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.metric {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--muted);
	font-weight: 650;
}
.metric strong { color: var(--ink); }
.alert {
	border-radius: 8px;
	border-width: 1px;
	box-shadow: none;
}
.alert-danger {
	background: color-mix(in srgb, var(--danger) 16%, var(--surface));
	border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
	color: var(--ink);
}
.alert-success {
	background: color-mix(in srgb, var(--accent) 14%, var(--surface));
	border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
	color: var(--ink);
}
.btn {
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: 0;
}
.btn-primary {
	background: var(--brand);
	border-color: var(--brand);
}
.btn-primary:hover {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
}
.btn-outline-secondary {
	color: var(--ink);
	border-color: var(--line);
	background: var(--surface);
}
.btn-outline-secondary:hover {
	color: var(--ink);
	border-color: var(--line);
	background: var(--surface-soft);
}
.form-control, .form-select {
	min-height: 42px;
	border-radius: 6px;
	border-color: var(--line);
	background: var(--surface);
	color: var(--ink);
}
.form-control:focus, .form-select:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}
.form-control::placeholder { color: var(--muted); }
.text-secondary { color: var(--muted) !important; }
.form-label {
	color: var(--label);
	font-size: 13px;
	font-weight: 700;
}
.auth-shell {
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 28px;
}
.auth-panel {
	width: min(960px, 100%);
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: var(--shadow);
}
.auth-brand {
	padding: 34px;
	background: var(--auth-brand-bg);
	color: var(--auth-brand-ink);
}
.auth-brand h1 {
	margin: 18px 0 12px;
	font-size: 34px;
	font-weight: 800;
}
.auth-brand p { color: var(--auth-brand-muted); margin: 0; max-width: 28rem; }
.auth-form { padding: 34px; align-self: center; }
.auth-form-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.auth-form h2 { margin: 0 0 20px; font-size: 24px; font-weight: 760; }
.auth-form-head h2 { margin: 0; }
.inbox-layout {
	display: grid;
	grid-template-columns: minmax(230px, .78fr) minmax(310px, 1fr) minmax(420px, 1.42fr);
	min-height: calc(100vh - 174px);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--line);
	box-shadow: var(--shadow);
}
.pane {
	min-width: 0;
	background: var(--surface);
}
.pane + .pane { border-left: 1px solid var(--line); }
.pane-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 58px;
	padding: 15px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-soft);
}
.pane-title {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}
.count-pill, .status-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 24px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
	font-size: 12px;
	font-weight: 800;
}
.status-pill.ok { background: var(--success-bg); color: var(--success-ink); }
.status-pill.warn { background: var(--warning-bg); color: var(--warning); }
.status-pill.neutral { background: var(--neutral-bg); color: var(--muted); }
.stack-list { display: grid; }
.stack-item {
	display: block;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink);
	text-decoration: none;
}
.stack-item:hover { background: var(--item-hover); }
.stack-item.is-active {
	background: var(--active-bg);
	box-shadow: inset 3px 0 0 var(--brand);
}
.item-main {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
}
.item-title {
	min-width: 0;
	font-weight: 760;
	overflow-wrap: anywhere;
}
.item-meta {
	margin-top: 4px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.unread-dot {
	width: 8px;
	height: 8px;
	margin-top: 6px;
	border-radius: 999px;
	background: var(--brand);
	flex: 0 0 auto;
}
.empty-state {
	padding: 24px 16px;
	color: var(--muted);
	text-align: center;
}
.viewer {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.viewer-head {
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.viewer-title {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 780;
	overflow-wrap: anywhere;
}
.meta-grid {
	display: grid;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
}
.meta-grid strong { color: var(--label); font-weight: 760; }
.viewer-body {
	padding: 18px 22px 22px;
	background: var(--surface-soft);
	flex: 1;
}
.message-body {
	max-width: 980px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--message-bg);
	color: var(--message-ink);
	overflow: auto;
}
.message-body.email-html { padding: 18px; }
.message-body.email-html img { max-width: 100%; height: auto; }
.pre-wrap {
	margin: 0;
	padding: 18px;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 13px;
	line-height: 1.55;
}
.attachment-list {
	display: grid;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.attachment-item {
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}
.settings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.panel {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: var(--shadow);
}
.panel-header {
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-soft);
}
.panel-title {
	margin: 0;
	font-size: 16px;
	font-weight: 780;
}
.panel-body { padding: 18px; }
.status-list {
	display: grid;
	gap: 10px;
	margin: 0;
}
.status-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-soft);
}
.status-row:last-child { border-bottom: 0; padding-bottom: 0; }
.status-row dt {
	color: var(--muted);
	font-weight: 700;
}
.status-row dd {
	margin: 0;
	font-weight: 750;
	text-align: right;
	overflow-wrap: anywhere;
}
.table {
	margin: 0;
	--bs-table-bg: transparent;
	--bs-table-color: var(--ink);
	--bs-table-border-color: var(--line);
}
.table thead th {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--surface-soft);
}
.api-key-box, .docs-code {
	white-space: pre-wrap;
	word-break: break-word;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--code-bg);
	color: var(--code-ink);
	padding: 14px;
	margin: 0;
}
.docs-shell { width: min(1180px, 100%); margin: 0 auto; padding: 28px; }
.docs-header {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.docs-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.docs-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
	gap: 14px;
	margin-bottom: 14px;
}
.docs-card {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: var(--shadow);
}
.docs-card-header {
	padding: 15px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-soft);
}
.docs-card-title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
}
.docs-card-body { padding: 16px; }
.docs-facts {
	display: grid;
	gap: 10px;
	margin: 0;
}
.docs-fact {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-soft);
}
.docs-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.docs-fact dt {
	color: var(--muted);
	font-weight: 750;
}
.docs-fact dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}
.docs-list {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.docs-list li {
	position: relative;
	padding-left: 18px;
	color: var(--label);
}
.docs-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--accent);
}
.docs-flow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.docs-step {
	padding: 13px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}
.docs-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-bottom: 9px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand);
	font-size: 12px;
	font-weight: 850;
}
.docs-step h3 {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 800;
}
.docs-step p { margin: 0; color: var(--muted); }
.docs-endpoint {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	margin-bottom: 12px;
	overflow: hidden;
}
.docs-endpoint-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-soft);
}
.docs-endpoint-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 16px;
}
.docs-agent-use {
	grid-column: 1 / -1;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-soft);
	color: var(--label);
}
.docs-agent-use strong { color: var(--ink); }
.docs-schema {
	margin-bottom: 12px;
	overflow: hidden;
}
.docs-table-wrap { overflow-x: auto; }
.docs-table {
	width: 100%;
	min-width: 680px;
	border-collapse: collapse;
}
.docs-table th, .docs-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}
.docs-table th {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--surface-soft);
}
.docs-table tr:last-child td { border-bottom: 0; }
.method-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--brand-soft-strong);
	color: var(--brand-strong);
	font-size: 12px;
	font-weight: 850;
}
@media (max-width: 1180px) {
	.inbox-layout { grid-template-columns: 1fr; }
	.pane + .pane { border-left: 0; border-top: 1px solid var(--line); }
	.pane { min-height: auto; }
	.settings-grid { grid-template-columns: 1fr; }
	.docs-hero, .docs-flow { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.topbar { position: static; align-items: stretch; flex-direction: column; padding: 14px; }
	.top-nav { width: 100%; overflow-x: auto; }
	.top-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
	.top-actions .btn, .top-actions form, .top-actions .theme-toggle { width: 100%; }
	.app-main { padding: 18px 14px 24px; }
	.page-heading { align-items: start; flex-direction: column; }
	.metric-strip { justify-content: start; }
	.auth-panel { grid-template-columns: 1fr; }
	.auth-brand, .auth-form { padding: 24px; }
	.docs-shell { padding: 18px 14px; }
	.docs-header, .docs-endpoint-head { flex-direction: column; align-items: start; }
	.docs-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
	.docs-actions .btn, .docs-actions .theme-toggle { width: 100%; }
	.docs-endpoint-body { grid-template-columns: 1fr; }
	.docs-fact { grid-template-columns: 1fr; gap: 3px; }
}

/* Inbox: bounded desktop panes, list/detail navigation on smaller screens. */
.inbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.inbox-search{display:flex;align-items:center;gap:10px;flex:1;max-width:760px}
.inbox-search input[type=search]{min-width:100px;flex:1}
.unread-filter{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.inbox-status{font-size:12px;color:var(--muted);margin:6px 0 12px;min-height:18px}
.inbox-status.is-error{color:var(--danger)}
.inbox-layout{height:calc(100dvh - 290px);min-height:360px;grid-template-columns:minmax(210px,.65fr) minmax(280px,.95fr) minmax(360px,1.4fr)}
.pane{min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pane-scroll{min-height:0;overflow:auto;flex:1;overscroll-behavior:contain}
.recipient-picker{display:flex;flex-direction:column;min-height:0;height:100%}
.recipient-picker>summary{display:none}
.recipient-picker>.pane-scroll{height:calc(100% - 58px)}
.inbox-pagination{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;min-height:44px;border-top:1px solid var(--line)}
.inbox-pagination a{color:var(--brand)}
.viewer-actions{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;background:var(--surface-soft)}
.reader-modes{display:flex;gap:4px}.reader-back{display:none}
.viewer{min-height:0}.preview{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.copy-button{border:0;background:var(--brand-soft);color:var(--brand);border-radius:4px;font-size:12px;padding:2px 6px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media(min-width:1181px){.recipient-picker:not([open])>*:not(summary){display:block}}
@media(max-width:1180px){
 .inbox-layout{display:flex;flex-direction:column;height:auto;min-height:0}
 .recipients-column{display:block}.recipient-picker{height:auto}.recipient-picker>summary{display:block;padding:12px 16px;cursor:pointer;color:var(--label)}
 .recipient-picker>.pane-scroll{max-height:240px;height:auto}
 .inbox-workspace[data-reader-open=true] .recipients-column,.inbox-workspace[data-reader-open=true] .messages-column{display:none}
 .inbox-workspace[data-reader-open=false] .viewer-column{display:none}
 .reader-back{display:inline-flex}.viewer-column{min-height:55vh}.messages-column>.pane-scroll{max-height:none}
}
@media(max-width:760px){
 .inbox-search{flex-wrap:wrap;gap:8px;width:100%}.inbox-search input[type=search]{flex-basis:100%}
 .inbox-toolbar{gap:8px}.metric{font-size:12px;min-height:28px;padding:4px 8px}
 .reader-modes .top-nav-link{padding:6px 8px}.viewer-head{padding:16px}.viewer-body{padding:12px}
}
.address-generator{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.address-generator select{width:auto;max-width:240px}.address-generator input{flex:1;min-width:220px}
@media(max-width:760px){.address-generator select{flex:1;max-width:none}.address-generator input{flex-basis:75%;min-width:0}}
@media(min-width:1181px){
 body:has(.inbox-workspace) .app-shell{height:100dvh;display:flex;flex-direction:column}
 .app-main:has(.inbox-workspace){flex:1;min-height:0;display:flex;flex-direction:column}
 .inbox-workspace{flex:1;min-height:0;display:flex;flex-direction:column}
 .inbox-toolbar,.address-generator,.inbox-status{flex-shrink:0}
 .inbox-layout{flex:1;height:auto;min-height:0}
}