:root {
	font-family:
		Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #15141a;
	background: #feffff;
	--surface-base: #feffff;
	--surface-raised: #feffff;
	--surface-subtle: #f7f7f7;
	--surface-lower: #f7f7f7;
	--surface-deep: #d9d9de;
	--surface-border: #d9d9de;
	--surface-border-intense: #91939f;
	--accent: #0a66c2;
	--accent-soft: #d9eaff;
	--selected-text: #fff;
	--selection-inactive: #d9d9de;
	--line: var(--surface-border);
	--panel: var(--surface-base);
	--muted: #5b5b66;
	--hover: #ededf0;
	--row: 66px;
	--rail-w: 58px;
	--chrome-h: 79px;
	color-scheme: light;
}
.icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.app-icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
* {
	box-sizing: border-box;
}
[hidden] {
	display: none !important;
}
body {
	margin: 0;
	overflow: hidden;
}
button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}
button {
	border: 0;
	background: transparent;
	cursor: pointer;
}
.sr-only,
.skip:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.skip {
	z-index: 20;
	position: fixed;
	left: 8px;
	top: 8px;
	padding: 8px;
	background: var(--panel);
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.titlebar {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 0 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-subtle);
}
.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 210px;
	color: inherit;
	text-decoration: none;
	font-size: 17px;
}
.brand-mark {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	border-radius: 8px;
	color: #fff;
	font-weight: 800;
	background: var(--accent);
}
.search {
	height: 35px;
	max-width: 560px;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border: 1px solid var(--surface-border-intense);
	background: var(--panel);
	border-radius: 6px;
	color: var(--muted);
}
.search input {
	border: 0;
	outline: 0;
	background: transparent;
	min-width: 70px;
	flex: 1;
}
.search kbd,
.compose kbd {
	font-size: 10px;
	color: var(--muted);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 2px 5px;
}
.toolbar-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
}
.icon-button {
	width: 34px;
	height: 34px;
	border-radius: 5px;
	display: inline-grid;
	place-items: center;
}
.icon-button:hover,
.rail-item:hover,
.reader-tools button:hover,
.list-tools button:hover {
	background: var(--hover);
}
.avatar {
	width: 31px;
	height: 31px;
	margin-left: 5px;
	border-radius: 50%;
	background: #7142a7;
	color: #fff;
	font-size: 11px;
}
.statusbar {
	height: 25px;
	padding: 0 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	background: #e9f5ec;
	color: #26653d;
	border-bottom: 1px solid #cde4d4;
}
.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2b9951;
}
.status-spacer {
	flex: 1;
}
.mail-shell {
	height: calc(100vh - var(--chrome-h));
	display: grid;
	grid-template-columns: var(--rail-w) var(--folders-w, 226px) var(--messages-w, 340px) minmax(360px, 1fr);
}
.rail,
.folders,
.messages,
.reader {
	min-width: 0;
	border-right: 1px solid var(--line);
	background: var(--panel);
}
.messages,
.reader {
	position: relative;
}
.pane-resizer {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 9px;
	transform: translateX(-50%);
	cursor: col-resize;
	z-index: 6;
	touch-action: none;
}
.pane-resizer::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
	background: transparent;
	transition: background 0.12s;
}
.pane-resizer:hover::after,
.pane-resizer:focus-visible::after,
.pane-resizer.dragging::after {
	background: var(--accent);
}
.pane-resizer:focus-visible {
	outline: none;
}
.rail {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 6px 4px;
	background: var(--surface-lower);
}
.rail-item {
	width: 48px;
	min-height: 47px;
	display: grid;
	place-items: center;
	border-radius: 5px;
	color: var(--muted);
}
.rail-item small {
	font-size: 9px;
}
.rail-item.active {
	color: var(--selected-text);
	background: var(--accent);
}
.rail-space {
	flex: 1;
}
.folders {
	padding: 0 6px 8px;
	display: flex;
	flex-direction: column;
}
.compose {
	height: 30px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	padding: 0 11px;
	margin: 0;
	color: white;
	background: var(--accent);
	border-radius: 4px;
	font-weight: 650;
	box-shadow: 0 1px 2px #0002;
}
.folder-pane-header {
	display: flex;
	align-items: center;
	gap: 3px;
	min-height: 43px;
	padding: 6px 2px;
	border-bottom: 1px solid var(--line);
}
.folder-pane-header .icon-button {
	width: 30px;
	height: 30px;
}
.folder-pane-header .compose .app-icon {
	width: 16px;
	height: 16px;
}
.compose:hover {
	background: #0756a5;
}
.compose kbd {
	color: #daeaff;
	border-color: #ffffff55;
	margin-left: auto;
}
.folder-heading {
	padding: 4px 9px 7px;
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	font-weight: 700;
	color: var(--muted);
}
.folder-account > h3 {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 5px;
	min-height: 30px;
	margin: 4px 0 1px;
	padding: 0 7px 0 2px;
	font-size: 12px;
	font-weight: 650;
}
.folder-account > h3 span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.folder-account > h3 small {
	color: var(--muted);
	font-size: 9px;
	text-transform: uppercase;
}
.folder-account > h3 strong {
	color: var(--accent);
	font-size: 10px;
}
.account-disclosure {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	border-radius: 3px;
}
.account-disclosure:hover {
	background: var(--hover);
}
.account-disclosure .app-icon {
	width: 12px;
	height: 12px;
}
.folder-account[data-collapsed="true"] .account-folders {
	display: none;
}
.folder {
	height: 32px;
	width: 100%;
	display: grid;
	grid-template-columns: 24px 1fr auto;
	align-items: center;
	text-align: left;
	padding: 0 9px 0 calc(9px + var(--folder-depth, 0) * 14px);
	border-radius: 4px;
	font-size: 13px;
}
.folder:hover {
	background: var(--hover);
}
.folder.active {
	background: var(--accent);
	color: var(--selected-text);
	font-weight: 650;
}
.folder:focus:not(.active) {
	background: var(--selection-inactive);
}
.folder .folder-icon {
	width: 16px;
	height: 16px;
}
.folder.drop-target {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 2px var(--accent);
}
.folder strong {
	min-width: 20px;
	padding: 2px 6px;
	text-align: center;
	border-radius: 12px;
	color: white;
	background: var(--accent);
	font-size: 10px;
}
.folder em {
	font-style: normal;
	color: var(--muted);
}
.account {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 16px;
	padding: 10px 7px;
	border-top: 1px solid var(--line);
	font-size: 12px;
}
.account > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.account small {
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
}
.account button {
	margin-left: auto;
}
.account-icon {
	display: grid;
	place-items: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: #6849a4;
	color: white;
}
.storage {
	margin-top: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 5px;
	padding: 8px;
	font-size: 10px;
	color: var(--muted);
}
progress {
	grid-column: 1 / -1;
	width: 100%;
	height: 5px;
	accent-color: var(--accent);
}
.pane-header {
	height: 72px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	border-bottom: 1px solid var(--line);
}
h1 {
	font-size: 17px;
	margin: 0 0 3px;
}
.pane-header p {
	font-size: 11px;
	color: var(--muted);
	margin: 0;
}
.pane-header > button:last-child {
	margin-left: auto;
}
.list-tools,
.reader-tools {
	height: 37px;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0 10px;
	border-bottom: 1px solid var(--line);
}
.list-tools button,
.reader-tools button {
	height: 27px;
	min-width: 28px;
	border-radius: 4px;
}
.reader-tools button.reader-act {
	min-width: auto;
	width: auto;
	padding: 0 9px;
	font-size: 12px;
	font-weight: 550;
}
.reader-tools .reader-sep {
	flex: 0 0 1px;
	align-self: center;
	height: 16px;
	margin: 0 4px;
	background: var(--line);
}
.list-tools span,
.reader-tools span:not(.reader-sep) {
	flex: 1;
}
.list-tools #sort {
	font-size: 11px;
	color: var(--muted);
	width: auto;
}
.message-row {
	height: var(--row);
	display: grid;
	grid-template-columns: 26px 1fr auto;
	grid-template-rows: 21px 21px 18px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}
