@import url(https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap);

:root {
	--sidebar-w: 272px;
	--bg-top: #1a1f27;
	--bg-bot: #0a0d12;
	--bg: #11141a;
	--sidebar-bg-top: #1d222a;
	--sidebar-bg-bot: #12161c;
	--sidebar-bg: #181c23;
	--surface-top: #2c313a;
	--surface-bot: #1d2229;
	--surface: #252a32;
	--surface-raised-top: #3a414b;
	--surface-raised-bot: #292f37;
	--surface-raised: #313640;
	--hd-bg-top: #1a1f27;
	--hd-bg-bot: #13171d;
	--hd-bg: #181d24;
	--border-light: #4d5562;
	--border: #2a2f37;
	--border-deep: #05070a;
	--border-subtle: #1f242c;
	--border-focus: #2970ff;
	--text: #ffffff;
	--text-muted: #eeeeee;
	--muted: #d3d3d3;
	--accent: #2970ff;
	--accent-top: #5c93ff;
	--accent-bot: #4678e6;
	--accent-glow: #3b61b3;
	--accent-cool: #29c5e8;
	--accent-ok: #4ec96c;
	--accent-ok-glow: #2da44a;
	--accent-warn: #e0a100;
	--accent-warn-glow: #b88000;
	--accent-err: #ff4d4d;
	--accent-err-glow: #c92a2a;
	--radius: 8px;
	--radius-sm: 6px;
	--font: 'Zalando Sans', 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
	--mono-font: 'Zalando Sans', 'Consolas', ui-monospace, monospace;
	--bevel-raised: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.45);
	--bevel-raised-strong: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.55);
	--bevel-sunken: inset 0 2px 5px rgba(0, 0, 0, 0.65), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
	--bevel-press: inset 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(0, 0, 0, 0.35);
	--card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.55)
}

[data-theme=light] {
	--bg-top: #c3c8cf;
	--bg-bot: #959ba3;
	--bg: #adb3bb;
	--sidebar-bg-top: #d0d5dc;
	--sidebar-bg-bot: #b0b6bd;
	--sidebar-bg: #bcc1c8;
	--surface-top: #f1f3f6;
	--surface-bot: #d3d8de;
	--surface: #e1e5ea;
	--surface-raised-top: #fbfcfd;
	--surface-raised-bot: #d8dde3;
	--surface-raised: #ebeff3;
	--hd-bg-top: #c5cad1;
	--hd-bg-bot: #9ea4ac;
	--hd-bg: #b1b7be;
	--border-light: #ffffff;
	--border: #8b919a;
	--border-deep: #4a4f57;
	--border-subtle: #9aa0a8;
	--border-focus: #d68a00;
	--text: #1a1d22;
	--text-muted: #5a6068;
	--muted: #5a6068;
	--accent: #d68a00;
	--accent-top: #f0a820;
	--accent-bot: #a06400;
	--accent-glow: #b86f00;
	--accent-cool: #0e8aa8;
	--accent-ok: #2a8a44;
	--accent-ok-glow: #1a6a30;
	--accent-warn: #d68a00;
	--accent-warn-glow: #b86f00;
	--accent-err: #c92a2a;
	--accent-err-glow: #a01818;
	--bevel-raised: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.18);
	--bevel-raised-strong: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.25);
	--bevel-sunken: inset 0 2px 4px rgba(0, 0, 0, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.55);
	--bevel-press: inset 0 2px 4px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(0, 0, 0, 0.20);
	--card-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 5px rgba(0, 0, 0, 0.22)
}

*,
::after,
::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

html {
	font-size: 14px
}

svg {
	flex-shrink: 0
}

svg.lucide {
	stroke-width: 1.75
}

a {
	color: inherit;
	text-decoration: none
}

.app-shell {
	display: flex;
	height: 100dvh;
	overflow: hidden;
	width: 100%;
	min-width: 0
}

.sidebar {
	width: var(--sidebar-w);
	background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bot));
	border-right: 1px solid var(--border-deep);
	box-shadow: inset -1px 0 0 var(--border-light), 2px 0 6px rgba(0, 0, 0, .45);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0
}

.brand-mark {
	width: min(202px, calc(var(--sidebar-w) - 44px));
	height: auto;
	display: block
}

.brand-mark-dark,
[data-theme=light] .brand-mark-light {
	display: none
}

[data-theme=light] .brand-mark-dark {
	display: block
}

.sidebar-connection {
	margin: 0 12px 8px;
	padding: 7px 9px;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--surface) 56%, transparent);
	box-shadow: var(--bevel-sunken);
	color: var(--muted);
	font-size: 11.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	flex-shrink: 0
}

.brand-name {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--text);
	line-height: 1.2;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .45)
}

.brand-sub {
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
	margin-top: 3px
}

.sidebar-section {
	padding: 10px 12px 4px;
	flex-shrink: 0
}

.sidebar-label {
	text-transform: none;
	color: var(--muted);
	padding: 2px 8px 6px;
	display: block
}

.sidebar-link {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-weight: 500;
	transition: color .12s, background .12s, border-color .12s, box-shadow .12s;
	cursor: pointer
}

.sidebar-link svg {
	flex-shrink: 0;
	opacity: .8
}

.sidebar-link:hover {
	color: var(--text);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-color: var(--border-deep);
	box-shadow: var(--bevel-raised)
}

.sidebar-link.active {
	color: var(--text);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--surface-top)), color-mix(in srgb, var(--accent) 10%, var(--surface-bot)));
	border-color: var(--border-deep);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-bot) 60%, transparent), 0 0 8px color-mix(in srgb, var(--accent-glow) 35%, transparent)
}

.sidebar-link.active svg {
	opacity: 1
}

.status-row {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 4px 8px
}

.status-key {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--muted);
	width: 32px;
	flex-shrink: 0
}

.status-val {
	font-size: 11.5px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.sidebar-feeds-section {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-top: 2px
}

.sidebar-feeds {
	flex: 1;
	overflow-y: auto;
	padding: 0 10px 6px
}

.sidebar-feeds::-webkit-scrollbar {
	width: 8px
}

.sidebar-feeds::-webkit-scrollbar-track {
	background: linear-gradient(90deg, var(--bg), var(--bg-bot));
	box-shadow: inset 0 0 2px rgba(0, 0, 0, .5)
}

.sidebar-feeds::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-radius: 4px;
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
}

.sidebar-feed {
	border: 1px solid transparent;
	padding: 7px 9px;
	border-radius: var(--radius-sm);
	margin-bottom: 1px
}

.sidebar-feed:hover {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-color: var(--border-deep);
	box-shadow: var(--bevel-raised)
}

.sidebar-feed-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px
}

.sidebar-feed-name {
	flex: 1;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.sidebar-feed-q {
	font-size: 10px;
	font-weight: 700;
	color: var(--muted);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	padding: 1px 5px;
	border-radius: 20px;
	line-height: 1.5;
	flex-shrink: 0
}

.sidebar-feed-q[data-active=true] {
	color: var(--accent-warn);
	border-color: var(--border-deep);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-warn) 22%, var(--surface-top)), color-mix(in srgb, var(--accent-warn) 10%, var(--surface-bot)));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 45%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-bot) 55%, transparent), 0 0 6px color-mix(in srgb, var(--accent-warn-glow) 50%, transparent)
}

.sidebar-feed-playing {
	font-size: 11px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-left: 19px
}

.sidebar-empty {
	font-size: 12px;
	color: var(--muted);
	padding: 6px 9px
}

.sidebar-footer {
	padding: 8px 12px;
	border-top: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light);
	display: flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(180deg, var(--sidebar-bg-bot), var(--sidebar-bg-top));
	bottom: 0;
	position: fixed;
	width: var(--sidebar-w)
}

.sidebar-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	color: var(--muted);
	cursor: pointer;
	transition: color .12s, background .12s, box-shadow .12s;
	flex-shrink: 0
}

.sidebar-icon-btn svg {
	width: 15px;
	height: 15px
}

.sidebar-icon-btn:hover {
	color: var(--text);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-raised-top)), color-mix(in srgb, var(--accent) 6%, var(--surface-raised-bot)));
	box-shadow: var(--bevel-raised-strong)
}

.sidebar-icon-btn:active {
	background: linear-gradient(180deg, var(--surface-raised-bot), var(--surface-raised-top));
	box-shadow: var(--bevel-press)
}

.sidebar-icon-btn.sidebar-logout-btn {
	margin-left: auto
}

.sidebar-icon-btn.sidebar-logout-btn:hover {
	color: var(--accent-err);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-err) 14%, var(--surface-raised-top)), color-mix(in srgb, var(--accent-err) 6%, var(--surface-raised-bot)))
}

.theme-toggle {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-family: var(--font);
	font-size: 12.5px;
	cursor: pointer;
	transition: color .12s, background .12s, box-shadow .12s
}

.theme-toggle:hover {
	color: var(--text);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface-raised-top)), color-mix(in srgb, var(--accent) 4%, var(--surface-raised-bot)));
	box-shadow: var(--bevel-raised-strong)
}

.theme-toggle:active {
	background: linear-gradient(180deg, var(--surface-raised-bot), var(--surface-raised-top));
	box-shadow: var(--bevel-press)
}

.main-wrap {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	min-width: 0
}

.main-wrap::-webkit-scrollbar {
	width: 10px
}

.main-wrap::-webkit-scrollbar-track {
	background: linear-gradient(90deg, var(--bg), var(--bg-bot));
	box-shadow: inset 0 0 3px rgba(0, 0, 0, .6)
}

.main-wrap::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-radius: 5px;
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
}

.topbar {
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light), 0 2px 6px rgba(0, 0, 0, .35);
	position: sticky;
	top: 0;
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%);
	z-index: 10;
	flex-shrink: 0
}

.topbar-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap
}

.topbar-title {
	display: flex;
	flex-direction: column;
	gap: 2px
}

.topbar-eyebrow {
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted)
}

.topbar-inner h1,
.topbar-title h1 {
	font-weight: 700;
	letter-spacing: -.2px;
	line-height: 1.3;
	color: var(--text);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35)
}

.topbar-inner p,
.topbar-title p {
	color: var(--muted);
	margin-top: 1px
}

.metric-strip {
	display: flex;
	gap: 6px;
	flex-shrink: 0
}

.metric-card {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 11px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm)
}

.metric-card p {
	font-size: 11.5px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	white-space: nowrap
}

.metric-card strong {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--text);
	white-space: nowrap;
	text-shadow: 0 0 4px color-mix(in srgb, var(--accent-cool) 18%, transparent)
}

.dashboard {
	flex: 1;
	padding: 18px 22px 56px;
	display: flex;
	flex-direction: column;
	min-width: 0
}

.section-block {
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 40%, var(--surface-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	overflow: hidden;
	min-width: 0
}

.section-hd {
	display: flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(180deg, var(--hd-bg-top), var(--hd-bg-bot));
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light), inset 0 1px 0 rgba(255, 255, 255, .04);
	font-weight: 500;
	color: var(--text);
	flex-wrap: wrap
}

.section-hd-sub {
	font-weight: 400;
	color: var(--muted);
	flex: 1
}

.section-hd-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap
}

.section-body.pad-none {
	padding: 0
}

.overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.95fr);
	gap: 16px;
	align-items: start
}

.overview-main {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.overview-hero {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.overview-label,
.overview-note-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted)
}

.overview-hero h2 {
	font-size: 27px;
	line-height: 1.15;
	letter-spacing: -.03em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35)
}

.overview-hero p:last-child {
	font-size: 13px;
	color: var(--muted);
	max-width: 58ch
}

.summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px
}

.summary-grid .metric-card {
	min-height: 74px;
	padding: 12px 14px;
	align-items: flex-start;
	flex-direction: column;
	gap: 8px
}

.summary-grid .metric-card p {
	font-size: 11px
}

.summary-grid .metric-card strong {
	font-size: 18px;
	line-height: 1
}

.overview-side {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.overview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.overview-actions .btn-action {
	flex: 1 1 150px;
	justify-content: center
}

.overview-note {
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-sunken);
	border-radius: var(--radius);
	background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised-top) 80%, var(--bg)), color-mix(in srgb, var(--surface-raised-bot) 80%, var(--bg)));
	padding: 12px 14px
}

.overview-note p:last-child {
	margin-top: 6px;
	color: var(--text)
}

.tls-notice {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.tls-notice[data-state=ok] {
	border-color: color-mix(in srgb, var(--accent-ok) 45%, var(--border-deep))
}

.tls-notice[data-state=warn] {
	border-color: color-mix(in srgb, var(--accent-warn) 50%, var(--border-deep))
}

.tls-notice-action {
	width: fit-content
}

.ops-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.95fr);
	gap: 16px;
	margin-top: 18px;
	align-items: start
}

