:root {
color-scheme: light;
--nx-accent: #5352c9;
--nx-accent-strong: #403fae;
--nx-accent-soft: #ecebfa;
--nx-accent-glow: rgba(83, 82, 201, 0.28);
--nx-accent-ink: #ffffff;
--nx-canvas: #f4f2ed;
--nx-surface: #ffffff;
--nx-surface-soft: #faf9f6;
--nx-ink: #171922;
--nx-muted: #5c6270;
--nx-faint: #8b909d;
--nx-line: #e7e3da;
--nx-line-soft: #efece5;
--nx-rail: linear-gradient(180deg, #1b1830 0%, #131120 55%, #100e1a 100%);
--nx-rail-ink: #b5b2cc;
--nx-rail-fg: #ffffff;
--nx-rail-line: rgba(255, 255, 255, 0.08);
--nx-rail-hover: rgba(255, 255, 255, 0.07);
--nx-rail-active: rgba(255, 255, 255, 0.09);
--nx-star: #d99a2b;
--nx-ok: #2f9e6e;
--nx-warn: #c98a1f;
--nx-danger: #c2452d;
--nx-scrim: rgba(23, 20, 40, 0.42);
--nx-snackbar-bg: #1b1830;
--nx-snackbar-ink: #f4f2ed;
--nx-shadow-1: 0 1px 2px rgba(23, 20, 40, 0.05), 0 8px 24px rgba(23, 20, 40, 0.06);
--nx-shadow-2: 0 2px 6px rgba(23, 20, 40, 0.07), 0 24px 60px rgba(23, 20, 40, 0.12);
--nx-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--nx-font-display: "Fraunces", Georgia, "Times New Roman", serif;
--nx-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
--nx-display-weight: 480;
--nx-display-tracking: -0.01em;
--nx-radius-card: 16px;
--nx-radius-control: 12px;
--nx-radius-kind: 10px;
--nx-primary-bg: linear-gradient(140deg, var(--nx-accent), var(--nx-accent-strong));
--nx-primary-shadow: 0 12px 26px var(--nx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
--k-folder-ink: var(--nx-accent-strong);
--k-folder-bg: var(--nx-accent-soft);
--k-doc-ink: #23649a;
--k-doc-bg: #dcebf9;
--k-sheet-ink: #2e6f52;
--k-sheet-bg: #ddf0e6;
--k-deck-ink: #8c6023;
--k-deck-bg: #f7ead4;
--k-pdf-ink: #97485c;
--k-pdf-bg: #f8e1e7;
--k-image-ink: #5b4694;
--k-image-bg: #ece5fa;
--k-video-ink: #6b4fc4;
--k-video-bg: #e9e3fb;
--k-file-ink: #4d5b6b;
--k-file-bg: #e4e8ed;
--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-ok: #4fbf8b;
--nx-warn: #e0aa4a;
--nx-danger: #e0705a;
--nx-scrim: rgba(0, 0, 0, 0.6);
--nx-snackbar-bg: #eceef6;
--nx-snackbar-ink: #10131f;
--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);
--k-doc-ink: #9cc8ef;
--k-doc-bg: #1e3550;
--k-sheet-ink: #93d9b9;
--k-sheet-bg: #1c3d2e;
--k-deck-ink: #ebc78a;
--k-deck-bg: #45351a;
--k-pdf-ink: #f0aec0;
--k-pdf-bg: #472633;
--k-image-ink: #cabcf4;
--k-image-bg: #322a52;
--k-video-ink: #c3b5f7;
--k-video-bg: #2d2550;
--k-file-ink: #b6c2cf;
--k-file-bg: #2c3542;
}

* {
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;
-webkit-font-smoothing: antialiased;
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-scroll-area,
j-card,
j-card-section,
j-form,
j-separator {
display: block;
}

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

j-space {
flex: 1 1 auto;
}

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

j-button[disabled],
j-icon-button[disabled] {
cursor: default;
opacity: 0.5;
pointer-events: none;
}

button {
font: inherit;
cursor: pointer;
}

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

.material-symbols-rounded {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.skin-flag {
display: none;
}

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

h1,
h2,
h3,
.view-title,
j-dialog-title {
font-family: var(--nx-font-display);
font-weight: var(--nx-display-weight);
letter-spacing: var(--nx-display-tracking);
text-wrap: balance;
}

kbd.key,
.placeholder-hints dt {
padding: 2px 6px;
border: 1px solid var(--nx-line);
border-radius: 6px;
color: var(--nx-faint);
background: var(--nx-surface-soft);
font-family: var(--nx-font-mono);
font-size: 10px;
font-weight: 600;
}

:where(j-form.j-form) {
margin: 0;
padding: 0;
}

j-input.j-field,
j-textarea.j-field {
min-height: 0;
padding: 0;
border: 0;
background: transparent;
display: grid;
gap: 7px;
}

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

input.j-input,
textarea.j-textarea {
width: 100%;
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;
}

input.j-input:focus,
textarea.j-textarea: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);
}

.primary-button {
min-height: 46px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 15px;
color: var(--nx-accent-ink);
background: var(--nx-primary-bg);
box-shadow: var(--nx-primary-shadow);
font-size: 13.5px;
font-weight: 650;
text-decoration: none;
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

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

j-button.primary-button,
a.primary-button,
.primary-button > span,
.primary-button > j-icon {
color: var(--nx-accent-ink);
}

.search-shell {
isolation: isolate;
}

.search-placeholder {
position: absolute;
inset-inline-start: 41px;
top: 50%;
z-index: -1;
overflow: hidden;
color: var(--nx-faint);
font-size: 12.5px;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 110px);
transform: translateY(-50%);
pointer-events: none;
}

.primary-button--compact {
min-height: 38px;
padding: 0 16px;
border-radius: 12px;
font-size: 12.5px;
}

.outline-button {
min-height: 36px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid var(--nx-line);
border-radius: 11px;
color: var(--nx-ink);
background: var(--nx-surface);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color 150ms ease, border-color 150ms ease;
}

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

.outline-button j-icon {
font-size: 18px;
}

.outline-button--danger:hover {
color: var(--nx-danger);
border-color: var(--nx-danger);
}

.danger-button {
min-height: 38px;
padding: 0 15px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 12px;
color: #ffffff;
background: var(--nx-danger);
font-size: 12.5px;
font-weight: 700;
}

.danger-button:hover {
background: color-mix(in srgb, var(--nx-danger) 86%, #000);
}

.text-action,
.text-link {
min-height: 30px;
padding: 0 8px;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 9px;
color: var(--nx-accent);
background: transparent;
font-size: 12px;
font-weight: 650;
text-decoration: none;
}

.text-action:hover,
.text-link:hover {
background: var(--nx-accent-soft);
}

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

.text-action--danger {
color: var(--nx-danger);
}

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

.mini-action,
.icon-action,
.topbar-action,
.rail-theme {
width: 38px;
height: 38px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: var(--nx-radius-control);
color: var(--nx-muted);
background: transparent;
transition: color 150ms ease, background 150ms ease;
}

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

.mini-action j-icon {
font-size: 18px;
}

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

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

.kind {
width: 30px;
height: 30px;
display: inline-grid;
flex: 0 0 auto;
place-items: center;
border-radius: var(--nx-radius-kind);
color: var(--k-file-ink);
background: var(--k-file-bg);
}

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

.kind[data-kind="folder"] { color: var(--k-folder-ink); background: var(--k-folder-bg); }
.kind[data-kind="doc"], .kind[data-kind="text"] { color: var(--k-doc-ink); background: var(--k-doc-bg); }
.kind[data-kind="sheet"] { color: var(--k-sheet-ink); background: var(--k-sheet-bg); }
.kind[data-kind="deck"] { color: var(--k-deck-ink); background: var(--k-deck-bg); }
.kind[data-kind="pdf"] { color: var(--k-pdf-ink); background: var(--k-pdf-bg); }
.kind[data-kind="image"] { color: var(--k-image-ink); background: var(--k-image-bg); }
.kind[data-kind="video"], .kind[data-kind="audio"] { color: var(--k-video-ink); background: var(--k-video-bg); }

.kind[data-kind="folder"] j-icon {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.flag-star {
color: var(--nx-star);
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.avatar,
.rail-avatar,
.header-account__avatar {
width: 30px;
height: 30px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--k-doc-ink);
background: var(--k-doc-bg);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}

.avatar[data-tone="me"],
.rail-avatar,
.header-account__avatar {
color: var(--nx-accent-ink);
background: var(--nx-primary-bg);
}

.count-pill {
min-height: 20px;
height: 20px;
padding: 0 8px;
display: inline-flex;
align-items: center;
border: 1px solid var(--nx-line);
border-radius: 999px;
color: var(--nx-muted);
background: var(--nx-surface);
font-family: var(--nx-font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}

.role-chip {
min-height: 22px;
padding: 0 9px;
border-radius: 999px;
color: var(--k-sheet-ink);
background: var(--k-sheet-bg);
font-size: 10.5px;
font-weight: 700;
}

.list-progress,
.upload-progress {
position: relative;
display: block;
height: 2px;
min-height: 2px;
overflow: hidden;
background: var(--nx-line-soft);
}

.list-progress::after,
.upload-progress::after {
position: absolute;
inset-block: 0;
width: 40%;
background: linear-gradient(90deg, transparent, var(--nx-accent), transparent);
content: "";
animation: space-progress 1.15s ease-in-out infinite;
}

@keyframes space-progress {
from { inset-inline-start: -40%; }
to { inset-inline-start: 100%; }
}

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

.storage-bar i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--nx-accent), var(--nx-accent-strong));
}

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

.space-app:focus {
outline: none;
}

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

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

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

.brand-mark j-icon {
font-size: 24px;
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.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: var(--nx-rail-fg);
background: var(--nx-rail-hover);
}

.rail-link--active {
color: var(--nx-rail-fg);
background: var(--nx-rail-active);
}

.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 {
color: color-mix(in srgb, var(--nx-accent) 45%, #ffffff);
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.rail-foot {
width: 100%;
padding-top: 12px;
display: grid;
justify-items: center;
gap: 6px;
border-top: 1px solid var(--nx-rail-line);
}

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

.rail-theme:hover {
color: var(--nx-rail-fg);
background: var(--nx-rail-hover);
}

.rail-avatar {
width: 40px;
height: 40px;
outline: 2px solid rgba(255, 255, 255, 0.2);
outline-offset: 2px;
}

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

.folder-head {
min-width: 0;
margin: 0 6px 18px;
}

.folder-head h1 {
margin: 0;
color: var(--nx-ink);
font-size: 21px;
line-height: 26px;
}

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

.new-wrap {
position: relative;
z-index: 6;
margin-bottom: 18px;
}

.new-button {
width: 100%;
}

.new-menu,
.popover-menu {
position: absolute;
z-index: 30;
min-width: 236px;
padding: 6px;
display: grid;
gap: 2px;
border: 1px solid var(--nx-line-soft);
border-radius: 14px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.new-menu {
top: calc(100% + 6px);
inset-inline-start: 0;
width: 100%;
}

.menu-item {
position: relative;
width: 100%;
min-height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 10px;
color: var(--nx-ink);
background: transparent;
font-size: 13px;
font-weight: 500;
text-align: start;
cursor: pointer;
}

.menu-item > j-icon {
color: var(--nx-muted);
font-size: 19px;
}

.menu-item > span {
flex: 1 1 auto;
}

.menu-item:hover,
.menu-item:focus-within,
.menu-item--on {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.menu-item:hover > j-icon,
.menu-item--on > j-icon {
color: inherit;
}

.menu-item--danger,
.menu-item--danger > j-icon {
color: var(--nx-danger);
}

.menu-item--danger:hover {
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 11%, transparent);
}

.upload-picker {
overflow: hidden;
}

.upload-picker__input,
.upload-picker__input.j-field {
position: absolute;
inset: 0;
z-index: 1;
min-height: 0;
margin: 0;
padding: 0;
display: block;
border: 0;
opacity: 0;
}

.upload-picker__input input,
.upload-picker__input .j-field__label {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

.folder-scroll {
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}

.folder-scroll > .j-scroll-area__content,
.folder-scroll {
overflow-y: auto;
}

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

.folder-link {
min-height: 40px;
padding: 0 12px;
display: flex;
align-items: center;
gap: 11px;
border-radius: 12px;
color: var(--nx-muted);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.folder-link j-icon {
color: var(--nx-faint);
font-size: 19px;
}

.folder-link .label {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

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

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

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

.folder-link--active j-icon {
color: var(--nx-accent);
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

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

.storage-copy,
.storage-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--nx-faint);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}

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

.storage-foot .text-link {
min-height: 24px;
padding: 0 6px;
font-size: 10.5px;
}

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

.topbar {
position: relative;
z-index: 5;
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;
height: 40px;
padding: 0 4px 0 14px;
display: flex;
flex-direction: row !important;
gap: 8px !important;
flex-wrap: nowrap;
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 {
color: var(--nx-faint);
font-size: 19px;
}

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

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

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

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

.search-submit {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
color: var(--nx-muted);
}

.search-submit:hover {
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;
}

.brand-mini {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 11px;
color: var(--nx-accent-ink);
background: var(--nx-primary-bg);
}

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

.bell-badge {
position: absolute;
top: 2px;
inset-inline-end: 2px;
min-width: 17px;
min-height: 17px;
height: 17px;
padding: 0 4px;
display: grid;
place-items: center;
border-radius: 999px;
color: #ffffff;
background: var(--nx-accent);
font-size: 9.5px;
font-weight: 800;
pointer-events: none;
}

.header-account {
max-width: 240px;
min-height: 40px;
padding: 4px 10px 4px 4px;
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
border: 1px solid var(--nx-line);
border-radius: 24px;
color: var(--nx-ink);
background: var(--nx-surface);
text-decoration: none;
}

.header-account:hover {
border-color: var(--nx-accent);
}

.header-account__email {
overflow: hidden;
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}

.header-account j-icon {
color: var(--nx-faint);
font-size: 18px;
}

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

.files-page {
height: calc(100vh - 66px);
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 352px;
}

.files-page:focus {
outline: none;
}

.files-column {
position: relative;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
border-inline-end: 1px solid var(--nx-line);
}

.files-column > .files-scroll {
flex: 1 1 auto;
}

.panel-head {
padding: 20px 24px 12px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}

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

.breadcrumbs,
.view-title {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
}

.crumb {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}

.crumb-link {
color: var(--nx-faint);
font-size: 13px;
font-weight: 500;
text-decoration: none;
}

.crumb-link:hover {
color: var(--nx-accent);
text-decoration: underline;
}

.crumb-sep {
color: var(--nx-faint);
font-size: 16px;
}

.breadcrumbs h2,
.view-title {
margin: 0;
color: var(--nx-ink);
font-size: 24px;
line-height: 1.2;
overflow-wrap: anywhere;
}

.panel-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
}

.view-toggle {
padding: 3px;
display: inline-flex;
gap: 2px;
border: 1px solid var(--nx-line);
border-radius: 11px;
background: var(--nx-surface);
}

.view-toggle j-icon-button {
width: 32px;
height: 30px;
display: grid;
place-items: center;
border-radius: 8px;
color: var(--nx-muted);
}

.view-toggle j-icon-button[aria-pressed="true"] {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.view-toggle j-icon {
font-size: 18px;
}

.menu-anchor {
position: relative;
}

.menu-anchor .popover-menu {
top: calc(100% + 6px);
inset-inline-end: 0;
}

.filter-row {
padding: 0 24px 12px;
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
display: none;
}

.filter-chip {
min-height: 30px;
padding: 0 12px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
border: 1px solid var(--nx-line);
border-radius: 999px;
color: var(--nx-muted);
background: var(--nx-surface);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.filter-chip j-icon {
font-size: 16px;
}

.filter-chip:hover {
color: var(--nx-ink);
border-color: var(--nx-faint);
}

.filter-chip--on,
.filter-chip--on:hover {
border-color: transparent;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.files-scroll {
min-height: 0;
padding: 6px 24px 28px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
}

.files-alert {
border-radius: 12px;
}

.trash-banner {
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-control);
color: var(--nx-muted);
background: var(--nx-surface);
font-size: 12.5px;
}

.trash-banner j-icon {
color: var(--nx-warn);
}

.files-section {
display: grid;
gap: 10px;
}

.section-label {
margin: 4px 0 0;
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;
font-variant-numeric: tabular-nums;
}

.section-label--group {
grid-column: 1 / -1;
margin-top: 8px;
}

.section-label--row {
padding: 12px 12px 6px;
border-top: 1px solid var(--nx-line-soft);
background: var(--nx-surface-soft);
}

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

.skeleton-card {
height: 168px;
display: block;
border-radius: var(--nx-radius-card);
background: linear-gradient(90deg, var(--nx-line-soft), var(--nx-surface), var(--nx-line-soft));
background-size: 200% 100%;
animation: space-shimmer 1.4s ease-in-out infinite;
}

@keyframes space-shimmer {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}

.folder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
gap: 10px;
}

.folder-card {
position: relative;
min-width: 0;
min-height: 58px;
padding: 0 6px 0 0;
display: flex;
align-items: center;
gap: 4px;
border: 1px solid var(--nx-line-soft);
border-radius: 14px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
transition: border-color 150ms ease, transform 150ms ease;
}

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

.folder-card--selected {
border-color: var(--nx-accent);
box-shadow: 0 0 0 3px var(--nx-accent-soft), var(--nx-shadow-1);
}

.folder-card__open {
min-width: 0;
flex: 1 1 auto;
align-self: stretch;
padding: 10px 0 10px 12px;
display: flex;
align-items: center;
gap: 11px;
color: inherit;
text-decoration: none;
}

.folder-card .kind {
width: 36px;
height: 36px;
border-radius: 11px;
}

.folder-card .kind j-icon {
font-size: 20px;
}

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

.copy b,
.copy small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.copy b {
font-size: 13px;
font-weight: 600;
}

.copy small {
color: var(--nx-faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
}

.file-flags {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 3px;
color: var(--nx-faint);
}

.file-flags j-icon {
font-size: 16px;
}

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

.file-slot {
display: contents;
}

.file-card {
position: relative;
min-width: 0;
padding: 0;
display: grid;
overflow: visible;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-card);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
text-align: start;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

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

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

.file-card--selected,
.file-card--selected:hover {
border-color: var(--nx-accent);
box-shadow: 0 0 0 3px var(--nx-accent-soft), var(--nx-shadow-1);
}

.file-thumb {
height: 112px;
display: grid;
place-items: center;
border-bottom: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0;
background:
radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--nx-surface) 60%, transparent), transparent 60%),
var(--nx-surface-soft);
}

.file-thumb[data-kind="image"] {
background-image:
linear-gradient(45deg, var(--nx-line-soft) 25%, transparent 25%, transparent 75%, var(--nx-line-soft) 75%),
linear-gradient(45deg, var(--nx-line-soft) 25%, transparent 25%, transparent 75%, var(--nx-line-soft) 75%);
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}

.kind--large {
width: 52px;
height: 52px;
border-radius: 16px;
}

.kind--large j-icon {
font-size: 28px;
}

.file-copy {
padding: 10px 12px 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
}

.file-copy .kind {
width: 28px;
height: 28px;
border-radius: 8px;
}

.file-copy .kind j-icon {
font-size: 16px;
}

.card-actions {
position: absolute;
top: 8px;
inset-inline-end: 8px;
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 150ms ease;
}

.file-card:hover .card-actions,
.file-card:focus-within .card-actions,
.file-card--selected .card-actions {
opacity: 1;
}

.card-actions .mini-action {
width: 30px;
height: 30px;
border-radius: 9px;
background: color-mix(in srgb, var(--nx-surface) 92%, transparent);
box-shadow: var(--nx-shadow-1);
}

.popover-menu--card {
top: 42px;
inset-inline-end: 8px;
}

.file-list {
display: grid;
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-card);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.file-row {
min-height: 50px;
padding: 0 10px 0 12px;
display: grid;
grid-template-columns: minmax(0, 1fr) 160px 150px 84px 112px;
align-items: center;
gap: 12px;
border-top: 1px solid var(--nx-line-soft);
cursor: pointer;
transition: background 120ms ease;
}

.file-list > .file-row:first-child,
.file-list > .file-slot:first-child > .file-row {
border-top: 0;
}

.file-row--head {
min-height: 38px;
color: var(--nx-faint);
background: var(--nx-surface-soft);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: default;
}

.file-row:not(.file-row--head):hover {
background: var(--nx-surface-soft);
}

.file-row--selected,
.file-row--selected:hover {
background: var(--nx-accent-soft) !important;
}

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

.file-row .name {
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
}

.file-row .name b {
overflow: hidden;
font-size: 13px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}

.file-row .who,
.file-row .when,
.file-row .size {
min-width: 0;
overflow: hidden;
color: var(--nx-muted);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}

.file-row .when small {
display: block;
color: var(--nx-faint);
font-size: 10.5px;
}

.file-row .size {
text-align: end;
}

.location-link {
color: var(--nx-muted);
text-decoration: none;
}

.location-link:hover {
color: var(--nx-accent);
text-decoration: underline;
}

.row-actions {
display: flex;
justify-content: flex-end;
gap: 2px;
opacity: 0;
transition: opacity 150ms ease;
}

.file-row:hover .row-actions,
.file-row:focus-within .row-actions,
.file-row--selected .row-actions,
.row-actions--visible {
opacity: 1;
}

.empty-state {
margin: auto;
padding: 40px 24px;
display: grid;
justify-items: center;
gap: 8px;
color: var(--nx-muted);
text-align: center;
}

.empty-state h3 {
margin: 6px 0 0;
color: var(--nx-ink);
font-size: 21px;
}

.empty-state p {
max-width: 42ch;
margin: 0 0 8px;
font-size: 13px;
line-height: 1.55;
}

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

.placeholder-glyph j-icon {
font-size: 30px;
}

.list-footer {
min-height: 42px;
padding: 0 24px;
display: flex;
align-items: center;
gap: 14px;
border-top: 1px solid var(--nx-line);
color: var(--nx-faint);
background: color-mix(in srgb, var(--nx-canvas) 70%, var(--nx-surface) 30%);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}

.details-column {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: var(--nx-surface);
}

.details-toolbar {
min-height: 56px;
padding: 10px 12px 10px 18px;
display: flex;
align-items: center;
gap: 4px;
border-bottom: 1px solid var(--nx-line-soft);
}

.details-toolbar strong {
flex: 1 1 auto;
color: var(--nx-muted);
font-size: 12.5px;
font-weight: 600;
}

.details-back {
display: none;
}

.details-scroll {
min-height: 0;
overflow-y: auto;
}

.details-scroll,
.details-scroll > .j-scroll-area__content {
padding: 18px 20px 28px;
}

.details-scroll > .j-scroll-area__content {
padding: 0;
}

.details-scroll > *:not(.j-scroll-area__bar) + * {
margin-top: 16px;
}

.details-preview {
height: 176px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-card);
background: var(--nx-surface-soft);
}

.details-image {
width: 100%;
height: 100%;
object-fit: contain;
background:
linear-gradient(45deg, var(--nx-line-soft) 25%, transparent 25%, transparent 75%, var(--nx-line-soft) 75%),
linear-gradient(45deg, var(--nx-line-soft) 25%, transparent 25%, transparent 75%, var(--nx-line-soft) 75%);
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}

.details-text {
width: 100%;
height: 100%;
margin: 0;
padding: 12px 14px;
overflow: auto;
color: var(--nx-muted);
font-family: var(--nx-font-mono);
font-size: 11px;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
text-align: start;
place-self: stretch;
}

.kind--hero {
width: 68px;
height: 68px;
border-radius: 20px;
}

.kind--hero j-icon {
font-size: 36px;
}

.details-note {
margin: 8px 0 0;
color: var(--nx-faint);
font-size: 11px;
}

.details-title h3 {
margin: 0;
color: var(--nx-ink);
font-size: 20px;
line-height: 1.25;
overflow-wrap: anywhere;
}

.details-title p {
margin: 4px 0 0;
color: var(--nx-faint);
font-size: 12px;
}

.details-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 6px;
}

.details-action {
min-height: 58px;
padding: 8px 4px 7px;
display: grid;
justify-items: center;
align-content: center;
gap: 4px;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-control);
color: var(--nx-muted);
background: var(--nx-surface-soft);
font-size: 10.5px;
font-weight: 600;
transition: color 150ms ease, background 150ms ease;
}

.details-action j-icon {
font-size: 20px;
}

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

.details-action--primary,
.details-action--primary:hover {
border-color: transparent;
color: var(--nx-accent-ink);
background: var(--nx-primary-bg);
}

.details-more {
display: flex;
flex-wrap: wrap;
gap: 2px 4px;
margin-inline: -8px;
}

.details-section h4 {
margin: 0 0 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--nx-faint);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.details-section h4 .text-link {
min-height: 24px;
font-size: 10.5px;
letter-spacing: 0.04em;
}

.meta-grid {
margin: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 14px;
font-size: 12.5px;
}

.meta-grid dt {
color: var(--nx-faint);
font-weight: 500;
}

.meta-grid dd {
margin: 0;
color: var(--nx-ink);
font-weight: 500;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}

.share-list {
display: grid;
gap: 9px;
}

.share-person {
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
}

.share-person .who {
min-width: 0;
flex: 1 1 auto;
}

.share-person b,
.share-person small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.share-person b {
font-weight: 600;
}

.share-person small {
color: var(--nx-faint);
font-size: 11px;
}

.role {
padding: 3px 8px;
border: 1px solid var(--nx-line-soft);
border-radius: 999px;
color: var(--nx-muted);
background: var(--nx-surface-soft);
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
}

.role--editor {
border-color: transparent;
color: var(--k-sheet-ink);
background: var(--k-sheet-bg);
}

.role--owner {
border-color: transparent;
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.link-row {
margin-top: 10px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-control);
color: var(--nx-muted);
background: var(--nx-surface-soft);
font-size: 12px;
}

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

.link-row .copy b {
color: var(--nx-ink);
font-size: 12.5px;
}

.link-row .copy small {
white-space: normal;
}

.activity {
margin: 0;
padding: 0;
display: grid;
gap: 10px;
list-style: none;
}

.activity li {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 10px;
font-size: 12.5px;
}

.activity-icon {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 8px;
color: var(--nx-muted);
background: var(--nx-surface-soft);
}

.activity-icon j-icon {
font-size: 15px;
}

.activity li small {
display: block;
color: var(--nx-faint);
font-size: 11px;
}

.details-placeholder {
padding: 24px;
display: grid;
place-content: center;
justify-items: center;
gap: 8px;
text-align: center;
}

.details-placeholder h3 {
margin: 6px 0 0;
font-size: 20px;
}

.details-placeholder p {
max-width: 30ch;
margin: 0;
color: var(--nx-muted);
font-size: 12.5px;
line-height: 1.5;
}

.placeholder-hints {
margin: 10px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}

.placeholder-hints div {
display: flex;
align-items: center;
gap: 6px;
color: var(--nx-faint);
font-size: 11.5px;
}

.placeholder-hints dd {
margin: 0;
}

.upload-tray {
position: fixed;
z-index: 60;
inset-inline-end: 18px;
bottom: 18px;
width: min(360px, calc(100vw - 32px));
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: var(--nx-radius-card);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.upload-head {
padding: 10px 8px 10px 14px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid var(--nx-line-soft);
}

.upload-head > j-icon {
color: var(--nx-accent);
}

.upload-head strong {
flex: 1 1 auto;
font-size: 13px;
}

.upload-head small {
color: var(--nx-faint);
font-size: 11px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}

.upload-empty {
margin: 0;
padding: 16px 14px;
color: var(--nx-faint);
font-size: 12px;
}

.upload-list {
max-height: 280px;
overflow-y: auto;
}

.upload-item {
padding: 9px 14px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}

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

.upload-copy {
min-width: 0;
display: grid;
gap: 3px;
}

.upload-copy b,
.upload-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.upload-copy b {
font-size: 12.5px;
font-weight: 600;
}

.upload-copy small {
color: var(--nx-faint);
font-size: 11px;
font-variant-numeric: tabular-nums;
}

.upload-item[data-status="failed"] .upload-copy small {
color: var(--nx-danger);
}

.upload-done {
color: var(--nx-ok);
}

.upload-failed {
color: var(--nx-danger);
}

.m-fab,
.m-sheet,
.m-sheet-scrim {
display: none;
}

.confirm-dialog {
z-index: 1300;
background: var(--nx-scrim);
}

.confirm-dialog j-dialog-panel {
width: min(440px, calc(100vw - 32px));
max-height: calc(100dvh - 32px);
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 20px;
color: var(--nx-ink);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.space-dialog--wide j-dialog-panel {
width: min(560px, calc(100vw - 32px));
}

.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: 20px;
display: flex;
align-items: center;
gap: 12px;
}

.confirm-dialog j-dialog-title {
margin: 0;
color: var(--nx-ink);
font-size: 20px;
line-height: 1.2;
overflow-wrap: anywhere;
}

.confirm-dialog j-dialog-content {
min-height: 0;
padding-top: 12px;
padding-bottom: 6px;
display: grid;
gap: 14px;
overflow-y: auto;
color: var(--nx-muted);
font-size: 12.5px;
line-height: 1.6;
}

.confirm-dialog j-dialog-content p {
margin: 0;
}

.confirm-dialog j-dialog-footer {
padding-top: 12px;
padding-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}

.confirm-dialog__icon {
width: 38px;
height: 38px;
display: grid;
flex: 0 0 auto;
place-items: center;
border-radius: 12px;
color: var(--nx-danger);
background: color-mix(in srgb, var(--nx-danger) 11%, transparent);
}

.confirm-dialog__icon--accent {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.space-dialog j-dialog-header .kind {
width: 38px;
height: 38px;
border-radius: 12px;
}

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

.dialog-heading small {
overflow: hidden;
color: var(--nx-faint);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}

.dialog-form {
display: grid;
gap: 10px;
}

.dialog-field .j-field__label {
display: none;
}

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

.move-crumbs {
display: flex;
align-items: center;
gap: 8px;
color: var(--nx-ink);
font-size: 13px;
}

.move-list {
max-height: 300px;
display: grid;
gap: 3px;
overflow-y: auto;
}

.move-option {
min-height: 44px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 10px;
border-radius: 11px;
color: var(--nx-ink);
font-size: 13px;
}

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

.move-option__name {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.move-option > j-icon {
color: var(--nx-faint);
}

j-form.share-add {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
}

.segmented {
padding: 3px;
display: inline-flex;
gap: 2px;
border: 1px solid var(--nx-line);
border-radius: 12px;
background: var(--nx-surface-soft);
}

.segmented--wide {
width: 100%;
}

.segmented--wide .segmented__option {
flex: 1 1 0;
}

.segmented__option {
min-height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 9px;
color: var(--nx-muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}

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

.segmented__option:hover {
color: var(--nx-ink);
}

.segmented__option--on,
.segmented__option--on:hover {
color: var(--nx-accent-strong);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-1);
}

.link-controls {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}

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

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

j-toggle > label.j-toggle {
min-height: 24px;
gap: 0;
pointer-events: none;
}

j-toggle .j-toggle__track {
width: 42px;
height: 24px;
padding: 2px;
flex: 0 0 42px;
border: 1px solid var(--nx-line);
border-radius: 999px;
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);
transition: transform 200ms ease;
}

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

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

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

#__jv-notify {
top: 70px !important;
right: 8px !important;
bottom: auto !important;
left: auto !important;
flex-direction: column !important;
align-items: flex-end !important;
}

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

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

.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__close {
padding: 4px 8px;
border: 0;
border-radius: 9px;
color: var(--nx-faint);
background: transparent;
}

.mobile-nav-dialog {
z-index: 1250;
background: var(--nx-scrim);
}

.mobile-nav-dialog j-dialog-panel {
width: min(400px, calc(100vw - 24px));
max-height: calc(100dvh - 24px);
padding: 0;
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 22px;
color: var(--nx-ink);
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.mobile-nav-dialog j-dialog-header {
min-height: 72px;
padding: 16px 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: 2px;
}

.mobile-nav-dialog j-dialog-title {
margin: 0;
font-size: 22px;
}

.mobile-nav-dialog j-dialog-content {
max-height: calc(100dvh - 110px);
padding: 14px;
display: grid;
gap: 12px;
overflow-y: auto;
}

.mobile-nav-list {
display: grid;
gap: 4px;
}

.mobile-nav-link {
min-height: 48px;
padding: 0 13px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 13px;
color: var(--nx-muted);
font-size: 14px;
text-decoration: none;
}

.mobile-nav-link:hover {
color: var(--nx-accent-strong);
background: var(--nx-accent-soft);
}

.mobile-nav-section {
padding: 12px 10px 4px;
display: grid;
gap: 8px;
border-top: 1px solid var(--nx-line-soft);
}

.mobile-nav-quota {
margin: 0;
color: var(--nx-muted);
font-size: 12.5px;
}

.login-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(400px, 47%) minmax(460px, 53%);
overflow: auto;
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: linear-gradient(180deg, #1b1830 0%, #131120 55%, #100e1a 100%);
}

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

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

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

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

.login-brand-mark j-icon {
font-size: 22px;
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.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: #4fbf8b;
box-shadow: 0 0 0 4px rgba(47, 158, 110, 0.15);
}

.login-story h1 {
margin: 22px 0 16px;
color: #ffffff;
font-size: clamp(40px, 4.4vw, 56px);
line-height: 1.02;
letter-spacing: -0.02em;
}

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

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

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

.login-benefits > div > span,
.login-assurance-mark {
width: 36px;
height: 36px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 11px;
color: #d9d6ee;
background: rgba(255, 255, 255, 0.08);
}

.login-benefits p,
.login-assurance p {
margin: 0;
}

.login-benefits strong,
.login-assurance strong {
display: block;
color: #ffffff;
font-size: 13.5px;
}

.login-benefits small,
.login-assurance small {
display: block;
color: #b5b2cc;
font-size: 12px;
line-height: 1.5;
}

.login-assurance {
position: relative;
z-index: 1;
padding: 14px;
display: flex;
gap: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
}

.login-form-panel {
padding: 40px;
display: grid;
place-content: center;
gap: 16px;
}

.login-mobile-brand {
display: none;
color: var(--nx-ink);
justify-content: center;
}

.login-card {
width: min(424px, 100%);
padding: 0;
overflow: hidden;
border: 1px solid var(--nx-line-soft);
border-radius: 22px;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.login-card > j-card-section {
padding: 0 28px 22px;
}

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

.login-card-head h2 {
margin: 0 0 6px;
color: var(--nx-ink);
font-size: 26px;
}

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

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

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

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

.login-field .j-field__label {
display: none;
}

.login-options {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: var(--nx-faint);
font-size: 11.5px;
}

.login-submit {
width: 100%;
justify-content: space-between;
padding: 0 18px 0 20px;
}

.login-error {
border-radius: 12px;
}

.login-card > .login-note {
padding: 13px 28px;
display: flex;
gap: 10px;
border-top: 1px solid var(--nx-line-soft);
color: var(--nx-muted);
background: var(--nx-surface-soft);
font-size: 12px;
line-height: 1.45;
}

.login-note > j-icon {
color: var(--nx-accent);
}

.login-note p {
margin: 0;
}

.login-note strong {
display: block;
color: var(--nx-ink);
font-size: 12.5px;
}

.login-legal {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--nx-faint);
font-size: 11.5px;
}

.settings-page {
height: calc(100vh - 66px);
padding: 26px 28px 40px;
overflow-y: auto;
}

.settings-head {
max-width: 1080px;
margin: 0 auto 18px;
}

.settings-head h2 {
margin: 0;
color: var(--nx-ink);
font-size: 30px;
}

.settings-head p:last-child {
margin: 4px 0 0;
color: var(--nx-muted);
font-size: 13px;
}

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

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

.settings-card > .settings-card-head {
padding: 18px 20px 6px;
display: flex;
align-items: center;
gap: 12px;
}

.settings-card-head h3 {
margin: 0;
color: var(--nx-ink);
font-size: 17px;
}

.settings-card-head p {
margin: 2px 0 0;
color: var(--nx-faint);
font-size: 12px;
}

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

.settings-icon--green { color: var(--k-sheet-ink); background: var(--k-sheet-bg); }
.settings-icon--amber { color: var(--k-deck-ink); background: var(--k-deck-bg); }
.settings-icon--violet { color: var(--k-image-ink); background: var(--k-image-bg); }

.settings-card > .settings-options {
padding: 8px 20px 18px;
display: grid;
gap: 4px;
}

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

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

.setting-row > div:first-child,
.account-status > div {
min-width: 0;
display: grid;
gap: 3px;
}

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

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

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

.settings-control-field {
padding-top: 10px;
display: grid;
gap: 6px;
border-top: 1px solid var(--nx-line-soft);
}

.settings-control-label {
padding-top: 6px;
color: var(--nx-muted);
font-size: 11px;
font-weight: 700;
}

.settings-control-field .j-field__label {
display: none;
}

.inline-field {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
}

.settings-hint,
.settings-copy {
margin: 0;
color: var(--nx-faint);
font-size: 11.5px;
line-height: 1.5;
}

.dav-url {
display: block;
overflow: hidden;
color: var(--nx-ink);
font-family: var(--nx-font-mono);
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}

.storage-summary {
margin-top: 12px;
display: grid;
gap: 8px;
}

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

.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__track {
position: relative;
width: 74px;
height: 34px;
padding: 0 9px;
display: inline-flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--nx-line);
border-radius: 999px;
background: var(--nx-surface-soft);
}

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

.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"][data-theme="dark"] .theme-switch__thumb {
transform: translateX(-40px);
}

.skin-row {
padding: 8px 0 12px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.skin-card {
position: relative;
padding: 0;
display: grid;
overflow: hidden;
border: 1px solid var(--nx-line);
border-radius: 18px;
text-align: start;
isolation: isolate;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.skin-card:hover {
transform: translateY(-2px);
}

.skin-card--on {
border-color: var(--nx-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-accent) 13%, transparent);
}

.skin-check {
position: absolute;
top: 10px;
inset-inline-end: 10px;
width: 26px;
height: 26px;
display: none;
place-items: center;
border-radius: 50%;
color: var(--nx-accent-ink);
background: var(--nx-accent);
}

.skin-check j-icon {
font-size: 14px;
}

.skin-card--on .skin-check {
display: grid;
}

.skin-thumb {
position: relative;
height: 110px;
display: block;
}

.skin-thumb i {
position: absolute;
display: block;
}

.skin-thumb .t-rail { inset-block: 0; inset-inline-start: 0; width: 14%; }
.skin-thumb .t-logo { top: 12px; inset-inline-start: 4%; width: 14px; height: 14px; }
.skin-thumb .t-bar { top: 0; inset-inline-start: 14%; inset-inline-end: 0; height: 20px; }
.skin-thumb .t-card { top: 32px; width: 16%; height: 34px; }
.skin-thumb .t-card--a { inset-inline-start: 19%; }
.skin-thumb .t-card--b { inset-inline-start: 38%; }
.skin-thumb .t-card--c { inset-inline-start: 57%; top: 72px; height: 26px; }
.skin-thumb .t-pane { top: 30px; bottom: 10px; inset-inline-end: 5%; width: 18%; }

.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: 5px; background: linear-gradient(145deg, #7a72e8, #4b45bd); }
.skin-thumb--iris .t-bar { border-bottom: 1px solid #ded9cf; background: rgba(255, 254, 250, 0.82); }
.skin-thumb--iris .t-card { border: 1px solid #e3ddd1; border-radius: 7px; background: #ffffff; box-shadow: 0 4px 10px rgba(46, 39, 69, 0.07); }
.skin-thumb--iris .t-card--a { background: linear-gradient(180deg, #ecebfa 60%, #ffffff 60%); }
.skin-thumb--iris .t-pane { border: 1px solid #ddd6c9; border-radius: 8px; background: rgba(255, 255, 255, 0.72); }

.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),
#060a13;
background-size: 16px 16px, 16px 16px, auto;
}
.skin-thumb--deck .t-rail { border-inline-end: 1px solid rgba(146, 164, 205, 0.22); background: #04070d; }
.skin-thumb--deck .t-logo { border: 1px solid #5df2cf; border-radius: 2px; background: rgba(93, 242, 207, 0.09); }
.skin-thumb--deck .t-bar { border-bottom: 1px solid rgba(146, 164, 205, 0.18); background: rgba(11, 17, 32, 0.92); }
.skin-thumb--deck .t-card { border: 1px solid rgba(126, 151, 187, 0.28); border-radius: 2px; background: rgba(12, 20, 34, 0.82); }
.skin-thumb--deck .t-card--a { border-color: #5df2cf; box-shadow: 0 0 8px rgba(93, 242, 207, 0.35); }
.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-sweep {
top: 19px;
inset-inline-start: 14%;
width: 30px;
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: 14%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
to { inset-inline-start: 86%; opacity: 0; }
}

.skin-copy {
padding: 14px 15px 15px;
display: grid;
gap: 4px;
}

.skin-copy strong {
font-size: 15px;
}

.skin-copy span {
font-size: 11px;
line-height: 1.45;
}

.skin-card--iris .skin-copy strong { font-family: "Fraunces", Georgia, serif; }
.skin-card--iris .skin-copy span { color: #746e7b; }
.skin-card--deck .skin-copy strong { color: #71f0d3; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; 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; }

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

.starter-not-found__content {
display: grid;
justify-items: center;
gap: 10px;
text-align: center;
}

.not-found-glyph {
width: 72px;
height: 72px;
display: grid;
place-items: center;
border-radius: 22px;
color: var(--nx-accent);
background: var(--nx-accent-soft);
}

.not-found-glyph j-icon {
font-size: 36px;
}

.starter-not-found__content h1 {
margin: 0;
color: var(--nx-accent);
font-size: 88px;
line-height: 1;
}

.starter-not-found__content p {
margin: 0 0 10px;
color: var(--nx-muted);
}

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

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

:root: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%),
var(--nx-canvas);
}

:root:has(.skin-flag--deck) .brand-mark,
:root:has(.skin-flag--deck) .brand-mini,
:root:has(.skin-flag--deck) .login-brand-mark,
:root:has(.skin-flag--deck) .rail-link,
:root:has(.skin-flag--deck) .folder-link,
:root:has(.skin-flag--deck) .folder-card,
:root:has(.skin-flag--deck) .storage-card,
:root:has(.skin-flag--deck) .search-shell,
:root:has(.skin-flag--deck) .new-menu,
:root:has(.skin-flag--deck) .popover-menu,
:root:has(.skin-flag--deck) .menu-item,
:root:has(.skin-flag--deck) .primary-button,
:root:has(.skin-flag--deck) .outline-button,
:root:has(.skin-flag--deck) .danger-button,
:root:has(.skin-flag--deck) .filter-chip,
:root:has(.skin-flag--deck) .view-toggle,
:root:has(.skin-flag--deck) .view-toggle j-icon-button,
:root:has(.skin-flag--deck) .segmented,
:root:has(.skin-flag--deck) .segmented__option,
:root:has(.skin-flag--deck) .mini-action,
:root:has(.skin-flag--deck) .icon-action,
:root:has(.skin-flag--deck) .topbar-action,
:root:has(.skin-flag--deck) .rail-theme,
:root:has(.skin-flag--deck) .details-preview,
:root:has(.skin-flag--deck) .details-action,
:root:has(.skin-flag--deck) .placeholder-glyph,
:root:has(.skin-flag--deck) .confirm-dialog j-dialog-panel,
:root:has(.skin-flag--deck) .mobile-nav-dialog j-dialog-panel,
:root:has(.skin-flag--deck) .confirm-dialog__icon,
:root:has(.skin-flag--deck) .upload-tray,
:root:has(.skin-flag--deck) .trash-banner,
:root:has(.skin-flag--deck) .link-row,
:root:has(.skin-flag--deck) .login-card,
:root:has(.skin-flag--deck) .settings-card,
:root:has(.skin-flag--deck) .settings-icon,
:root:has(.skin-flag--deck) .skin-card,
:root:has(.skin-flag--deck) .header-account,
:root:has(.skin-flag--deck) input.j-input,
:root:has(.skin-flag--deck) .jv-toast,
:root:has(.skin-flag--deck) .m-fab,
:root:has(.skin-flag--deck) .m-sheet,
:root:has(.skin-flag--deck) .activity-icon,
:root:has(.skin-flag--deck) .count-pill,
:root:has(.skin-flag--deck) .role {
border-radius: 3px !important;
}

:root:has(.skin-flag--deck) .avatar,
:root:has(.skin-flag--deck) .rail-avatar,
:root:has(.skin-flag--deck) .header-account__avatar {
border-radius: 3px;
}

:root:has(.skin-flag--deck) .eyebrow,
:root:has(.skin-flag--deck) .section-label,
:root:has(.skin-flag--deck) .details-section h4,
:root:has(.skin-flag--deck) .count-pill,
:root:has(.skin-flag--deck) .list-footer,
:root:has(.skin-flag--deck) .folder-account,
:root:has(.skin-flag--deck) .copy small,
:root:has(.skin-flag--deck) .file-row .when,
:root:has(.skin-flag--deck) .file-row .size,
:root:has(.skin-flag--deck) .file-row--head,
:root:has(.skin-flag--deck) .storage-copy,
:root:has(.skin-flag--deck) .storage-foot,
:root:has(.skin-flag--deck) .meta-grid dd,
:root:has(.skin-flag--deck) .activity li small,
:root:has(.skin-flag--deck) .upload-copy small,
:root:has(.skin-flag--deck) .details-title p,
:root:has(.skin-flag--deck) .bell-badge,
:root:has(.skin-flag--deck) .avatar,
:root:has(.skin-flag--deck) .rail-avatar {
font-family: var(--nx-font-mono);
}

:root:has(.skin-flag--deck) .copy small,
:root:has(.skin-flag--deck) .file-row .when,
:root:has(.skin-flag--deck) .file-row .size {
font-size: 10.5px;
}

:root:has(.skin-flag--deck) .app-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--active,
:root:has(.skin-flag--deck) .rail-link--active j-icon {
color: var(--nx-accent);
}

:root:has(.skin-flag--deck) .brand-mark,
:root:has(.skin-flag--deck) .brand-mini,
:root:has(.skin-flag--deck) .login-brand-mark {
border: 1px solid color-mix(in srgb, var(--nx-accent) 35%, transparent);
color: var(--nx-accent);
background: var(--nx-accent-soft);
box-shadow: none;
}

:root:has(.skin-flag--deck) .search-shell {
padding-inline-start: 12px;
background: var(--nx-canvas);
box-shadow: none;
}

:root:has(.skin-flag--deck) .search-shell::before {
color: var(--nx-accent);
font-family: var(--nx-font-mono);
font-size: 12px;
font-weight: 800;
content: "\203A_";
}

:root:has(.skin-flag--deck) .search-icon {
display: none;
}

:root:has(.skin-flag--deck) .global-search input {
font-family: var(--nx-font-mono);
font-size: 11.5px;
}

:root:has(.skin-flag--deck) .topbar {
background: var(--nx-surface);
}

:root:has(.skin-flag--deck) .topbar::after {
position: absolute;
bottom: -1px;
inset-inline-start: -140px;
width: 140px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--nx-accent), transparent);
content: "";
pointer-events: none;
animation: deck-sweep 3.4s linear infinite;
}

@keyframes deck-sweep {
to { inset-inline-start: 100%; }
}

:root:has(.skin-flag--deck) .primary-button {
font-family: var(--nx-font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}

:root:has(.skin-flag--deck) .primary-button:hover {
transform: none;
background: var(--nx-accent-strong);
}

:root:has(.skin-flag--deck) .folder-link--active {
background: var(--nx-surface-soft);
box-shadow: inset 2px 0 0 var(--nx-accent);
}

:root:has(.skin-flag--deck) .folder-card:hover,
:root:has(.skin-flag--deck) .file-card:hover,
:root:has(.skin-flag--deck) .skin-card:hover {
transform: none;
}

:root:has(.skin-flag--deck) .file-card,
:root:has(.skin-flag--deck) .file-thumb,
:root:has(.skin-flag--deck) .file-list {
border-radius: 3px;
}

:root:has(.skin-flag--deck) .file-card--selected,
:root:has(.skin-flag--deck) .folder-card--selected {
box-shadow: inset 0 0 0 1px var(--nx-accent);
}

:root:has(.skin-flag--deck) .file-row--selected {
box-shadow: inset 2px 0 0 var(--nx-accent);
}

:root:has(.skin-flag--deck) .login-story {
background: linear-gradient(180deg, #0a101f 0%, #060a13 60%, #05080f 100%);
}

:root[dir="rtl"],
:root[dir="rtl"]:has(.skin-flag--deck) {
--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;
}

html[dir="rtl"],
html[dir="rtl"] body {
direction: rtl;
}

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

[dir="rtl"] .eyebrow,
[dir="rtl"] .section-label,
[dir="rtl"] .details-section h4,
[dir="rtl"] .rail-link span,
[dir="rtl"] .primary-button,
[dir="rtl"] .file-row--head {
letter-spacing: 0;
}

[dir="rtl"] .crumb-sep,
[dir="rtl"] .move-option > j-icon {
transform: scaleX(-1);
}

[dir="rtl"] .dav-url {
direction: ltr;
text-align: end;
}

@media (max-width: 1240px) {
.files-page {
grid-template-columns: minmax(0, 1fr) 300px;
}

.file-row {
grid-template-columns: minmax(0, 1fr) 130px 84px 100px;
}

.file-row > .who {
display: none;
}
}

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

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

.details-column {
position: fixed;
z-index: 40;
top: 66px;
bottom: 0;
inset-inline-end: 0;
width: min(380px, 100vw);
border-inline-start: 1px solid var(--nx-line);
box-shadow: var(--nx-shadow-2);
transform: translateX(105%);
transition: transform 220ms ease;
}

[dir="rtl"] .details-column {
transform: translateX(-105%);
}

.files-page--details .details-column {
transform: none;
}

.details-column--empty {
display: none;
}

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

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

.folder-drawer {
display: none;
}

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

.login-story {
display: none;
}

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

@media (max-width: 680px) {
:root {
--nx-mobile-bar-height: 64px;
}

html,
body {
overflow: auto;
}

.space-shell {
display: block;
}

.app-rail {
position: fixed;
z-index: 80;
inset: auto 0 0;
width: 100%;
height: calc(var(--nx-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
padding: 6px 10px max(6px, env(safe-area-inset-bottom, 0px));
display: block;
border-top: 1px solid var(--nx-rail-line);
}

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

.rail-nav {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 5px;
}

.rail-link {
min-height: 50px;
padding: 4px 3px 3px;
}

.rail-link--active::before {
top: -6px;
inset-inline-start: 50%;
width: 28px;
height: 3px;
border-radius: 0 0 3px 3px;
transform: translateX(-50%);
}

.workspace {
height: auto;
min-height: 100dvh;
grid-template-rows: 58px minmax(0, 1fr);
padding-bottom: calc(var(--nx-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
}

.topbar j-toolbar {
min-height: 58px;
padding-inline: 12px;
gap: 6px;
}

.mobile-brand {
display: flex;
}

.mobile-brand strong,
.header-account,
.search-key {
display: none;
}

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

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

.files-page,
.settings-page {
height: calc(100dvh - 58px - var(--nx-mobile-bar-height) - env(safe-area-inset-bottom, 0px));
}

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

.breadcrumbs h2,
.view-title {
font-size: 21px;
}

.view-toggle {
display: none;
}

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

.files-scroll {
padding: 4px 14px 96px;
}

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

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

.file-thumb {
height: 92px;
}

.file-row {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 58px;
}

.file-row > .who,
.file-row > .size,
.file-row--head {
display: none;
}

.file-row .when {
display: none;
}

.row-actions {
opacity: 1;
}

.card-actions {
opacity: 1;
}

.list-footer {
display: none;
}

.details-column {
top: 0;
bottom: 0;
z-index: 90;
width: 100vw;
border: 0;
}

.details-back {
display: inline-flex;
}

.details-close {
display: none;
}

.upload-tray {
inset-inline: 12px;
bottom: calc(var(--nx-mobile-bar-height) + 12px + env(safe-area-inset-bottom, 0px));
width: auto;
}

.m-fab {
position: fixed;
z-index: 70;
inset-inline-end: 16px;
bottom: calc(var(--nx-mobile-bar-height) + 16px + env(safe-area-inset-bottom, 0px));
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 18px;
color: var(--nx-accent-ink);
background: var(--nx-primary-bg);
box-shadow: 0 12px 26px var(--nx-accent-glow);
}

.m-fab j-icon {
font-size: 26px;
}

.m-sheet-scrim {
position: fixed;
z-index: 95;
inset: 0;
display: block;
background: var(--nx-scrim);
}

.m-sheet-scrim[style*="display: none"],
.m-sheet[style*="display: none"] {
display: none !important;
}

.m-sheet {
position: fixed;
z-index: 96;
inset: auto 0 0;
padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px));
display: grid;
gap: 2px;
border-radius: 22px 22px 0 0;
background: var(--nx-surface);
box-shadow: var(--nx-shadow-2);
}

.m-sheet::before {
width: 40px;
height: 4px;
margin: 0 auto 10px;
border-radius: 2px;
background: var(--nx-line);
content: "";
}

.m-sheet h3 {
margin: 0 6px 8px;
font-size: 18px;
}

.m-sheet .menu-item {
min-height: 50px;
font-size: 14px;
}

.settings-page {
padding: 16px 14px 96px;
}

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

.setting-row {
flex-wrap: wrap;
padding-block: 10px;
}

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

.login-form-panel {
padding: 28px 16px;
}

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

.login-card > .login-card-head {
padding: 24px 22px 14px;
}

#__jv-notify {
top: 62px !important;
right: 0 !important;
left: 0 !important;
align-items: stretch !important;
}

.jv-toast {
max-width: none;
}
}

@media (max-width: 420px) {
.file-grid {
grid-template-columns: minmax(0, 1fr);
}

.panel-actions .icon-action {
width: 34px;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
}

j-menu.suite-launcher {
display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 0;
padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none;
--jv-color-primary: var(--nx-accent); --jv-color-on-surface: var(--nx-ink);
}
.suite-launcher__trigger {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid transparent;
border-radius: 50%; background: transparent; color: var(--nx-muted); cursor: pointer;
}
.suite-launcher__trigger:hover, .suite-launcher__trigger[aria-expanded="true"] {
background: var(--nx-accent-soft); color: var(--nx-accent); border-color: var(--nx-line);
}
.suite-launcher__trigger > j-icon { font-size: 24px; line-height: 1; }
.suite-launcher__trigger:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.suite-launcher__positioner { z-index: 1500; }
.suite-launcher:not([data-jv-zag-ready]) .suite-launcher__positioner,
.suite-launcher__panel[hidden] { display: none !important; }
.suite-launcher__panel {
width: min(328px, calc(100vw - 24px)); max-height: min(480px, calc(100dvh - 90px));
overflow: auto; padding: 16px; border: 1px solid var(--nx-line); border-radius: 22px;
background: var(--nx-surface); color: var(--nx-ink); box-shadow: var(--nx-shadow-2);
font-family: var(--nx-font-ui); line-height: 1.4; overscroll-behavior: contain;
}
.suite-launcher__panel:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 3px; }
.suite-launcher__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 6px 15px; }
.suite-launcher__heading > strong { font-size: 15px; letter-spacing: -.3px; font-weight: 700; }
.suite-launcher__heading > span { color: var(--nx-muted); font-size: 11px; }
.suite-launcher__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.suite-launcher__app {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
min-width: 0; padding: 15px 5px 9px; border: 1px solid transparent; border-radius: 15px;
color: var(--nx-ink); text-align: center; text-decoration: none; cursor: pointer;
}
.suite-launcher__app:hover, .suite-launcher__app[data-highlighted] {
color: var(--nx-ink); background: var(--nx-surface-soft); border-color: var(--nx-line);
}
.suite-launcher__app:focus-visible, .suite-launcher__app[data-highlighted] { outline: 2px solid var(--nx-accent); outline-offset: -2px; }
.suite-launcher__app[data-app-current="true"] { background: var(--nx-accent-soft); border-color: var(--nx-line); }
.suite-launcher__icon {
display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px;
border-radius: 13px; color: var(--nx-accent); background: var(--nx-accent-soft);
}
.suite-launcher__icon > j-icon { font-size: 27px; line-height: 1; }
.suite-launcher__app[data-app="calendar"] .suite-launcher__icon { color: var(--nx-star); background: color-mix(in srgb, var(--nx-star) 12%, transparent); }
.suite-launcher__app[data-app="space"] .suite-launcher__icon { color: var(--nx-ok); background: color-mix(in srgb, var(--nx-ok) 12%, transparent); }
.suite-launcher__app[data-app="meet"] .suite-launcher__icon { color: var(--nx-car); background: var(--nx-car-soft); }
.suite-launcher__app > strong { font-size: 12px; font-weight: 650; letter-spacing: -.2px; overflow-wrap: anywhere; }
.suite-launcher__app > small { margin-top: 4px; color: var(--nx-muted); font-size: 10px; }
.suite-launcher__current { min-height: 17px; margin-top: 7px; padding: 2px 6px; border-radius: 5px; color: var(--nx-accent); font-size: 9px; font-weight: 600; }
.suite-launcher__current--empty { visibility: hidden; }
.suite-launcher__app[aria-disabled="true"] { cursor: default; }
.suite-launcher__app[aria-disabled="true"]:hover { background: transparent; border-color: transparent; }
.suite-launcher__app[aria-disabled="true"] .suite-launcher__icon { opacity: .55; }
.suite-launcher__app[aria-disabled="true"] > strong { color: var(--nx-muted); }
:root:has(.skin-flag--deck) .suite-launcher__panel { border-radius: 8px; }
:root:has(.skin-flag--deck) :is(.suite-launcher__app, .suite-launcher__icon, .suite-launcher__trigger) { border-radius: 5px; }
:root:has(.skin-flag--deck) .suite-launcher__heading > span { font-family: var(--nx-font-mono); }
.nexcalendar-toolbar, .meet-header { position: relative; z-index: 1100; overflow: visible; }
@media (max-width: 680px) {
.suite-launcher__trigger { width: 36px; height: 36px; min-width: 36px; }
.suite-launcher__panel { padding: 12px; border-radius: 16px; }
}