.message-row:hover {
	background: var(--hover);
}
.message-row.selected {
	background: var(--selection-inactive);
	box-shadow: inset 2px 0 var(--accent);
}
.message-row.selected:focus-within,
.messages:focus-within .message-row.selected {
	background: var(--accent);
	color: var(--selected-text);
}
.messages:focus-within .message-row.selected :is(.time, .preview, .message-account) {
	color: inherit;
}
.message-row.dragging {
	opacity: 0.55;
}
.thread-heading {
	margin: 0;
	padding: 6px 10px;
	font-size: 11px;
	text-transform: capitalize;
	color: var(--muted);
	background: var(--hover);
	border-bottom: 1px solid var(--line);
}

.folder-action-form {
	min-width: min(420px, calc(100vw - 32px));
	display: grid;
	gap: 16px;
	padding: 18px;
}
.folder-action-form header,
.folder-action-form footer {
	display: flex;
	align-items: center;
	gap: 8px;
}
.folder-action-form header h2 {
	flex: 1;
	margin: 0;
}
.folder-action-form label {
	display: grid;
	gap: 6px;
}
.source-view {
	width: min(900px, calc(100vw - 32px));
	height: min(720px, calc(100vh - 32px));
	display: flex;
	flex-direction: column;
	padding: 16px;
}
.source-view header {
	display: flex;
	align-items: center;
}
.source-view header h2 {
	flex: 1;
}
.source-view pre {
	flex: 1;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	background: var(--hover);
	padding: 12px;
}
@media print {
	body > :not(.mail-shell),
	.folders,
	.messages,
	.reader-tools {
		display: none !important;
	}
	.mail-shell,
	.reader {
		display: block !important;
	}
}
.message-row input {
	grid-row: 1 / 4;
	align-self: center;
	width: 24px;
	height: 24px;
	margin: 0;
}
.sender,
.subject {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sender {
	font-size: 12px;
}
.message-row.unread .sender,
.message-row.unread .subject {
	font-weight: 750;
}
.time {
	font-size: 10px;
	color: var(--muted);
}
.subject {
	grid-column: 2 / 4;
	font-size: 12px;
}
.message-account {
	margin-inline-start: 8px;
	color: var(--muted);
	font-size: 10px;
	font-weight: 500;
}
.preview {
	grid-column: 2 / 4;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--muted);
}
.reader {
	overflow: auto;
}
.reader-tools {
	position: sticky;
	top: 0;
	background: var(--panel);
	z-index: 2;
}
.message-view {
	max-width: 780px;
	padding: 28px 34px;
}
.message-view h2 {
	margin: 0 0 18px;
	font-size: 23px;
	font-weight: 600;
}
.sender-line {
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 10px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
}
.sender-line .avatar-letter {
	grid-row: 1 / 3;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	color: #fff;
	background: #3574a7;
	border-radius: 50%;
	font-weight: 700;
}
.sender-line small {
	color: var(--muted);
}
.message-copy {
	font:
		15px / 1.62 Georgia,
		serif;
	color: #28313d;
	padding-top: 18px;
}
.message-copy .callout {
	font-family: inherit;
	margin: 20px 0;
	padding: 15px 18px;
	border-left: 3px solid var(--accent);
	background: var(--hover);
}
.reply-actions {
	display: flex;
	gap: 8px;
	margin-top: 26px;
}
.reply-actions button {
	border: 1px solid #aeb9c8;
	border-radius: 4px;
	padding: 7px 14px;
	background: var(--panel);
}
dialog {
	width: min(680px, calc(100vw - 24px));
	height: min(560px, calc(100vh - 24px));
	padding: 0;
	border: 1px solid #8d99a8;
	border-radius: 7px;
	box-shadow: 0 18px 55px #0005;
	background: var(--panel);
}
dialog::backdrop {
	background: #1c253355;
}
.account-setup { width: min(480px, calc(100vw - 32px)); display: grid; gap: 16px; padding: 24px; }
.account-setup header h2 { margin: 0 0 6px; }
.account-setup header p, #credential-note { margin: 0; color: var(--muted); line-height: 1.45; }
.account-setup label { display: grid; gap: 6px; font-weight: 600; }
.account-setup input { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.account-setup .send { justify-self: start; padding: 9px 16px; border-radius: 5px; color: #fff; background: var(--accent); }
.groupware-view { position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w); z-index: 3; overflow: auto; padding: 20px; background: var(--surface-base); }
.mail-shell.groupware-active .folders, .mail-shell.groupware-active .messages, .mail-shell.groupware-active .reader,
.mail-shell.settings-active .folders, .mail-shell.settings-active .messages, .mail-shell.settings-active .reader { display: none; }
.groupware-view > header { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.groupware-view > header > div { flex: 1; min-width: 220px; }
.groupware-view h1, .groupware-view h2 { margin: 0 0 8px; }
.groupware-layout { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr); gap: 20px; margin-top: 20px; }
#groupware-items, #groupware-conflicts { display: grid; gap: 8px; margin-bottom: 20px; }
.groupware-item, .conflict-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; text-align: left; }
.groupware-item span, .conflict-item span { flex: 1; }
#groupware-form { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
#groupware-form label { display: grid; gap: 5px; }
#groupware-form input, #groupware-form textarea { padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
#groupware-form textarea { min-height: 110px; }
#groupware-form footer { display: flex; gap: 8px; }
.profile-panel header, .account-row { display: flex; align-items: center; gap: 8px; }
.profile-panel header h2, .account-row span { flex: 1; }
.profile-panel header button { font-size: 22px; }
.account-row { border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
#account-list { display: grid; gap: 8px; }
#identity-form { display: grid; gap: 10px; }
#identity-form textarea { min-height: 70px; }
.settings-panel form { display: grid; gap: 12px; max-width: 680px; }
.settings-panel form > label { display: grid; gap: 5px; }
.settings-panel input, .settings-panel select, .settings-panel textarea { padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: inherit; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.file-button { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.file-button input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
#device-list, #diagnostic-list { display: grid; gap: 8px; margin: 12px 0; }
.device-row, .diagnostic-row { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 5px; }
.device-row span, .diagnostic-row span { flex: 1; }
#pairing-output { white-space: pre-wrap; overflow-wrap: anywhere; }
#compose-form {
	height: 100%;
	display: flex;
	flex-direction: column;
}
#compose-form header,
#compose-form footer {
	height: 48px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: #f2f5f9;
	border-bottom: 1px solid var(--line);
}
#compose-form h2 {
	font-size: 14px;
	flex: 1;
}
#compose-form header button {
	font-size: 22px;
}
#compose-form label {
	height: 39px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
}
#compose-form label input,
#compose-form select {
	flex: 1;
	border: 0;
	background: transparent;
	outline: 0;
}
#compose-form .subject {
	display: flex;
}
#compose-copy-fields { border-bottom: 1px solid var(--line); padding: 7px 14px; }
#compose-copy-fields summary { color: var(--accent); cursor: pointer; font-size: 12px; }
#compose-copy-fields label { padding: 0; }
#format-tools { padding: 6px 14px; border-bottom: 1px solid var(--line); }
#format-tools button { margin-right: 5px; }
#attachment-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
#attachment-list:empty { display: none; }
.attachment-chip { border: 1px solid var(--line); border-radius: 12px; padding: 3px 8px; font-size: 11px; }
#compose-form textarea {
	flex: 1;
	resize: none;
	border: 0;
	padding: 18px;
	outline: 0;
	background: var(--panel);
}
#compose-form footer {
	border: 0;
	border-top: 1px solid var(--line);
	gap: 6px;
}
#compose-form footer span {
	flex: 1;
}
#compose-form .send {
	padding: 7px 13px;
	border-radius: 4px;
	background: var(--accent);
	color: white;
}
#compose-form .send span {
	font-size: 9px;
	margin-left: 10px;
}
.toast {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translate(-50%, 20px);
	opacity: 0;
	background: #263445;
	color: #fff;
	padding: 9px 15px;
	border-radius: 5px;
	font-size: 12px;
	transition: 0.18s;
	pointer-events: auto;
}
.toast button {
	margin-left: 8px;
	color: inherit;
	text-decoration: underline;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}