.ops-grid>.section-block,
.ops-stack>.section-block {
	margin-top: 0
}

.ops-stack {
	display: flex;
	flex-direction: column;
	gap: 18px
}

.btn-link {
	text-decoration: none
}

.hd-select {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	color: var(--text);
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	font-family: var(--font);
	font-size: 11.5px;
	cursor: pointer;
	outline: 0;
	margin-left: auto
}

.hd-select:focus {
	border-color: var(--border-focus);
	box-shadow: var(--bevel-raised), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)
}

.btn-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font);
	font-weight: 500;
	cursor: pointer;
	transition: background .12s, box-shadow .12s
}

.btn-action:hover {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-raised-top)), color-mix(in srgb, var(--accent) 5%, var(--surface-raised-bot)));
	box-shadow: var(--bevel-raised-strong)
}

.btn-action:active {
	background: linear-gradient(180deg, var(--surface-raised-bot), var(--surface-raised-top));
	box-shadow: var(--bevel-press)
}

.btn-action:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: none;
	background: var(--surface)
}

.two-col {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 16px;
	margin-top: 20px
}

.wx-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px
}

.wx-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	gap: 12px
}

.wx-row>label {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	text-align: right
}

.wx-row-packages {
	align-items: flex-start;
	padding-top: 2px
}

.wx-row-actions {
	padding-top: 4px;
	align-items: center
}

.input-field {
	padding: 7px 10px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 90%, var(--bg-top)), var(--bg-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-sunken);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font);
	outline: 0;
	transition: border-color .12s, box-shadow .12s
}

.input-field:focus {
	border-color: var(--border-focus);
	box-shadow: var(--bevel-sunken), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)
}

.pkg-chips {
	--pkg-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--pkg-cols), minmax(0, 1fr));
	gap: 6px
}

.pkg-chip {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 5px 9px;
	font-family: var(--font);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: 5px;
	font-size: 11.5px;
	color: var(--muted);
	cursor: pointer;
	user-select: none;
	appearance: none;
	transition: background .12s, box-shadow .12s, color .12s
}

.pkg-chip input {
	flex: 0 0 auto;
	margin: 0
}

.pkg-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.pkg-chip:hover {
	color: var(--text);
	box-shadow: var(--bevel-raised-strong)
}

.pkg-chip.active {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, var(--surface-top)), color-mix(in srgb, var(--accent) 14%, var(--surface-bot)));
	border-color: var(--border-deep);
	color: var(--accent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-bot) 55%, transparent), 0 0 6px color-mix(in srgb, var(--accent-glow) 45%, transparent)
}

.wx-status {
	font-size: 12px;
	color: var(--muted)
}

.wx-status.err {
	color: var(--accent-err)
}

.wx-status.ok {
	color: var(--accent-ok)
}

.feed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px
}

.feed-card {
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.feed-card.empty {
	padding: 20px;
	color: var(--muted);
	font-size: 13px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised)
}

.feed-topline {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 10px
}

.feed-id {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	margin-bottom: 3px
}

.feed-topline h3 {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: var(--text);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .3)
}

.queue-chip {
	font-size: 10.5px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 20px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	color: var(--muted);
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: 2px
}

.queue-chip[data-active=true] {
	color: var(--accent-warn);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-warn) 28%, var(--surface-top)), color-mix(in srgb, var(--accent-warn) 12%, var(--surface-bot)));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-bot) 55%, transparent), 0 0 8px color-mix(in srgb, var(--accent-warn-glow) 50%, transparent)
}

.feed-meta,
.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 16px 10px
}

.tag {
	font-size: 11px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	padding: 2px 7px;
	border-radius: 4px;
	color: var(--muted)
}

.tag.muted {
	opacity: .55
}

.feed-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--border-deep);
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), inset 0 -1px 0 var(--border-light);
	background: var(--border-deep);
	gap: 1px;
	margin-top: auto
}

.feed-stats>div {
	background: linear-gradient(180deg, var(--surface), var(--surface-bot));
	padding: 10px 14px
}

.feed-stats dt {
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	margin-bottom: 3px
}

.feed-stats dd {
	font-size: 12px;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.playlist-block {
	padding: 10px 16px 14px
}

.playlist-block p {
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	margin-bottom: 6px
}

.playlist-block ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px
}

.playlist-block li {
	font-size: 11px;
	font-family: var(--mono-font);
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.event-list {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.event-item {
	background: linear-gradient(180deg, var(--surface-top), var(--surface-bot));
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), 0 1px 2px rgba(0, 0, 0, .3);
	border-radius: var(--radius-sm);
	padding: 10px 14px
}

.event-item.empty {
	color: var(--muted);
	font-size: 12.5px
}

.event-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px
}

.event-kind {
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	padding: 2px 6px;
	border-radius: 3px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, var(--surface-top)), color-mix(in srgb, var(--accent) 14%, var(--surface-bot)));
	color: var(--accent);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 45%, transparent), 0 0 5px color-mix(in srgb, var(--accent-glow) 40%, transparent);
	flex-shrink: 0
}

.event-item time {
	font-size: 11px;
	color: var(--muted);
	margin-left: auto;
	font-family: var(--mono-font);
	white-space: nowrap
}

.event-item p {
	font-size: 12.5px;
	color: var(--text);
	line-height: 1.45
}

.event-feed {
	display: inline-block;
	margin-top: 5px;
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	padding: 1px 6px;
	border-radius: 3px
}

.code-view {
	padding: 14px 16px;
	font-family: var(--mono-font);
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--text);
	background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
	box-shadow: inset 0 0 0 1px var(--border-deep), inset 0 2px 6px rgba(0, 0, 0, .55);
	overflow: auto;
	max-height: 440px;
	white-space: pre;
	word-break: break-all
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: radial-gradient(circle at 30% 30%, var(--muted), color-mix(in srgb, var(--muted) 50%, #000));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px var(--border-deep)
}

.status-dot[data-state=ok] {
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-ok) 130%, #fff), var(--accent-ok) 55%, var(--accent-ok-glow));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px var(--border-deep), 0 0 6px color-mix(in srgb, var(--accent-ok) 65%, transparent)
}

.status-dot[data-state=warn] {
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-warn) 130%, #fff), var(--accent-warn) 55%, var(--accent-warn-glow));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px var(--border-deep), 0 0 6px color-mix(in srgb, var(--accent-warn) 65%, transparent)
}

.status-dot[data-state=err] {
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent-err) 130%, #fff), var(--accent-err) 55%, var(--accent-err-glow));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px var(--border-deep), 0 0 6px color-mix(in srgb, var(--accent-err) 65%, transparent)
}

.status-dot[data-state=pending] {
	background: radial-gradient(circle at 30% 30%, var(--muted), color-mix(in srgb, var(--muted) 50%, #000));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 1px var(--border-deep)
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 18px;
	background: linear-gradient(180deg, var(--accent-top) 0, var(--accent) 50%, var(--accent-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, var(--accent-glow) 35%, transparent);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-family: var(--font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s, box-shadow .12s;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .788)
}

.btn-primary:hover {
	filter: brightness(1.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .55), 0 0 12px color-mix(in srgb, var(--accent-glow) 55%, transparent)
}

.btn-primary:active {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(255, 255, 255, .2);
	filter: brightness(.95)
}

.btn-primary:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3)
}

.btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-err) 130%, #fff) 0, var(--accent-err) 50%, var(--accent-err-glow) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, var(--accent-err) 35%, transparent);
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font);
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s, box-shadow .12s;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .4)
}

.btn-danger:hover {
	filter: brightness(1.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .55), 0 0 12px color-mix(in srgb, var(--accent-err) 55%, transparent)
}

.btn-danger:active {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .2);
	filter: brightness(.95)
}

.btn-danger:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3)
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font);
	font-weight: 400;
	cursor: pointer;
	transition: background .12s, box-shadow .12s
}

.btn-ghost:hover {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-raised-top)), color-mix(in srgb, var(--accent) 5%, var(--surface-raised-bot)));
	box-shadow: var(--bevel-raised-strong)
}

.btn-ghost:active {
	background: linear-gradient(180deg, var(--surface-raised-bot), var(--surface-raised-top));
	box-shadow: var(--bevel-press)
}

.btn-ghost:disabled {
	opacity: .5;
	cursor: not-allowed;
	box-shadow: var(--bevel-raised)
}

.btn-confirm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 24px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ok) 130%, #fff) 0, var(--accent-ok) 50%, var(--accent-ok-glow) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, var(--accent-ok) 35%, transparent);
	border-radius: var(--radius-sm);
	color: #fff;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .12s, box-shadow .12s;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35)
}

.btn-confirm:hover {
	filter: brightness(1.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 5px rgba(0, 0, 0, .55), 0 0 12px color-mix(in srgb, var(--accent-ok) 55%, transparent)
}

.btn-confirm:active {
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), inset 0 -1px 0 rgba(255, 255, 255, .2);
	filter: brightness(.95)
}

.btn-confirm:not(:disabled) {
	animation: 2s ease-in-out infinite pulse-ok
}

.btn-confirm:disabled {
	opacity: .5;
	cursor: not-allowed;
	animation: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3)
}

@keyframes pulse-ok {

	0%,
	100% {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 0 color-mix(in srgb, var(--accent-ok) 55%, transparent)
	}

	50% {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 9px transparent
	}
}

.login-body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text)
}

.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 18px
}

.login-panel {
	width: min(420px, calc(100vw - 36px));
	border: 1px solid var(--border-deep);
	border-radius: 8px;
	background: var(--surface);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
	overflow: hidden
}

.login-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 30px 28px 20px;
	border-bottom: 1px solid var(--border);
	text-align: center
}

.login-mark {
	width: min(220px, 68vw);
	height: auto;
	object-fit: contain
}

.login-title-block h1 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
	font-weight: 700
}

.login-title-block p {
	margin: 8px auto 0;
	max-width: 330px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45
}

.login-grid {
	display: contents
}

.login-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 28px 28px;
	background: var(--surface)
}

.login-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text)
}

.login-form input[type=password],
.login-form input[type=text] {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface-raised);
	color: var(--text);
	font: 14px var(--font);
	outline: 0
}

.login-form input[type=password]:focus,
.login-form input[type=text]:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent)
}

.login-mfa-fields {
	display: contents
}

.login-enrollment {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface-raised);
	font-size: 12px;
	line-height: 1.45
}

.login-enrollment p {
	margin: 5px 0 8px;
	color: var(--muted)
}

.login-enrollment code {
	display: block;
	padding: 7px;
	border-radius: 4px;
	background: var(--bg);
	overflow-wrap: anywhere;
	user-select: all
}

.login-persistent-option {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important
}

.login-form button[type=submit] {
	width: 100%;
	margin-top: 8px;
	padding: 11px 18px;
	border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-deep));
	border-radius: 6px;
	background: var(--accent);
	color: #fff;
	font: 650 14px var(--font);
	cursor: pointer
}

.login-form button[type=submit]:disabled {
	opacity: .65;
	cursor: wait
}

.login-info {
	display: none
}

.login-info h2 {
	margin: 0;
	font-size: 18px
}

.login-info p {
	margin: 0;
	color: var(--muted);
	line-height: 1.45
}

.login-warning {
	padding-top: 10px;
	border-top: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
	font-size: 12px
}

.auth-status[data-state=ok] {
	color: var(--accent-ok)
}

.auth-status[data-state=err] {
	color: var(--accent-err)
}

.auth-status[data-state=pending] {
	color: var(--accent)
}

@media (max-width:720px) {
	.login-page {
		padding: 18px
	}
}

.auth-status {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4
}

.page-form {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 0
}

.form-section {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.form-group label {
	font-weight: 500;
	color: var(--muted);
	letter-spacing: .02em
}

.form-group input,
.form-group select,
.form-group textarea {
	padding: 7px 10px;
	background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-sunken);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font);
	font-size: 13px;
	outline: 0;
	transition: border-color .12s, box-shadow .12s
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--border-focus);
	box-shadow: var(--bevel-sunken), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)
}

.daemon-page .status-banner {
	margin-bottom: 10px
}

.daemon-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.65fr);
	gap: 14px;
	align-items: start
}

.daemon-side {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.daemon-settings-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px
}

.daemon-group {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised);
	padding: 12px;
	min-width: 0
}

.daemon-group h2 {
	font-size: 14px;
	font-weight: 650;
	letter-spacing: 0;
	margin-bottom: 9px
}

.daemon-toggle-list {
	display: flex;
	flex-direction: column;
	gap: 7px
}

