:root {
color-scheme: light;
--nx-accent: #5352c9;
--nx-accent-strong: #403fae;
--nx-accent-soft: #ecebfa;
--nx-accent-glow: rgba(83, 82, 201, 0.28);
--nx-accent-ink: #ffffff;
--nx-canvas: #f4f2ed;
--nx-surface: #ffffff;
--nx-surface-soft: #faf9f6;
--nx-ink: #171922;
--nx-muted: #5c6270;
--nx-faint: #8b909d;
--nx-line: #e7e3da;
--nx-line-soft: #efece5;
--nx-rail: linear-gradient(180deg, #1b1830 0%, #131120 55%, #100e1a 100%);
--nx-rail-ink: #b5b2cc;
--nx-rail-fg: #ffffff;
--nx-rail-line: rgba(255, 255, 255, 0.08);
--nx-rail-hover: rgba(255, 255, 255, 0.07);
--nx-rail-active: rgba(255, 255, 255, 0.09);
--nx-star: #d99a2b;
--nx-ok: #2f9e6e;
--nx-warn: #c98a1f;
--nx-danger: #c2452d;
--nx-car: #8a63e0;
--nx-car-soft: rgba(138, 99, 224, 0.10);
--nx-scrim: rgba(23, 20, 40, 0.42);
--nx-snackbar-bg: #1d2130;
--nx-snackbar-ink: #f4f4fb;
--nx-snackbar-muted: rgba(244, 244, 251, 0.66);
--nx-shadow-1: 0 1px 2px rgba(23, 20, 40, 0.05), 0 8px 24px rgba(23, 20, 40, 0.06);
--nx-shadow-2: 0 2px 6px rgba(23, 20, 40, 0.07), 0 24px 60px rgba(23, 20, 40, 0.12);
--nx-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--nx-font-display: "Fraunces", Georgia, "Times New Roman", serif;
--nx-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--nx-display-weight: 480;
--nx-display-tracking: -0.01em;
--nx-radius-card: 16px;
--nx-radius-control: 12px;
--nx-primary-bg: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
--nx-primary-shadow: 0 12px 26px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);

--jv-font-family: var(--nx-font-ui);
--jv-font-mono: var(--nx-font-mono);
--jv-color-primary: var(--nx-accent);
--jv-color-on-primary: var(--nx-accent-ink);
--jv-color-error: var(--nx-danger);
--jv-color-surface: var(--nx-surface);
--jv-color-on-surface: var(--nx-ink);
--jv-color-on-surface-muted: var(--nx-muted);
--jv-color-outline: var(--nx-line);
--jv-color-secondary-container: var(--nx-accent-soft);
--jv-color-on-secondary-container: var(--nx-accent-strong);
--jv-dark-page: var(--nx-canvas);
font-family: var(--nx-font-ui);
color: var(--nx-ink);
background: var(--nx-canvas);
}

:root[data-theme="dark"] {
color-scheme: dark;
--nx-accent: #8c8af2;
--nx-accent-strong: #a7a5f7;
--nx-accent-soft: #262649;
--nx-accent-glow: rgba(140, 138, 242, 0.3);
--nx-accent-ink: #10102b;
--nx-canvas: #0e0f17;
--nx-surface: #171923;
--nx-surface-soft: #1c1e2b;
--nx-ink: #eceef6;
--nx-muted: #a4a9ba;
--nx-faint: #767c8f;
--nx-line: #272a3a;
--nx-line-soft: #20232f;
--nx-rail: linear-gradient(180deg, #14121f 0%, #0e0c18 60%, #0b0a13 100%);
--nx-rail-ink: #8f8cab;
--nx-star: #e6b357;
--nx-ok: #4fbf8b;
--nx-warn: #e0aa4a;
--nx-danger: #e0705a;
--nx-car: #a99cf0;
--nx-car-soft: rgba(169, 156, 240, 0.14);
--nx-scrim: rgba(0, 0, 0, 0.6);
--nx-snackbar-bg: #f2f1fb;
--nx-snackbar-ink: #191b28;
--nx-snackbar-muted: rgba(25, 27, 40, 0.62);
--nx-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
--nx-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.5);
}

:root:has(.skin-flag--deck) {
--nx-accent: #0a9e8c;
--nx-accent-strong: #067a6c;
--nx-accent-soft: rgba(10, 158, 140, 0.10);
--nx-accent-glow: rgba(10, 158, 140, 0.18);
--nx-accent-ink: #ffffff;
--nx-canvas: #e9eef7;
--nx-surface: #ffffff;
--nx-surface-soft: #f4f7fd;
--nx-ink: #0e1628;
--nx-muted: #45526f;
--nx-faint: #7d89a4;
--nx-line: rgba(15, 30, 60, 0.14);
--nx-line-soft: rgba(15, 30, 60, 0.08);
--nx-rail: #f7fafe;
--nx-rail-ink: #5b6b85;
--nx-rail-fg: #0e1628;
--nx-rail-line: rgba(15, 30, 60, 0.14);
--nx-rail-hover: #f4f7fd;
--nx-rail-active: rgba(10, 158, 140, 0.10);
--nx-star: #c98a12;
--nx-ok: #0f9d63;
--nx-warn: #c98a12;
--nx-danger: #cf3a5c;
--nx-car: #5b67d8;
--nx-car-soft: rgba(91, 103, 216, 0.10);
--nx-snackbar-bg: #101726;
--nx-snackbar-ink: #f2f5ff;
--nx-snackbar-muted: rgba(242, 245, 255, 0.64);
--nx-shadow-1: 0 1px 0 rgba(15, 30, 60, 0.05), 0 8px 26px rgba(20, 35, 70, 0.08);
--nx-shadow-2: 0 2px 4px rgba(15, 30, 60, 0.07), 0 26px 60px rgba(20, 35, 70, 0.14);
--nx-font-display: "Chakra Petch", "Bahnschrift", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;
--nx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--nx-display-weight: 700;
--nx-display-tracking: 0.02em;
--nx-radius-card: 3px;
--nx-radius-control: 3px;
--nx-primary-bg: var(--nx-accent);
--nx-primary-shadow: none;
}

:root[data-theme="dark"]:has(.skin-flag--deck) {
--nx-accent: #5df2cf;
--nx-accent-strong: #8bf7e0;
--nx-accent-soft: rgba(93, 242, 207, 0.10);
--nx-accent-glow: rgba(93, 242, 207, 0.20);
--nx-accent-ink: #052019;
--nx-canvas: #060a13;
--nx-surface: #0b1120;
--nx-surface-soft: #101830;
--nx-ink: #e9effc;
--nx-muted: #97a4c4;
--nx-faint: #5d6b8c;
--nx-line: rgba(146, 164, 205, 0.16);
--nx-line-soft: rgba(146, 164, 205, 0.09);
--nx-rail: #05080f;
--nx-rail-ink: #8fa0c4;
--nx-rail-fg: #e9effc;
--nx-rail-line: rgba(146, 164, 205, 0.16);
--nx-rail-hover: #101830;
--nx-rail-active: rgba(93, 242, 207, 0.10);
--nx-star: #ffc65c;
--nx-ok: #46d68c;
--nx-warn: #ffc65c;
--nx-danger: #ff6c8a;
--nx-car: #96a2ff;
--nx-car-soft: rgba(150, 162, 255, 0.13);
--nx-snackbar-bg: #eef1fb;
--nx-snackbar-ink: #10131f;
--nx-snackbar-muted: rgba(16, 19, 31, 0.6);
--nx-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.45), 0 10px 30px rgba(2, 6, 18, 0.5);
--nx-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(2, 6, 18, 0.6);
}

:root[dir="rtl"] {
--nx-font-ui: "Noto Kufi Arabic", "Inter", system-ui, sans-serif;
--nx-font-display: "Noto Kufi Arabic", serif;
--nx-font-mono: "Noto Kufi Arabic", "JetBrains Mono", ui-monospace, monospace;
}

:root[dir="rtl"]:has(.skin-flag--deck),
:root[dir="rtl"][data-theme="dark"]:has(.skin-flag--deck) {
--nx-font-ui: "Noto Kufi Arabic", "Inter", system-ui, sans-serif;
--nx-font-display: "Noto Kufi Arabic", "Chakra Petch", sans-serif;
--nx-font-mono: "Noto Kufi Arabic", "JetBrains Mono", ui-monospace, monospace;
}

body {
font-family: var(--nx-font-ui);
color: var(--nx-ink);
background: var(--nx-canvas);
}

body.body--dark,
body.body--light {
color: var(--nx-ink);
background: var(--nx-canvas);
}

.j-field--required .j-field__label::after {
content: none;
}

:root[data-theme="dark"]:has(.skin-flag--deck) body {
background:
radial-gradient(900px 420px at 78% -6%, var(--nx-accent-soft), transparent 60%),
radial-gradient(2px 2px at 12% 22%, var(--nx-line), transparent 55%),
radial-gradient(1.6px 1.6px at 44% 66%, var(--nx-line), transparent 55%),
radial-gradient(1.8px 1.8px at 84% 40%, var(--nx-line), transparent 55%),
var(--nx-canvas);
}

* {
box-sizing: border-box;
}

html,
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
overflow: hidden;
background: var(--nx-canvas);
}

body {
color: var(--nx-ink);
font-size: 14px;
transition: background 350ms ease, color 350ms ease;
}

a {
color: inherit;
}

j-app,
j-layout,
j-header,
j-toolbar,
j-drawer,
j-page-container,
j-page,
j-list,
j-item,
j-item-section,
j-item-label,
j-scroll-area,
j-card,
j-card-section,
j-card-actions,
j-form,
j-input,
j-textarea,
j-file,
j-linear-progress,
j-separator {
display: block;
}

j-button,
j-icon-button,
j-avatar,
j-badge,
j-chip,
j-icon,
j-space,
j-toggle {
display: inline-flex;
}

j-space {
flex: 1 1 auto;
}

button:focus-visible,
a:focus-visible {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
}

button {
font: inherit;
cursor: pointer;
}

j-button,
j-icon-button,
[role="button"] {
cursor: pointer;
}

.skin-flag {
display: none;
}

j-input.j-field:not(.global-search),
j-textarea.j-field,
j-select.j-field,
j-file.j-field {
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
display: grid;
gap: 7px;
}

.j-field__label {
color: var(--nx-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
}

.j-field__required {
color: var(--nx-danger);
}

.j-field__hint {
color: var(--nx-faint);
font-size: 10.5px;
}

input.j-input,
textarea.j-textarea,
.j-select__native,
select.j-select {
min-height: 46px;
padding: 0 15px;
border: 1.5px solid var(--nx-line);
border-radius: 14px;
color: var(--nx-ink);
background: var(--nx-surface-soft);
font: inherit;
transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

textarea.j-textarea {
padding: 12px 15px;
resize: vertical;
}

input.j-input:focus,
textarea.j-textarea:focus,
.j-select__native:focus,
select.j-select:focus {
outline: none;
border-color: var(--nx-accent);
background: var(--nx-surface);
box-shadow: 0 0 0 4px var(--nx-accent-soft);
}

input.j-input::placeholder,
textarea.j-textarea::placeholder {
color: var(--nx-faint);
}

label.j-checkbox {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
color: var(--nx-muted);
}

.j-checkbox__input {
appearance: none;
width: 19px;
height: 19px;
margin: 0;
flex: 0 0 19px;
display: grid;
place-items: center;
border: 1.5px solid var(--nx-line);
border-radius: 6px;
background: var(--nx-surface);
cursor: pointer;
transition: border-color 150ms ease, background 150ms ease;
}

.j-checkbox__input:checked {
border-color: var(--nx-accent);
background: var(--nx-accent);
}

.j-checkbox__input:checked::after {
width: 9px;
height: 5px;
margin-top: -2px;
border: 2.5px solid var(--nx-accent-ink);
border-top: 0;
border-right: 0;
border-radius: 1px;
transform: rotate(-45deg);
content: "";
}

.j-checkbox__input:focus-visible {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
}

.j-checkbox__label {
font-size: 12px;
}

j-file.j-file {
min-height: 54px;
display: grid;
place-items: center;
border: 1.5px dashed var(--nx-line);
border-radius: 14px;
color: var(--nx-faint);
background: var(--nx-surface-soft);
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: border-color 150ms ease, color 150ms ease;
}

j-file.j-file:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
}

j-file.j-file:empty::before {
content: attr(label);
}

input.j-input[type="file"] {
min-height: 52px;
padding: 9px 10px;
border-style: dashed;
cursor: pointer;
color: var(--nx-muted);
font-size: 12.5px;
}

input.j-input[type="file"]::file-selector-button {
margin-right: 12px;
min-height: 34px;
padding: 0 14px;
border: 0;
border-radius: 10px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font: 650 12px/1 var(--nx-font-ui);
cursor: pointer;
}

input.j-input[type="file"]:hover {
border-color: var(--nx-accent);
}

.mail-app,
.mail-shell {
width: 100%;
min-height: 100vh;
}

.mail-shell {
display: grid;
grid-template-columns: 78px 248px minmax(0, 1fr);
background: var(--nx-canvas);
}

.app-rail {
position: relative;
z-index: 4;
min-width: 0;
width: 100%;
max-width: 100%;
height: 100vh;
padding: 18px 10px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: #edecf6;
background: var(--nx-rail);
}

.brand-mark {
width: 46px;
height: 46px;
display: grid;
place-items: center;
margin-bottom: 14px;
border-radius: 15px;
text-decoration: none;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 10px 24px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.brand-envelope,
.brand-envelope j-icon {
display: grid;
place-items: center;
}

.brand-envelope j-icon {
font-size: 24px;
}

.rail-nav {
width: 100%;
display: grid;
gap: 8px;
}

.rail-link {
position: relative;
min-height: 54px;
padding: 8px 2px 7px;
display: grid;
place-items: center;
gap: 2px;
border-radius: 13px;
color: var(--nx-rail-ink);
text-decoration: none;
transition: color 180ms ease, background 180ms ease;
}

.rail-link j-icon {
font-size: 21px;
}

.rail-link span {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.02em;
}

.rail-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.07);
}

.rail-link--active {
color: #ffffff;
background: rgba(255, 255, 255, 0.09);
}

.rail-link--active::before {
position: absolute;
inset-inline-start: -10px;
top: 50%;
width: 3px;
height: 26px;
border-radius: 0 3px 3px 0;
background: var(--nx-accent);
transform: translateY(-50%);
content: "";
}