.context-menu {
	position: fixed;
	z-index: 50;
	min-width: 220px;
	padding: 4px;
	border: 1px solid var(--surface-border-intense);
	border-radius: 5px;
	background: var(--surface-raised);
	box-shadow: 0 8px 24px #0003;
}
.context-menu button {
	display: block;
	width: 100%;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 3px;
	text-align: start;
}
.context-menu button:is(:hover, :focus-visible):not(:disabled) {
	background: var(--accent);
	color: var(--selected-text);
	outline: none;
}
.context-menu button:disabled {
	opacity: 0.5;
	cursor: default;
}
.context-menu hr {
	margin: 4px 6px;
	border: 0;
	border-top: 1px solid var(--line);
}
.back {
	display: none;
}
[data-density="comfortable"] {
	--row: 80px;
}
[data-density="comfortable"] .folder {
	height: 39px;
}
[data-theme="dark"] {
	color-scheme: dark;
	color: #f0f0f4;
	background: #1a202c;
	--surface-base: #1a202c;
	--surface-raised: #262d3b;
	--surface-subtle: #262d3b;
	--surface-lower: #18181b;
	--surface-deep: #3d4d67;
	--surface-border: #3d4d67;
	--surface-border-intense: #5e7799;
	--panel: var(--surface-base);
	--line: var(--surface-border);
	--muted: #b7c3d5;
	--hover: #303b4d;
	--accent: #3f9cff;
	--accent-soft: #273f5c;
	--selection-inactive: #3d4d67;
}
.offline .statusbar {
	background: #fff3d6;
	color: #704d00;
}
.offline .status-dot {
	background: #d58d00;
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}
@media (max-width: 850px) {
	:root {
		--rail-w: 52px;
	}
	.pane-resizer {
		display: none;
	}
	.titlebar {
		gap: 8px;
	}
	.brand {
		width: auto;
	}
	.brand strong,
	.search kbd {
		display: none;
	}
	.mail-shell {
		grid-template-columns: var(--rail-w) 1fr;
	}
	.folders,
	.messages,
	.reader {
		grid-column: 2;
		grid-row: 1;
	}
	.messages,
	.reader {
		display: none;
	}
	.mail-shell.show-messages .folders {
		display: none;
	}
	.mail-shell.show-messages .messages {
		display: block;
	}
	.mail-shell.show-reader .folders,
	.mail-shell.show-reader .messages {
		display: none;
	}
	.mail-shell.show-reader .reader {
		display: block;
	}
	.back {
		display: inline-block;
	}
	.rail-item small {
		display: none;
	}
	.rail-item {
		min-height: 42px;
	}
	.message-view {
		padding: 20px;
	}
	.toolbar-actions .icon-button:nth-child(2) {
		display: none;
	}
	.groupware-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	:root {
		--rail-w: 44px;
	}
	.statusbar span:nth-last-child(-n + 2) {
		display: none;
	}
	.mail-shell {
		grid-template-columns: var(--rail-w) 1fr;
	}
	.rail-item {
		width: 38px;
	}
	.search {
		max-width: none;
		min-width: 0;
	}
	.toolbar-actions #sync {
		display: none;
	}
	.toolbar-actions #language {
		display: none;
	}
}