.daemon-toggle {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 9px;
	align-items: center;
	cursor: pointer
}

.daemon-toggle input {
	position: absolute;
	opacity: 0;
	pointer-events: none
}

.daemon-toggle-ui {
	width: 34px;
	height: 19px;
	border: 1px solid var(--border-deep);
	border-radius: 999px;
	background: linear-gradient(180deg, var(--surface-bot), var(--bg));
	box-shadow: var(--bevel-sunken);
	position: relative;
	transition: background .12s, box-shadow .12s
}

.daemon-toggle-ui::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	left: 3px;
	top: 2px;
	border-radius: 50%;
	background: var(--muted);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	transition: transform .12s, background .12s
}

.daemon-toggle input:checked+.daemon-toggle-ui {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ok) 36%, var(--surface-top)), color-mix(in srgb, var(--accent-ok) 18%, var(--surface-bot)));
	box-shadow: var(--bevel-raised)
}

.daemon-toggle input:checked+.daemon-toggle-ui::after {
	transform: translateX(14px);
	background: var(--text)
}

.daemon-toggle strong {
	display: block;
	font-size: 12.75px;
	font-weight: 600;
	line-height: 1.2
}

.daemon-toggle small {
	display: block;
	color: var(--muted);
	margin-top: 2px
}

.daemon-field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px
}

.daemon-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0
}

.daemon-field span {
	color: var(--muted);
	font-size: 11.25px
}

.daemon-field input,
.daemon-field select {
	width: 100%;
	min-width: 0;
	background: linear-gradient(180deg, var(--surface-bot), var(--bg));
	color: var(--text);
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	box-shadow: var(--bevel-sunken);
	padding: 6px 8px;
	font: inherit;
	font-size: 12px
}

.daemon-runtime-list {
	display: flex;
	flex-direction: column
}

.daemon-runtime-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 11px;
	border-bottom: 1px solid var(--border-deep)
}

.daemon-runtime-item:last-child {
	border-bottom: 0
}

.daemon-runtime-item.empty {
	color: var(--muted);
	font-size: 12px
}

.daemon-runtime-item strong {
	display: block;
	font-size: 12.5px
}

.daemon-runtime-item span {
	color: var(--muted);
	font-size: 11.5px;
	overflow-wrap: anywhere
}

.daemon-status {
	flex-shrink: 0;
	color: var(--muted);
	border: 1px solid var(--border-deep);
	border-radius: 999px;
	padding: 2px 8px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised)
}

.daemon-status[data-state=running] {
	color: var(--accent-ok)
}

.daemon-status[data-state=failed],
.daemon-status[data-state=missing] {
	color: var(--accent-err)
}

.daemon-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap
}

.dictionary-page .status-banner {
	margin-bottom: 10px
}

.dictionary-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
	gap: 14px;
	align-items: start
}

.dictionary-side {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.dictionary-toolbar {
	display: grid;
	grid-template-columns: minmax(120px, 180px) minmax(180px, 1fr) auto;
	gap: 10px;
	align-items: end;
	margin-bottom: 10px
}

.dictionary-search input[type=search] {
	width: 100%;
	min-width: 0;
	background: linear-gradient(180deg, var(--surface-bot), var(--bg));
	color: var(--text);
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	box-shadow: var(--bevel-sunken);
	padding: 6px 8px;
	font: inherit;
	font-size: 12px
}

.dictionary-table-box {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	box-shadow: var(--bevel-sunken);
	overflow: auto;
	max-height: calc(100vh - 260px);
	background: linear-gradient(180deg, var(--surface-bot), var(--bg))
}

.dictionary-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 12px
}

.dictionary-table td,
.dictionary-table th {
	border-bottom: 1px solid var(--border-deep);
	padding: 6px;
	vertical-align: middle
}

.dictionary-table th {
	color: var(--muted);
	text-align: left;
	font-weight: 650;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	position: sticky;
	top: 0;
	z-index: 1
}

.dictionary-table td:last-child,
.dictionary-table th:last-child {
	width: 42px;
	text-align: center
}

.dictionary-table input {
	width: 100%;
	min-width: 0;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	color: var(--text);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 6px 7px;
	font: inherit;
	font-size: 12px;
	outline: 0
}

.dictionary-table input:focus {
	border-color: var(--border-focus);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent)
}

.dictionary-empty {
	color: var(--muted)
}

.dictionary-group-actions {
	display: grid;
	gap: 8px
}

.dictionary-raw-editor {
	width: 100%;
	min-height: 240px;
	resize: vertical;
	background: linear-gradient(180deg, var(--surface-bot), var(--bg));
	color: var(--text);
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	box-shadow: var(--bevel-sunken);
	padding: 8px;
	font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
	font-size: 11.5px;
	line-height: 1.45;
	outline: 0
}

.dictionary-raw-editor:focus {
	border-color: var(--border-focus);
	box-shadow: var(--bevel-sunken), 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent)
}

@media (max-width:980px) {

	.dictionary-layout,
	.dictionary-toolbar {
		grid-template-columns: 1fr
	}

	.dictionary-table-box {
		max-height: none
	}
}

.compact-code {
	max-height: 92px;
	min-height: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere
}

.form-hint {
	font-size: 11.5px;
	color: var(--muted)
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.form-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 4px
}

.check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer
}

.check-row input[type=checkbox] {
	width: 14px;
	height: 14px;
	accent-color: var(--accent);
	cursor: pointer;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4))
}

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.radio-group label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer
}

.radio-group input[type=radio] {
	accent-color: var(--accent);
	cursor: pointer;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4))
}

.status-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-deep);
	min-height: 38px
}

.status-banner.ok {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ok) 22%, var(--surface-top)), color-mix(in srgb, var(--accent-ok) 10%, var(--surface-bot)));
	border-color: var(--border-deep);
	color: var(--accent-ok);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-ok) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-ok-glow) 50%, transparent), 0 0 8px color-mix(in srgb, var(--accent-ok) 35%, transparent)
}

.status-banner.err {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-err) 22%, var(--surface-top)), color-mix(in srgb, var(--accent-err) 10%, var(--surface-bot)));
	border-color: var(--border-deep);
	color: var(--accent-err);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-err) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-err-glow) 50%, transparent), 0 0 8px color-mix(in srgb, var(--accent-err) 35%, transparent)
}

.status-banner.warn {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-warn) 22%, var(--surface-top)), color-mix(in srgb, var(--accent-warn) 10%, var(--surface-bot)));
	border-color: var(--border-deep);
	color: var(--accent-warn);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-warn) 50%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-warn-glow) 50%, transparent), 0 0 8px color-mix(in srgb, var(--accent-warn) 35%, transparent)
}

.file-tabs {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 8px 10px 0;
	border-bottom: 1px solid var(--border-deep);
	background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bot));
	box-shadow: inset 0 -1px 0 var(--border-light);
	overflow-x: auto;
	flex-shrink: 0
}

.file-tab {
	padding: 6px 14px;
	font-size: 12.5px;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	cursor: pointer;
	color: var(--muted);
	border: 1px solid transparent;
	border-bottom: none;
	white-space: nowrap;
	transition: color .1s, background .1s, box-shadow .1s
}

.file-tab.active {
	color: var(--text);
	background: linear-gradient(180deg, var(--surface-top), var(--surface));
	border-color: var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), inset 0 -1px 0 transparent, 0 1px 2px rgba(0, 0, 0, .3)
}

.file-tab-overflow-btn {
	margin-left: auto;
	padding: 4px 10px;
	font-size: 12px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap
}

.tab-menu {
	position: absolute;
	background: linear-gradient(180deg, var(--surface-top), var(--surface-bot));
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), 0 6px 20px rgba(0, 0, 0, .6);
	border-radius: var(--radius-sm);
	padding: 4px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 180px
}

.tab-menu-item {
	padding: 6px 10px;
	font-size: 12.5px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--muted)
}

.tab-menu-item:hover {
	color: var(--text);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised)
}

.same-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 20px;
	align-items: start
}

.upload-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px;
	border: 2px dashed var(--border);
	border-radius: var(--radius);
	background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised-top) 60%, var(--bg)), color-mix(in srgb, var(--surface-raised-bot) 60%, var(--bg)));
	box-shadow: var(--bevel-sunken);
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
	text-align: center
}

.upload-area.drag-over,
.upload-area:hover {
	border-color: var(--accent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--surface-raised-top)), color-mix(in srgb, var(--accent) 5%, var(--surface-raised-bot)));
	box-shadow: var(--bevel-sunken), 0 0 12px color-mix(in srgb, var(--accent-glow) 30%, transparent)
}

.upload-area-text {
	font-size: 12.5px;
	color: var(--muted)
}

.same-preview {
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	overflow: hidden
}

.preview-btn {
	width: 100%;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: 0 0;
	border: none;
	border-top: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light);
	color: var(--muted);
	font-family: var(--font);
	font-size: 12px;
	cursor: pointer;
	transition: background .1s, color .1s
}

.preview-btn:first-child {
	border-top: none;
	box-shadow: none
}

.preview-btn:hover {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	color: var(--text)
}

.preview-btn:active {
	background: linear-gradient(180deg, var(--surface-raised-bot), var(--surface-raised-top));
	box-shadow: var(--bevel-press)
}

.wx-doc-page {
	min-height: 100dvh;
	height: auto;
	overflow-y: auto;
	padding: 0 0 80px;
	line-height: 1.6
}

.wx-doc-page a {
	color: var(--accent);
	text-decoration: none
}

.wx-doc-page a:hover {
	text-decoration: underline
}

.wx-doc-page code,
.wx-doc-page pre {
	font-family: var(--mono-font)
}

.wx-doc-page .topbar {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: flex-start;
	padding: 14px 32px;
	background: linear-gradient(180deg, var(--surface-top), var(--surface-bot));
	box-shadow: inset 0 -1px 0 var(--border-light), 0 2px 6px rgba(0, 0, 0, .35)
}

.wx-doc-page .topbar h1 {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.2px
}

.wx-doc-page .topbar .back {
	font-size: 12px;
	color: var(--muted)
}

.wx-doc-page .topbar .back:hover {
	color: var(--text)
}

.wx-doc-page .wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 32px 24px 0
}

.wx-doc-page .hero {
	margin-bottom: 32px
}

.wx-doc-page .hero h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.4px;
	margin-bottom: 6px;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .4)
}

.wx-doc-page .hero p {
	font-size: 13px;
	color: var(--muted)
}

.wx-doc-page .section {
	margin-bottom: 36px
}

.wx-doc-page .section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 12px
}

.wx-doc-page .card {
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	overflow: hidden
}

.wx-doc-page table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px
}

.wx-doc-page th {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light)
}

.wx-doc-page td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: top
}

.wx-doc-page tr:last-child td {
	border-bottom: none
}

.wx-doc-page td code {
	display: inline-block;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--text);
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised)
}

.wx-doc-page .wx-doc-muted-cell {
	color: var(--muted)
}

.wx-doc-page .endpoint-block {
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 12px
}

.wx-doc-page .endpoint-hd {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light);
	flex-wrap: wrap
}

.wx-doc-page .method {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ok) 28%, var(--surface-top)), color-mix(in srgb, var(--accent-ok) 12%, var(--surface-bot)));
	color: var(--accent-ok);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-ok) 45%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-ok-glow) 45%, transparent), 0 0 5px color-mix(in srgb, var(--accent-ok) 35%, transparent)
}

.wx-doc-page .method.post {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, var(--surface-top)), color-mix(in srgb, var(--accent) 12%, var(--surface-bot)));
	color: var(--accent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 45%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--accent-bot) 45%, transparent), 0 0 5px color-mix(in srgb, var(--accent-glow) 35%, transparent)
}

.wx-doc-page .endpoint-path {
	font-family: var(--mono-font);
	font-size: 13px;
	color: var(--text)
}

.wx-doc-page .endpoint-desc {
	font-size: 12px;
	color: var(--muted);
	margin-left: auto
}

.wx-doc-page .param-optional,
.wx-doc-page .param-required {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	border: 1px solid var(--border-deep)
}

.wx-doc-page .param-required {
	color: var(--accent-warn);
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-warn) 28%, var(--surface-top)), color-mix(in srgb, var(--accent-warn) 10%, var(--surface-bot)));
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 40%, transparent), 0 0 4px color-mix(in srgb, var(--accent-warn-glow) 30%, transparent)
}

.wx-doc-page .param-optional {
	color: var(--muted);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised)
}

.wx-doc-page .try-section {
	padding: 18px
}

.wx-doc-page .form-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px
}

.wx-doc-page .form-row label {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	text-align: right
}

.wx-doc-page .form-row.top {
	align-items: flex-start;
	padding-top: 2px
}