.rail-link--active j-icon {
--jv-icon-fill: 1;
color: color-mix(in srgb, var(--nx-accent) 45%, #ffffff);
}

.rail-foot {
width: 100%;
padding-top: 12px;
display: grid;
justify-items: center;
gap: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rail-theme,
.mini-action,
.topbar-action,
.icon-action,
.pager-action,
.star-action,
.editor-action {
width: 38px;
height: 38px;
min-height: 38px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
border-radius: 12px;
color: var(--nx-muted);
background: transparent;
cursor: pointer;
transition: color 150ms ease, background 150ms ease, transform 100ms ease;
}

.rail-theme {
color: var(--nx-rail-ink);
}

.rail-theme:hover,
.rail-theme:focus-visible {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}

.rail-avatar {
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
outline: 2px solid rgba(255, 255, 255, 0.2);
outline-offset: 2px;
font-size: 11px;
font-weight: 800;
}

.folder-drawer {
position: relative;
z-index: 3;
min-width: 0;
width: 100%;
max-width: 100%;
height: 100vh;
padding: 22px 16px 16px;
display: flex;
flex-direction: column;
overflow: hidden;
border-inline-end: 1px solid var(--nx-line);
background: transparent;
}

.folder-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin: 0 6px 18px;
}

.folder-head-copy {
min-width: 0;
}

.folder-account {
margin: 3px 0 0;
overflow: hidden;
color: var(--nx-faint);
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}

.eyebrow {
margin: 0 0 3px;
color: var(--nx-accent);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.folder-head h1,
.panel-head h2,
.subject-row h2,
.compose-head h2,
.contact-hero h2,
.settings-head h2 {
margin: 0;
color: var(--nx-ink);
font-family: var(--nx-font-display);
font-weight: 480;
letter-spacing: -0.01em;
}

.folder-head h1 {
font-size: 21px;
line-height: 26px;
}

.mini-action {
width: 32px;
height: 32px;
min-height: 32px;
border-radius: 10px;
}

.mini-action:hover,
.topbar-action:hover,
.icon-action:hover,
.pager-action:hover,
.editor-action:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.compose-button,
.send-button,
.save-settings {
min-height: 46px;
padding: 0 20px;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 15px;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 12px 26px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
font: inherit;
font-size: 13.5px;
font-weight: 650;
cursor: pointer;
text-decoration: none;
transition: transform 150ms ease, box-shadow 150ms ease;
}

.compose-button:hover,
.send-button:hover,
.save-settings:hover {
transform: translateY(-1px);
box-shadow: 0 16px 32px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.compose-button {
width: 100%;
margin-bottom: 18px;
}

.folder-list {
display: grid;
gap: 3px;
}

.folder-link {
display: block;
border-radius: 12px;
color: var(--nx-muted);
text-decoration: none;
transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.folder-link j-item {
min-height: 38px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 11px;
border-radius: inherit;
}

.folder-link j-item-label {
font-size: 13px;
font-weight: 500;
}

.folder-link:hover {
color: var(--nx-ink);
background: color-mix(in srgb, var(--nx-surface) 70%, transparent);
}

.folder-link:hover .folder-icon j-icon {
color: var(--nx-accent);
}

.folder-link--active {
color: var(--nx-ink);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.folder-link--active j-item-label {
font-weight: 650;
}

.folder-link--active .folder-icon j-icon {
--jv-icon-fill: 1;
color: var(--nx-accent);
}

.folder-icon {
width: 20px;
flex: 0 0 20px;
align-items: center;
justify-content: center;
}

.folder-icon j-icon {
font-size: 19px;
color: var(--nx-faint);
transition: color 150ms ease;
}

.folder-link j-item-section:not(.folder-icon):not(.folder-count) {
min-width: 0;
flex: 1 1 auto;
}

.folder-count {
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
}

.folder-count j-badge {
min-width: 21px;
height: 19px;
padding: 0 6px;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--nx-accent-ink);
background: var(--nx-accent);
font-size: 10px;
font-weight: 700;
}

.folder-label-row {
margin: 20px 12px 8px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--nx-faint);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.folder-list--compact .folder-link j-item {
min-height: 34px;
}

.folder-icon--dot::before {
width: 8px;
height: 8px;
border-radius: 3px;
transform: rotate(45deg);
background: var(--dot-color);
content: "";
}

.folder-icon--blue { --dot-color: #6a8ff0; }
.folder-icon--green { --dot-color: #43b489; }
.folder-icon--amber { --dot-color: #e0a54b; }

.storage-card {
margin-top: auto;
padding: 14px 14px 15px;
border: 1px solid var(--nx-line-soft);
border-radius: 14px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.storage-copy {
margin-bottom: 9px;
display: flex;
justify-content: space-between;
gap: 8px;
color: var(--nx-faint);
font-size: 10.5px;
}

.storage-copy strong {
color: var(--nx-muted);
font-weight: 600;
}

.storage-card j-linear-progress {
position: relative;
height: 5px;
overflow: hidden;
border-radius: 999px;
background: var(--nx-line);
}

.storage-card j-linear-progress::after {
width: 28%;
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, var(--nx-accent), var(--nx-accent-strong));
content: "";
}

.workspace {
min-width: 0;
height: 100vh;
display: grid;
grid-template-rows: 66px minmax(0, 1fr);
}

.topbar {
position: relative;
z-index: 2;
min-width: 0;
border-bottom: 1px solid var(--nx-line);
background: color-mix(in srgb, var(--nx-canvas) 70%, var(--nx-surface) 30%);
}

.topbar j-toolbar {
min-height: 66px;
padding: 0 22px;
display: flex;
align-items: center;
gap: 10px;
}

.search-shell {
position: relative;
width: min(560px, 48vw);
min-height: 40px;
padding: 0 4px 0 14px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--nx-line);
border-radius: 999px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
transition: border-color 200ms ease, box-shadow 200ms ease;
}

.search-shell:hover {
border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-line));
}

.search-shell:focus-within {
border-color: var(--nx-accent);
box-shadow: 0 0 0 4px var(--nx-accent-soft);
}

.search-icon {
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 19px;
}

.search-shell:focus-within .search-icon {
color: var(--nx-accent);
}

.global-search {
min-width: 0;
flex: 1 1 auto;
}

.global-search .j-field__label,
.global-search label {
display: none;
}

.global-search .j-input,
.global-search input,
j-input.global-search {
width: 100%;
min-height: 38px;
padding: 0;
border: 0;
border-radius: 0;
color: var(--nx-ink);
background: transparent;
font-size: 12.5px;
}

.global-search .j-input:focus,
.global-search input:focus {
border: 0;
background: transparent;
box-shadow: none;
}

.search-submit {
width: 32px;
height: 32px;
min-height: 32px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
color: var(--nx-muted);
background: transparent;
cursor: pointer;
transition: color 150ms ease, background 150ms ease;
}

.search-submit:hover,
.search-submit:focus-visible {
color: var(--nx-accent-ink);
background: var(--nx-accent);
}

.search-submit j-icon {
font-size: 18px;
}

.mobile-brand {
display: none;
align-items: center;
gap: 8px;
}

.mobile-brand .brand-envelope {
width: 34px;
height: 34px;
border-radius: 11px;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
}

.mail-pages {
min-width: 0;
min-height: 0;
overflow: hidden;
}

.inbox-page,
.directory-page {
height: calc(100vh - 66px);
min-width: 0;
}

.directory-page {
display: grid;
grid-template-columns: minmax(340px, 40%) minmax(0, 1fr);
}

.inbox-page {
display: block;
overflow: hidden;
}

.inbox-splitter {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
display: flex;
align-items: stretch;
overflow: hidden;
}

.inbox-splitter > .message-column {
min-width: 0;
max-width: none;
flex: 0 0 auto;
overflow: hidden;
}

.inbox-splitter > .j-splitter__separator {
position: relative;
z-index: 7;
min-height: 0;
border-inline: 1px solid var(--nx-line);
background: color-mix(in srgb, var(--nx-canvas) 94%, var(--nx-surface));
}

.inbox-splitter > .j-splitter__separator::after {
width: 3px;
background: color-mix(in srgb, var(--nx-muted) 58%, transparent);
}

.inbox-splitter > .reader-column {
min-width: 0;
flex: 0 0 auto;
}

.message-column,
.contacts-list {
position: relative;
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
border-inline-end: 1px solid var(--nx-line);
background: transparent;
}

.message-column > .filter-row,
.message-column > .search-scopes,
.contacts-list > .contact-search {
grid-row: 2;
}

.message-column > j-alert,
.contacts-list > j-alert {
grid-row: 3;
margin: 8px 16px 0;
}

.message-column > .message-scroll,
.message-column > .detail-card,
.message-column > .mailbox-empty,
.contacts-list > .contact-scroll,
.contacts-list > .mailbox-empty {
grid-row: 4;
}

.message-column > .list-footer,
.contacts-list > .list-footer {
grid-row: 5;
}

.panel-head,
.compose-head {
min-height: 76px;
padding: 20px 20px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.panel-head h2,
.compose-head h2,
.settings-head h2 {
font-size: 24px;
line-height: 30px;
}

.panel-heading {
min-width: 0;
}

.panel-head h2 {
display: flex;
align-items: center;
gap: 9px;
}

.count-pill {
min-width: 22px;
height: 20px;
padding: 0 7px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-family: var(--nx-font-ui);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}

.live-pill {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 4px;
padding: 0 10px 0 8px;
height: 24px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: color 200ms ease, background 200ms ease;
}

.live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}

.live-pill--on {
color: var(--nx-ok);
background: color-mix(in srgb, var(--nx-ok) 12%, transparent);
}

.live-pill--on .live-dot {
animation: live-pulse 2.4s ease-in-out infinite;
}

.live-pill--off {
color: var(--nx-faint);
background: var(--nx-line-soft);
}

@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}

.panel-actions,
.reader-primary-actions {
display: flex;
align-items: center;
gap: 3px;
}

.filter-row {
padding: 6px 20px 14px;
display: flex;
gap: 7px;
}

.filter-chip {
min-height: 28px;
padding: 0 13px;
border: 1px solid var(--nx-line);
border-radius: 999px;
color: var(--nx-muted);
background: transparent;
font: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.filter-chip:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
}

.filter-chip--active,
.filter-chip--active:hover {
border-color: var(--nx-ink);
color: var(--nx-canvas);
background: var(--nx-ink);
}

.message-scroll,
.reader-scroll {
min-height: 0;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.mailbox-progress {
position: absolute;
z-index: 2;
top: 75px;
right: 0;
left: 0;
height: 2px;
overflow: hidden;
background: var(--nx-line-soft);
}

.mailbox-progress::after {
width: 42%;
height: 100%;
display: block;
border-radius: inherit;
background: linear-gradient(90deg, transparent, var(--nx-accent), transparent);
content: "";
animation: mailbox-progress 1.15s ease-in-out infinite;
}

.mail-skeleton-list {
gap: 7px;
padding-top: 8px;
}

.mail-skeleton-row {
border-radius: 16px;
background: color-mix(in srgb, var(--nx-surface) 45%, transparent);
}

.mail-skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 14px;
}

.mail-skeleton-name,
.mail-skeleton-subject,
.mail-skeleton-preview {
display: block;
height: 9px;
margin-bottom: 9px;
border-radius: 999px;
}

.mail-skeleton-name { width: 36%; }
.mail-skeleton-name--short { width: 24%; }
.mail-skeleton-subject { width: 72%; }
.mail-skeleton-subject--short { width: 54%; }
.mail-skeleton-preview { width: 92%; margin-bottom: 0; }
.mail-skeleton-preview--short { width: 78%; }

@keyframes mailbox-progress {
from { transform: translateX(-120%); }
to { transform: translateX(340%); }
}

.message-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
align-content: start;
padding: 2px 12px 12px;
}

.message-link {
position: relative;
display: block;
min-width: 0;
border-radius: 16px;
color: inherit;
text-decoration: none;
transition: background 150ms ease, box-shadow 150ms ease;
}

.message-link:hover {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.message-link--selected,
.message-link--selected:hover {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1),
inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 35%, transparent);
}

.message-link--selected::before {
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 3.5px;
border-radius: 0 4px 4px 0;
background: var(--nx-accent);
content: "";
}

.message-row {
min-height: 82px;
padding: 12px 14px;
display: flex;
align-items: flex-start;
gap: 12px;
}

.message-link--unread,
.message-row--unread {
border-radius: inherit;
}

.message-link:has(.message-row--unread) {
background: color-mix(in srgb, var(--nx-surface) 55%, transparent);
}

.message-link:has(.message-row--unread)::before {
position: absolute;
inset-inline-start: 0;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--nx-accent);
content: "";
}

.message-avatar {
position: relative;
flex: 0 0 auto;
}

.unread-dot {
position: absolute;
inset-inline-end: -2px;
top: -2px;
width: 10px;
height: 10px;
border: 2px solid var(--nx-canvas);
border-radius: 50%;
background: var(--nx-accent);
}

.message-link:hover .unread-dot {
border-color: var(--nx-surface);
}

.avatar,
.sender-avatar,
.quick-avatar,
.contact-hero-avatar {
align-items: center;
justify-content: center;
border-radius: 14px;
color: #4d5b6b;
background: #e4e8ed;
font-weight: 750;
}

.message-avatar .avatar {
width: 40px;
height: 40px;
font-size: 11.5px;
}

