@charset "UTF-8";
/*!

 * Javelle-compatible Sass/SCSS variables.
 * Converted from upstream framework src/css/variables.sass v2.19.3.
 *
 * The MIT License (MIT)
 *
 * Copyright (c) 2015-present Razvan Stoenescu
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

: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-star: #d99a2b;
--nx-ok: #2f9e6e;
--nx-danger: #c2452d;
--nx-car: #8a63e0;
--nx-car-soft: rgba(138, 99, 224, 0.10);
--nx-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--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;
--jv-font-family: var(--nx-font-ui);
font-family: var(--nx-font-ui);
color: var(--nx-ink);
background: var(--nx-canvas);
}

[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-car: #a99cf0;
--nx-car-soft: rgba(169, 156, 240, 0.14);
--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);
}

* {
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, 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(0.45, 0, 0.3, 1) infinite;
}

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

:root {
--nx-snackbar-bg: #1d2130;
--nx-snackbar-ink: #f4f4fb;
--nx-snackbar-muted: rgba(244, 244, 251, 0.66);
}

[data-theme=dark] {
--nx-snackbar-bg: #f2f1fb;
--nx-snackbar-ink: #191b28;
--nx-snackbar-muted: rgba(25, 27, 40, 0.62);
}

.undo-send {
position: fixed;
z-index: 100;
inset-inline-end: 28px;
bottom: 28px;
width: min(430px, 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, 0.3);
animation: undo-send-enter 220ms cubic-bezier(0.2, 0.8, 0.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(0.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(0.1);
transform-origin: left;
}
35%, 70% {
opacity: 0.8;
transform: scaleX(1);
transform-origin: left;
}
}
@keyframes undo-send-enter {
from {
opacity: 0;
transform: translateY(14px) scale(0.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: 0.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, 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;
flex-basis: auto !important;
resize: none;
}
.inbox-splitter > .reader-column {
width: 100% !important;
min-width: 0;
max-width: none;
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, 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(0.2, 0.8, 0.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, 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(0.2, 0.8, 0.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, 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(0.2, 0.8, 0.2, 1);
}

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

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

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

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

[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, 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, 100vw - 32px);
min-width: min(520px, 100vw - 32px);
}

.notice-panel {
width: min(400px, 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: 0.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: 0.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: 0.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, 100vw - 24px);
max-height: min(720px, 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, 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) {
--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-star: #c98a12;
--nx-ok: #0f9d63;
--nx-danger: #cf3a5c;
--nx-car: #5b67d8;
--nx-car-soft: rgba(91, 103, 216, 0.10);
--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-snackbar-bg: #101726;
--nx-snackbar-ink: #f2f5ff;
--nx-snackbar-muted: rgba(242, 245, 255, 0.64);
}

: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-star: #ffc65c;
--nx-ok: #46d68c;
--nx-danger: #ff6c8a;
--nx-car: #96a2ff;
--nx-car-soft: rgba(150, 162, 255, 0.13);
--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);
--nx-snackbar-bg: #eef1fb;
--nx-snackbar-ink: #10131f;
--nx-snackbar-muted: rgba(16, 19, 31, 0.6);
}

:root:has(.skin-flag--deck) body {
font-size: 13.5px;
}

: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);
}

: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: "›_";
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, 0.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, 0.38);
}

.skin-thumb--iris .t-bar {
background: rgba(255, 254, 250, 0.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, 0.72);
box-shadow: 0 7px 18px rgba(46, 39, 69, 0.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, 0.34);
}

.skin-thumb--deck {
background: linear-gradient(rgba(93, 242, 207, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 242, 207, 0.035) 1px, transparent 1px), radial-gradient(circle at 78% 52%, rgba(49, 153, 173, 0.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, 0.09);
box-shadow: 0 0 12px rgba(93, 242, 207, 0.35);
}

.skin-thumb--deck .t-bar {
background: rgba(11, 17, 32, 0.92);
border-bottom: 1px solid rgba(146, 164, 205, 0.18);
}

.skin-thumb--deck .t-status {
border: 1px solid rgba(93, 242, 207, 0.52);
border-radius: 1px;
background: rgba(93, 242, 207, 0.1);
}

.skin-thumb--deck .t-pane {
border: 1px solid rgba(126, 151, 187, 0.28);
border-radius: 2px;
background: rgba(12, 20, 34, 0.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, 0.5);
border-radius: 50%;
box-shadow: 0 0 14px rgba(93, 242, 207, 0.18);
}

.skin-thumb--deck .t-crosshair::before,
.skin-thumb--deck .t-crosshair::after {
position: absolute;
background: rgba(93, 242, 207, 0.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: 0.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] {
--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;
}

: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);
}

.calendar-page {
padding: 18px 22px;
display: grid;
gap: 16px;
align-content: start;
}

.calendar-head {
gap: 12px;
}

.calendar-workspace {
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
align-items: stretch;
gap: 16px;
}

.calendar-surface {
min-width: 0;
min-height: 620px;
padding: 10px;
border: 1px solid var(--nx-line);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.calendar-surface > .j-calendar__header {
display: none;
}

.calendar-surface .j-calendar__weekdays {
gap: 6px;
margin-bottom: 6px;
}

.calendar-surface .j-calendar__weekday {
padding: 7px 8px;
color: var(--nx-faint);
font-family: var(--nx-font-mono);
font-size: 10px;
font-weight: 750;
letter-spacing: 0.08em;
text-align: start;
text-transform: uppercase;
}

.calendar-surface .j-calendar__grid {
gap: 6px;
}

.calendar-surface .j-calendar__day {
min-height: 91px;
padding: 7px;
display: grid;
align-content: start;
gap: 5px;
border: 1px solid var(--nx-line);
border-radius: 13px;
background: color-mix(in srgb, var(--nx-surface) 92%, var(--nx-canvas));
transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.calendar-surface .j-calendar__day:hover {
border-color: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-line));
background: var(--nx-surface-soft);
}

.calendar-surface .j-calendar__day--today {
border-color: color-mix(in srgb, var(--nx-accent) 54%, var(--nx-line));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 38%, transparent);
}

.calendar-surface .j-calendar__day--outside {
color: var(--nx-faint);
background: color-mix(in srgb, var(--nx-canvas) 62%, var(--nx-surface));
opacity: 0.64;
}

.calendar-surface .j-calendar__day--selected {
border-color: var(--nx-accent);
background: color-mix(in srgb, var(--nx-accent-soft) 62%, var(--nx-surface));
}

.calendar-surface .j-calendar__day-button {
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
border: 0;
border-radius: 10px;
color: inherit;
background: transparent;
font: inherit;
font-size: 12px;
font-weight: 720;
cursor: pointer;
}

.calendar-surface .j-calendar__day--today .j-calendar__day-button {
color: var(--nx-accent-ink);
background: var(--nx-accent);
}

.calendar-surface .j-calendar-event {
min-width: 0;
padding: 3px 6px;
border-inline-start: 3px solid var(--nx-accent);
border-radius: 7px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
font-size: 10px;
}

.calendar-agenda {
min-width: 0;
min-height: 620px;
padding: 14px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 12px;
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 20px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.calendar-agenda__head {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid var(--nx-line-soft);
}

.calendar-agenda__head > span {
min-width: 0;
display: grid;
gap: 2px;
}

.calendar-agenda__head small {
color: var(--nx-faint);
font-family: var(--nx-font-mono);
font-size: 9px;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.calendar-agenda__head strong {
overflow: hidden;
font-family: var(--nx-font-display);
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}

.calendar-agenda__scroll {
min-height: 0;
overflow-y: auto;
}

.calendar-agenda__empty {
min-height: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 10px;
color: var(--nx-muted);
text-align: center;
}

.agenda-item {
width: 100%;
min-height: 68px;
padding: 9px 8px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
border: 0;
border-bottom: 1px solid var(--nx-line-soft);
border-radius: 10px;
color: inherit;
background: transparent;
cursor: pointer;
text-align: start;
}

.agenda-item:hover {
color: inherit;
background: var(--nx-surface-soft);
}

.agenda-date {
width: 42px;
min-height: 46px;
display: grid;
place-content: center;
border-radius: 12px;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
text-align: center;
}

.agenda-date strong {
font-size: 16px;
line-height: 1;
}

.agenda-date small {
margin-top: 3px;
font-size: 9px;
text-transform: uppercase;
}

.agenda-copy {
min-width: 0;
display: grid;
gap: 4px;
}

.agenda-copy > strong,
.agenda-copy > small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.agenda-copy > small {
color: var(--nx-muted);
font-size: 10.5px;
}

@media (max-width: 900px) {
.calendar-workspace {
grid-template-columns: 1fr;
}
.calendar-surface {
min-height: 440px;
padding: 8px;
}
.calendar-surface .j-calendar__day {
min-height: 56px;
}
.calendar-agenda {
min-height: 320px;
}
}
@media (max-width: 680px) {
.calendar-page {
min-height: calc(100vh - 128px);
padding: 12px;
gap: 12px;
}
.calendar-head {
min-height: 86px;
padding: 6px 4px 10px;
align-items: center;
}
.calendar-head .panel-heading {
min-width: 76px;
flex: 1 1 auto;
}
.calendar-head .panel-heading h2 {
font-size: 22px;
line-height: 1.15;
white-space: nowrap;
}
.calendar-head .panel-actions {
flex: 0 0 auto;
gap: 2px;
}
.calendar-head .reader-action {
min-width: auto;
padding-inline: 10px;
}
.calendar-head .reader-action span {
white-space: nowrap;
}
.calendar-surface {
min-height: 370px;
padding: 6px;
border-radius: 16px;
}
.calendar-surface .j-calendar__weekdays,
.calendar-surface .j-calendar__grid {
gap: 4px;
}
.calendar-surface .j-calendar__weekday {
padding-inline: 3px;
text-align: center;
}
.calendar-surface .j-calendar__day {
min-height: 50px;
padding: 3px;
border-radius: 10px;
}
.calendar-surface .j-calendar__day-button {
width: 28px;
height: 28px;
}
.calendar-agenda {
min-height: 270px;
padding: 12px;
border-radius: 16px;
}
}

.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;
}
}

.calendar-views {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: 999px;
border: 1px solid var(--nx-line);
background: color-mix(in srgb, var(--nx-surface) 82%, transparent);
}

.view-pill {
border: 0;
border-radius: 999px;
padding: 7px 18px;
font-size: 13px;
font-weight: 600;
background: transparent;
color: inherit;
cursor: pointer;
transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.view-pill--on {
background: var(--nx-ink);
color: var(--nx-surface);
box-shadow: 0 6px 16px color-mix(in srgb, var(--nx-ink) 25%, transparent);
}

.calendar-cta {
box-shadow: 0 10px 24px var(--nx-accent-glow);
}

.calendar-shell {
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
gap: 18px;
align-items: start;
min-height: 0;
flex: 1;
}

.calendar-side {
display: grid;
gap: 14px;
position: sticky;
top: 0;
}

.calendar-side-card {
border: 1px solid var(--nx-line);
border-radius: 18px;
background: var(--nx-surface);
}

.calendar-side-title {
margin-block-end: 10px;
}

.calendar-cal-row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 2px;
font-size: 13.5px;
font-weight: 550;
}

.calendar-spotlight {
position: relative;
overflow: hidden;
border: 0;
border-radius: 22px;
color: var(--nx-accent-ink);
background: radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, #ffffff 28%, transparent), transparent 60%), linear-gradient(145deg, var(--nx-accent), color-mix(in srgb, var(--nx-accent) 55%, #1c1633));
box-shadow: 0 18px 40px var(--nx-accent-glow);
}

.calendar-spotlight__body {
display: grid;
gap: 8px;
padding: 18px;
}

.calendar-spotlight__kicker {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.85;
}

.calendar-spotlight__in {
letter-spacing: normal;
text-transform: none;
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: color-mix(in srgb, #ffffff 22%, transparent);
}

.calendar-spotlight__title {
font-family: var(--nx-font-display, inherit);
font-size: 21px;
line-height: 1.25;
}

.calendar-spotlight__time,
.calendar-spotlight__where {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
opacity: 0.92;
}

.calendar-spotlight__time j-icon,
.calendar-spotlight__where j-icon {
font-size: 16px;
}

.calendar-spotlight__cta {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 8px;
margin-block-start: 4px;
border: 0;
border-radius: 999px;
padding: 9px 18px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
color: var(--nx-accent);
background: var(--nx-surface);
transition: transform 160ms ease, box-shadow 160ms ease;
}

.calendar-spotlight__cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px color-mix(in srgb, #000000 25%, transparent);
}

.calendar-main {
display: grid;
gap: 14px;
min-inline-size: 0;
}

.week-board {
display: grid;
border: 1px solid var(--nx-line);
border-radius: 20px;
background: var(--nx-surface);
overflow: hidden;
box-shadow: 0 14px 36px color-mix(in srgb, var(--nx-ink) 6%, transparent);
}

.week-headrow,
.week-alldayrow {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
border-block-end: 1px solid var(--nx-line-soft);
}

.week-gutter {
inline-size: 64px;
}

.week-gutter--allday {
display: grid;
place-items: center;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.6;
}

.week-days {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}

.week-dayhead {
display: grid;
justify-items: center;
gap: 2px;
padding: 12px 4px 10px;
}

.week-dayhead small {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.6;
}

.week-dayhead strong {
font-size: 19px;
line-height: 1;
inline-size: 38px;
block-size: 38px;
display: grid;
place-items: center;
border-radius: 12px;
}

.week-dayhead--today strong {
color: var(--nx-accent-ink);
background: var(--nx-ink);
box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-ink) 30%, transparent);
}

.week-alldayrow {
min-block-size: 40px;
}

.week-allday-lane {
position: relative;
margin: 6px 0;
min-block-size: 28px;
}

.week-allday {
position: absolute;
inset-block-start: 0;
block-size: 28px;
border: 0;
border-radius: 8px;
padding: 0 10px;
font-size: 12px;
font-weight: 650;
text-align: start;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}

.week-scroll {
max-block-size: calc(100vh - 320px);
min-block-size: 420px;
}

.week-frame {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
}

.week-hours {
display: grid;
grid-auto-rows: 64px;
}

.week-hour {
font-size: 11px;
opacity: 0.55;
text-align: end;
padding-inline-end: 10px;
transform: translateY(-6px);
}

.week-canvas {
position: relative;
block-size: 1536px;
background: repeating-linear-gradient(to bottom, var(--nx-line-soft) 0 1px, transparent 1px 64px), repeating-linear-gradient(to right, transparent 0 calc(14.2857142857% - 1px), var(--nx-line-soft) calc(14.2857142857% - 1px) 14.2857142857%);
}

.week-canvas--day {
background: repeating-linear-gradient(to bottom, var(--nx-line-soft) 0 1px, transparent 1px 64px);
}

.week-event {
position: absolute;
display: grid;
align-content: start;
gap: 1px;
border: 0;
border-radius: 12px;
padding: 6px 9px;
text-align: start;
overflow: hidden;
cursor: pointer;
transition: transform 140ms ease, box-shadow 140ms ease;
}

.week-event:hover {
transform: translateY(-1px) scale(1.01);
z-index: 3;
box-shadow: 0 12px 26px color-mix(in srgb, var(--nx-ink) 18%, transparent);
}

.week-event small {
font-size: 10.5px;
font-weight: 700;
opacity: 0.75;
}

.week-event strong {
font-size: 12.5px;
line-height: 1.25;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.week-event__where {
font-size: 10.5px;
opacity: 0.7;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.cal-tone {
color: var(--nx-ink);
}

.cal-tone[data-tone=violet] {
background: #e3defc;
border-inline-start: 3px solid #6c5ce7;
}

.cal-tone[data-tone=blue] {
background: #d7e9fb;
border-inline-start: 3px solid #2f80ed;
}

.cal-tone[data-tone=green] {
background: #d9f2e3;
border-inline-start: 3px solid #27ae60;
}

.cal-tone[data-tone=amber] {
background: #fdeed0;
border-inline-start: 3px solid #e2a03f;
}

.cal-tone[data-tone=rose] {
background: #fcdfe7;
border-inline-start: 3px solid #eb5286;
}

[data-theme=dark] .cal-tone {
color: #f4f2ff;
}

[data-theme=dark] .cal-tone[data-tone=violet] {
background: #37316b;
}

[data-theme=dark] .cal-tone[data-tone=blue] {
background: #23405f;
}

[data-theme=dark] .cal-tone[data-tone=green] {
background: #1f4a33;
}

[data-theme=dark] .cal-tone[data-tone=amber] {
background: #54401d;
}

[data-theme=dark] .cal-tone[data-tone=rose] {
background: #55283a;
}

.week-now {
position: absolute;
block-size: 0;
border-block-start: 2px solid #eb5286;
z-index: 4;
pointer-events: none;
}

.week-now__dot {
position: absolute;
inset-block-start: -5px;
inset-inline-start: -4px;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: #eb5286;
box-shadow: 0 0 0 4px color-mix(in srgb, #eb5286 25%, transparent);
}

[data-theme=dark] .calendar-side-card,
[data-theme=dark] .week-board {
background: color-mix(in srgb, var(--nx-surface) 92%, #000000);
}

@media (max-width: 1100px) {
.calendar-shell {
grid-template-columns: 1fr;
}
.calendar-side {
position: static;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
@media (max-width: 760px) {
.calendar-views {
order: 3;
}
.week-scroll {
max-block-size: calc(100vh - 260px);
}
.week-hour {
padding-inline-end: 6px;
}
.week-dayhead strong {
font-size: 15px;
inline-size: 30px;
block-size: 30px;
}
}