.wx-doc-page .input-field {
	width: 100%;
	background: linear-gradient(180deg, var(--bg-top), var(--bg-bot))
}

.wx-doc-page .pkg-chips {
	min-height: 28px
}

.accounts-page {
	padding: 10px 14px 34px
}

.accounts-layout {
	display: grid;
	grid-template-columns: minmax(440px, .95fr) minmax(480px, 1.05fr);
	gap: 10px;
	align-items: start
}

.accounts-directory-tools {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px
}

.accounts-directory-tools input,
.accounts-policy-form input,
.accounts-policy-form textarea,
.accounts-password-form input {
	width: 100%;
	min-height: 34px;
	padding: 6px 8px;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	color: var(--text)
}

.accounts-table-wrap {
	max-height: calc(100vh - 255px);
	overflow: auto
}

.accounts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px
}

.accounts-table th,
.accounts-table td {
	padding: 8px 9px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	vertical-align: middle
}

.accounts-table tbody tr {
	cursor: pointer
}

.accounts-table tbody tr:hover,
.accounts-table tbody tr.active {
	background: color-mix(in srgb, var(--accent) 12%, transparent)
}

.accounts-table a {
	color: var(--accent)
}

.accounts-policy-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px
}

.accounts-username-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: end
}

.accounts-username-row #accountRenameButton {
	width: auto;
	min-width: 76px;
	height: 34px;
	min-height: 34px;
	padding: 6px 12px;
	white-space: nowrap
}

.accounts-admin-toggle {
	justify-self: start
}

.accounts-field-help {
	margin: -4px 0 0 22px;
	color: var(--muted);
	font-size: 11px
}

.accounts-policy-section {
	padding-top: 10px;
	border-top: 1px solid var(--border)
}

.accounts-policy-section summary {
	cursor: pointer;
	font-weight: 700
}

.accounts-global-security {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px
}

.accounts-policy-section h3,
.accounts-danger-zone h3 {
	margin: 0 0 10px;
	font-size: 13px
}

.accounts-field-label {
	margin: 8px 0 6px;
	font-size: 12px;
	font-weight: 650
}

.accounts-originators {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 10px;
	font-size: 12px
}

.accounts-originators label,
.accounts-policy-form .check-row {
	display: flex;
	align-items: center;
	gap: 7px
}

.accounts-originators input,
.accounts-policy-form .check-row input {
	width: auto;
	min-height: auto
}

.accounts-national-toggle {
	margin-bottom: 10px;
	font-size: 12px
}

.accounts-policy-form .accounts-national-toggle input[type="checkbox"] {
	width: 14px;
	height: 14px;
	min-height: 14px;
	margin: 0;
	flex: 0 0 14px
}

.accounts-event-code-picker {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 8px
}

.accounts-event-code-picker button {
	min-height: 34px;
	padding: 6px 12px
}

.accounts-blocked-event-list {
	display: grid;
	gap: 2px;
	margin: 8px 0 12px
}

.accounts-blocked-event-row {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px solid var(--border);
	font-size: 11px
}

.accounts-blocked-event-row span {
	color: var(--muted)
}

.accounts-blocked-event-row button {
	min-height: 26px;
	padding: 3px 8px
}

.accounts-security-state {
	display: grid;
	gap: 3px;
	color: var(--muted);
	font-size: 11px
}

.accounts-security-state span {
	padding: 0;
	border: 0;
	border-radius: 0
}

.accounts-security-state span::before {
	content: "• ";
	color: var(--accent)
}

.accounts-save-actions {
	display: flex;
	align-items: center;
	gap: 10px
}

.account-save-feedback {
	font-size: 12px;
	color: var(--muted)
}

.account-save-feedback[data-state="ok"] {
	color: var(--accent-ok)
}

.account-save-feedback[data-state="err"] {
	color: var(--accent-err)
}

.accounts-session-list {
	display: grid;
	gap: 6px;
	margin-bottom: 8px
}

.accounts-session-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 11px
}

.accounts-session-item p {
	margin: 2px 0;
	color: var(--muted)
}

.accounts-danger-zone {
	padding: 12px;
	border: 1px solid color-mix(in srgb, var(--accent-err) 55%, var(--border));
	border-radius: var(--radius-sm)
}

.accounts-password-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 10px;
	align-items: end
}

@media (max-width: 1080px) {
	.accounts-layout,
	.accounts-password-form,
	.accounts-global-security {
		grid-template-columns: 1fr
	}
}

@media (max-width: 700px) {
	.accounts-policy-form,
	.accounts-originators,
	.accounts-directory-tools {
		grid-template-columns: 1fr
	}

	.accounts-username-row {
		grid-template-columns: minmax(0, 1fr) auto
	}
}

@media (max-width: 820px) {
	.pkg-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
}

@media (max-width: 520px) {
	.pkg-chips {
		grid-template-columns: 1fr
	}
}

.wx-doc-page .try-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap
}

.wx-doc-page .try-status {
	font-size: 12px;
	color: var(--muted)
}

.wx-doc-page .try-status.err {
	color: var(--accent-err)
}

.wx-doc-page .try-status.ok {
	color: var(--accent-ok)
}

.wx-doc-page audio {
	width: 100%;
	margin-top: 12px;
	display: none
}

.wx-doc-page .wx-doc-output {
	display: none;
	margin-top: 12px;
	padding: 14px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-sunken);
	border-radius: var(--radius);
	font-size: 12px;
	line-height: 1.7;
	overflow-x: auto;
	white-space: pre-wrap;
	color: var(--text)
}

.wx-doc-page .curl-block {
	padding: 14px 16px;
	background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
	border-top: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light);
	overflow-x: auto
}

.wx-doc-page .curl-block pre {
	font-size: 11.5px;
	color: var(--text);
	line-height: 1.65
}

.wx-panel-page .wx-panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
	gap: 16px
}

.wx-panel-page .wx-panel-reference-stack,
.wx-panel-page .wx-panel-stack {
	display: grid;
	gap: 16px;
	min-width: 0
}

.wx-panel-page .two-col>*,
.wx-panel-page .wx-panel-grid>* {
	min-width: 0
}

.wx-panel-page table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px
}

.wx-panel-page th {
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light)
}

.wx-panel-page td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: top
}

.wx-panel-page tr:last-child td {
	border-bottom: none
}

.wx-panel-page td code {
	display: inline-block;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--text);
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised)
}

.wx-panel-page .wx-doc-muted-cell {
	color: var(--muted)
}

.wx-panel-page .endpoint-block {
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 var(--border-light), var(--card-shadow);
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(180deg, var(--surface-top) 0, var(--surface) 50%, var(--surface-bot) 100%)
}

.wx-panel-page .endpoint-hd {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light);
	flex-wrap: wrap
}

.wx-panel-page .method {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent-ok) 28%, var(--surface-top)), color-mix(in srgb, var(--accent-ok) 12%, var(--surface-bot)));
	color: var(--accent-ok);
	border: 1px solid var(--border-deep);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-ok) 45%, transparent), 0 0 5px color-mix(in srgb, var(--accent-ok) 35%, transparent)
}

.wx-panel-page .method.post {
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, var(--surface-top)), color-mix(in srgb, var(--accent) 12%, var(--surface-bot)));
	color: var(--accent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-top) 45%, transparent), 0 0 5px color-mix(in srgb, var(--accent-glow) 35%, transparent)
}

.wx-panel-page .endpoint-path {
	font-family: var(--mono-font);
	font-size: 13px;
	color: var(--text);
	overflow-wrap: anywhere
}

.wx-panel-page .endpoint-desc {
	font-size: 12px;
	color: var(--muted);
	margin-left: auto
}

.wx-panel-page .param-optional {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	color: var(--muted);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised)
}

.wx-panel-page .wx-panel-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px
}

.wx-panel-page .wx-panel-form-grid .form-group {
	margin-bottom: 0
}

.wx-panel-page .wx-panel-format-group {
	grid-column: span 2
}

.wx-panel-page .wx-panel-chip-group {
	margin-top: 14px;
	margin-bottom: 0
}

.wx-panel-page .wx-panel-chip-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted)
}

.wx-panel-page .wx-panel-chip-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: wrap
}

.wx-panel-page .wx-panel-chip-toolbar label {
	margin-bottom: 0
}

.wx-panel-page .wx-panel-chip-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

.wx-panel-page .wx-panel-chip-actions .btn-ghost {
	padding: 5px 10px;
	font-size: 12px
}

.wx-panel-page .wx-panel-hint {
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted)
}

.wx-panel-page .wx-panel-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
	justify-content: flex-start
}

.wx-panel-page .try-status {
	font-size: 12px;
	color: var(--muted)
}

.wx-panel-page .try-status.err {
	color: var(--accent-err)
}

.wx-panel-page .try-status.ok {
	color: var(--accent-ok)
}

.wx-panel-page .try-status.warn {
	color: var(--accent-warn)
}

.wx-panel-page .wx-panel-audio {
	width: 100%;
	margin-top: 14px
}

.wx-panel-page .wx-panel-output {
	margin-top: 14px;
	max-height: 420px;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere
}

.wx-panel-page .code-view {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere
}

.wx-panel-page .wx-panel-preview-body {
	display: grid;
	gap: 12px
}

.wx-panel-page .wx-panel-mini-grid,
.wx-panel-page .wx-panel-response-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px
}

.wx-panel-page .wx-panel-mini-card,
.wx-panel-page .wx-panel-response-card {
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-raised);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	padding: 10px 12px
}

.wx-panel-page .wx-panel-label,
.wx-panel-page .wx-panel-mini-card p,
.wx-panel-page .wx-panel-response-card p {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: 6px
}

.wx-panel-page .wx-panel-mini-card strong,
.wx-panel-page .wx-panel-response-card strong {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	font-family: var(--mono-font);
	word-break: break-word
}

.wx-panel-page .wx-panel-response-card.is-empty {
	grid-column: 1/-1
}

.wx-panel-page .wx-panel-reference-grid {
	align-items: start
}

.wx-panel-page .wx-panel-reference-grid .section-block {
	margin-top: 0
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0
}

@media (max-width:980px) {
	:root {
		--sidebar-w: 220px
	}

	.metric-strip {
		display: none
	}

	.feed-grid,
	.ops-grid,
	.overview-grid,
	.same-grid,
	.two-col {
		grid-template-columns: 1fr
	}

	.summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
}

@media (max-width:1240px) {
	.wx-panel-page .wx-panel-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:680px) {
	.app-shell {
		flex-direction: column
	}

	.sidebar {
		width: 100%;
		height: auto;
		border-right: none;
		border-bottom: 1px solid var(--border-deep);
		box-shadow: inset 0 -1px 0 var(--border-light), 0 2px 6px rgba(0, 0, 0, .45)
	}

	.sidebar-feeds-section {
		display: none
	}

	.main-wrap {
		height: calc(100dvh - 140px)
	}

	.dashboard {
		padding: 0 16px 40px
	}

	.topbar {
		padding: 14px 16px 12px
	}

	.summary-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:600px) {
	.wx-doc-page .wrap {
		padding: 20px 14px 0
	}

	.wx-doc-page .form-row {
		grid-template-columns: 1fr
	}

	.wx-doc-page .form-row label {
		text-align: left
	}

	.wx-panel-page .wx-panel-form-grid,
	.wx-panel-page .wx-panel-grid,
	.wx-panel-page .wx-panel-mini-grid,
	.wx-panel-page .wx-panel-response-grid {
		grid-template-columns: 1fr
	}

	.wx-panel-page .wx-panel-format-group {
		grid-column: auto
	}

	.summary-grid {
		grid-template-columns: 1fr
	}
}

.view {
	display: none
}

.view.active {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0
}

.view.active>.dashboard {
	flex: 1
}

.sp-hidden {
	display: none !important
}

.sp-hd-icon {
	color: var(--muted);
	flex-shrink: 0
}

.sp-inline-code {
	font-family: var(--mono-font);
	font-size: .88em
}

.sp-row-mt {
	margin-top: 8px
}

.sp-mt-sm {
	margin-top: 4px
}

.sp-mt-xs {
	margin-top: 3px
}

.sp-mb-sm {
	margin-bottom: 8px
}

.sp-hint {
	color: var(--muted);
	margin: 0
}

.sp-hint-accent {
	font-size: 12.5px;
	color: var(--accent);
	margin: 2px 0 0;
	font-style: italic
}

.sp-status-text {
	color: var(--muted);
	margin: 0
}

.sp-status-text.ok {
	color: var(--accent-ok)
}

.sp-status-text.err {
	color: var(--accent-err)
}

.sp-file-label {
	cursor: pointer
}