.avatar--violet { color: #5b4694; background: #ece5fa; }
.avatar--blue { color: #23649a; background: #dcebf9; }
.avatar--green { color: #2e6f52; background: #ddf0e6; }
.avatar--amber { color: #8c6023; background: #f7ead4; }
.avatar--rose { color: #97485c; background: #f8e1e7; }
.avatar--slate { color: #4d5b6b; background: #e4e8ed; }

[data-theme="dark"] .avatar--violet { color: #cabcf4; background: #322a52; }
[data-theme="dark"] .avatar--blue { color: #9cc8ef; background: #1e3550; }
[data-theme="dark"] .avatar--green { color: #93d9b9; background: #1c3d2e; }
[data-theme="dark"] .avatar--amber { color: #ebc78a; background: #45351a; }
[data-theme="dark"] .avatar--rose { color: #f0aec0; background: #472633; }
[data-theme="dark"] .avatar--slate,
[data-theme="dark"] .avatar,
[data-theme="dark"] .sender-avatar,
[data-theme="dark"] .quick-avatar,
[data-theme="dark"] .contact-hero-avatar { color: #b6c2cf; background: #2c3542; }

.online-dot {
position: absolute;
right: -2px;
bottom: -2px;
width: 11px;
height: 11px;
border: 2.5px solid var(--nx-canvas);
border-radius: 50%;
background: var(--nx-ok);
}

.message-link:hover .online-dot,
.message-link--selected .online-dot {
border-color: var(--nx-surface);
}

.message-copy {
min-width: 0;
flex: 1 1 auto;
}

.message-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 3px;
}

.message-meta strong {
min-width: 0;
overflow: hidden;
color: var(--nx-ink);
font-size: 12.5px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}

.message-row--unread .message-meta strong,
.message-row--unread .message-subject {
font-weight: 750;
}

.message-row--unread .message-meta time {
color: var(--nx-accent);
font-weight: 700;
}

.message-meta time,
.sender-card time {
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}

.message-subject,
.message-preview {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.message-subject {
color: var(--nx-ink);
font-size: 12.5px;
font-weight: 500;
}

.message-preview {
margin-top: 0;
color: var(--nx-muted);
font-size: 11.5px;
}

.message-tail {
margin-top: 3px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.message-tail .message-preview {
min-width: 0;
flex: 1 1 auto;
}

.message-flags {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 5px;
}

.flag-icon {
color: var(--nx-faint);
font-size: 15px;
}

.flag-icon--star {
--jv-icon-fill: 1;
color: var(--nx-star);
}

.message-tags {
min-height: 20px;
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
}

.tag,
.tiny-chip {
min-height: 18px;
padding: 0 8px;
align-items: center;
border-radius: 6px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.02em;
}

.tag--green { color: #2e6f52; background: #ddf0e6; }
.tag--amber { color: #8c6023; background: #f7ead4; }
.tag--rose { color: #97485c; background: #f8e1e7; }

[data-theme="dark"] .tag--green { color: #93d9b9; background: #1c3d2e; }
[data-theme="dark"] .tag--amber { color: #ebc78a; background: #45351a; }
[data-theme="dark"] .tag--rose { color: #f0aec0; background: #472633; }

.attachment {
color: var(--nx-faint);
font-size: 15px;
}

.list-footer {
min-height: 47px;
padding: 0 15px 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--nx-line);
color: var(--nx-faint);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}

.list-footer div {
display: flex;
}

.pager-action[disabled] {
opacity: 0.35;
pointer-events: none;
}

.reader-column {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: transparent;
}

.reader-selected-view {
position: relative;
min-width: 0;
min-height: 0;
display: grid;
grid-row: 1 / -1;
grid-template-rows: auto minmax(0, 1fr);
}

.reader-toolbar {
min-height: 58px;
padding: 0 24px;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid var(--nx-line);
background: transparent;
}

.reader-action,
.attachment-button,
.outline-button {
min-height: 36px;
padding: 0 15px;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--nx-line);
border-radius: 12px;
color: var(--nx-muted);
background: var(--nx-surface);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.reader-action:hover,
.attachment-button:hover,
.outline-button:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
}

.reader-action--primary,
.reader-action--primary:hover {
border-color: transparent;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 8px 18px var(--nx-accent-glow);
}

.reader-action--primary:hover {
transform: translateY(-1px);
}

.reader-scroll {
padding: 26px clamp(20px, 3vw, 44px) 44px;
}

.reader-content {
min-width: 0;
max-width: 100%;
width: min(860px, 100%);
margin: 0 auto;
padding: 40px clamp(28px, 4vw, 56px) 44px;
border: 1px solid var(--nx-line-soft);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.reader-content--wide {
width: min(900px, 100%);
}

.subject-row {
min-width: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}

.subject-row h2 {
min-width: 0;
max-width: 100%;
margin-top: 4px;
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 440;
line-height: 1.12;
letter-spacing: -0.015em;
overflow-wrap: anywhere;
}

.star-action,
.message-star {
color: var(--nx-star);
}

.star-action:hover {
color: var(--nx-star);
background: var(--nx-accent-soft);
}

.sender-card {
margin-top: 26px;
padding-bottom: 22px;
display: flex;
align-items: center;
gap: 13px;
border-bottom: 1px solid var(--nx-line-soft);
}

.sender-avatar {
width: 44px;
height: 44px;
flex: 0 0 44px;
font-size: 12px;
}

.sender-details {
min-width: 0;
flex: 1 1 auto;
}

.sender-details > div {
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
}

.sender-details strong {
min-width: 0;
font-size: 13px;
overflow-wrap: anywhere;
}

.sender-details span,
.sender-details p {
min-width: 0;
color: var(--nx-faint);
font-size: 11px;
overflow-wrap: anywhere;
}

.sender-details p {
margin: 3px 0 0;
}

.tiny-chip {
margin-left: 3px;
border-radius: 999px;
font-style: normal;
}

.message-body {
min-width: 0;
width: 100%;
max-width: 66ch;
padding: 26px 0 8px;
color: var(--nx-ink);
font-size: 14px;
line-height: 1.75;
overflow-wrap: anywhere;
}

.message-body p {
margin: 0 0 16px;
}

.message-body blockquote {
margin: 26px 0;
padding: 18px 24px;
border-left: 3px solid var(--nx-accent);
border-radius: 4px 16px 16px 4px;
color: var(--nx-ink);
background: var(--nx-accent-soft);
font-family: var(--nx-font-display);
font-size: 17px;
font-style: italic;
line-height: 1.5;
}

.message-body--rich > div {
font: inherit !important;
color: inherit !important;
}

.message-body--rich h2,
.message-body--rich h3,
.message-body--rich h4 {
margin: 20px 0 9px !important;
color: var(--nx-ink);
font-family: var(--nx-font-display);
line-height: 1.25;
}

.message-body--rich ul,
.message-body--rich ol {
margin: 10px 0 16px !important;
padding-inline-start: 24px !important;
}

.message-body--rich li {
margin: 5px 0;
}

.message-body--rich a {
color: var(--nx-accent-strong) !important;
text-decoration: underline;
text-underline-offset: 3px;
}

.message-body--rich pre,
.message-body--rich code {
border-radius: 8px;
background: var(--nx-surface-soft) !important;
font-family: var(--nx-font-mono);
}

.inline-reply-card {
margin-top: 28px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--nx-accent) 25%, var(--nx-line));
border-radius: 16px;
background: var(--nx-surface);
box-shadow: 0 12px 30px color-mix(in srgb, var(--nx-ink) 9%, transparent);
transform-origin: top center;
transition:
max-height 180ms ease,
margin 180ms ease,
opacity 140ms ease,
transform 180ms ease,
visibility 0s linear;
}

.inline-reply-card--open {
max-height: 560px;
opacity: 1;
transform: translateY(0);
visibility: visible;
}

.inline-reply-card--closed {
max-height: 0;
margin-block: 0;
border-width: 0;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
visibility: hidden;
transition-delay: 0s, 0s, 0s, 0s, 180ms;
}

.inline-reply-head {
padding: 14px 16px 11px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid var(--nx-line-soft);
}

.inline-reply-head > span {
min-width: 0;
display: grid;
gap: 3px;
}

.inline-reply-head strong {
overflow: hidden;
font-size: 12.5px;
text-overflow: ellipsis;
white-space: nowrap;
}

.inline-reply-toolbar {
min-height: 40px;
padding: 4px 10px;
gap: 2px;
border-bottom: 1px solid var(--nx-line-soft);
background: var(--nx-surface-soft);
}

.inline-reply-editor {
min-height: 150px;
}

.inline-reply-editor j-editor {
min-height: 150px;
border: 0;
border-radius: 0;
}

.inline-reply-actions {
padding: 12px 14px 14px;
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid var(--nx-line-soft);
}

.attachment-card {
max-width: 500px;
min-height: 68px;
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 16px;
background: var(--nx-surface-soft);
transition: border-color 150ms ease, box-shadow 150ms ease;
}

.attachment-card:hover {
border-color: var(--nx-accent);
box-shadow: var(--nx-shadow-1);
}

.attachment-icon {
width: 46px;
height: 46px;
margin-left: 11px;
display: grid;
place-items: center;
flex: 0 0 46px;
border-radius: 13px;
color: #c2452d;
background: #fae7e3;
}

[data-theme="dark"] .attachment-icon {
color: #f3a08e;
background: #46231c;
}

.attachment-copy {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: 3px;
}

.attachment-copy strong {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}

.attachment-copy span {
color: var(--nx-faint);
font-size: 10.5px;
}

.attachment-card j-card-actions {
padding: 0 9px;
display: flex;
gap: 2px;
}

.quick-reply {
max-width: 620px;
margin-top: 30px;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--nx-line);
border-radius: 999px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.quick-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 50%;
font-size: 9.5px;
}

.quick-reply-button {
min-height: 32px;
flex: 1 1 auto;
justify-content: flex-start;
border: 0;
color: var(--nx-faint);
background: transparent;
font: inherit;
font-size: 12px;
cursor: text;
text-decoration: none;
}

.single-page,
.compose-page,
.settings-page {
height: calc(100vh - 66px);
min-width: 0;
overflow: auto;
background: transparent;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.reader-column--single {
min-height: 100%;
}

.compose-page {
padding: 26px;
}

.compose-panel {
position: relative;
width: min(940px, 100%);
min-height: calc(100vh - 118px);
margin: 0 auto;
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.sending-overlay {
position: absolute;
z-index: 20;
inset: 0;
display: grid;
place-items: center;
border: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--nx-surface) 88%, transparent);
box-shadow: none;
backdrop-filter: blur(9px);
}

.sending-overlay__content {
width: min(360px, calc(100% - 36px));
padding: 34px 30px;
display: grid;
justify-items: center;
gap: 10px;
border: 1px solid var(--nx-line-soft);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
text-align: center;
}

.sending-overlay__content strong {
margin-top: 2px;
color: var(--nx-ink);
font-size: 17px;
}

.sending-overlay__content p {
max-width: 28ch;
margin: 0;
color: var(--nx-muted);
font-size: 12px;
line-height: 1.6;
}

.sending-flight {
position: relative;
width: 152px;
height: 46px;
overflow: hidden;
}

.sending-flight__trail {
position: absolute;
top: 22px;
left: 6px;
width: 106px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--nx-accent));
animation: sending-trail 1.2s ease-in-out infinite;
}

.sending-flight__icon {
position: absolute;
top: 9px;
left: 16px;
color: var(--nx-accent);
font-size: 28px;
transform: rotate(-8deg);
animation: sending-flight 1.2s cubic-bezier(.45, 0, .3, 1) infinite;
}

.sending-spinner {
color: var(--nx-accent);
}

.undo-send {
position: fixed;
z-index: 100;
inset-inline-end: 28px;
bottom: 28px;
width: min(430px, calc(100vw - 32px));
min-height: 74px;
padding: 15px 16px 18px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--nx-accent) 32%, transparent);
border-radius: 16px;
color: var(--nx-snackbar-ink);
background: var(--nx-snackbar-bg);
box-shadow: 0 24px 70px rgba(10, 18, 28, .3);
animation: undo-send-enter 220ms cubic-bezier(.2, .8, .2, 1);
}

.undo-send__status {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
color: var(--nx-snackbar-ink);
}

.undo-send__status > j-icon {
flex: 0 0 auto;
color: var(--nx-accent);
font-size: 23px;
}

.undo-send__status div {
min-width: 0;
display: grid;
gap: 2px;
}

.undo-send__status strong {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}

.undo-send__status span {
color: var(--nx-snackbar-muted);
font-size: 10.5px;
}

.undo-send__action {
min-height: 36px;
padding: 0 15px;
border-radius: 10px;
color: var(--nx-accent);
background: color-mix(in srgb, var(--nx-accent) 12%, transparent);
font-size: 11px;
font-weight: 750;
}

.undo-send__progress {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
color: var(--nx-accent);
}

@keyframes sending-flight {
0% { opacity: 0; transform: translateX(0) translateY(8px) rotate(-8deg) scale(.82); }
18% { opacity: 1; }
78% { opacity: 1; }
100% { opacity: 0; transform: translateX(106px) translateY(-7px) rotate(-8deg) scale(1.05); }
}

@keyframes sending-trail {
0%, 100% { opacity: 0; transform: scaleX(.1); transform-origin: left; }
35%, 70% { opacity: .8; transform: scaleX(1); transform-origin: left; }
}

@keyframes undo-send-enter {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}

.compose-head {
border-bottom: 1px solid var(--nx-line-soft);
}

.compose-form {
position: relative;
padding: 20px 26px 24px;
display: grid;
gap: 12px;
}

.compose-field,
.compose-body,
.compose-attachment {
width: 100%;
}

.compose-field,
.compose-body,
.compose-attachment,
.compose-field input,
.compose-body textarea {
width: 100%;
}

.recipient-links {
position: absolute;
top: 16px;
right: 28px;
display: flex;
gap: 2px;
}

.text-action {
min-height: 28px;
padding: 0 7px;
border: 0;
color: var(--nx-accent-strong);
background: transparent;
font: inherit;
font-size: 10.5px;
font-weight: 600;
cursor: pointer;
}

.editor-toolbar {
min-height: 44px;
padding: 4px 6px;
display: flex;
align-items: center;
gap: 1px;
border: 1.5px solid var(--nx-line);
border-bottom: 0;
border-radius: 14px 14px 0 0;
background: var(--nx-surface-soft);
}

.editor-action {
width: 32px;
height: 32px;
min-height: 32px;
border-radius: 9px;
}

.editor-toolbar j-separator {
width: 1px;
height: 22px;
margin: 0 6px;
background: var(--nx-line);
}

.compose-body {
margin-top: -12px;
}

.compose-body .j-field__label {
display: none;
}

.compose-body textarea {
min-height: 300px;
resize: vertical;
border-radius: 0 0 14px 14px;
}

.compose-footer {
margin-top: 6px;
display: flex;
align-items: center;
gap: 8px;
}

.draft-status {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--nx-faint);
font-size: 10.5px;
}

.draft-status j-icon {
color: var(--nx-ok);
font-size: 17px;
}

.directory-page {
grid-template-columns: minmax(300px, 35%) minmax(0, 1fr);
}

.contacts-list {
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.contact-search {
padding: 0 18px 14px;
}

.contact-search input,
j-input.contact-search {
border: 1px solid var(--nx-line);
border-radius: 999px;
background: var(--nx-surface);
}

.contact-items {
overflow: auto;
padding: 2px 12px 12px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
align-content: start;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.contact-row {
min-height: 64px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 14px;
cursor: pointer;
transition: background 150ms ease, box-shadow 150ms ease;
}

.contact-row:hover {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.contact-row--active,
.contact-row--active:hover {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1),
inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 35%, transparent);
}

.contact-avatar {
flex: 0 0 auto;
}

.contact-avatar .avatar {
width: 40px;
height: 40px;
font-size: 11px;
}

.contact-row > j-item-section:nth-child(2) {
min-width: 0;
flex: 1 1 auto;
}

.contact-name,
.contact-email {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.contact-name {
font-size: 12.5px;
font-weight: 650;
}

.contact-email {
margin-top: 3px;
color: var(--nx-faint);
font-size: 10.5px;
}

.contact-favorite {
color: var(--nx-star);
}

.contact-detail {
padding: clamp(26px, 5vw, 64px);
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.contact-hero {
display: flex;
align-items: center;
gap: 17px;
margin-bottom: 28px;
}

.contact-hero-avatar {
width: 64px;
height: 64px;
flex: 0 0 64px;
border-radius: 20px;
font-size: 18px;
}

.contact-hero h2 {
font-size: 27px;
}

.contact-hero p,
.settings-head p,
.settings-card-head p {
margin: 5px 0 0;
color: var(--nx-muted);
font-size: 11.5px;
}

.detail-card,
.settings-card {
border: 1px solid var(--nx-line-soft);
border-radius: 18px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.detail-card + .detail-card {
margin-top: 15px;
}

.detail-card > j-card-section {
padding: 20px;
}

.detail-line {
display: flex;
align-items: center;
gap: 13px;
padding: 12px 0;
}

.detail-line j-icon {
color: var(--nx-accent);
}

.detail-line div {
display: grid;
gap: 2px;
}

.detail-line span,
.conversation-link span {
color: var(--nx-faint);
font-size: 9.5px;
}

.detail-line strong,
.conversation-link strong {
font-size: 11.5px;
}

.conversation-link {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: inherit;
text-decoration: none;
}

.conversation-link + .conversation-link {
border-top: 1px solid var(--nx-line-soft);
}

.conversation-link div {
display: grid;
gap: 3px;
}

.settings-page {
padding: 30px clamp(24px, 4vw, 52px) 60px;
}

.settings-head {
max-width: 1040px;
margin: 0 auto 22px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}

.settings-grid {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}

.settings-card {
overflow: hidden;
}

.settings-card-head {
padding: 18px 20px;
display: flex;
align-items: center;
gap: 13px;
border-bottom: 1px solid var(--nx-line-soft);
}

.settings-card-head h3 {
margin: 0;
font-size: 14px;
font-weight: 650;
}

.settings-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
border-radius: 12px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.settings-icon--green { color: #2e6f52; background: #ddf0e6; }
.settings-icon--amber { color: #8c6023; background: #f7ead4; }
.settings-icon--violet { color: #5b4694; background: #ece5fa; }

[data-theme="dark"] .settings-icon--green { color: #93d9b9; background: #1c3d2e; }
[data-theme="dark"] .settings-icon--amber { color: #ebc78a; background: #45351a; }
[data-theme="dark"] .settings-icon--violet { color: #cabcf4; background: #322a52; }

.settings-options {
padding: 6px 20px 14px;
}

.settings-control-field {
min-width: 0;
padding-top: 10px;
display: grid;
gap: 6px;
}

.settings-control-label {
color: var(--nx-muted);
font-size: 10.5px;
font-weight: 750;
letter-spacing: .03em;
}

.settings-control-field > j-input > .j-field__label,
.settings-control-field > j-textarea > .j-field__label {
display: none;
}

.setting-row,
.account-status {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}

.setting-row + .setting-row {
border-top: 1px solid var(--nx-line-soft);
}

.setting-row div,
.account-status div {
display: grid;
gap: 4px;
}

.setting-row strong,
.account-status strong {
font-size: 11.5px;
}

.setting-row span,
.account-status span {
color: var(--nx-faint);
font-size: 9.5px;
}

j-toggle.j-toggle::before,
j-toggle.j-toggle::after,
.setting-row j-toggle::before,
.setting-row j-toggle::after {
content: none;
}

.setting-row j-toggle {
flex: 0 0 auto;
align-items: center;
cursor: pointer;
}

j-toggle > label.j-toggle {

pointer-events: none;
min-height: 24px;
gap: 0;
}

j-toggle .j-toggle__track {
box-sizing: border-box;
flex: 0 0 42px;
width: 42px;
height: 24px;
padding: 2px;
border-radius: 999px;
border: 1px solid var(--nx-line);
background: var(--nx-line);
transition: background 200ms ease, border-color 200ms ease;
}

j-toggle .j-toggle__thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
transform: translateX(0);
transition: transform 200ms ease, background 200ms ease;
}

j-toggle.j-toggle[aria-checked="true"] .j-toggle__track,
j-toggle.j-toggle[checked] .j-toggle__track {
background: var(--nx-accent);
border-color: var(--nx-accent);
}

j-toggle.j-toggle[aria-checked="true"] .j-toggle__thumb,
j-toggle.j-toggle[checked] .j-toggle__thumb {
transform: translateX(18px);
}

j-toggle.j-toggle[aria-checked="false"] .j-toggle__track {
background: var(--nx-line);
border-color: var(--nx-line);
}

j-toggle.j-toggle[aria-checked="false"] .j-toggle__thumb {
transform: translateX(0);
}

j-toggle.j-toggle:focus-visible {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
border-radius: 999px;
}

.theme-choices {
padding: 13px 0 8px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}

.theme-choice {
min-height: 68px;
padding: 8px;
display: grid;
place-items: center;
gap: 5px;
border: 1px solid var(--nx-line);
border-radius: 12px;
color: var(--nx-muted);
background: transparent;
font: inherit;
font-size: 9.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.theme-choice:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
}

.theme-choice--active {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
box-shadow: 0 0 0 4px var(--nx-accent-soft);
}

.theme-swatch {
width: 43px;
height: 28px;
display: block;
border: 1px solid var(--nx-line);
border-radius: 7px;
background: linear-gradient(90deg, #eceaf5 30%, #ffffff 30%);
}

.theme-swatch--dark {
border-color: #33364a;
background: linear-gradient(90deg, #0e0f17 30%, #1c1e2b 30%);
}

.theme-swatch--auto {
background: linear-gradient(135deg, #ffffff 50%, #1c1e2b 50%);
}

.account-status {
justify-content: flex-start;
}

.status-dot {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: var(--nx-ok);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-ok) 14%, transparent);
}

.status-dot--off {
background: var(--nx-faint);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-faint) 14%, transparent);
}

.outline-button {
margin: 5px 0;
}

.login-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(400px, 47%) minmax(480px, 53%);
background:
radial-gradient(900px 500px at 88% -10%, var(--nx-accent-soft), transparent 60%),
var(--nx-canvas);
}

.login-story {
position: relative;
min-height: 100vh;
padding: 40px clamp(36px, 5vw, 78px) 38px;
display: flex;
flex-direction: column;
overflow: hidden;
color: #eceaf6;
background: var(--nx-rail);
}

.login-story::before,
.login-story::after {
position: absolute;
content: "";
}

.login-story::before {
width: 640px;
height: 640px;
right: -220px;
top: -260px;
border-radius: 50%;
background: radial-gradient(circle, var(--nx-accent-glow), transparent 65%);
filter: blur(10px);
}

.login-story::after {
width: 320px;
height: 320px;
left: -180px;
bottom: -80px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50%;
}

.login-brand,
.login-mobile-brand {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 11px;
color: #ffffff;
text-decoration: none;
}

.login-brand strong,
.login-mobile-brand strong {
font-size: 16px;
font-weight: 750;
letter-spacing: -0.01em;
}

.login-brand-mark {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 13px;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 10px 24px var(--nx-accent-glow);
}

.login-brand-mark j-icon {
font-size: 22px;
}

.login-story-copy {
position: relative;
z-index: 1;
width: min(520px, 100%);
margin: auto 0;
padding: 50px 0 38px;
}

.login-kicker {
min-height: 30px;
padding: 0 13px;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
color: #cfcde6;
background: rgba(255, 255, 255, 0.05);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.login-kicker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--nx-ok);
box-shadow: 0 0 0 4px rgba(47, 158, 110, 0.15);
}

.login-story h1 {
margin: 22px 0 16px;
color: #ffffff;
font-family: var(--nx-font-display);
font-size: clamp(44px, 4.6vw, 64px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.015em;
}

.login-story h1 em {
color: color-mix(in srgb, #ffffff 40%, var(--nx-accent));
font-style: italic;
}

.login-story-copy > p {
max-width: 42ch;
margin: 0;
color: #b7b3cf;
font-size: 14.5px;
line-height: 1.7;
}

.login-benefits {
margin-top: 30px;
display: grid;
gap: 14px;
}

.login-benefits > div {
display: flex;
align-items: center;
gap: 13px;
}

.login-benefits > div > span {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: color-mix(in srgb, #ffffff 45%, var(--nx-accent));
background: rgba(255, 255, 255, 0.07);
}

.login-benefits j-icon {
font-size: 19px;
}

.login-benefits p {
margin: 0;
display: grid;
gap: 3px;
}

.login-benefits strong {
color: #eceaf6;
font-size: 12.5px;
}

.login-benefits small {
color: #a09cbb;
font-size: 11px;
}

.login-assurance {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 22px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.login-assurance-mark {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: grid;
place-items: center;
border-radius: 12px;
color: #cabcf4;
background: rgba(255, 255, 255, 0.08);
}

.login-assurance-mark j-icon {
font-size: 19px;
}

.login-assurance p {
display: grid;
gap: 3px;
margin: 0;
}

.login-assurance strong {
color: #eceaf6;
font-size: 12.5px;
font-weight: 650;
}

.login-assurance small {
color: #a09cbb;
font-size: 11px;
line-height: 1.55;
}

.login-form-panel {
min-height: 100vh;
padding: 38px clamp(36px, 7vw, 110px) 24px;
display: flex;
flex-direction: column;
justify-content: center;
background: transparent;
}

.login-mobile-brand {
display: none;
margin-bottom: 26px;
color: var(--nx-ink);
}

.login-card {
width: min(470px, 100%);
margin: auto;
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: 24px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.login-card > j-card-section {
padding: 0 34px 30px;
}

.login-card > .login-card-head {
padding: 32px 34px 20px;
}

.login-card-head h2 {
margin: 4px 0 0;
color: var(--nx-ink);
font-family: var(--nx-font-display);
font-size: 27px;
font-weight: 460;
line-height: 1.2;
letter-spacing: -0.01em;
}

.login-card-head > p:last-child {
margin: 8px 0 0;
color: var(--nx-muted);
font-size: 12.5px;
}

.login-alert {
min-height: 42px;
margin-bottom: 13px;
padding: 10px 13px;
display: flex;
align-items: center;
gap: 9px;
border: 1px solid color-mix(in srgb, var(--nx-danger) 28%, transparent);
border-radius: 12px;
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 10%, transparent);
font-size: 11px;
font-weight: 600;
}

.login-alert j-icon {
font-size: 18px;
}

.login-form {
display: grid;
gap: 14px;
}

.login-field {
width: 100%;
}

.login-options {
margin-top: -2px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.login-options j-checkbox {
color: var(--nx-muted);
font-size: 11.5px;
}

.forgot-link {
min-height: 28px;
padding: 0;
border: 0;
color: var(--nx-accent-strong);
background: transparent;
font: inherit;
font-size: 11.5px;
font-weight: 650;
cursor: pointer;
}

.login-submit {
width: 100%;
min-height: 48px;
padding: 0 18px;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 15px;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 14px 30px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
font: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform 150ms ease;
}

.login-submit:hover {
transform: translateY(-1px);
}

.login-submit j-icon {
font-size: 17px;
}

.login-divider {
margin: 20px 0 14px;
display: grid;
grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
align-items: center;
gap: 12px;
color: var(--nx-faint);
font-size: 10.5px;
}

.login-divider j-separator {
height: 1px;
background: var(--nx-line);
}

.login-alternatives {
display: grid;
grid-template-columns: minmax(0, 1fr) 52px;
gap: 10px;
}

.login-alt-button {
min-height: 42px;
padding: 0 13px;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px solid var(--nx-line);
border-radius: 13px;
color: var(--nx-muted);
background: var(--nx-surface);
font: inherit;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease, color 150ms ease;
}

.login-alt-button:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
}

.login-alt-button--icon {
width: 52px;
padding: 0;
}

.provider-mark {
width: 20px;
height: 20px;
display: inline-grid;
place-items: center;
border-radius: 7px;
color: var(--nx-accent-ink);
background: var(--nx-accent);
font-size: 9px;
font-weight: 700;
}

.login-card > .login-demo-note {
padding: 15px 34px;
display: flex;
align-items: flex-start;
gap: 11px;
border-top: 1px solid var(--nx-line-soft);
background: var(--nx-surface-soft);
}

.login-demo-note > j-icon {
color: var(--nx-accent);
font-size: 18px;
}

.login-demo-note p {
margin: 0;
display: grid;
gap: 3px;
}

.login-demo-note strong {
color: var(--nx-ink);
font-size: 10.5px;
}

.login-demo-note span {
color: var(--nx-muted);
font-size: 10px;
line-height: 1.55;
}

.login-demo-note code {
padding: 1px 6px;
border-radius: 6px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 9.5px;
}

.login-legal {
width: min(470px, 100%);
margin: 20px auto 0;
display: flex;
justify-content: center;
gap: 16px;
color: var(--nx-faint);
font-size: 9.5px;
}

.login-legal a {
color: inherit;
text-decoration: none;
}

.jv-toast {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1400;
display: flex;
align-items: center;
gap: 11px;
min-height: 46px;
max-width: min(380px, calc(100vw - 40px));
padding: 11px 13px !important;
border: 1px solid var(--nx-line) !important;
border-radius: 15px !important;
background: var(--nx-surface) !important;
color: var(--nx-ink) !important;
font: 600 12.5px/1.45 var(--nx-font-ui) !important;
box-shadow: var(--nx-shadow-2) !important;
opacity: 0;
transform: translateY(10px);
transition: opacity 250ms ease, transform 250ms ease;
}

.jv-toast--in {
opacity: 1;
transform: none;
}

.jv-toast--out {
opacity: 0;
transform: translateY(10px);
}

.jv-toast__icon {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 50% !important;
color: var(--nx-accent-strong) !important;
background: var(--nx-accent-soft) !important;
font-size: 14px;
}

.jv-toast--success .jv-toast__icon {
color: var(--nx-ok) !important;
background: color-mix(in srgb, var(--nx-ok) 14%, transparent) !important;
}

.jv-toast--error .jv-toast__icon,
.jv-toast--warning .jv-toast__icon {
color: var(--nx-danger) !important;
background: color-mix(in srgb, var(--nx-danger) 12%, transparent) !important;
}

.jv-toast__msg {
flex: 1 1 auto;
min-width: 0;
}

.jv-toast__close {
flex: 0 0 auto;
border: 0;
padding: 4px 8px;
border-radius: 9px;
color: var(--nx-faint);
background: transparent;
font-size: 15px;
line-height: 1;
cursor: pointer;
}

.jv-toast__close:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.starter-not-found {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--nx-canvas);
}

.starter-not-found__content {
text-align: center;
}

.starter-not-found__content h1 {
margin: 0;
color: var(--nx-accent);
font-family: var(--nx-font-display);
font-size: 88px;
font-weight: 420;
}

.starter-not-found__content .j-button {
min-height: 42px;
padding: 0 20px;
align-items: center;
border-radius: 13px;
color: var(--nx-accent-ink);
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
box-shadow: 0 10px 22px var(--nx-accent-glow);
text-decoration: none;
}

@media (max-width: 1100px) {
.mail-shell {
grid-template-columns: 68px 216px minmax(0, 1fr);
}

.app-rail {
padding-inline: 6px;
}

.folder-drawer {
padding-inline: 12px;
}

.reader-scroll {
padding-inline: 18px;
}

.reader-content {
padding-inline: 30px;
}

.sender-details > div {
display: grid;
gap: 2px;
}
}

@media (max-width: 860px) {
.mail-shell {
grid-template-columns: 68px minmax(0, 1fr);
}

.folder-drawer {
display: none;
}

.reader-toolbar {
padding-inline: 14px;
}

.settings-grid {
grid-template-columns: 1fr;
}

.login-page {
grid-template-columns: minmax(330px, 42%) minmax(430px, 58%);
}

.login-story {
padding-inline: 34px;
}

.login-story h1 {
font-size: 44px;
}

.login-form-panel {
padding-inline: 38px;
}
}

@media (max-width: 680px) {
html,
body {
overflow: auto;
}

.mail-shell {
display: block;
}

.app-rail {
position: fixed;
inset: auto 0 0;
z-index: 20;
width: 100%;
max-width: 100vw;
height: 62px;
padding: 5px 14px;
flex-direction: row;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark,
.rail-theme,
.rail-avatar,
.app-rail > j-space {
display: none;
}

.rail-nav {
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rail-link {
min-height: 50px;
padding: 4px;
border-radius: 12px;
}

.workspace {
height: auto;
min-height: 100vh;
padding-bottom: 62px;
}

.topbar j-toolbar {
padding-inline: 13px;
}

.mobile-brand {
display: flex;
}

.global-search {
width: auto;
min-width: 0;
flex: 1 1 auto;
}

.topbar j-toolbar > .topbar-action {
display: none;
}

.inbox-page,
.directory-page {
height: calc(100vh - 128px);
display: block;
overflow: auto;
}

.inbox-splitter {
display: block;
overflow: auto;
}

.inbox-splitter > .message-column {
width: 100% !important;
min-width: 0;
max-width: none !important;
flex-basis: auto !important;
resize: none;
}

.inbox-splitter > .reader-column {
width: 100% !important;
min-width: 0;
max-width: none !important;
flex-basis: auto !important;
}

.inbox-splitter > .j-splitter__separator {
display: none !important;
}

.message-column,
.contacts-list {
min-height: 100%;
border-right: 0;
}

.inbox-page .reader-column,
.directory-page .contact-detail {
display: none;
}

.inbox-page:has(.reader-column--inbox) .message-column {
display: none;
}

.inbox-page .reader-column--inbox {
display: grid;
width: 100% !important;
min-height: 100%;
}

.reader-selected-view,
.reader-scroll,
.reader-content {
width: 100%;
max-width: 100%;
}

.reader-toolbar {
width: 100%;
max-width: 100vw;
padding-inline: 8px;
overflow-x: auto;
}

.reader-toolbar > j-space {
min-width: 8px;
}

.single-page,
.compose-page,
.settings-page {
height: auto;
min-height: calc(100vh - 128px);
}

.reader-scroll {
padding: 14px 12px 32px;
}

.reader-content--wide {
width: 100%;
}

.reader-content {
padding: 24px 19px 40px;
border-radius: 16px;
}

.reader-footer {
flex-wrap: wrap;
}

.reader-action:not(.reader-action--primary) {
padding: 0 9px;
}

.subject-row h2 {
font-size: 24px;
}

.sender-card {
align-items: flex-start;
flex-wrap: wrap;
}

.sender-card time {
width: 100%;
padding-left: 57px;
}

.compose-page,
.settings-page {
padding: 13px;
}

.compose-panel {
min-height: auto;
border-radius: 16px;
}

.compose-form {
padding-inline: 15px;
}

.compose-body textarea {
min-height: 230px;
}

.undo-send {
right: 16px;
bottom: 16px;
}

.draft-status {
display: none;
}

.settings-head {
align-items: flex-start;
}

.save-settings {
min-height: 40px;
padding: 0 13px;
font-size: 11.5px;
}

.theme-choices {
grid-template-columns: repeat(3, minmax(72px, 1fr));
}

.login-page {
min-height: 100vh;
display: block;
}

.login-story {
display: none;
}

.login-form-panel {
min-height: 100vh;
padding: 28px 18px 22px;
}

.login-mobile-brand {
display: flex;
}

.login-card {
margin: 0 auto;
border-radius: 18px;
}

.login-card > j-card-section {
padding-inline: 23px;
}

.login-card > .login-card-head {
padding: 27px 23px 18px;
}

.login-card > .login-demo-note {
padding: 13px 23px;
}
}

@media (max-width: 420px) {
.mobile-brand strong,
.topbar j-toolbar > .topbar-action {
display: none;
}

.bell-wrap .topbar-action {
display: inline-flex;
}

.panel-head {
padding-inline: 14px;
}

.filter-row {
padding-inline: 14px;
overflow-x: auto;
}

.message-list {
padding-inline: 8px;
}

.message-row {
padding-inline: 12px;
}

.reader-toolbar .reader-primary-actions .icon-action {
display: none;
}

.attachment-card {
gap: 6px;
}
}

.mailbox-alert {
margin: 8px 16px 0;
padding: 11px 14px;
border-radius: 13px;
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 10%, transparent);
font-size: 12px;
font-weight: 500;
}

.footer-sync {
color: var(--nx-accent);
font-weight: 650;
}

.mailbox-empty {
min-height: 0;
padding: 32px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
}

.mailbox-empty h3 {
margin: 8px 0 0;
color: var(--nx-ink);
font-family: var(--nx-font-display);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.01em;
}

.mailbox-empty p {
max-width: 34ch;
margin: 0;
color: var(--nx-muted);
font-size: 12px;
line-height: 1.55;
}

.mailbox-empty .reader-action {
margin-top: 14px;
}

.empty-glyph,
.placeholder-glyph {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 18px;
color: var(--nx-accent);
background: var(--nx-accent-soft);
}

.empty-glyph j-icon,
.placeholder-glyph j-icon {
font-size: 26px;
}

.reader-column--placeholder {
grid-template-rows: minmax(0, 1fr);
place-items: center;
padding: 32px;
}

.reader-placeholder {
max-width: 42ch;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}

.reader-placeholder h2 {
margin: 10px 0 0;
color: var(--nx-ink);
font-family: var(--nx-font-display);
font-size: 22px;
font-weight: 480;
line-height: 28px;
letter-spacing: -0.01em;
}

.reader-placeholder > p {
margin: 0;
color: var(--nx-muted);
font-size: 12.5px;
line-height: 1.6;
}

.reader-placeholder .reader-action {
margin-top: 16px;
}

.placeholder-hints {
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 18px;
}

.placeholder-hints > div {
display: flex;
align-items: center;
gap: 7px;
}

.placeholder-hints dt {
min-width: 22px;
height: 22px;
padding: 0 7px;
display: grid;
place-items: center;
border: 1px solid var(--nx-line);
border-bottom-width: 2px;
border-radius: 7px;
color: var(--nx-muted);
background: var(--nx-surface);
font-size: 10.5px;
font-weight: 700;
}

.placeholder-hints dd {
margin: 0;
color: var(--nx-faint);
font-size: 11.5px;
}

.placeholder-hints--stacked {
flex-direction: column;
align-items: stretch;
gap: 9px;
width: 100%;
text-align: start;
}

.placeholder-hints--stacked > div {
justify-content: flex-start;
}

.placeholder-hints--stacked dt {
justify-self: start;
font-family: var(--nx-font-ui);
}

.reader-pager {
display: flex;
align-items: center;
gap: 2px;
margin-inline-start: 6px;
padding-inline-start: 8px;
border-inline-start: 1px solid var(--nx-line);
}

.reader-position {
min-width: 46px;
color: var(--nx-faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
text-align: center;
}

.icon-action[disabled] {
opacity: 0.3;
pointer-events: none;
}

.icon-action--star j-icon {
--jv-icon-fill: 1;
color: var(--nx-star);
}

.icon-action--danger:hover {
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 10%, transparent);
}

.reader-action--ghost {
color: var(--nx-muted);
background: transparent;
}

.sender-identity {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}

.sender-address {
color: var(--nx-faint);
font-size: 11.5px;
}

.sender-recipients {
margin: 3px 0 0;
color: var(--nx-muted);
font-size: 11.5px;
}

.sender-time {
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
}

.attachment-tray {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--nx-line);
}

.attachment-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 10px;
}

.reader-footer {
margin-top: 28px;
padding-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
border-top: 1px solid var(--nx-line);
}

.search-scopes {
padding: 4px 20px 12px;
display: flex;
flex-wrap: wrap;
gap: 7px;
}

.search-scopes .filter-chip {
display: inline-flex;
align-items: center;
}

.contact-scroll {
min-height: 0;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.contact-search {
padding: 0 20px 12px;
}

.contact-items {
display: grid;
gap: 3px;
align-content: start;
padding: 2px 12px 12px;
}

.contact-row {
min-height: 62px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 14px;
cursor: pointer;
transition: background 150ms ease, box-shadow 150ms ease;
}

.contact-row:hover,
.contact-row:focus-visible {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
outline: none;
}

.contact-row--active,
.contact-row--active:hover {
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1),
inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 35%, transparent);
}

.contact-row .avatar {
width: 38px;
height: 38px;
font-size: 11.5px;
}

.contact-row j-item-section:not(.contact-avatar):not(.contact-marks) {
min-width: 0;
flex: 1 1 auto;
}

.contact-name,
.contact-email {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.contact-name {
color: var(--nx-ink);
font-size: 12.5px;
font-weight: 600;
}

.contact-email {
margin-top: 2px;
color: var(--nx-muted);
font-size: 11.5px;
}

.contact-marks {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
}

.contact-detail {
min-width: 0;
min-height: 0;
overflow: auto;
padding: 24px 28px 32px;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.contact-back {
display: none;
}

@media (min-width: 901px) {
.contact-mobile-editor {
display: none !important;
}
}

.contact-detail > .reader-placeholder {
margin: 0 auto;
padding-top: 12vh;
}

.contact-editor,
.contact-view {
max-width: 640px;
margin: 0 auto;
}

.contact-form {
display: grid;
gap: 14px;
margin-top: 4px;
}

.contact-field {
display: grid;
gap: 7px;
}

.contact-hero {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}

.contact-hero h2 {
font-size: 21px;
line-height: 27px;
}

.contact-hero p {
margin: 2px 0 0;
color: var(--nx-muted);
font-size: 12px;
}

.contact-hero-avatar {
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 18px;
font-size: 15px;
}

.detail-line {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--nx-line-soft);
}

.detail-line:first-of-type {
border-top: 0;
}

.detail-line j-icon {
margin-top: 1px;
color: var(--nx-faint);
font-size: 18px;
}

.detail-line span {
display: block;
color: var(--nx-faint);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.detail-line strong {
display: block;
margin-top: 2px;
color: var(--nx-ink);
font-size: 12.5px;
font-weight: 500;
overflow-wrap: anywhere;
}

.contact-view .outline-button {
margin-top: 14px;
}

@media (max-width: 1080px) {
.search-shell {
width: min(360px, 42vw);
}
}

@media (max-width: 900px) {
.reader-column--placeholder,
.contact-detail {
display: none;
}

.directory-page .contact-detail--active {
width: 100%;
max-width: 100%;
display: block;
}

.directory-page:has(.contact-detail--active) .contacts-list {
display: none;
}

.contact-detail--active .contact-back {
display: inline-flex;
}

.contact-detail--active .contact-editor {
display: none;
}

.contact-mobile-editor j-dialog-panel {
width: min(100%, 520px);
max-height: calc(100dvh - 28px);
overflow-y: auto;
}

.contact-mobile-editor j-dialog-content {
padding-top: 8px;
}

.inbox-page,
.directory-page {
grid-template-columns: minmax(0, 1fr);
}

.reader-pager {
margin-inline-start: 2px;
padding-inline-start: 6px;
}
}

@media (max-width: 640px) {
.search-shell {
width: 100%;
}

.attachment-grid {
grid-template-columns: minmax(0, 1fr);
}

.contact-detail {
width: 100%;
max-width: 100vw;
padding: 18px 16px 24px;
}

.contact-hero {
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
}

.contact-hero > j-space {
display: none;
}

.contact-hero > div {
min-width: 0;
flex: 1 1 calc(100% - 118px);
}

.contact-hero h2,
.contact-hero p {
overflow-wrap: anywhere;
}
}

.message-row {
position: relative;
}

.row-actions {
position: absolute;
inset-inline-end: 10px;
top: 10px;
display: none;
align-items: center;
gap: 2px;
padding: 3px;
border: 1px solid var(--nx-line-soft);
border-radius: 12px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.message-link:hover .row-actions,
.message-link:focus-within .row-actions {
display: inline-flex;
}

.message-link:hover .message-time {
visibility: hidden;
}

.row-action {
width: 30px;
height: 30px;
min-height: 30px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
border-radius: 9px;
color: var(--nx-muted);
background: transparent;
cursor: pointer;
transition: color 130ms ease, background 130ms ease;
}

.row-action j-icon {
font-size: 17px;
}

.row-action:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.row-action--starred j-icon {
--jv-icon-fill: 1;
color: var(--nx-star);
}

.row-action--danger:hover {
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 10%, transparent);
}

.unread-count-pill {
min-width: 28px;
justify-content: center;
font-variant-numeric: tabular-nums;
}

.row-overflow-menu {
position: absolute;
z-index: 32;
top: 39px;
inset-inline-end: 0;
width: 230px;
display: grid;
gap: 2px;
padding: 6px;
border-color: var(--nx-line);
border-radius: 14px;
color: var(--nx-ink);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.row-overflow-action {
width: 100%;
min-height: 36px;
padding: 7px 10px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border: 0;
border-radius: 9px;
color: var(--nx-ink);
background: transparent;
font-size: 12px;
text-align: start;
}

.row-overflow-action j-icon {
width: 20px;
color: var(--nx-muted);
font-size: 18px;
}

.row-overflow-action:hover,
.row-overflow-action:focus-visible {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.row-overflow-action--danger,
.row-overflow-action--danger j-icon {
color: var(--nx-danger);
}

.message-link:has(.row-overflow-menu) {
z-index: 3;
}

.folder-actions-anchor {
position: relative;
display: inline-flex;
}

.folder-actions-menu {
position: absolute;
z-index: 80;
top: calc(100% + 8px);
inset-inline-end: 0;
width: 250px;
display: grid;
gap: 2px;
padding: 7px;
border: 1px solid var(--nx-line);
border-radius: 14px;
color: var(--nx-ink);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.folder-actions-menu__head {
padding: 7px 10px 9px;
display: grid;
gap: 2px;
border-bottom: 1px solid var(--nx-line-soft);
margin-bottom: 3px;
}

.folder-actions-menu__head span {
font-size: 12px;
font-weight: 750;
}

.folder-actions-menu__head small {
color: var(--nx-muted);
font-size: 10.5px;
}

.folder-actions-menu__separator {
height: 1px;
margin: 4px 5px;
background: var(--nx-line-soft);
}

.empty-trash-header-action {
min-height: 34px;
padding: 0 11px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid color-mix(in srgb, var(--nx-danger) 35%, var(--nx-line));
border-radius: 9px;
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 7%, var(--nx-surface));
font-size: 11px;
font-weight: 700;
}

.empty-trash-header-action j-icon {
font-size: 17px;
}

.empty-trash-header-action:hover,
.empty-trash-header-action:focus-visible {
color: #fff;
background: var(--nx-danger);
}

.folder-tag {
min-height: 18px;
padding: 0 8px;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
border-radius: 6px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--nx-muted);
background: var(--nx-line-soft);
}

.folder-tag--inbox { color: var(--nx-accent-strong); background: var(--nx-accent-soft); }
.folder-tag--sent { color: #23649a; background: #dcebf9; }
.folder-tag--drafts { color: #8c6023; background: #f7ead4; }
.folder-tag--archive { color: #2e6f52; background: #ddf0e6; }
.folder-tag--trash { color: #97485c; background: #f8e1e7; }

[data-theme="dark"] .folder-tag--sent { color: #9cc8ef; background: #1e3550; }
[data-theme="dark"] .folder-tag--drafts { color: #ebc78a; background: #45351a; }
[data-theme="dark"] .folder-tag--archive { color: #93d9b9; background: #1c3d2e; }
[data-theme="dark"] .folder-tag--trash { color: #f0aec0; background: #472633; }

.label-dot {
width: 10px;
height: 10px;
display: inline-block;
flex: 0 0 auto;
border-radius: 4px;
}

.label-dot--violet { background: #7a76e0; }
.label-dot--blue { background: #5a92d8; }
.label-dot--green { background: #43b489; }
.label-dot--amber { background: #e0a54b; }
.label-dot--rose { background: #d9738f; }
.label-dot--slate { background: #8b97a8; }

.folder-scroll {
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
margin-inline: -4px;
padding-inline: 4px;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.folder-label-row .mini-action {
width: 22px;
height: 22px;
min-height: 22px;
}

.label-form {
margin: 4px 6px 10px;
padding: 12px;
display: grid;
gap: 10px;
border: 1px solid var(--nx-line-soft);
border-radius: 13px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.label-name input.j-input,
.label-name .j-input {
min-height: 36px;
border-radius: 10px;
font-size: 12px;
}

.label-colors {
display: flex;
gap: 7px;
}

.label-swatch {
width: 22px;
height: 22px;
min-height: 22px;
padding: 0;
border: 2px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: transform 120ms ease, border-color 120ms ease;
}

.label-swatch--violet { background: #7a76e0; }
.label-swatch--blue { background: #5a92d8; }
.label-swatch--green { background: #43b489; }
.label-swatch--amber { background: #e0a54b; }
.label-swatch--rose { background: #d9738f; }
.label-swatch--slate { background: #8b97a8; }

.label-swatch--on {
border-color: var(--nx-ink);
transform: scale(1.12);
}

.label-save {
min-height: 34px;
border: 0;
border-radius: 10px;
color: var(--nx-accent-ink);
background: var(--nx-accent);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}

.folder-remove {
flex: 0 0 auto;
display: none;
}

.folder-link--label:hover .folder-remove {
display: block;
}

.folder-link--label:hover .folder-count {
display: none;
}

.bell-wrap {
position: relative;
display: inline-flex;
}

.bell-badge {
position: absolute;
top: -2px;
inset-inline-end: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid var(--nx-canvas);
border-radius: 999px;
color: #fff;
background: var(--nx-danger);
font-size: 9px;
font-weight: 800;
pointer-events: none;
}

.notice-panel,
.command-center {
position: absolute;
z-index: 30;
top: 62px;
inset-inline-end: 18px;
width: min(400px, calc(100vw - 32px));
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 18px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
animation: panel-drop 160ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes panel-drop {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}

.notice-head {
padding: 13px 16px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--nx-line-soft);
}

.notice-head strong {
font-size: 13px;
}

.notice-empty {
padding: 30px 20px 34px;
display: grid;
justify-items: center;
gap: 6px;
color: var(--nx-faint);
text-align: center;
}

.notice-empty j-icon {
font-size: 26px;
}

.notice-empty p {
margin: 0;
font-size: 12px;
}

.notice-list {
max-height: 330px;
display: block;
overflow-y: auto;
padding: 6px;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.notice-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 12px;
color: inherit;
text-decoration: none;
transition: background 130ms ease;
}

.notice-item:hover {
background: var(--nx-surface-soft);
}

.notice-item .avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
font-size: 10px;
border-radius: 11px;
}

.notice-copy {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: 1px;
}

.notice-copy strong {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}

.notice-copy span {
overflow: hidden;
color: var(--nx-muted);
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}

.notice-item time {
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 10px;
font-variant-numeric: tabular-nums;
}

.command-trigger {
min-height: 38px;
padding: 0 11px;
gap: 7px;
border: 1px solid var(--nx-line);
border-radius: 12px;
background: var(--nx-surface);
font-size: 11px;
}

.command-kbd {
padding: 1px 6px;
border: 1px solid var(--nx-line);
border-bottom-width: 2px;
border-radius: 6px;
color: var(--nx-faint);
font-family: var(--nx-font-ui);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
}

.command-center {
width: min(560px, calc(100vw - 32px));
padding: 14px 16px 16px;
}

.command-input-row {
display: flex;
align-items: center;
gap: 10px;
padding: 2px 4px 2px 12px;
border: 1.5px solid var(--nx-accent);
border-radius: 13px;
background: var(--nx-surface-soft);
box-shadow: 0 0 0 4px var(--nx-accent-soft);
}

.command-input-row > j-icon {
color: var(--nx-accent);
font-size: 19px;
}

.command-input {
min-width: 0;
flex: 1 1 auto;
}

.command-input .j-input,
.command-input input {
width: 100%;
min-height: 42px;
padding: 0;
border: 0;
background: transparent;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13px;
}

.command-input .j-input:focus,
.command-input input:focus {
border: 0;
background: transparent;
box-shadow: none;
}

.command-input .j-field__label {
display: none;
}

.command-go {
width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
border-radius: 10px;
color: var(--nx-accent-ink);
background: var(--nx-accent);
cursor: pointer;
}

.command-note {
margin: 10px 2px 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--nx-faint);
font-size: 10.5px;
}

.command-ai-on {
padding: 2px 8px;
border-radius: 999px;
color: var(--nx-ok);
background: color-mix(in srgb, var(--nx-ok) 12%, transparent);
font-weight: 800;
font-size: 9px;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.command-registry {
max-height: 240px;
margin: 0;
padding: 12px 14px;
overflow: auto;
border: 1px solid var(--nx-line-soft);
border-radius: 12px;
background: var(--nx-surface-soft);
color: var(--nx-muted);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
line-height: 1.75;
white-space: pre-wrap;
scrollbar-width: thin;
scrollbar-color: var(--nx-line) transparent;
}

.move-menu {
position: absolute;
z-index: 25;
top: 56px;
inset-inline-end: 24px;
width: 240px;
padding: 12px;
display: grid;
gap: 4px;
border: 1px solid var(--nx-line);
border-radius: 15px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
animation: panel-drop 160ms cubic-bezier(.2, .8, .2, 1);
}

.reader-column {
position: relative;
}

.move-option {
min-height: 36px;
padding: 0 11px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border: 0;
border-radius: 10px;
color: var(--nx-ink);
background: transparent;
font-size: 12px;
font-weight: 550;
cursor: pointer;
text-align: start;
transition: background 130ms ease;
}

.move-option:hover {
background: var(--nx-accent-soft);
}

.move-option j-icon {
color: var(--nx-muted);
font-size: 17px;
}

.recipient-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
padding: 4px 0 8px;
border-bottom: 1px solid var(--nx-line-soft);
}

.recipient-label {
padding-top: 9px;
color: var(--nx-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}

.recipient-shell {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}

.recipient-entry {
position: relative;
min-width: 0;
}

.recipient-book-button {
width: 30px;
height: 30px;
min-height: 30px;
flex: 0 0 30px;
border-radius: 8px;
color: var(--nx-muted);
background: transparent;
}

.recipient-book-button:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.recipient-suggestions {
position: absolute;
z-index: 30;
top: calc(100% + 5px);
right: 0;
left: 0;
max-height: 250px;
padding: 6px;
overflow: auto;
border: 1px solid var(--nx-line);
border-radius: 12px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.recipient-suggestion,
.recipient-book-contact {
width: 100%;
min-height: 50px;
padding: 7px 9px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border: 0;
border-radius: 9px;
color: var(--nx-ink);
background: transparent;
text-align: start;
}

.recipient-suggestion:hover,
.recipient-book-contact:hover,
.recipient-book-contact[aria-pressed="true"] {
color: var(--nx-ink);
background: var(--nx-accent-soft);
}

.recipient-suggestion j-avatar,
.recipient-book-contact j-avatar {
width: 32px;
height: 32px;
flex: 0 0 32px;
font-size: 10px;
}

.recipient-suggestion > span,
.recipient-book-contact > span {
min-width: 0;
display: grid;
gap: 2px;
}

.recipient-suggestion strong,
.recipient-suggestion small,
.recipient-book-contact strong,
.recipient-book-contact small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.recipient-suggestion strong,
.recipient-book-contact strong {
font-size: 11.5px;
}

.recipient-suggestion small,
.recipient-book-contact small {
color: var(--nx-muted);
font-size: 10px;
}

.recipient-chip {
display: inline-flex;
align-items: center;
gap: 3px;
max-width: 100%;
padding: 4px 4px 4px 11px;
border: 1px solid color-mix(in srgb, var(--nx-accent) 24%, var(--nx-line));
border-radius: 999px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-size: 11.5px;
font-weight: 600;
}

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

.chip-remove {
width: 18px;
height: 18px;
min-height: 18px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
color: var(--nx-accent-strong);
background: transparent;
cursor: pointer;
}

.chip-remove:hover {
color: #fff;
background: var(--nx-accent);
}

.chip-remove j-icon {
font-size: 12px;
}

.recipient-input {
min-width: 160px;
flex: 1 1 160px;
}

.recipient-input .j-input,
.recipient-input input {
min-height: 34px;
padding: 0 4px;
border: 0;
border-radius: 0;
background: transparent;
font-size: 12.5px;
}

.recipient-input .j-input:focus,
.recipient-input input:focus {
border: 0;
background: transparent;
box-shadow: none;
}

.recipient-input .j-field__label {
display: none;
}

.recipient-book-dialog {
z-index: 120;
}

.recipient-book-dialog j-dialog-panel {
width: min(620px, calc(100vw - 32px));
}

.recipient-book-dialog j-dialog-content {
display: grid;
gap: 10px;
}

.recipient-book-search {
width: 100%;
}

.recipient-book-list {
min-height: 180px;
max-height: min(50vh, 440px);
padding: 4px;
overflow: auto;
border: 1px solid var(--nx-line-soft);
border-radius: 12px;
}

.recipient-book-check {
color: var(--nx-accent);
font-size: 20px;
}

.recipient-book-count {
color: var(--nx-muted);
font-size: 11px;
}

.editor-palette-anchor {
position: relative;
display: inline-flex;
}

.editor-palette {
position: absolute;
z-index: 45;
top: calc(100% + 7px);
left: 50%;
width: 142px;
padding: 9px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
border: 1px solid var(--nx-line);
border-radius: 11px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
transform: translateX(-50%);
}

.editor-swatch {
width: 34px;
height: 30px;
min-height: 30px;
padding: 0;
border: 2px solid var(--nx-surface);
border-radius: 8px;
box-shadow: 0 0 0 1px var(--nx-line);
}

.editor-swatch:hover,
.editor-swatch:focus-visible {
box-shadow: 0 0 0 2px var(--nx-accent);
transform: scale(1.06);
}

.editor-swatch--ink { background: #1f2937; }
.editor-swatch--red { background: #c0392b; }
.editor-swatch--orange { background: #c56a16; }
.editor-swatch--green { background: #16845b; }
.editor-swatch--blue { background: #2463b6; }
.editor-swatch--violet { background: #5352c9; }
.editor-swatch--highlight-yellow { background: #fff0a8; }
.editor-swatch--highlight-orange { background: #ffd6a3; }
.editor-swatch--highlight-green { background: #bcebd4; }
.editor-swatch--highlight-blue { background: #c9e2ff; }
.editor-swatch--highlight-violet { background: #ddd4ff; }
.editor-swatch--highlight-pink { background: #ffd2e5; }

.ai-trigger {
min-height: 34px;
padding: 0 13px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
border-radius: 999px;
color: #fff;
background: linear-gradient(120deg, var(--nx-car), color-mix(in srgb, var(--nx-car) 55%, var(--nx-accent)));
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 18px var(--nx-car-soft);
transition: transform 130ms ease, box-shadow 130ms ease;
}

.ai-trigger:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px var(--nx-car-soft);
}

.ai-trigger j-icon {
font-size: 16px;
}

.ai-menu {
padding: 13px 14px 14px;
display: grid;
gap: 10px;
border: 1px solid color-mix(in srgb, var(--nx-car) 30%, var(--nx-line));
border-radius: 15px;
background:
radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--nx-car) 9%, transparent), transparent 60%),
var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.ai-menu__hint {
margin: 0;
color: var(--nx-muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}

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

.ai-option {
min-height: 34px;
padding: 0 10px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
border: 1px solid var(--nx-line);
border-radius: 10px;
color: var(--nx-ink);
background: var(--nx-surface);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: border-color 130ms ease, background 130ms ease;
}

.ai-option:hover {
border-color: var(--nx-car);
background: color-mix(in srgb, var(--nx-car) 8%, var(--nx-surface));
}

.ai-option j-icon {
color: var(--nx-car);
font-size: 15px;
}

.ai-menu__custom {
display: flex;
align-items: center;
gap: 8px;
}

.ai-instruction {
min-width: 0;
flex: 1 1 auto;
}

.ai-instruction .j-input,
.ai-instruction input {
min-height: 36px;
border-radius: 10px;
font-size: 12px;
}

.ai-instruction .j-field__label {
display: none;
}

.ai-option--go {
width: 36px;
flex: 0 0 36px;
justify-content: center;
padding: 0;
color: #fff;
border: 0;
background: linear-gradient(120deg, var(--nx-car), color-mix(in srgb, var(--nx-car) 70%, var(--nx-accent)));
}

.ai-option--go j-icon {
color: #fff;
}

.ai-working {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: 11px;
color: var(--nx-muted);
background: color-mix(in srgb, var(--nx-car) 7%, var(--nx-surface-soft));
font-size: 11.5px;
}

.attachment-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
padding: 0 11px;
border-radius: 999px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-size: 11px;
font-weight: 650;
}

.attachment-chip j-icon {
font-size: 14px;
}

.sending-flight__sky {
position: absolute;
inset: 0;
border-radius: 14px;
background:
radial-gradient(3px 3px at 18% 30%, color-mix(in srgb, var(--nx-accent) 45%, transparent), transparent 60%),
radial-gradient(2px 2px at 62% 18%, color-mix(in srgb, var(--nx-accent) 35%, transparent), transparent 60%),
radial-gradient(2px 2px at 84% 62%, color-mix(in srgb, var(--nx-accent) 30%, transparent), transparent 60%),
color-mix(in srgb, var(--nx-accent) 6%, transparent);
animation: sending-sky 2.4s linear infinite;
}

.sending-flight__trail--second {
top: 30px;
left: 22px;
width: 68px;
opacity: 0.5;
animation-delay: 0.25s;
}

@keyframes sending-sky {
from { background-position: 0 0, 0 0, 0 0, 0 0; }
to { background-position: -152px 0, -152px 0, -152px 0, 0 0; }
}

.theme-switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 11px 0;
}

.theme-switch__copy {
display: grid;
gap: 2px;
}

.theme-switch__copy strong {
font-size: 12.5px;
}

.theme-switch__copy span {
color: var(--nx-faint);
font-size: 11px;
}

.theme-switch__toggle {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}

.theme-switch__track {
position: relative;
width: 74px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 0 9px;
border: 1px solid var(--nx-line);
border-radius: 999px;
background: var(--nx-surface-soft);
transition: background 200ms ease;
}

.theme-switch__sun,
.theme-switch__moon {
z-index: 1;
font-size: 16px;
color: var(--nx-faint);
}

.theme-switch__sun { color: var(--nx-star); }
[data-theme="dark"] .theme-switch__moon { color: var(--nx-accent); }

.theme-switch__thumb {
position: absolute;
top: 3px;
inset-inline-start: 3px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

[data-theme="dark"] .theme-switch__thumb {
transform: translateX(40px);
}

[dir="rtl"] .theme-switch__thumb {
transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

[dir="rtl"][data-theme="dark"] .theme-switch__thumb,
[dir="rtl"] [data-theme="dark"] .theme-switch__thumb {
transform: translateX(-40px);
}

[dir="rtl"] body {
font-family: var(--nx-font-ui);
letter-spacing: 0;
}

[dir="rtl"] .eyebrow,
[dir="rtl"] .folder-label-row {
letter-spacing: 0.02em;
}

[dir="rtl"] .command-input .j-input,
[dir="rtl"] .command-input input,
[dir="rtl"] .command-registry {
direction: ltr;
text-align: end;
}

.compose-button,
.compose-button:hover,
.compose-button:focus-visible,
.send-button,
.send-button:hover,
.send-button:focus-visible,
.save-settings,
.save-settings:hover,
.save-settings:focus-visible,
.reader-action--primary,
.reader-action--primary:hover,
.reader-action--primary:focus-visible,
.login-submit,
.login-submit:hover,
.login-submit:focus-visible,
.label-save,
.label-save:hover,
.label-save:focus-visible,
.command-go,
.command-go:hover,
.command-go:focus-visible {
color: var(--nx-accent-ink) !important;
}

.compose-button:hover,
.send-button:hover,
.save-settings:hover,
.reader-action--primary:hover,
.login-submit:hover,
.label-save:hover,
.command-go:hover {
background: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong)) !important;
}

.outline-button:hover,
.theme-choice:hover,
.text-action:hover,
.move-option:hover,
.ai-option:hover,
.login-alt-button:hover,
.command-suggestion:hover {
color: var(--nx-accent-strong) !important;
}

.ai-trigger,
.ai-trigger:hover,
.ai-trigger:focus-visible,
.ai-option--go,
.ai-option--go:hover {
color: #fff !important;
}

.message-list {
gap: 7px;
padding: 8px 10px 16px;
}

.message-link {
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--nx-line) 78%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--nx-surface) 72%, transparent);
box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-ink) 4%, transparent);
transition:
background 130ms ease,
border-color 130ms ease,
box-shadow 130ms ease,
transform 130ms ease;
}

.message-link:has(.row-overflow-menu) {
z-index: 40;
overflow: visible;
}

.message-link:hover,
.message-link:focus-visible {
z-index: 1;
border-color: color-mix(in srgb, var(--nx-accent) 34%, var(--nx-line));
border-radius: 14px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
outline: none;
transform: translateY(-1px);
}

.message-link[data-unread="true"] {
border-color: color-mix(in srgb, var(--nx-accent) 18%, var(--nx-line));
background: color-mix(in srgb, var(--nx-accent-soft) 38%, var(--nx-surface));
}

.message-link[data-unread="true"]::before {
position: absolute;
inset-block: 12px;
inset-inline-start: 0;
width: 3px;
border-radius: 0 4px 4px 0;
background: var(--nx-accent);
content: "";
}

.message-link--selected,
.message-link--selected:hover {
border-color: color-mix(in srgb, var(--nx-accent) 56%, var(--nx-line));
border-radius: 14px;
background: color-mix(in srgb, var(--nx-accent-soft) 78%, var(--nx-surface));
box-shadow: 0 8px 24px color-mix(in srgb, var(--nx-accent) 12%, transparent);
transform: none;
}

.message-row {
width: 100%;
min-height: 82px;
padding: 11px 12px;
display: flex !important;
align-items: flex-start;
gap: 11px;
}

.message-avatar,
.message-copy {
display: block;
}

.message-avatar .avatar,
.notification-card .avatar,
.notice-item .avatar {
display: inline-flex;
align-items: center;
justify-content: center;
}

.message-link[data-tone="violet"] .avatar,
.notification-card[data-tone="violet"] .avatar,
.notice-item .avatar[data-tone="violet"] { color: #5b4694; background: #ece5fa; }
.message-link[data-tone="blue"] .avatar,
.notification-card[data-tone="blue"] .avatar,
.notice-item .avatar[data-tone="blue"] { color: #23649a; background: #dcebf9; }
.message-link[data-tone="green"] .avatar,
.notification-card[data-tone="green"] .avatar,
.notice-item .avatar[data-tone="green"] { color: #2e6f52; background: #ddf0e6; }
.message-link[data-tone="amber"] .avatar,
.notification-card[data-tone="amber"] .avatar,
.notice-item .avatar[data-tone="amber"] { color: #8c6023; background: #f7ead4; }
.message-link[data-tone="rose"] .avatar,
.notification-card[data-tone="rose"] .avatar,
.notice-item .avatar[data-tone="rose"] { color: #97485c; background: #f8e1e7; }

.message-copy {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: 2px;
}

.message-meta {
margin: 0;
}

.message-sender {
font-size: 12.5px !important;
}

.message-link[data-unread="true"] .message-sender,
.message-link[data-unread="true"] .message-subject {
font-weight: 760;
}

.message-link[data-unread="true"] .message-time {
color: var(--nx-accent);
font-weight: 750;
}

.message-subject {
line-height: 1.3;
}

.message-tail {
min-width: 0;
}

.message-preview {
line-height: 1.3;
}

.row-actions {
display: inline-flex;
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
pointer-events: none;
transition: opacity 130ms ease, visibility 130ms ease, transform 130ms ease;
}

.message-link:hover .row-actions,
.message-link:focus-within .row-actions {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}

.row-action[data-starred="true"] j-icon {
--jv-icon-fill: 1;
color: var(--nx-star);
}

.row-move-menu {
position: absolute;
z-index: 24;
top: 70px;
inset-inline-end: 16px;
width: min(280px, calc(100% - 32px));
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 16px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.message-column {
position: relative;
}

.row-move-menu__head {
padding: 11px 12px 8px 15px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--nx-line-soft);
font-size: 12px;
}

.row-move-menu__options {
max-height: 300px;
padding: 7px;
display: grid;
overflow-y: auto;
}

.label-dot[data-tone="violet"] { background: #7a76e0; }
.label-dot[data-tone="blue"] { background: #5a92d8; }
.label-dot[data-tone="green"] { background: #43b489; }
.label-dot[data-tone="amber"] { background: #e0a54b; }
.label-dot[data-tone="rose"] { background: #d9738f; }
.label-dot[data-tone="slate"] { background: #8b97a8; }

.avatar[data-tone="violet"],
.sender-avatar[data-tone="violet"] { color: #5b4694; background: #ece5fa; }
.avatar[data-tone="blue"],
.sender-avatar[data-tone="blue"] { color: #23649a; background: #dcebf9; }
.avatar[data-tone="green"],
.sender-avatar[data-tone="green"] { color: #2e6f52; background: #ddf0e6; }
.avatar[data-tone="amber"],
.sender-avatar[data-tone="amber"] { color: #8c6023; background: #f7ead4; }
.avatar[data-tone="rose"],
.sender-avatar[data-tone="rose"] { color: #97485c; background: #f8e1e7; }

.folder-tag[data-role="inbox"] { color: var(--nx-accent-strong); background: var(--nx-accent-soft); }
.folder-tag[data-role="sent"] { color: #23649a; background: #dcebf9; }
.folder-tag[data-role="drafts"] { color: #8c6023; background: #f7ead4; }
.folder-tag[data-role="archive"] { color: #2e6f52; background: #ddf0e6; }
.folder-tag[data-role="trash"] { color: #97485c; background: #f8e1e7; }

.icon-action[data-starred="true"] j-icon {
--jv-icon-fill: 1;
color: var(--nx-star);
}

.label-swatch[data-selected="true"] {
border-color: var(--nx-ink);
transform: scale(1.12);
}

.label-dot[data-color="violet"] { background: #7a76e0; }
.label-dot[data-color="blue"] { background: #5a92d8; }
.label-dot[data-color="green"] { background: #43b489; }
.label-dot[data-color="amber"] { background: #e0a54b; }
.label-dot[data-color="rose"] { background: #d9738f; }
.label-dot[data-color="slate"] { background: #8b97a8; }

.command-wrap,
.bell-wrap {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}

.command-trigger {
width: auto !important;
min-width: 92px;
max-width: none;
flex: 0 0 auto;
white-space: nowrap;
}

.command-trigger j-icon {
flex: 0 0 auto;
}

.command-kbd {
min-width: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}

.notice-panel,
.command-center {
position: absolute;
z-index: 1200;
top: calc(100% + 12px);
inset-inline-end: 0;
}

.command-center {
width: min(680px, calc(100vw - 32px));
min-width: min(520px, calc(100vw - 32px));
}

.notice-panel {
width: min(400px, calc(100vw - 32px));
}

.topbar {
z-index: 1100;
overflow: visible;
}

.topbar > j-toolbar {
overflow: visible;
}

.inbox-splitter > .j-splitter__separator {
z-index: 5;
}

.notice-view-all {
min-height: 42px;
padding: 0 15px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--nx-line-soft);
color: var(--nx-accent-strong);
font-size: 11.5px;
font-weight: 700;
text-decoration: none;
}

.notice-view-all:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.command-suggestions {
max-height: 330px;
margin-top: 8px;
display: grid;
gap: 3px;
overflow-y: auto;
}

.command-suggestion {
width: 100%;
min-height: 50px;
padding: 7px 9px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 1px solid transparent;
border-radius: 11px;
color: var(--nx-ink);
background: transparent;
text-align: start;
}

.command-suggestion:hover,
.command-suggestion:focus-visible {
border-color: color-mix(in srgb, var(--nx-accent) 22%, var(--nx-line));
background: var(--nx-accent-soft);
outline: none;
}

.command-suggestion__icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 9px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.command-suggestion__copy {
min-width: 0;
display: grid;
gap: 2px;
}

.command-suggestion__copy strong {
overflow: hidden;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}

.command-suggestion__copy small {
overflow: hidden;
color: var(--nx-faint);
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}

.command-suggestion > kbd {
padding: 2px 6px;
border: 1px solid var(--nx-line);
border-radius: 6px;
color: var(--nx-faint);
background: var(--nx-surface);
font-size: 8px;
}

.command-registry {
max-height: 74px;
margin-top: 8px;
overflow: hidden;
font-size: 9px;
opacity: .75;
}

.notifications-page {
padding: 28px;
}

.notifications-surface {
width: min(980px, 100%);
margin: 0 auto;
}

.notifications-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
margin-bottom: 20px;
}

.notifications-hero h2 {
margin: 0;
color: var(--nx-ink);
font-family: var(--nx-font-display);
font-size: 30px;
font-weight: 520;
}

.notifications-hero p:last-child {
margin: 7px 0 0;
color: var(--nx-muted);
font-size: 12.5px;
}

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

.notifications-summary {
margin-bottom: 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 180px));
gap: 10px;
}

.notifications-summary j-card {
border: 1px solid var(--nx-line-soft);
border-radius: 15px;
background: var(--nx-surface);
}

.notifications-summary j-card-section {
padding: 14px 16px;
display: grid;
gap: 4px;
}

.notifications-summary span {
color: var(--nx-faint);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}

.notifications-summary strong {
color: var(--nx-ink);
font-size: 24px;
}

.notifications-list {
display: grid;
gap: 8px;
}

.notification-card {
min-height: 82px;
padding: 13px 15px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 13px;
border: 1px solid var(--nx-line-soft);
border-radius: 15px;
color: inherit;
background: var(--nx-surface);
text-decoration: none;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.notification-card:hover {
border-color: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-line));
box-shadow: var(--nx-shadow-1);
transform: translateY(-1px);
}

.notification-card[data-unread="true"] {
border-inline-start: 3px solid var(--nx-accent);
background: color-mix(in srgb, var(--nx-accent-soft) 40%, var(--nx-surface));
}

.notification-card .avatar {
width: 42px;
height: 42px;
border-radius: 13px;
font-size: 11px;
}

.notification-card__copy {
min-width: 0;
display: grid;
gap: 3px;
}

.notification-card__meta {
display: flex;
justify-content: space-between;
gap: 10px;
}

.notification-card__copy b,
.notification-card__copy > span:last-child,
.notification-card__meta strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.notification-card__meta strong,
.notification-card__copy b {
color: var(--nx-ink);
font-size: 12.5px;
}

.notification-card__meta time,
.notification-card__copy > span:last-child {
color: var(--nx-faint);
font-size: 10.5px;
}

.notifications-empty {
min-height: 340px;
display: grid;
place-content: center;
justify-items: center;
text-align: center;
}

.notifications-empty h3 {
margin: 16px 0 5px;
font-family: var(--nx-font-display);
}

.notifications-empty p {
margin: 0;
color: var(--nx-muted);
font-size: 12px;
}

.editor-toolbar {
min-height: 50px;
padding: 5px 7px;
flex-wrap: wrap;
gap: 2px;
}

.editor-group {
display: inline-flex;
align-items: center;
gap: 1px;
}

.editor-action {
position: relative;
flex: 0 0 32px;
}

.editor-action[aria-pressed="true"] {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.editor-action--color::after,
.editor-action--highlight::after {
position: absolute;
inset-inline: 7px;
bottom: 4px;
height: 2px;
border-radius: 999px;
background: #5352c9;
content: "";
}

.editor-action--highlight::after {
background: #e8c94d;
}

j-editor.compose-body {
min-height: 330px;
margin-top: -12px;
display: block;
border: 1.5px solid var(--nx-line);
border-radius: 0 0 14px 14px;
background: var(--nx-surface);
transition: border-color 150ms ease, box-shadow 150ms ease;
}

j-editor.compose-body:focus-within {
border-color: var(--nx-accent);
box-shadow: 0 0 0 3px var(--nx-accent-soft);
}

.compose-body .j-editor__content {
min-height: 328px;
padding: 18px 18px 26px;
overflow-y: auto;
color: var(--nx-ink);
background: transparent;
font-family: var(--nx-font-ui);
font-size: 14px;
line-height: 1.65;
outline: none;
white-space: normal;
}

.compose-body[data-editor-empty="true"] .j-editor__content::before {
color: var(--nx-faint);
content: attr(data-placeholder);
pointer-events: none;
}

.compose-body .j-editor__content div,
.compose-body .j-editor__content p {
margin: 0 0 5px;
}

.compose-body .j-editor__content h1,
.compose-body .j-editor__content h2,
.compose-body .j-editor__content h3 {
margin: 12px 0 7px;
font-family: var(--nx-font-display);
}

.compose-body .j-editor__content blockquote {
margin: 8px 0;
padding-inline-start: 14px;
border-inline-start: 3px solid var(--nx-accent);
color: var(--nx-muted);
}

.compose-body .j-editor__content pre {
padding: 12px;
overflow-x: auto;
border-radius: 9px;
background: var(--nx-surface-soft);
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.compose-body .j-editor__content a {
color: var(--nx-accent-strong);
}

.contact-form {
gap: 16px;
}

.contact-control {
display: grid;
gap: 7px;
}

.contact-control-label,
.contact-check-label {
color: var(--nx-muted);
font-size: 10.5px;
font-weight: 750;
letter-spacing: .03em;
}

.required-marker {
color: var(--nx-danger);
}

.contact-checkline {
display: flex;
align-items: center;
gap: 9px;
}

.contact-favorite {
width: 31px;
height: 31px;
min-height: 31px;
display: grid;
place-items: center;
border-radius: 10px;
color: var(--nx-faint);
background: transparent;
transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.contact-favorite:hover {
color: var(--nx-star);
background: color-mix(in srgb, var(--nx-star) 13%, transparent);
transform: scale(1.06);
}

.contact-favorite[data-starred="true"] {
color: var(--nx-star);
}

.contact-favorite[data-starred="true"] j-icon {
--jv-icon-fill: 1;
}

.contact-group-control {
display: grid;
gap: 9px;
}

.contact-group-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.contact-group-option {
min-height: 34px;
padding: 0 11px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--nx-line);
border-radius: 999px;
color: var(--nx-muted);
background: var(--nx-surface);
font-size: 11.5px;
}

.contact-group-option:hover {
border-color: var(--nx-accent);
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.contact-group-option[data-selected="true"] {
border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-line));
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.contact-group-option j-icon {
font-size: 15px;
}

.folder-tools {
flex: 0 0 auto;
display: none;
align-items: center;
}

.folder-link--label:hover .folder-tools,
.folder-link--label:focus-within .folder-tools {
display: inline-flex;
}

.folder-link--label:hover .folder-count,
.folder-link--label:focus-within .folder-count {
display: none;
}

.folder-tools .mini-action {
width: 25px;
height: 25px;
min-height: 25px;
}

.mini-action--danger:hover {
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 11%, transparent);
}

.label-form__row,
.label-color-editor__row {
min-width: 0;
display: flex !important;
align-items: center;
gap: 8px !important;
}

.label-form__row .label-colors,
.label-color-editor__row .label-colors {
flex: 0 1 auto;
flex-wrap: nowrap;
}

.label-save--compact {
min-width: auto;
min-height: 31px;
padding-inline: 11px;
flex: 0 0 auto;
}

.label-color-editor {
margin: 8px 6px 10px;
border: 1px solid var(--nx-line);
border-radius: 13px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.label-color-editor j-card-section {
padding: 12px;
display: grid;
gap: 10px;
font-size: 11.5px;
}

.label-color-editor .label-color-editor__row {
padding: 10px;
}

.label-color-editor__row > strong {
flex: 0 0 auto;
font-size: 10.5px;
}

.label-color-editor j-card-actions {
padding: 0 10px 10px;
display: flex;
justify-content: flex-end;
gap: 6px;
}

.mobile-nav-dialog j-dialog-panel {
width: min(430px, calc(100vw - 24px));
max-height: min(720px, calc(100dvh - 24px));
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 22px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.mobile-nav-dialog j-dialog-header {
min-height: 74px;
padding: 17px 18px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--nx-line-soft);
}

.mobile-nav-dialog j-dialog-header > span {
min-width: 0;
flex: 1 1 auto;
display: grid;
gap: 3px;
}

.mobile-nav-dialog j-dialog-title {
font-family: var(--nx-font-display);
font-size: 23px;
line-height: 1.1;
}

.mobile-nav-dialog j-dialog-content {
max-height: calc(100dvh - 98px);
padding: 14px;
display: grid;
gap: 12px;
overflow-y: auto;
overscroll-behavior: contain;
}

.mobile-nav-compose {
width: 100%;
min-height: 46px;
}

.mobile-nav-list {
display: grid;
gap: 5px;
}

.mobile-nav-link {
min-height: 45px;
padding: 0 13px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid transparent;
border-radius: 13px;
color: var(--nx-muted);
text-decoration: none;
transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
border-color: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-line));
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
outline: none;
}

.mobile-nav-link > j-icon,
.mobile-nav-link > .label-dot {
flex: 0 0 auto;
}

.mobile-nav-link > span:not(.label-dot):first-of-type,
.mobile-nav-link > j-icon + span {
min-width: 0;
flex: 1 1 auto;
}

.mobile-nav-link > span:last-child:not(:first-child),
.mobile-nav-link > j-badge {
margin-inline-start: auto;
flex: 0 0 auto;
color: var(--nx-faint);
font-size: 10px;
}

.mobile-nav-section {
display: grid;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--nx-line-soft);
}

.mobile-nav-section > .eyebrow {
padding-inline: 10px;
}

.mobile-nav-back {
margin-top: 2px;
border-top-color: var(--nx-line-soft);
}

.confirm-dialog j-dialog-panel {
width: min(440px, calc(100vw - 32px));
border: 1px solid var(--nx-line);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.confirm-dialog j-dialog-header,
.confirm-dialog j-dialog-content,
.confirm-dialog j-dialog-footer {
padding-inline: 22px;
}

.confirm-dialog j-dialog-header {
padding-top: 22px;
display: flex;
align-items: center;
gap: 12px;
}

.confirm-dialog j-dialog-content {
padding-top: 8px;
color: var(--nx-muted);
font-size: 12.5px;
line-height: 1.65;
}

.confirm-dialog j-dialog-footer {
padding-top: 10px;
padding-bottom: 20px;
display: flex;
gap: 8px;
}

.confirm-dialog__icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 11%, transparent);
}

.danger-button {
min-height: 36px;
padding: 0 15px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid color-mix(in srgb, var(--nx-danger) 46%, var(--nx-line));
border-radius: 12px;
color: #fff;
background: var(--nx-danger);
font-weight: 700;
}

.danger-button:hover {
color: #fff;
background: color-mix(in srgb, var(--nx-danger) 86%, #000);
transform: translateY(-1px);
}

.reader-column--inbox .reader-content {
width: min(820px, 100%);
}

.reader-column--inbox .reader-toolbar {
overflow-x: auto;
scrollbar-width: none;
}

.reader-column--inbox .reader-toolbar::-webkit-scrollbar {
display: none;
}

@media (max-width: 760px) {
.command-trigger {
min-width: 38px;
width: 38px !important;
padding: 0;
}

.command-kbd {
display: none;
}

.notice-panel,
.command-center {
position: fixed;
top: 60px;
inset-inline: 12px;
width: auto;
min-width: 0;
}

.editor-group--secondary {
display: none;
}

.notifications-page {
padding: 18px 14px;
}

.notifications-hero {
flex-direction: column;
}

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

:root:has(.skin-flag--deck) body {
font-size: 13.5px;
}

:root:has(.skin-flag--deck) .panel-head h2,
:root:has(.skin-flag--deck) .folder-head h1,
:root:has(.skin-flag--deck) .subject-row h2,
:root:has(.skin-flag--deck) .compose-head h2,
:root:has(.skin-flag--deck) .contact-hero h2,
:root:has(.skin-flag--deck) .settings-head h2,
:root:has(.skin-flag--deck) .reader-placeholder h2,
:root:has(.skin-flag--deck) .mailbox-empty h3 {
font-weight: 700;
letter-spacing: 0.02em;
}

:root:has(.skin-flag--deck) .message-link,
:root:has(.skin-flag--deck) .message-row,
:root:has(.skin-flag--deck) .contact-row,
:root:has(.skin-flag--deck) .notice-item,
:root:has(.skin-flag--deck) .folder-link,
:root:has(.skin-flag--deck) .folder-link j-item,
:root:has(.skin-flag--deck) .rail-link,
:root:has(.skin-flag--deck) .compose-button,
:root:has(.skin-flag--deck) .send-button,
:root:has(.skin-flag--deck) .save-settings,
:root:has(.skin-flag--deck) .reader-action,
:root:has(.skin-flag--deck) .outline-button,
:root:has(.skin-flag--deck) .icon-action,
:root:has(.skin-flag--deck) .row-action,
:root:has(.skin-flag--deck) .row-actions,
:root:has(.skin-flag--deck) .topbar-action,
:root:has(.skin-flag--deck) .mini-action,
:root:has(.skin-flag--deck) .rail-theme,
:root:has(.skin-flag--deck) .editor-action,
:root:has(.skin-flag--deck) .ai-option,
:root:has(.skin-flag--deck) .ai-menu,
:root:has(.skin-flag--deck) .ai-working,
:root:has(.skin-flag--deck) .move-menu,
:root:has(.skin-flag--deck) .move-option,
:root:has(.skin-flag--deck) .notice-panel,
:root:has(.skin-flag--deck) .command-center,
:root:has(.skin-flag--deck) .command-input-row,
:root:has(.skin-flag--deck) .command-registry,
:root:has(.skin-flag--deck) .label-form,
:root:has(.skin-flag--deck) .settings-card,
:root:has(.skin-flag--deck) .detail-card,
:root:has(.skin-flag--deck) .attachment-card,
:root:has(.skin-flag--deck) .login-card,
:root:has(.skin-flag--deck) .sending-overlay__content,
:root:has(.skin-flag--deck) .undo-send,
:root:has(.skin-flag--deck) .mailbox-alert,
:root:has(.skin-flag--deck) .meta,
:root:has(.skin-flag--deck) .brand-mark,
:root:has(.skin-flag--deck) input.j-input,
:root:has(.skin-flag--deck) textarea.j-textarea,
:root:has(.skin-flag--deck) .j-select__native,
:root:has(.skin-flag--deck) select.j-select,
:root:has(.skin-flag--deck) .command-trigger,
:root:has(.skin-flag--deck) .search-shell {
border-radius: 3px;
}

:root:has(.skin-flag--deck) .avatar,
:root:has(.skin-flag--deck) .sender-avatar,
:root:has(.skin-flag--deck) .quick-avatar,
:root:has(.skin-flag--deck) .contact-hero-avatar,
:root:has(.skin-flag--deck) .mail-skeleton-avatar,
:root:has(.skin-flag--deck) .empty-glyph,
:root:has(.skin-flag--deck) .placeholder-glyph,
:root:has(.skin-flag--deck) .settings-icon {
border-radius: 3px;
}

:root:has(.skin-flag--deck) .eyebrow,
:root:has(.skin-flag--deck) .folder-label-row,
:root:has(.skin-flag--deck) .message-time,
:root:has(.skin-flag--deck) .message-meta time,
:root:has(.skin-flag--deck) .sender-time,
:root:has(.skin-flag--deck) .list-footer,
:root:has(.skin-flag--deck) .folder-count,
:root:has(.skin-flag--deck) .count-pill,
:root:has(.skin-flag--deck) .live-pill,
:root:has(.skin-flag--deck) .folder-account,
:root:has(.skin-flag--deck) .contact-email,
:root:has(.skin-flag--deck) .draft-status,
:root:has(.skin-flag--deck) .reader-position,
:root:has(.skin-flag--deck) .notice-item time,
:root:has(.skin-flag--deck) .bell-badge,
:root:has(.skin-flag--deck) .folder-badge,
:root:has(.skin-flag--deck) .detail-line span {
font-family: var(--nx-font-mono);
}

:root:has(.skin-flag--deck) .message-list {
gap: 0;
padding-top: 0;
}

:root:has(.skin-flag--deck) .message-link {
border-bottom: 1px solid var(--nx-line-soft);
}

:root:has(.skin-flag--deck) .message-link:hover {
box-shadow: none;
background: var(--nx-surface-soft);
}

:root:has(.skin-flag--deck) .message-row {
min-height: 74px;
padding-block: 10px;
}

:root:has(.skin-flag--deck) .message-link:has(.message-row--unread)::before {
width: 2px;
border-radius: 0;
}

:root:has(.skin-flag--deck) .message-avatar .avatar {
width: 36px;
height: 36px;
font-family: var(--nx-font-mono);
font-size: 10.5px;
}

:root:has(.skin-flag--deck) .app-rail {
color: var(--nx-ink);
background: var(--nx-rail);
border-inline-end: 1px solid var(--nx-line);
}

:root:has(.skin-flag--deck) .rail-link span {
font-family: var(--nx-font-mono);
font-size: 8.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
}

:root:has(.skin-flag--deck) .rail-link:hover,
:root:has(.skin-flag--deck) .rail-theme:hover,
:root:has(.skin-flag--deck) .rail-theme:focus-visible {
color: var(--nx-ink);
background: var(--nx-surface-soft);
}

:root:has(.skin-flag--deck) .rail-link--active {
color: var(--nx-accent);
background: var(--nx-accent-soft);
}

:root:has(.skin-flag--deck) .rail-link--active j-icon {
color: var(--nx-accent);
}

:root:has(.skin-flag--deck) .rail-foot {
border-top: 1px solid var(--nx-line);
}

:root:has(.skin-flag--deck) .brand-mark {
color: var(--nx-accent);
background: var(--nx-accent-soft);
border: 1px solid color-mix(in srgb, var(--nx-accent) 35%, transparent);
box-shadow: none;
}

:root:has(.skin-flag--deck) .rail-avatar {
color: var(--nx-accent-ink);
background: var(--nx-accent);
outline-color: color-mix(in srgb, var(--nx-accent) 40%, transparent);
font-family: var(--nx-font-mono);
}

:root:has(.skin-flag--deck) .search-shell {
padding-inline-start: 12px;
border-color: var(--nx-line);
background: var(--nx-canvas);
box-shadow: none;
}

:root:has(.skin-flag--deck) .search-shell::before {
content: "\203A_";
color: var(--nx-accent);
font-family: var(--nx-font-mono);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
}

:root:has(.skin-flag--deck) .search-icon {
display: none;
}

:root:has(.skin-flag--deck) .global-search .j-input,
:root:has(.skin-flag--deck) .global-search input {
font-family: var(--nx-font-mono);
font-size: 11.5px;
}

:root:has(.skin-flag--deck) .search-submit {
border-radius: 2px;
}

:root:has(.skin-flag--deck) .topbar {
background: var(--nx-surface);
}

:root:has(.skin-flag--deck) .topbar::after {
content: "";
position: absolute;
bottom: -1px;
inset-inline-start: -140px;
width: 140px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--nx-accent), transparent);
animation: deck-sweep 3.4s linear infinite;
pointer-events: none;
}

@keyframes deck-sweep {
to { inset-inline-start: 100%; }
}

:root:has(.skin-flag--deck) .command-kbd {
color: var(--nx-accent);
border-color: color-mix(in srgb, var(--nx-accent) 30%, var(--nx-line));
}

:root:has(.skin-flag--deck) .compose-button,
:root:has(.skin-flag--deck) .send-button,
:root:has(.skin-flag--deck) .save-settings,
:root:has(.skin-flag--deck) .reader-action--primary,
:root:has(.skin-flag--deck) .label-save {
background: var(--nx-accent);
color: var(--nx-accent-ink);
border: 0;
box-shadow: none;
font-family: var(--nx-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}

:root:has(.skin-flag--deck) .compose-button:hover,
:root:has(.skin-flag--deck) .send-button:hover,
:root:has(.skin-flag--deck) .save-settings:hover {
transform: none;
background: var(--nx-accent-strong);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--nx-accent) 45%, transparent);
}

:root:has(.skin-flag--deck) .ai-trigger {
background: var(--nx-car-soft);
color: var(--nx-car);
border: 1px solid var(--nx-car);
border-radius: 3px;
box-shadow: none;
font-family: var(--nx-font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
}

:root:has(.skin-flag--deck) .ai-trigger:hover {
transform: none;
box-shadow: 0 0 0 1px var(--nx-car);
}

:root:has(.skin-flag--deck) .ai-menu {
background: linear-gradient(180deg, var(--nx-car-soft), transparent 70%), var(--nx-surface);
}

:root[data-theme="light"] .ai-trigger:hover,
:root[data-theme="light"] .ai-trigger:focus-visible {
color: var(--nx-car) !important;
border-color: color-mix(in srgb, var(--nx-car) 45%, var(--nx-line));
background: var(--nx-car-soft) !important;
}

:root:has(.skin-flag--deck) .folder-link--active {
box-shadow: inset 2px 0 0 var(--nx-accent);
background: var(--nx-surface-soft);
}

:root:has(.skin-flag--deck) .folder-count j-badge {
border-radius: 2px;
}

:root:has(.skin-flag--deck) .label-dot,
:root:has(.skin-flag--deck) .label-swatch {
border-radius: 2px;
}

:root:has(.skin-flag--deck) .sender-card {
border: 1px solid var(--nx-line);
border-radius: 3px;
background: var(--nx-surface);
}

:root:has(.skin-flag--deck) .login-story {
background: linear-gradient(180deg, #0a101f 0%, #060a13 60%, #05080f 100%);
}

@media (prefers-reduced-motion: reduce) {
:root:has(.skin-flag--deck) .topbar::after {
animation: none;
}
}

.skin-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
padding: 8px 0 18px;
}

.skin-card {
position: relative;
display: grid;
gap: 0;
padding: 0;
overflow: hidden;
min-height: 208px;
border: 1px solid var(--nx-line);
border-radius: 20px;
background: var(--nx-surface);
cursor: pointer;
text-align: start;
isolation: isolate;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.skin-card:hover {
border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-line));
transform: translateY(-3px);
box-shadow: 0 18px 42px color-mix(in srgb, var(--nx-ink) 12%, transparent);
}

.skin-card--on {
border-color: var(--nx-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-accent) 13%, transparent),
0 20px 44px color-mix(in srgb, var(--nx-ink) 12%, transparent);
}

.skin-card:focus-visible {
outline: 3px solid color-mix(in srgb, var(--nx-accent) 38%, transparent);
outline-offset: 3px;
}

.skin-check {
position: absolute;
top: 12px;
inset-inline-end: 12px;
width: 27px;
height: 27px;
display: none;
place-items: center;
border-radius: 50%;
color: var(--nx-accent-ink);
background: var(--nx-accent);
box-shadow: 0 2px 8px var(--nx-accent-glow);
}

.skin-check j-icon { font-size: 14px; }

.skin-card--on .skin-check { display: grid; }

.skin-thumb {
position: relative;
display: block;
height: 132px;
border-bottom: 1px solid var(--nx-line-soft);
}

.skin-thumb i { position: absolute; display: block; }

.skin-thumb .t-rail { inset-block: 0; inset-inline-start: 0; width: 16%; }
.skin-thumb .t-logo { top: 13px; inset-inline-start: 5%; width: 17px; height: 17px; }
.skin-thumb .t-bar { top: 0; inset-inline-start: 16%; inset-inline-end: 0; height: 24px; }
.skin-thumb .t-status { top: 8px; inset-inline-end: 10%; width: 34px; height: 7px; }
.skin-thumb .t-pane { top: 36px; bottom: 12px; inset-inline-end: 6%; width: 28%; }
.skin-thumb .t-row { inset-inline-start: 23%; inset-inline-end: 41%; height: 8px; border-radius: 999px; }
.skin-thumb .t-row--a { top: 42px; }
.skin-thumb .t-row--b { top: 65px; width: 35%; }
.skin-thumb .t-row--c { top: 88px; width: 27%; }

.skin-card--iris {
color: #252239;
background: #fbfaf6;
border-color: #ddd8cc;
}
.skin-thumb--iris {
background:
radial-gradient(circle at 79% 45%, rgba(103, 88, 211, .09), transparent 34%),
#f5f2eb;
}
.skin-thumb--iris .t-rail { background: linear-gradient(180deg, #25203f, #11101d); }
.skin-thumb--iris .t-logo { border-radius: 6px; background: linear-gradient(145deg, #7a72e8, #4b45bd); box-shadow: 0 5px 12px rgba(60, 54, 157, .38); }
.skin-thumb--iris .t-bar { background: rgba(255, 254, 250, .82); border-bottom: 1px solid #ded9cf; }
.skin-thumb--iris .t-status { border-radius: 999px; background: #d8f1e7; }
.skin-thumb--iris .t-pane { border: 1px solid #ddd6c9; border-radius: 10px; background: rgba(255,255,255,.72); box-shadow: 0 7px 18px rgba(46, 39, 69, .08); }
.skin-thumb--iris .t-row { background: #dad4c8; }
.skin-thumb--iris .t-row--a { background: linear-gradient(90deg, #615bd5, #827ae7); }
.skin-thumb--iris .t-fab {
bottom: 20px;
inset-inline-end: 11%;
width: 25px;
height: 25px;
border-radius: 9px;
background: linear-gradient(140deg, #5352c9, #403fae);
box-shadow: 0 4px 10px rgba(83, 82, 201, 0.4);
}

.skin-card--deck {
color: #d8e2f4;
background: #080d17;
border-color: rgba(126, 151, 187, .34);
}
.skin-thumb--deck {
background:
linear-gradient(rgba(93, 242, 207, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(93, 242, 207, .035) 1px, transparent 1px),
radial-gradient(circle at 78% 52%, rgba(49, 153, 173, .14), transparent 36%),
#060a13;
background-size: 18px 18px, 18px 18px, auto, auto;
}
.skin-thumb--deck .t-rail { background: #04070d; border-inline-end: 1px solid rgba(146, 164, 205, 0.22); }
.skin-thumb--deck .t-logo { border: 1px solid #5df2cf; border-radius: 2px; background: rgba(93,242,207,.09); box-shadow: 0 0 12px rgba(93,242,207,.35); }
.skin-thumb--deck .t-bar { background: rgba(11, 17, 32, .92); border-bottom: 1px solid rgba(146, 164, 205, 0.18); }
.skin-thumb--deck .t-status { border: 1px solid rgba(93,242,207,.52); border-radius: 1px; background: rgba(93,242,207,.1); }
.skin-thumb--deck .t-pane { border: 1px solid rgba(126,151,187,.28); border-radius: 2px; background: rgba(12,20,34,.82); }
.skin-thumb--deck .t-row { background: rgba(146, 164, 205, 0.24); border-radius: 1px; height: 5px; }
.skin-thumb--deck .t-row--a { background: #5df2cf; box-shadow: 0 0 8px rgba(93, 242, 207, 0.55); }
.skin-thumb--deck .t-sweep {
top: 23px;
inset-inline-start: 16%;
width: 34px;
height: 2px;
background: linear-gradient(90deg, transparent, #5df2cf, transparent);
animation: deck-sweep-thumb 2.6s linear infinite;
}

@keyframes deck-sweep-thumb {
from { inset-inline-start: 16%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
to { inset-inline-start: 86%; opacity: 0; }
}

.skin-thumb--deck .t-crosshair {
top: 56px;
inset-inline-end: 14%;
width: 18px;
height: 18px;
border: 1px solid rgba(93, 242, 207, .5);
border-radius: 50%;
box-shadow: 0 0 14px rgba(93, 242, 207, .18);
}

.skin-thumb--deck .t-crosshair::before,
.skin-thumb--deck .t-crosshair::after {
position: absolute;
background: rgba(93, 242, 207, .6);
content: "";
}

.skin-thumb--deck .t-crosshair::before { inset: 8px -5px auto; height: 1px; }
.skin-thumb--deck .t-crosshair::after { inset: -5px auto -5px 8px; width: 1px; }

.skin-copy {
min-width: 0;
display: grid;
gap: 5px;
padding: 16px 17px 17px;
}

.skin-copy strong { font-size: 16px; line-height: 1.15; }

.skin-copy span {
color: var(--nx-faint);
font-size: 11.5px;
line-height: 1.45;
}

.skin-card--iris .skin-copy strong { font-family: "Fraunces", Georgia, serif; letter-spacing: 0; }
.skin-card--deck .skin-copy strong { color: #71f0d3; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.11em; text-transform: uppercase; }
.skin-card--deck .skin-copy span { color: #91a1bb; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .03em; }
.skin-card--iris .skin-copy span { color: #746e7b; }

:root:has(.skin-flag--deck) .skin-card { border-radius: 4px; }
:root:has(.skin-flag--deck) .skin-check { border-radius: 4px; }

@media (max-width: 640px) {
.skin-row { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
.skin-thumb--deck .t-sweep { animation: none; opacity: 0.8; }
.skin-card:hover { transform: none; }
}

:root[dir="rtl"] .compose-button,
:root[dir="rtl"] .send-button,
:root[dir="rtl"] .save-settings,
:root[dir="rtl"] .reader-action--primary,
:root[dir="rtl"] .label-save,
:root[dir="rtl"] .ai-trigger,
:root[dir="rtl"] .rail-link span,
:root[dir="rtl"] .live-pill,
:root[dir="rtl"] .transmit,
:root[dir="rtl"] .command-kbd,
:root[dir="rtl"] .skin-card--deck .skin-copy strong {
letter-spacing: 0;
font-family: var(--nx-font-mono);
}

:root[dir="rtl"] .skin-card--iris .skin-copy strong {
font-family: var(--nx-font-ui);
}

.key-scope:focus { outline: none; }

.message-column > .bulk-bar {
position: absolute;
z-index: 6;
inset-inline: 0;
top: 0;
min-height: 76px;
padding: 14px 20px 10px;
display: flex;
align-items: center;
gap: 5px;
border-bottom: 1px solid var(--nx-line);
background: var(--nx-canvas);
}

.bulk-bar strong { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.message-column > .move-menu { top: 64px; inset-inline-end: 16px; }

.thread-stack { display: grid; gap: 14px; margin-block-start: 20px; }

.thread-item {
padding: 4px 18px 14px;
border: 1px solid var(--nx-line);
border-radius: 16px;
background: var(--nx-surface);
}

.thread-item .sender-card { margin-top: 14px; padding-bottom: 16px; }
.thread-item .message-body { padding-top: 16px; }

.remote-images-note { margin-block: 14px 4px; }
.remote-images-note .mailbox-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.shortcuts-dialog .placeholder-hints {
margin-top: 4px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 22px;
}

@media (max-width: 680px) {
:root {
--nx-mobile-bar-height: 68px;
}

.workspace {
min-height: 100dvh;
padding-bottom: calc(var(--nx-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
}

.app-rail {
position: fixed;
z-index: 80;
inset: auto 0 0;
width: 100%;
max-width: none;
height: calc(var(--nx-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
padding: 7px 10px max(7px, env(safe-area-inset-bottom, 0px));
display: block;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 -12px 34px rgba(10, 8, 28, 0.2);
}

.app-rail .rail-nav {
width: 100%;
height: 54px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: 5px;
}

.app-rail .rail-link {
min-width: 0;
min-height: 52px;
padding: 4px 3px 3px;
display: grid;
grid-template-rows: 25px 15px;
align-content: center;
justify-items: center;
gap: 1px;
border-radius: 12px;
}

.app-rail .rail-link j-icon {
font-size: 21px;
line-height: 25px;
}

.app-rail .rail-link span {
width: 100%;
overflow: hidden;
font-size: 9.5px;
line-height: 15px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}

.app-rail .rail-link--active::before {
inset-inline-start: 50%;
top: -7px;
width: 28px;
height: 3px;
border-radius: 0 0 3px 3px;
transform: translateX(-50%);
}

:root[dir="rtl"] .app-rail .rail-link--active::before {
transform: translateX(50%);
}

.mobile-nav-dialog {
z-index: 110;
padding: 12px;
}

.mobile-nav-dialog > j-dialog-panel {
width: min(400px, 100%);
max-height: calc(100dvh - 24px);
margin: auto;
overflow: hidden;
border-radius: 22px;
}

.mobile-nav-dialog j-dialog-header {
min-height: 76px;
padding: 16px 18px;
}

.mobile-nav-dialog j-dialog-content {
max-height: calc(100dvh - 112px);
padding: 14px;
overflow-y: auto;
overscroll-behavior: contain;
}

.mobile-nav-dialog .mobile-nav-list {
width: 100%;
display: grid;
gap: 4px;
}

.mobile-nav-dialog .mobile-nav-link {
width: 100%;
min-height: 48px;
padding: 0 12px;
display: grid;
grid-template-columns: 28px minmax(0, 1fr) minmax(24px, auto);
align-items: center;
gap: 11px;
text-align: start;
}

.mobile-nav-link > j-icon,
.mobile-nav-link > .label-dot {
grid-column: 1;
justify-self: center;
margin: 0;
}

.mobile-nav-link > .mobile-nav-label {
grid-column: 2;
min-width: 0;
margin: 0;
justify-self: stretch;
overflow: hidden;
color: var(--nx-muted);
font-size: 12.5px;
font-weight: 550;
line-height: 1.25;
text-align: start;
text-overflow: ellipsis;
white-space: nowrap;
}

.mobile-nav-link > .mobile-nav-count {
grid-column: 3;
min-width: 24px;
margin: 0;
justify-self: end;
color: var(--nx-faint);
font-size: 10.5px;
line-height: 1;
text-align: end;
}

.mobile-nav-compose {
margin-bottom: 2px;
}

.single-page,
.compose-page,
.settings-page,
.inbox-page,
.directory-page {
min-height: calc(100dvh - 66px - var(--nx-mobile-bar-height));
}

.reader-placeholder {
width: 100%;
min-height: calc(100dvh - 66px - var(--nx-mobile-bar-height));
margin: 0;
padding: 36px 22px 40px;
}

.settings-page {
padding: 16px 12px calc(28px + env(safe-area-inset-bottom, 0px));
}

.settings-head {
max-width: none;
margin-bottom: 16px;
align-items: flex-start;
gap: 12px;
}

.settings-head h2 {
font-size: clamp(25px, 7.5vw, 31px);
line-height: 1.1;
}

.settings-head > div {
min-width: 0;
}

.settings-head p,
.settings-card-head p {
font-size: 11.5px;
line-height: 1.5;
}

.save-settings {
flex: 0 0 auto;
min-height: 42px;
padding-inline: 14px;
font-size: 11.5px;
white-space: nowrap;
}

.settings-grid {
max-width: none;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}

.settings-card {
border-radius: 18px;
}

.settings-card-head {
padding: 17px 16px;
gap: 12px;
}

.settings-card-head h3 {
font-size: 15px;
line-height: 1.25;
}

.settings-icon {
width: 40px;
height: 40px;
flex-basis: 40px;
}

.settings-options {
padding: 8px 16px 17px;
}

.setting-row,
.account-status {
min-height: 68px;
gap: 12px;
}

.setting-row strong,
.account-status strong {
font-size: 12.5px;
line-height: 1.35;
}

.setting-row span,
.account-status span {
font-size: 10.5px;
line-height: 1.45;
}

.settings-options .j-field__label,
.settings-options j-input,
.settings-options j-textarea {
font-size: 11.5px;
}

.settings-options input.j-input,
.settings-options textarea.j-textarea {
font-size: 13px;
}

.theme-choices {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}

.theme-choice {
min-width: 0;
min-height: 64px;
padding-inline: 5px;
font-size: 10.5px;
}

.skin-row {
gap: 10px;
}

.skin-card {
min-height: 0;
}

.skin-copy strong {
font-size: 13px;
}

.skin-copy span {
font-size: 10.5px;
}
}

@media (max-width: 380px) {
.settings-head {
flex-wrap: wrap;
}

.settings-head .save-settings {
width: 100%;
}

.settings-options .setting-row:has(j-input) {
align-items: stretch;
flex-direction: column;
}
}

.list-pagination {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.list-pagination .icon-action { min-width: 32px; min-height: 32px; }
.login-session-note { font-size: 12px; color: var(--nx-muted); }
.message-avatar[role="checkbox"]:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; }
@media (max-width: 600px) {
.list-footer { flex-wrap: wrap; gap: 8px; }
.login-options { flex-wrap: wrap; gap: 8px; }
}

#app:not(:has([data-appearance-ready="true"])) { visibility: hidden; }
:root:not([data-theme]) #app { visibility: hidden; }
:root:not([data-theme]),
:root:not(:has([data-appearance-ready="true"])) {
color-scheme: light dark;
background: Canvas;
}
:root:not(:has([data-appearance-ready="true"])) body { background: transparent; }

.topbar > j-toolbar { gap: 12px; min-height: 68px; padding-inline: 20px; }
.topbar .search-shell { flex: 1 1 420px; width: auto; min-width: 0; max-width: 660px; min-height: 42px; box-shadow: none; }
.topbar .global-search input { font-size: 13px; }
.search-key { flex: 0 0 auto; padding: 2px 7px; border: 1px solid var(--nx-line); border-radius: 5px; font-size: 11px; color: var(--nx-faint); }
.search-clear { flex: 0 0 auto; width: 32px; min-width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--nx-muted); background: transparent; }
.search-clear:hover { color: var(--nx-ink); background: var(--nx-accent-soft); }
.header-account { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; max-width: 220px; min-height: 40px; padding: 4px 8px 4px 4px; border: 1px solid var(--nx-line); border-radius: 24px; text-decoration: none; color: var(--nx-ink); background: var(--nx-surface); }
.header-account:hover { border-color: var(--nx-accent); }
.header-account__avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--nx-accent-soft); color: var(--nx-accent-strong); font-size: 12px; font-weight: 700; }
.header-account__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.header-account > .material-symbols-rounded { font-size: 17px; color: var(--nx-muted); }
@media (max-width: 1200px) {
.header-account__email, .header-account > .material-symbols-rounded { display: none; }
.header-account { padding: 4px; }
}
@media (max-width: 700px) {
.topbar > j-toolbar { padding-inline: 10px; gap: 7px; }
.mobile-brand strong, .search-key, .topbar > j-toolbar > j-space { display: none; }
.topbar .search-shell { flex-basis: 120px; padding-inline-start: 10px; gap: 4px; }
.topbar .command-trigger { min-width: 36px; padding-inline: 8px; }
.topbar .command-kbd { display: none; }
.topbar .search-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.topbar::after { animation: none !important; }
}

.topbar .global-search { position: relative; }
.topbar .global-search.search-empty > .j-field__label {
display: block; position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
color: var(--nx-faint); font-size: 13px; font-weight: 400; pointer-events: none;
}

.compose-attach-control {
position: relative;
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border-radius: 9px;
color: var(--nx-muted);
cursor: pointer;
overflow: hidden;
transition: color 150ms ease, background 150ms ease;
}

.compose-attach-control:hover,
.compose-attach-control:focus-within {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.compose-attach-control:focus-within {
outline: 2px solid var(--nx-accent);
outline-offset: 1px;
}

.compose-attach-control[data-busy="true"] {
opacity: 0.6;
}

.compose-attach-control > j-icon {
font-size: 20px;
pointer-events: none;
}

.compose-attach-control > j-file {
position: absolute;
inset: 0;
display: block;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}

.compose-attach-control > j-file input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
font-size: 0;
}

.compose-attach-control > j-file .j-field__label,
.compose-attach-control > j-file .j-field__hint,
.compose-attach-control > j-file .j-field__error {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}

.attachment-chip--uploading {
color: var(--nx-muted);
background: var(--nx-surface-soft);
border: 1px dashed var(--nx-line);
}

.attachment-chip--uploading j-spinner {
inline-size: 14px;
block-size: 14px;
}

.draft-status--error,
.draft-status--error j-icon {
color: var(--nx-danger);
}

.sendlater-note {
max-inline-size: 240px;
margin-block: 6px 2px;
margin-inline: 4px;
color: var(--nx-faint);
font-size: 10.5px;
line-height: 1.4;
}

.compose-discard-dialog .danger-button,
.reader-delete-dialog .danger-button {
cursor: pointer;
}

.contacts-import {
position: relative;
display: inline-grid;
place-items: center;
inline-size: 40px;
block-size: 40px;
border-radius: 999px;
color: var(--nx-muted);
cursor: pointer;
overflow: hidden;
}

.contacts-import:hover {
background: var(--nx-accent-soft);
color: var(--nx-accent);
}

.contacts-import:focus-within {
outline: 2px solid var(--nx-accent);
outline-offset: 2px;
}

.contacts-import[data-busy="true"] {
opacity: .55;
pointer-events: none;
}

.contacts-import > j-icon {
pointer-events: none;
}

.contacts-import__file {
position: absolute;
inset: 0;
display: block;
margin: 0;
padding: 0;
min-inline-size: 0;
}

.contacts-import__file .j-field__label,
.contacts-import__file .j-field__bottom,
.contacts-import__file .j-field__hint,
.contacts-import__file .j-field__messages {
display: none;
}

.contacts-import__file input {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}

j-menu.suite-launcher {
display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 0;
padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none;
--jv-color-primary: var(--nx-accent); --jv-color-on-surface: var(--nx-ink);
}
.suite-launcher__trigger {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid transparent;
border-radius: 50%; background: transparent; color: var(--nx-muted); cursor: pointer;
}
.suite-launcher__trigger:hover, .suite-launcher__trigger[aria-expanded="true"] {
background: var(--nx-accent-soft); color: var(--nx-accent); border-color: var(--nx-line);
}
.suite-launcher__trigger > j-icon { font-size: 24px; line-height: 1; }
.suite-launcher__trigger:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.suite-launcher__positioner { z-index: 1500; }
.suite-launcher:not([data-jv-zag-ready]) .suite-launcher__positioner,
.suite-launcher__panel[hidden] { display: none !important; }
.suite-launcher__panel {
width: min(328px, calc(100vw - 24px)); max-height: min(480px, calc(100dvh - 90px));
overflow: auto; padding: 16px; border: 1px solid var(--nx-line); border-radius: 22px;
background: var(--nx-surface); color: var(--nx-ink); box-shadow: var(--nx-shadow-2);
font-family: var(--nx-font-ui); line-height: 1.4; overscroll-behavior: contain;
}
.suite-launcher__panel:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.suite-launcher__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 6px 15px; }
.suite-launcher__heading > strong { font-size: 15px; letter-spacing: -.3px; font-weight: 700; }
.suite-launcher__heading > span { color: var(--nx-muted); font-size: 11px; }
.suite-launcher__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.suite-launcher__app {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
min-width: 0; padding: 15px 5px 9px; border: 1px solid transparent; border-radius: 15px;
color: var(--nx-ink); text-align: center; text-decoration: none; cursor: pointer;
}
.suite-launcher__app:hover, .suite-launcher__app[data-highlighted] {
color: var(--nx-ink); background: var(--nx-surface-soft); border-color: var(--nx-line);
}
.suite-launcher__app:focus-visible, .suite-launcher__app[data-highlighted] { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.suite-launcher__app[data-app-current="true"] { background: var(--nx-accent-soft); border-color: var(--nx-line); }
.suite-launcher__icon {
display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px;
border-radius: 13px; color: var(--nx-accent); background: var(--nx-accent-soft);
}
.suite-launcher__icon > j-icon { font-size: 27px; line-height: 1; }
.suite-launcher__app[data-app="calendar"] .suite-launcher__icon { color: var(--nx-star); background: color-mix(in srgb, var(--nx-star) 12%, transparent); }
.suite-launcher__app[data-app="space"] .suite-launcher__icon { color: var(--nx-ok); background: color-mix(in srgb, var(--nx-ok) 12%, transparent); }
.suite-launcher__app[data-app="meet"] .suite-launcher__icon { color: var(--nx-car); background: var(--nx-car-soft); }
.suite-launcher__app > strong { font-size: 12px; font-weight: 650; letter-spacing: -.2px; overflow-wrap: anywhere; }
.suite-launcher__app > small { margin-top: 4px; color: var(--nx-muted); font-size: 10px; }
.suite-launcher__current { min-height: 17px; margin-top: 7px; padding: 2px 6px; border-radius: 5px; color: var(--nx-accent); font-size: 9px; font-weight: 600; }
.suite-launcher__current--empty { visibility: hidden; }
.suite-launcher__app[aria-disabled="true"] { cursor: default; }
.suite-launcher__app[aria-disabled="true"]:hover { background: transparent; border-color: transparent; }
.suite-launcher__app[aria-disabled="true"] .suite-launcher__icon { opacity: .55; }
.suite-launcher__app[aria-disabled="true"] > strong { color: var(--nx-muted); }
:root:has(.skin-flag--deck) .suite-launcher__panel { border-radius: 8px; }
:root:has(.skin-flag--deck) :is(.suite-launcher__app, .suite-launcher__icon, .suite-launcher__trigger) { border-radius: 5px; }
:root:has(.skin-flag--deck) .suite-launcher__heading > span { font-family: var(--nx-font-mono); }
.nexcalendar-toolbar, .meet-header { position: relative; z-index: 1100; overflow: visible; }
@media (max-width: 680px) {
.suite-launcher__trigger { width: 36px; height: 36px; min-width: 36px; }
.suite-launcher__panel { padding: 12px; border-radius: 16px; }
}

.login-session-gate:not([data-session-state="anonymous"]) > .login-story,
.login-session-gate:not([data-session-state="anonymous"]) > .login-form-panel,
.login-session-gate[data-session-state="anonymous"] > .login-session-status { display: none !important; }
.login-session-status {
grid-column: 1 / -1; align-self: center; justify-self: center; display: flex;
flex-direction: column; align-items: center; gap: 18px; width: min(420px, calc(100% - 40px));
margin: 48px 20px; color: var(--nx-ink); text-align: center;
}
.login-session-status h1 { margin: 0; font-family: var(--nx-font-ui); font-size: 26px; letter-spacing: -.6px; }
.login-session-status p { margin: 0; color: var(--nx-muted); font-size: 14px; line-height: 1.6; }
.login-session-progress { width: 220px; max-width: 100%; color: var(--nx-accent); }
.login-session-retry { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; color: var(--nx-accent); background: var(--nx-accent-soft); }
.login-session-gate:not([data-session-state="error"]) .login-session-failure,
.login-session-gate:not([data-session-state="error"]) .login-session-retry,
.login-session-gate[data-session-state="error"] .login-session-checking,
.login-session-gate[data-session-state="error"] .login-session-progress { display: none !important; }
.contacts-settings-page .settings-head { gap: 1rem; flex-wrap: wrap; }
.contacts-settings-grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); align-items: start; }
.contacts-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.contacts-app .contact-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
@media (max-width: 1050px) { .contacts-settings-grid { grid-template-columns: minmax(0, 1fr); } }

.contacts-app .contacts-import__file { opacity: 0; }