.language {
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: 10px;
}
/* Settings is a full application space with the same chrome as the mail view. */
.settings-view { position: fixed; inset: var(--chrome-h) 0 0 var(--rail-w); z-index: 3; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-base); }
.settings-view > .pane-header { flex: none; }
.settings-view > .pane-header p { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.settings-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.settings-layout > nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; overflow: auto; border-right: 1px solid var(--line); background: var(--surface-lower); }
.settings-layout > nav button { width: 100%; padding: 8px 12px; border-radius: 5px; text-align: left; font-size: 13px; color: var(--muted); }
.settings-layout > nav button:hover { background: var(--hover); color: inherit; }
.settings-layout > nav button.active { color: var(--selected-text); background: var(--accent); font-weight: 600; }
.settings-panel { padding: 26px 34px; overflow: auto; min-height: 0; }
.settings-panel h3 { margin-top: 0; }
.settings-panel article { border-bottom: 1px solid var(--line); }
.settings-panel article h4 { margin-bottom: 4px; }
.settings-panel article p { margin-top: 0; line-height: 1.5; }
.help-search { display: grid; gap: 5px; margin-bottom: 14px; }
.help-search input, #feedback-form input, #feedback-form select, #feedback-form textarea { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); padding: 8px; }
#feedback-form { display: grid; gap: 12px; max-width: 620px; }
#feedback-form > label:not(.check) { display: grid; gap: 5px; }
#feedback-form textarea { min-height: 78px; resize: vertical; }
#feedback-form .send { justify-self: start; padding: 8px 14px; border-radius: 4px; color: white; background: var(--accent); }
.feature-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.feature-item h4 { margin: 0 0 5px; }
.feature-item p { margin: 0 0 8px; color: var(--muted); }
.feature-item a { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; }
.about-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.about-brand .brand-mark { width: 48px; height: 48px; font-size: 24px; }
.about-brand h3 { font-size: 20px; }
.about-brand p { color: var(--muted); margin-top: 3px; }
.about-version { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
#about-version dl { margin-top: 20px; }
#about-version dl div { display: grid; grid-template-columns: 100px 1fr; padding: 8px 0; border-bottom: 1px solid var(--line); }
#about-version dt { color: var(--muted); }
#about-version dd { margin: 0; overflow-wrap: anywhere; }
.about-error { color: #a32727; }
@media (max-width: 640px) {
  .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .settings-layout > nav { flex-direction: row; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .settings-layout > nav button { width: auto; white-space: nowrap; }
  .settings-panel { padding: 20px 18px; }
}