.sp-upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none
}

.same-top-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px
}

@media (max-width:980px) {
	.same-top-grid {
		grid-template-columns: 1fr
	}
}

.same-top-grid .section-block {
	margin-top: 0
}

.sp-rail-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px
}

.sp-rail-actions .btn-action,
.sp-rail-actions .btn-danger,
.sp-rail-actions .btn-ghost {
	width: 100%
}

.sp-preview-player {
	width: 100%;
	margin-top: 6px
}

.sp-template-head-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 8px;
	margin-bottom: 8px
}

.sp-tpl-field-group {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.sp-tpl-field-label {
	color: var(--muted);
	letter-spacing: .04em;
	text-transform: uppercase
}

.sp-tpl-file-input,
.sp-tpl-text-input {
	width: 100%;
	background: 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font)
}

.sp-tpl-checkbox-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0
}

.sp-tpl-checkbox-row input[type=checkbox] {
	accent-color: var(--accent)
}

.sp-tpl-meta-stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 8px
}

.sp-tpl-lang-row .sp-tpl-lang-file-group {
	max-width: 220px;
	grid-column: 1/-1;
	max-width: none
}

.sp-tpl-lang-file-group .sp-tpl-file-input {
	font-family: var(--mono-font)
}

.sp-upload-icon {
	color: var(--muted);
	margin-bottom: 3px
}

.sp-upload-hint {
	font-size: 11px
}

.sp-upload-filename {
	font-weight: 500;
	color: var(--text)
}

.same-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 12px;
	align-items: start
}

@media (max-width:900px) {
	.same-layout {
		grid-template-columns: 1fr
	}
}

.same-main {
	display: flex;
	flex-direction: column
}

.same-main .section-block:first-child {
	margin-top: 0
}

.same-main .section-body {
	padding: 10px 12px
}

.same-main .form-row {
	gap: 8px
}

.same-main .form-group input,
.same-main .form-group select,
.same-main .form-group textarea {
	padding: 5px 8px;
	font-size: 12.5px
}

.same-rail {
	position: sticky;
	top: 78px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.sp-rail {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden
}

.sp-rail-section {
	border-bottom: 1px solid var(--border-subtle)
}

.sp-rail-section:last-child {
	border-bottom: none
}

.sp-rail-label {
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 4px
}

.sp-header-preview {
	display: block;
	font-family: var(--mono-font);
	word-break: break-all;
	color: var(--text);
	margin: 0
}

.sp-tone-badge {
	display: inline-block;
	padding: 2px 9px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-family: var(--mono-font);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--accent);
	letter-spacing: .04em
}

.sp-rail-loc-hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px
}

.sp-loc-count {
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	padding: 1px 7px;
	border-radius: 999px;
	line-height: 1.6
}

.sp-rail-loc-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow-y: auto;
	scrollbar-width: thin
}

.sp-rl-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	padding: 2px 0
}

.sp-rl-name {
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.sp-rl-code {
	font-family: var(--mono-font);
	font-size: 10.5px;
	color: var(--muted);
	flex-shrink: 0
}

.sp-rail-tts-text {
	color: var(--text);
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical
}

.sp-rail-air {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.sp-air-btn {
	width: 100%;
	font-weight: 700;
	letter-spacing: .04em;
	border-radius: var(--radius);
	cursor: pointer;
	transition: opacity .15s, transform .1s
}

.sp-air-btn:active {
	transform: scale(.98)
}

.sp-status-banner:empty {
	display: none
}

.sp-tone-carousel {
	display: flex;
	gap: 4px;
	flex-wrap: wrap
}

.sp-tone-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color .15s, background .15s;
	color: var(--text)
}

.sp-tone-btn:hover {
	border-color: var(--border-focus);
	background: var(--surface-raised)
}

.sp-tone-btn.active {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, transparent)
}

.sp-tone-code {
	font-family: var(--mono-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em
}

.sp-tone-btn.active .sp-tone-code {
	color: var(--accent)
}

.sp-tone-desc {
	font-size: 10.5px;
	color: var(--muted);
	white-space: nowrap
}

.sp-check-picker {
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: 220px;
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 1px 0
}

.sp-check-picker input[type=checkbox] {
	accent-color: var(--accent)
}

.sp-picker-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background .1s;
	user-select: none
}

.sp-picker-item:hover {
	background: var(--surface-raised)
}

.sp-picker-main {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0
}

.sp-picker-name {
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.sp-picker-sub {
	font-size: 11px;
	color: var(--muted)
}

.sp-picker-code {
	font-family: var(--mono-font)
}

.sp-picker-badge {
	font-size: 10.5px;
	color: var(--muted);
	background: var(--surface-raised);
	border: 1px solid var(--border-subtle);
	border-radius: 999px;
	padding: 1px 7px;
	white-space: nowrap;
	flex-shrink: 0
}

.sp-picker-empty {
	color: var(--muted);
	padding: 6px 4px;
	margin: 0
}

.sp-picker-custom {
	background: color-mix(in srgb, var(--accent) 4%, transparent)
}

.sp-custom-tag {
	font-size: 10px;
	color: var(--accent);
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-left: 4px
}

.sp-remove-custom {
	background: 0 0;
	border: none;
	color: var(--muted);
	cursor: pointer;
	font-size: 12px;
	padding: 2px 4px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	line-height: 1;
	transition: color .15s
}

.sp-remove-custom:hover {
	color: var(--accent-err)
}

.sp-custom-loc-row {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 5px 8px 4px;
	flex-wrap: wrap
}

.sp-custom-loc-input {
	width: 160px;
	font-family: var(--mono-font)
}

.sp-custom-loc-name {
	flex: 1;
	min-width: 120px
}

.sp-audio-tabs {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	margin-bottom: 8px
}

.sp-audio-tab {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	color: var(--muted);
	transition: border-color .15s, color .15s, background .15s
}

.sp-audio-tab:hover {
	color: var(--text);
	border-color: var(--border-focus)
}

.sp-audio-tab.active {
	border-color: var(--accent);
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, transparent);
	font-weight: 600
}

.sp-audio-panel {
	animation: .15s sp-fade-in
}

.sp-prepend-row {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 8px;
	color: var(--text)
}

.sp-prepend-row input[type=checkbox] {
	accent-color: var(--accent)
}

.sp-prepend-row span {
	font-size: 12.5px;
	font-weight: 500
}

@keyframes sp-fade-in {
	from {
		opacity: 0;
		transform: translateY(3px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.sp-ref-body {
	max-height: 340px;
	overflow-y: auto
}

.sp-ref-table {
	width: 100%;
	border-collapse: collapse
}

.sp-ref-th {
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 6px 12px 6px 0;
	border-bottom: 1px solid var(--border-subtle);
	text-align: left
}

.sp-ref-td {
	color: var(--text);
	padding: 5px 12px 5px 0;
	border-bottom: 1px solid var(--border-subtle);
	vertical-align: top
}

.sp-ref-code {
	font-family: var(--mono-font);
	font-weight: 600;
	color: var(--accent)
}

.sp-template-list {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.sp-tpl-block {
	margin-top: 0
}

.sp-tpl-hd {
	gap: 8px
}

.sp-tpl-code-input {
	width: 90px;
	font-weight: 700;
	font-family: var(--mono-font);
	background: 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text)
}

.sp-tpl-meta-pair {
	display: flex;
	gap: 8px;
	align-items: center
}

.sp-tpl-meta-label {
	font-size: 11.5px;
	font-weight: 400;
	color: var(--muted);
	white-space: nowrap
}

.sp-tpl-meta-input {
	width: 58px;
	background: 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--mono-font)
}

.sp-tpl-lang-row {
	align-items: start
}

.sp-tpl-lang-key-group {
	max-width: 160px
}

.sp-tpl-lang-text-group {
	flex: 1
}

.sp-tpl-lang-remove {
	align-self: end;
	flex-shrink: 0
}

.sp-tpl-lang-body {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.sp-tpl-empty {
	color: var(--muted);
	margin: 0
}

.sp-tpl-no-langs {
	color: var(--muted);
	margin: 0
}

.sp-tpl-remove-btn {
	color: var(--accent-err);
	font-size: 11.5px
}

.sp-broadcast-item {
	margin-bottom: 6px
}

.sp-broadcast-feed {
	font-size: .75rem;
	color: var(--muted)
}

.sp-broadcast-hdr {
	font-family: var(--mono-font);
	font-size: .77rem;
	word-break: break-all;
	margin: 0
}

.sp-config-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0;
	align-items: start
}

.sp-config-params {
	padding-right: 14px
}

.sp-config-tone {
	min-width: 172px;
	padding-left: 14px;
	border-left: 1px solid var(--border-subtle)
}

.sp-sublabel {
	display: block;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 5px;
	white-space: nowrap
}

.sp-config-tone .sp-tone-carousel {
	flex-direction: column;
	gap: 3px
}

.sp-config-tone .sp-tone-btn {
	flex-direction: row;
	min-width: unset;
	width: 100%;
	justify-content: flex-start;
	padding: 4px 8px;
	gap: 8px
}

.sp-feeds-locs-grid {
	display: grid;
	grid-template-columns: minmax(180px, 0.4fr) minmax(280px, 0.6fr);
	gap: 0
}

@media (max-width:860px) {
	.sp-feeds-locs-grid {
		grid-template-columns: 1fr
	}

	.sp-feeds-col {
		border-right: 0;
		border-bottom: 1px solid var(--border-subtle)
	}
}

.sp-feeds-col {
	border-right: 1px solid var(--border-subtle)
}

.sp-col-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 5px
}

.sp-col-actions {
	display: flex;
	gap: 3px;
	flex-wrap: wrap
}

.sp-col-actions .btn-action {
	padding: 2px 6px;
	font-size: 10.5px
}

.sp-tone-row {
	border-top: 1px solid var(--border-subtle)
}

.sp-tone-label {
	margin-bottom: 5px
}

.sp-check-picker {
	gap: 0
}

.sp-ex-item {
	display: flex;
	align-items: center;
	gap: 5px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
	overflow: hidden
}

.sp-ex-item:hover {
	background: var(--surface-raised)
}

.sp-ex-item input[type=checkbox] {
	flex-shrink: 0;
	accent-color: var(--accent)
}

.sp-ex-name {
	font-size: 12px;
	color: var(--text);
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis
}

.sp-ex-code {
	font-family: var(--mono-font);
	color: var(--muted);
	flex-shrink: 0
}

.sp-ex-item .sp-remove-custom {
	flex-shrink: 0;
	padding: 0 3px;
	font-size: 10px;
	line-height: 1;
	color: var(--accent-err);
	background: 0 0;
	border: none;
	cursor: pointer
}

.public-dashboard {
	gap: 14px;
	align-items: stretch
}

.public-home-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: none;
	margin-top: 0
}

.public-status-card {
	width: fit-content;
	max-width: 100%;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--surface) 92%, var(--bg));
	padding: 9px 10px 8px
}

.public-status-grid {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 8px
}

.public-status-item {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	gap: 5px;
	padding: 2px 0
}

.public-build-row b,
.public-status-item span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
	line-height: 1.1
}

.public-status-item strong {
	color: var(--text);
	font-size: 13.25px;
	font-weight: 650;
	overflow-wrap: anywhere
}

.public-status-item:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 12px;
	margin-left: 3px;
	background: var(--border-subtle)
}

.public-build-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-top: 5px;
	padding-top: 6px;
	border-top: 1px solid var(--border-subtle)
}

.public-build-row span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
	padding: 0;
	color: var(--text);
	font-family: var(--mono-font);
	font-size: 12px
}

.public-build-row em {
	font-style: normal;
	color: var(--text)
}

.public-about-body {
	width: fit-content;
	max-width: 100%;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--surface) 94%, var(--bg));
	padding: 9px 10px
}

.public-project-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: none
}

.public-project-strip {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--surface) 94%, var(--bg));
	padding: 9px 10px
}

.public-about-body p,
.public-project-strip p {
	max-width: 760px;
	margin: 0;
	color: var(--text);
	line-height: 1.45
}

.public-about-body p+p {
	margin-top: 10px
}

.public-project-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px
}

.public-oldweb-banner {
	display: block;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	overflow: hidden
}

.public-oldweb-banner img {
	display: block;
	width: 100%;
	max-width: none;
	min-width: 100%;
	height: auto
}

.text-link {
	color: var(--accent);
	font-weight: 650;
	text-decoration: none
}

.text-link:hover {
	text-decoration: underline
}

#publicFeedsGrid.feed-grid {
	grid-template-columns: 1fr
}

#publicAlertsSection,
#publicFeedsSection,
#publicListenSection {
	align-self: stretch;
	width: 100%
}

.public-feed-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	min-height: 62px
}

.public-feed-main {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0
}

.public-feed-controls,
.public-feed-overview {
	min-width: 0
}

.public-feed-overview {
	flex: 1 1 auto;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 12px
}

.public-feed-overview h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.public-feed-now {
	margin-top: 3px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.public-feed-controls {
	flex: 0 0 auto;
	border-left: 1px solid var(--border-deep);
	box-shadow: inset 1px 0 0 var(--border-light);
	padding: 8px 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--surface-raised-top) 82%, var(--bg)), color-mix(in srgb, var(--surface-raised-bot) 82%, var(--bg)))
}

.public-listen-field {
	display: grid;
	gap: 3px;
	min-width: 92px
}

.public-listen-field span {
	color: var(--muted);
	font-size: 11.5px;
	line-height: 1
}

.public-listen-field select {
	height: 28px;
	min-width: 92px;
	max-width: 118px;
	padding: 3px 26px 3px 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-deep);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised);
	color: var(--text);
	font-family: var(--font);
	font-size: 13px
}

.public-listen-field select:disabled {
	opacity: .5
}

.public-player-btn {
	min-height: 28px;
	padding: 5px 9px;
	gap: 5px
}

.public-volume {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 98px;
	color: var(--muted)
}

.public-volume input {
	width: 72px;
	accent-color: var(--accent)
}

.public-player-status {
	min-width: 96px;
	color: var(--muted);
	white-space: nowrap
}

.public-feed-audio {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	min-height: 34px
}

.public-feed-audio[hidden] {
	display: none !important
}

.public-listen-card {
	align-items: stretch;
	flex-direction: column;
	padding: 11px 12px;
	gap: 9px
}

.public-listen-title {
	min-width: 0
}

.public-listen-title h3 {
	color: var(--text);
	font-size: 16px;
	font-weight: 650
}

.public-listen-toolbar {
	display: flex;
	align-items: end;
	gap: 6px;
	flex-wrap: wrap
}

.public-listen-audio {
	display: block;
	width: 100%;
	min-height: 34px
}

.public-listen-audio-unavailable,
.public-listen-stream-unavailable {
	margin: 0;
	padding: 8px 9px;
	border: 1px dashed var(--border-subtle);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font-size: 12px
}

.public-listen-player-card {
	margin-bottom: 12px
}

.public-feed-map-layout {
	display: grid;
	grid-template-columns: minmax(500px, 1.05fr) minmax(450px, 1.25fr);
	gap: 12px;
	align-items: stretch
}

.public-location-card,
.public-map-card {
	min-width: 0;
	overflow: hidden;
	padding: 0
}

.public-feed-map-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-deep);
	box-shadow: inset 0 -1px 0 var(--border-light)
}

.public-feed-map-heading h3 {
	color: var(--text);
	font-size: 15px;
	font-weight: 650
}

.public-location-table-wrap {
	max-height: 562px;
	overflow: auto
}

.public-location-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
	font-variant-numeric: tabular-nums
}

.public-location-table th,
.public-location-table td {
	padding: 4px 5px;
	border-bottom: 1px solid color-mix(in srgb, var(--border-deep) 74%, transparent);
	text-align: left;
	vertical-align: top
}

.public-location-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface-raised-top);
	color: var(--muted);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase
}

.public-location-code-cell {
	min-width: 61px;
	font-variant-numeric: tabular-nums
}

.public-location-coordinate-cell {
	min-width: 125px;
	white-space: nowrap
}

.public-location-code-pair,
.public-location-coordinate {
	display: flex;
	align-items: center;
	width: max-content;
	max-width: 100%;
	min-height: 18px;
	gap: 2px;
	padding: 1px 2px 1px 4px;
	border: 1px solid color-mix(in srgb, var(--border-deep) 65%, transparent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--surface-raised-top) 78%, transparent);
	white-space: nowrap
}

.public-location-code-pair + .public-location-code-pair {
	margin-top: 2px
}

.public-location-code-value,
.public-location-coordinate-value {
	color: var(--text);
	font-family: var(--font-mono, ui-monospace, "Cascadia Code", monospace);
	font-size: 10px
}

.public-location-copy-button {
	width: 15px;
	height: 15px;
	margin-left: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: var(--text);
	font-family: var(--font-mono, ui-monospace, "Cascadia Code", monospace);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	cursor: copy;
	opacity: 0;
	pointer-events: none;
	transition: opacity 100ms ease, background-color 100ms ease
}

.public-location-code-pair:hover .public-location-copy-button,
.public-location-code-pair:focus-within .public-location-copy-button,
.public-location-coordinate:hover .public-location-copy-button,
.public-location-coordinate:focus-within .public-location-copy-button {
	opacity: 1;
	pointer-events: auto
}

.public-location-copy-button:hover,
.public-location-copy-button:focus-visible {
	background: color-mix(in srgb, var(--accent) 35%, transparent);
	outline: 1px solid var(--accent);
	outline-offset: 1px
}

.public-location-copy-button[data-copy-state="copied"] {
	background: color-mix(in srgb, #16a34a 36%, transparent);
	color: #14532d
}

.public-location-copy-button[data-copy-state="failed"] {
	background: color-mix(in srgb, #dc2626 36%, transparent);
	color: #7f1d1d
}

@media (hover: none) {
	.public-location-copy-button {
		opacity: 1;
		pointer-events: auto
	}
}

.public-location-table tbody tr {
	transition: background-color 100ms ease, box-shadow 100ms ease
}

.public-location-table tbody tr.map-hover {
	background: color-mix(in srgb, #f97316 20%, var(--surface));
	box-shadow: inset 4px 0 #f97316
}

.public-location-empty {
	color: var(--muted);
	font-style: italic
}

.public-map-toolbar {
	justify-content: flex-end;
	min-height: 36px
}

.public-map-toggles {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px
}

.public-map-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--text);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	user-select: none
}

.public-map-toggle input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: #dc2626
}

.public-map-toggle input:disabled {
	cursor: wait;
	opacity: .55
}

.public-map-status {
	margin: 8px 10px 0;
	padding: 6px 9px;
	font-size: 11.5px
}

.public-feed-map {
	width: 100%;
	height: 508px;
	margin-top: 8px;
	background: #071018
}

.public-feed-map .maplibregl-ctrl-attrib {
	background: rgba(6, 13, 24, .88);
	color: #cbd5e1;
	font-size: 10px
}

.public-feed-map .maplibregl-ctrl-attrib a {
	color: #7dd3fc
}

.public-feed-map .maplibregl-ctrl-group {
	border: 1px solid rgba(148, 163, 184, .35);
	background: #101827;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .45)
}

.public-feed-map .maplibregl-ctrl-group button {
	background-color: #101827
}

.public-feed-map .maplibregl-ctrl-group button + button {
	border-top-color: rgba(148, 163, 184, .25)
}

.public-feed-map .maplibregl-ctrl-icon {
	filter: invert(92%) sepia(8%) saturate(355%) hue-rotate(179deg) brightness(102%) contrast(91%)
}

.public-feed-map .haze-basemap-control {
	display: flex;
	overflow: hidden
}

.public-feed-map .haze-basemap-control button {
	width: auto;
	min-width: 54px;
	height: 28px;
	padding: 0 8px;
	border: 0;
	border-right: 1px solid rgba(148, 163, 184, .25);
	color: #cbd5e1;
	font-family: var(--font);
	font-size: 10.5px;
	font-weight: 650;
	line-height: 28px
}

.public-feed-map .haze-basemap-control button:last-child {
	border-right: 0
}

.public-feed-map .haze-basemap-control button[data-active="true"] {
	background: #0369a1;
	color: #f8fafc
}

.public-location-popup .maplibregl-popup-content {
	display: block;
	min-width: 190px;
	max-width: 320px;
	max-height: 260px;
	overflow: auto;
	padding: 8px 10px;
	border: 1px solid rgba(125, 211, 252, .38);
	border-radius: 4px;
	background: rgba(7, 16, 24, .96);
	box-shadow: 0 5px 18px rgba(0, 0, 0, .55);
	color: #f8fafc;
	font-family: var(--font);
	font-size: 12px
}

.public-location-popup .maplibregl-popup-tip {
	border-top-color: rgba(7, 16, 24, .96) !important;
	border-bottom-color: rgba(7, 16, 24, .96) !important
}

.public-location-popup strong {
	display: block;
	margin-bottom: 5px;
	font-size: 12.5px
}

.public-location-popup dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 7px;
	margin: 0;
	font-size: 10.5px;
	line-height: 1.35
}

.public-location-popup dt {
	color: #94a3b8;
	font-weight: 650
}

.public-location-popup dd {
	min-width: 0;
	margin: 0;
	color: #e2e8f0;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere
}

@media (max-width:1100px) {
	.public-feed-map-layout {
		grid-template-columns: 1fr
	}

	.public-location-table-wrap {
		max-height: 346px
	}
}

@media (max-width:620px) {
	.public-feed-map-heading {
		align-items: flex-start;
		flex-direction: column
	}

	.public-map-toggles {
		justify-content: flex-start
	}

	.public-map-toggle {
		min-height: 28px
	}

	.public-feed-map {
		height: 421px
	}

	.public-location-table th,
	.public-location-table td {
		padding: 4px 5px
	}
}

@media (max-width:1200px) {

	.public-feed-card,
	.public-feed-main {
		flex-direction: column;
		align-items: stretch
	}

	.public-feed-controls {
		border-left: 0;
		box-shadow: inset 0 1px 0 var(--border-light);
		border-top: 1px solid var(--border-deep);
		flex-basis: auto;
		width: 100%
	}

	.public-feed-now,
	.public-feed-overview h3 {
		white-space: normal
	}
}

@media (max-width:760px) {

	.public-build-row,
	.public-project-actions,
	.public-status-grid {
		align-items: flex-start
	}
}

:root {
	--sidebar-w: 238px;
	--radius: 6px;
	--radius-sm: 4px
}

body {
	font-family: var(--font);
	background: radial-gradient(ellipse 90% 60% at 50% 0, rgba(255, 255, 255, .05), transparent 60%), linear-gradient(180deg, var(--bg-top), var(--bg-bot) 70%, var(--bg));
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	height: 100dvh;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.6
}

.topbar {
	padding: 12px 16px 10px
}

.topbar-inner h1,
.topbar-title h1 {
	font-size: 21px;
	letter-spacing: 0
}

.topbar-eyebrow,
.topbar-inner p,
.topbar-title p {
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none
}

.sidebar-brand {
	padding: 12px 14px
}

.sidebar-link {
	min-height: 32px;
	padding: 7px 10px;
	border-radius: var(--radius-sm);
	font-size: 13.5px;
	line-height: 1.35
}

.sidebar-label,
.sp-rail-label,
.sp-ref-th,
.sp-sublabel,
.sp-tpl-field-label {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600
}

.section-block {
	margin-top: 10px;
	border-radius: var(--radius)
}

.section-hd {
	padding: 8px 12px;
	gap: 7px;
	font-size: 16px
}

.section-hd-sub,
.sp-hint,
.sp-status-text {
	font-size: 13px
}

.section-body {
	padding: 10px 12px
}

.form-row {
	gap: 8px
}

.form-group {
	gap: 4px
}

.field-label,
.form-group label {
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none
}

.input-field,
input,
select,
textarea {
	border-radius: var(--radius-sm);
	font-size: 13.25px;
	line-height: 1.35
}

.btn-action,
.btn-danger,
.btn-ghost {
	border-radius: var(--radius-sm);
	min-height: 30px;
	padding: 6px 10px;
	font-size: 13px;
	line-height: 1.25
}

.same-page .topbar {
	padding: 8px 12px
}

.same-layout {
	grid-template-columns: minmax(0, 1fr) 248px;
	gap: 8px
}

.same-main .section-block {
	margin-top: 8px
}

.same-main .section-hd {
	padding: 7px 10px
}

.same-top-grid {
	gap: 8px
}

.sp-cap-section .section-hd-actions {
	flex: 1 1 auto;
	justify-content: flex-end
}

.sp-cap-hd {
	flex-wrap: nowrap
}

.sp-cap-profile {
	min-height: 28px;
	width: 92px;
	padding: 4px 8px;
	font-size: 12px;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm)
}

.sp-tone-row {
	margin-top: 7px;
	padding-top: 7px
}

.sp-tone-carousel {
	gap: 3px
}

.sp-tone-btn {
	min-width: 58px;
	padding: 4px 8px;
	border-radius: var(--radius-sm)
}

.sp-feeds-col,
.sp-locs-col {
	padding: 7px 9px
}

.sp-feeds-col .sp-check-picker,
.sp-locs-col .sp-check-picker {
	max-height: 150px
}

.sp-ex-item {
	min-height: 19px;
	padding: 1px 4px
}

.sp-rail-section {
	padding: 8px 10px
}

.sp-rail-loc-list {
	max-height: 160px
}

.sp-header-preview {
	line-height: 1.45
}

.sp-rail-actions {
	gap: 5px
}

.sp-air-btn {
	padding: 6px 10px;
	font-size: 12px;
	letter-spacing: 0
}

.sp-tpl-head-grid,
.sp-tpl-meta-stack {
	gap: 6px
}

.sp-tpl-code-input,
.sp-tpl-file-input,
.sp-tpl-meta-input,
.sp-tpl-text-input {
	font-size: 12px;
	padding: 4px 7px
}

.same-page .sp-rail-label,
.same-page .sp-sublabel,
.same-page .sp-tpl-field-label {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500
}

.same-layout {
	grid-template-columns: minmax(0, 980px) 260px;
	justify-content: start
}

.same-main {
	max-width: 980px;
	min-width: 0
}

@media (max-width:900px) {
	.same-layout {
		grid-template-columns: 1fr
	}

	.same-main {
		max-width: none
	}
}

.sp-locs-col .sp-check-picker {
	gap: 4px
}

.sp-loc-group {
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--surface-raised) 42%, transparent);
	overflow: hidden
}

.sp-loc-group-hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 7px;
	border-bottom: 1px solid var(--border-subtle)
}

.sp-loc-group-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 650;
	color: var(--text)
}

.sp-loc-group-meta {
	flex-shrink: 0;
	color: var(--muted);
	font-family: var(--mono-font);
	font-size: 10.5px
}

.sp-loc-group-items {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 3px
}

.sp-loc-item {
	min-height: 22px
}

.sp-same-intro-preview {
	margin: 2px 0 8px;
	padding: 8px 9px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--accent) 7%, transparent)
}

.sp-same-intro-preview label {
	display: block;
	margin-bottom: 3px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 500
}

.sp-same-intro-preview p {
	margin: 0;
	color: var(--text);
	font-size: 12.5px;
	line-height: 1.45
}

.sp-template-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 8px
}

.sp-tpl-block {
	min-width: 0
}

.sp-tpl-hd {
	align-items: center;
	flex-wrap: wrap
}

.sp-tpl-hd .section-hd-actions {
	flex-wrap: wrap;
	gap: 4px
}

.sp-template-head-grid {
	grid-template-columns: 1fr
}

.sp-tpl-locations-field {
	margin: 0 0 8px
}

.sp-tpl-location-preview {
	margin: 0;
	color: var(--muted);
	font-size: 11.5px;
	line-height: 1.35
}

.sp-tpl-lang-row {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) 26px;
	gap: 6px
}

.sp-tpl-lang-row .sp-tpl-lang-key-group {
	max-width: none
}

.sp-tpl-lang-remove {
	grid-column: 3;
	grid-row: 1;
	margin-top: 18px;
	min-height: 26px;
	padding: 3px 0
}

@media (max-width:760px) {
	.sp-template-list {
		grid-template-columns: 1fr
	}

	.sp-tpl-lang-row {
		grid-template-columns: 1fr 26px
	}

	.sp-tpl-lang-file-group,
	.sp-tpl-lang-key-group,
	.sp-tpl-lang-text-group {
		grid-column: 1/-1
	}

	.sp-tpl-lang-remove {
		grid-column: 2;
		grid-row: 1
	}
}

.playlist-page {
	padding: 10px 14px 28px
}

.playlist-overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px
}

.playlist-empty,
.playlist-next,
.playlist-now,
.playlist-queue-item {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised);
	padding: 10px 12px;
	min-width: 0
}

.playlist-next p,
.playlist-now p {
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 3px
}

.playlist-next h2,
.playlist-now h2 {
	font-size: 18px;
	line-height: 1.25;
	margin-bottom: 8px;
	overflow-wrap: anywhere
}

.playlist-next dl,
.playlist-now dl,
.playlist-queue-item dl {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	gap: 3px 8px;
	font-size: 12px
}

.playlist-next dt,
.playlist-now dt,
.playlist-queue-item dt {
	color: var(--muted)
}

.playlist-next dd,
.playlist-now dd,
.playlist-queue-item dd {
	color: var(--text);
	min-width: 0;
	overflow-wrap: anywhere
}

.playlist-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 10px;
	align-items: start;
	margin-top: 10px
}

.playlist-layout>.section-block {
	margin-top: 0
}

.playlist-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	top: 76px
}

.playlist-queue-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 10px
}

.playlist-queue-item {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(260px, 1fr);
	gap: 10px;
	align-items: start
}

.playlist-queue-item strong {
	display: block;
	font-size: 14px;
	line-height: 1.25;
	overflow-wrap: anywhere
}

.playlist-queue-item span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px
}

.playlist-empty {
	color: var(--muted);
	font-size: 12.5px
}

.playlist-control-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px
}

.playlist-control-grid button {
	width: 100%;
	justify-content: center
}

.playlist-insert-form {
	display: flex;
	flex-direction: column;
	gap: 8px
}

.playlist-insert-form textarea {
	resize: vertical;
	min-height: 82px
}

.logs-page {
	padding: 10px 14px 28px
}

.logs-viewer {
	display: grid;
	gap: 8px
}

.logs-toolbar {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) repeat(4, auto) auto;
	align-items: end;
	gap: 8px
}

.logs-toolbar button {
	min-height: 34px;
	padding: 6px 10px;
	white-space: nowrap
}

.logs-auto-scroll {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 6px;
	font-size: 11.5px;
	white-space: nowrap
}

.logs-auto-scroll input[type="checkbox"] {
	width: 14px;
	height: 14px;
	min-height: 14px;
	margin: 0;
	flex: 0 0 14px
}

.logs-tail-meta {
	margin: 0;
	color: var(--muted);
	font-size: 11px;
	overflow-wrap: anywhere
}

.logs-tail-output {
	width: 100%;
	height: clamp(360px, 62vh, 820px);
	margin: 0;
	padding: 10px;
	overflow: auto;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: var(--bg);
	color: var(--text);
	box-shadow: var(--bevel-sunken);
	font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	white-space: pre;
	tab-size: 4
}

@media (max-width: 1180px) {
	.logs-toolbar {
		grid-template-columns: minmax(240px, 1fr) repeat(2, auto)
	}
}

@media (max-width: 700px) {
	.logs-toolbar {
		grid-template-columns: 1fr 1fr
	}

	.logs-file-field {
		grid-column: 1 / -1
	}

	.logs-toolbar button {
		width: 100%
	}

	.logs-auto-scroll {
		grid-column: 1 / -1
	}
}

.alerts-archive-page {
	padding: 10px 14px 28px
}

.alert-archive-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.alert-archive-actions button {
	min-height: 32px
}

.alert-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px
}

.alert-tab {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: var(--surface-raised-bot);
	color: var(--text);
	padding: 7px 10px;
	font-size: 12.5px;
	cursor: pointer;
	box-shadow: var(--bevel-raised)
}

.alert-tab.active {
	border-color: var(--accent);
	background: linear-gradient(180deg, var(--accent-soft), var(--surface-raised-bot));
	color: var(--text-strong)
}

.alert-archive-list {
	display: flex;
	flex-direction: column;
	gap: 9px
}

.alert-feed-group {
	display: flex;
	flex-direction: column;
	gap: 7px
}

.alert-feed-group-hd {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	color: var(--muted);
	font-size: 12px;
	padding: 2px 1px
}

.alert-feed-group-hd strong {
	color: var(--text);
	font-size: 13px
}

.alert-routing-decisions-note,
.alert-routing-decision-note {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4
}

.alert-routing-decision-group {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius);
	background: var(--surface-sunken);
	overflow: hidden
}

.alert-routing-decision-group>summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 10px;
	cursor: pointer;
	color: var(--muted);
	font-size: 12px
}

.alert-routing-decision-group>summary>span:first-child {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px
}

.alert-routing-decision-group>summary strong {
	color: var(--text);
	font-size: 13px
}

.alert-routing-decision-group>summary small {
	overflow: hidden;
	color: var(--muted);
	font-size: 11.5px;
	text-overflow: ellipsis;
	white-space: nowrap
}

.alert-routing-decision-group[open]>summary {
	border-bottom: 1px solid var(--border-deep)
}

.alert-routing-decision-note {
	padding: 9px 10px 0
}

.alert-routing-decision-records {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 9px 10px 10px
}

.alert-card,
.alert-empty {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised)
}

.alert-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 190px;
	gap: 10px;
	padding: 10px
}

.alert-card-main {
	min-width: 0
}

.alert-card-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start
}

.alert-card h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.25;
	overflow-wrap: anywhere
}

.alert-card-head p {
	margin-top: 3px;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.35;
	overflow-wrap: anywhere
}

.alert-card-time {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap
}

.alert-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 8px
}

.alert-card-meta span {
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
	color: var(--muted);
	padding: 3px 6px;
	font-size: 11.5px
}

.alert-card-meta b {
	color: var(--text);
	font-weight: 650
}

.alert-details {
	margin-top: 8px
}

.alert-details summary {
	color: var(--accent);
	cursor: pointer;
	font-size: 12.5px
}

.alert-details-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 7px
}

.alert-details-grid section {
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
	padding: 8px;
	min-width: 0
}

.alert-details-grid h4 {
	margin: 0 0 4px;
	font-size: 12px
}

.alert-details-grid p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere
}

.alert-card-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-self: stretch
}

.alert-card-actions button {
	width: 100%;
	justify-content: center;
	min-height: 30px
}

.alert-archive-actions button.is-confirming,
.alert-card-actions button.is-confirming,
.alert-card-actions button[data-confirming="1"] {
	outline: 1px solid var(--accent-warn);
	color: var(--text-strong)
}

.alert-empty {
	padding: 14px;
	color: var(--muted);
	font-size: 13px
}

@media (max-width:1080px) {

	.playlist-layout,
	.playlist-overview {
		grid-template-columns: 1fr
	}

	.playlist-side {
		position: static
	}
}

@media (max-width:760px) {

	.alert-card,
	.alert-details-grid,
	.playlist-control-grid,
	.playlist-queue-item {
		grid-template-columns: 1fr
	}

	.alert-card-actions {
		flex-direction: row;
		flex-wrap: wrap
	}

	.alert-card-actions button {
		width: auto;
		flex: 1 1 150px
	}
}

.same-page {
	padding: 12px 16px 34px
}

.same-layout {
	width: min(1680px, 100%);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
	gap: 14px;
	align-items: start
}

.ba-stack {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.ba-panel .section-hd {
	min-height: 35px;
	padding: 7px 12px
}

.ba-panel .section-body {
	padding: 10px 12px
}

.ba-form-grid {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 180px minmax(300px, 1fr) 150px;
	gap: 10px;
	align-items: end
}

.ba-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0
}

.ba-field>span,
.ba-label,
.ba-table-title span {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0;
	text-transform: none
}

.ba-custom-location input,
.ba-field input,
.ba-field select,
.ba-field textarea {
	width: 100%;
	padding: 6px 8px;
	background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
	border: 1px solid var(--border-deep);
	box-shadow: var(--bevel-sunken);
	border-radius: var(--radius-sm);
	color: var(--text);
	font: 12.5px var(--font);
	outline: 0
}

.ba-field textarea {
	resize: vertical;
	min-height: 78px
}

.ba-field textarea[readonly] {
	color: var(--text-muted)
}

.ba-duration-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px
}

select {
	color-scheme: dark;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035)),
		rgba(0, 0, 0, .54) !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .22) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .44) !important;
	backdrop-filter: blur(10px) saturate(1.15);
}

select:hover {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05)),
		rgba(0, 0, 0, .60) !important;
}

select:focus {
	border-color: rgba(255, 255, 255, .55) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 -1px 0 rgba(0, 0, 0, .72), 0 0 0 2px rgba(255, 255, 255, .16) !important;
}

select option,
select optgroup {
	background: rgba(7, 8, 10, .96);
	color: #fff;
}

select option:checked {
	background: #fff;
	color: #000;
}

[data-theme=light] select {
	color-scheme: light;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .34)),
		rgba(0, 0, 0, .10) !important;
	color: #050505 !important;
	border-color: rgba(0, 0, 0, .28) !important;
}

[data-theme=light] select option,
[data-theme=light] select optgroup {
	background: rgba(250, 250, 250, .98);
	color: #050505;
}

.ba-routing-grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.55fr) minmax(520px, 1.45fr);
	gap: 10px
}

.ba-table-box {
	min-width: 0;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	overflow: hidden
}

.ba-table-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 9px;
	border-bottom: 1px solid var(--border-deep);
	background: linear-gradient(180deg, var(--hd-bg-top), var(--hd-bg-bot))
}

.ba-table-title strong {
	margin-left: auto;
	min-width: 24px;
	text-align: center;
	color: var(--accent);
	font-size: 12px;
	font-family: var(--mono-font)
}

.ba-mini-actions {
	display: flex;
	gap: 4px;
	margin-left: 0;
	flex-shrink: 0
}

.ba-mini-actions .btn-action,
.section-hd-actions .btn-action {
	padding: 3px 7px;
	font-size: 11px
}

.ba-table-scroll {
	height: 210px;
	min-height: 120px;
	max-height: 560px;
	overflow: auto;
	resize: vertical;
	scrollbar-width: thin
}

.ba-location-scroll {
	height: 290px;
	max-height: 640px
}

.ba-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed
}

.ba-table td,
.ba-table th {
	padding: 4px 8px;
	border-bottom: 1px solid var(--border-subtle);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left
}

.ba-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600
}

.ba-table td {
	font-size: 12px;
	color: var(--text)
}

.ba-table td:first-child,
.ba-table th:first-child {
	width: 32px;
	text-align: center
}

.ba-table code {
	font-family: var(--mono-font);
	color: var(--muted);
	font-size: 11px
}

.ba-switch input[type=checkbox],
.ba-table input[type=checkbox] {
	accent-color: var(--accent)
}

.ba-empty-cell {
	color: var(--muted);
	font-style: italic
}

.panel-table-wrap,
.table-scroll.feeds-list,
.table-scroll.tts-reader-list,
.table-scroll.breakin-feed-list,
.panel-table-wrap.bulletin-table-wrap,
.panel-table-wrap.dictionary-table-box {
	min-width: 0;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	box-shadow: none;
	overflow: auto;
	scrollbar-width: thin
}

.table-scroll.feeds-list,
.table-scroll.tts-reader-list,
.table-scroll.breakin-feed-list,
.panel-table-wrap.bulletin-table-wrap,
.panel-table-wrap.dictionary-table-box {
	resize: vertical
}

.panel-table.data-table,
.panel-table.bulletin-table,
.panel-table.breakin-feed-table,
.panel-table.dictionary-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: transparent;
	font-size: 12px
}

.panel-table.data-table th,
.panel-table.data-table td,
.panel-table.bulletin-table th,
.panel-table.bulletin-table td,
.panel-table.breakin-feed-table th,
.panel-table.breakin-feed-table td,
.panel-table.dictionary-table th,
.panel-table.dictionary-table td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--border-subtle);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	vertical-align: middle
}

.panel-table.data-table th,
.panel-table.bulletin-table th,
.panel-table.breakin-feed-table th,
.panel-table.dictionary-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface);
	color: var(--muted);
	font-size: 11px;
	font-weight: 600
}

.panel-table.data-table td,
.panel-table.bulletin-table td,
.panel-table.breakin-feed-table td,
.panel-table.dictionary-table td {
	color: var(--text);
	font-size: 12px
}

.panel-table.data-table tbody tr:hover td,
.panel-table.bulletin-table tbody tr:hover td,
.panel-table.breakin-feed-table tbody tr:hover td,
.panel-table.dictionary-table tbody tr:hover td {
	background: color-mix(in srgb, var(--accent) 8%, transparent)
}

.panel-table.data-table tr.active td,
.panel-table.data-table tr[aria-selected="true"] td,
.panel-table.bulletin-table tr.active td,
.panel-table.bulletin-table tr[aria-selected="true"] td,
.panel-table.breakin-feed-table tr[aria-selected="true"] td,
.panel-table.dictionary-table tr[aria-selected="true"] td {
	background: color-mix(in srgb, var(--accent) 16%, transparent)
}

.panel-table.data-table code,
.panel-table.bulletin-table code,
.panel-table.breakin-feed-table code,
.panel-table.dictionary-table code {
	color: var(--muted);
	font-family: var(--mono-font);
	font-size: 11px
}

.panel-table.data-table input[type=checkbox],
.panel-table.bulletin-table input[type=checkbox],
.panel-table.breakin-feed-table input[type=checkbox],
.panel-table.dictionary-table input[type=checkbox] {
	accent-color: var(--accent)
}

.table-scroll.feeds-list .panel-table.data-table {
	min-width: 690px
}

.table-scroll.tts-reader-list .panel-table.data-table {
	min-width: 560px
}

.panel-table.bulletin-table {
	min-width: 980px
}

.panel-table.breakin-feed-table {
	min-width: 720px
}

.panel-table.dictionary-table {
	min-width: 620px
}

.table-scroll.feeds-list .panel-table.data-table th:nth-child(3),
.table-scroll.feeds-list .panel-table.data-table td:nth-child(3),
.panel-table.breakin-feed-table th:nth-child(4),
.panel-table.breakin-feed-table td:nth-child(4) {
	text-align: center;
	width: 66px
}

.table-scroll.feeds-list .panel-table.data-table th:last-child,
.table-scroll.feeds-list .panel-table.data-table td:last-child {
	width: 150px
}

.panel-table.bulletin-table th:first-child,
.panel-table.bulletin-table td:first-child {
	width: 118px;
	text-align: left
}

.panel-table.bulletin-table td:first-child input {
	margin-right: 4px;
	vertical-align: middle
}

.panel-empty-cell,
.breakin-empty,
.dictionary-empty {
	color: var(--muted);
	font-style: italic;
	text-align: left
}

.table-pill,
.table-queue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	min-height: 22px;
	padding: 2px 7px;
	border: 1px solid var(--border-deep);
	border-radius: 999px;
	background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 650;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.table-pill[data-state=enabled],
.table-pill[data-state=running],
.table-pill[data-state=playing],
.table-pill[data-state=active],
.table-pill[data-state=tts] {
	color: var(--accent-ok);
	border-color: color-mix(in srgb, var(--accent-ok) 42%, var(--border-deep));
	background: color-mix(in srgb, var(--accent-ok) 10%, var(--surface-raised))
}

.table-pill[data-state=paused],
.table-pill[data-state=pending],
.table-pill[data-state=queued],
.table-pill[data-state=audio],
.table-pill[data-state=warn] {
	color: var(--accent-warn);
	border-color: color-mix(in srgb, var(--accent-warn) 42%, var(--border-deep));
	background: color-mix(in srgb, var(--accent-warn) 10%, var(--surface-raised))
}

.table-pill[data-state=disabled],
.table-pill[data-state=stopped],
.table-pill[data-state=error],
.table-pill[data-state=off] {
	color: var(--accent-err);
	border-color: color-mix(in srgb, var(--accent-err) 42%, var(--border-deep));
	background: color-mix(in srgb, var(--accent-err) 9%, var(--surface-raised))
}

.table-queue {
	min-width: 30px;
	font-family: var(--mono-font)
}

.table-queue[data-active=true] {
	color: var(--accent-warn);
	border-color: color-mix(in srgb, var(--accent-warn) 42%, var(--border-deep));
	background: color-mix(in srgb, var(--accent-warn) 10%, var(--surface-raised))
}

.table-muted {
	color: var(--muted);
	font-style: italic
}

.table-row-actions,
.feed-row-actions,
.bulletin-row-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-wrap: wrap
}

.table-row-actions .btn-action,
.table-row-actions .btn-danger,
.feed-row-actions .btn-action,
.feed-row-actions .btn-danger,
.bulletin-row-actions .btn-action,
.bulletin-row-actions .btn-danger {
	min-height: 24px;
	padding: 3px 7px;
	font-size: 11px
}

.ba-custom-location {
	display: grid;
	grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) auto;
	gap: 6px;
	padding: 8px;
	border-top: 1px solid var(--border-deep)
}

.ba-audio-grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.72fr) minmax(380px, 1fr);
	gap: 12px;
	align-items: start
}

.ba-option-group {
	display: flex;
	flex-direction: column;
	gap: 9px
}

.ba-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 26px;
	color: var(--text);
	font-size: 12.5px
}

.ba-tone-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px
}

.ba-tone-btn {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 7px;
	min-height: 32px;
	padding: 5px 8px;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius-sm);
	background: linear-gradient(180deg, var(--surface-raised-top), var(--surface-raised-bot));
	box-shadow: var(--bevel-raised);
	color: var(--text);
	cursor: pointer
}

.ba-tone-btn strong {
	font-family: var(--mono-font);
	font-size: 11.5px;
	color: var(--text)
}

.ba-tone-btn span {
	min-width: 0;
	color: var(--muted);
	font-size: 11.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ba-tone-btn.active {
	border-color: color-mix(in srgb, var(--accent) 70%, var(--border-deep));
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--surface-raised-top)), var(--surface-raised-bot))
}

.ba-message-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 9px
}

.ba-audio-source-panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	align-items: end
}

.ba-audio-source-panel[hidden] {
	display: none
}

.ba-audio-source-panel .ba-field:only-child {
	grid-column: 1/-1
}

.ba-audio-source-panel .breakin-meter,
.ba-audio-source-panel .breakin-recording {
	grid-column: 1/-1
}

.ba-timing-row {
	display: grid;
	grid-template-columns: minmax(220px, max-content) minmax(240px, 320px);
	gap: 12px;
	align-items: end
}

.ba-rail-card {
	position: sticky;
	top: 78px;
	border: 1px solid var(--border-deep);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--card-shadow);
	overflow: hidden
}

.ba-rail-section {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-subtle)
}

.ba-rail-section:last-child {
	border-bottom: 0
}

.ba-plan-list {
	display: grid;
	gap: 5px;
	margin-top: 7px
}

.ba-plan-list div {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline
}

.ba-plan-list dt {
	color: var(--muted);
	font-size: 12px
}

.ba-plan-list dd {
	color: var(--text);
	font-size: 12px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.ba-header-preview {
	display: block;
	margin-top: 7px;
	color: var(--text);
	font-family: var(--mono-font);
	font-size: 11.5px;
	line-height: 1.5;
	word-break: break-all
}

.ba-intro-preview {
	margin-top: 7px;
	color: var(--text);
	font-size: 12.5px;
	line-height: 1.45
}

.ba-status:empty {
	display: none
}

.ba-action-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
	margin-top: 8px
}

.ba-action-grid button {
	width: 100%
}

.ba-preview-player {
	width: 100%;
	margin-top: 8px
}

@media (max-width:1180px) {
	.same-layout {
		grid-template-columns: 1fr
	}

	.ba-rail-card {
		position: static
	}
}

@media (max-width:920px) {

	.ba-audio-grid,
	.ba-form-grid,
	.ba-routing-grid,
	.ba-timing-row {
		grid-template-columns: 1fr
	}
}

.automation-form-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(140px, 1fr));
	gap: 12px
}

.automation-form-grid .automation-wide {
	grid-column: 1/-1
}

.automation-enabled-row {
	align-self: end;
	min-height: 38px
}

.automation-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	border-top: 1px solid var(--border-soft)
}

.automation-summary-list {
	display: grid;
	gap: 8px
}

.automation-summary-item {
	display: grid;
	gap: 3px;
	padding: 10px;
	border: 1px solid var(--border-soft);
	background: var(--surface-subtle);
	border-radius: 6px
}

.automation-summary-item small,
.automation-summary-item span {
	color: var(--text-muted)
}

@media (max-width:1100px) {
	.automation-form-grid {
		grid-template-columns: repeat(2, minmax(140px, 1fr))
	}
}

@media (max-width:720px) {
	.automation-form-grid {
		grid-template-columns: 1fr
	}
}

.automation-summary-item small,
.daemon-toggle small,
.feed-id,
.overview-note p,
.public-feed-now,
.public-player-status,
.sp-hint,
.sp-picker-empty,
.sp-status-text,
.sp-tpl-empty,
.sp-tpl-no-langs,
.status-banner {
	font-size: 13px;
	line-height: 1.45
}

.automation-summary-item,
.public-about-body p,
.public-project-strip p,
.sp-picker-name,
.sp-rail-tts-text,
.sp-ref-table,
.sp-ref-td,
.sp-rl-name,
.sp-tpl-file-input,
.sp-tpl-text-input {
	font-size: 13.25px
}

.feed-id,
.sp-ex-code,
.sp-header-preview,
.sp-picker-code,
.sp-ref-code,
.sp-tpl-code-input {
	font-size: 12px
}

.ba-label,
.sidebar-label,
.sp-rail-label,
.sp-ref-th,
.sp-sublabel,
.sp-tpl-field-label,
.wx-panel-page .wx-panel-label {
	font-size: 12.25px
}