/* Same suite selector in all applications. Local navigation keeps its own styles. */
.nc-suite { font: 14px/1.45 system-ui, sans-serif; color: #242a31; color-scheme: light; }
.nc-suite *, .nc-suite *::before, .nc-suite *::after { box-sizing: border-box; }
.nc-suite-panel { background: #fcfdfc; padding: 20px 12px; }
.nc-suite-title { margin: 0 12px 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #59635e; }
.nc-suite nav { display: grid; gap: 6px; margin: 0; padding: 0; }
.nc-suite a.nc-suite-link { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: var(--nc-color); text-decoration: none; font: 600 14px/1.4 system-ui, sans-serif; }
.nc-suite a.nc-suite-link:hover { background: #eef2ef; }
.nc-suite a.nc-suite-link[aria-current="page"] { background: #f0f3f1; border-color: #d8dfdb; border-left: 3px solid var(--nc-color); }
.nc-suite-link > img { width: 26px; height: 26px; flex: none; }
.nc-suite a.nc-suite-link .nc-suite-watermark { position: absolute; z-index: -1; right: 8px; top: -10px; width: 70px; height: 70px; opacity: .10; pointer-events: none; object-fit: contain; }
.nc-suite-external { margin-left: auto; font-size: 16px; }
/* The palette's accent keeps a 3:1 contrast with the panel in Clarté, Sauge and Encre (WCAG 1.4.11). */
.nc-suite :focus-visible { outline: 3px solid var(--suite-accent, #245b49); outline-offset: 3px; }
.nc-suite button { font: 600 14px/1.4 system-ui,sans-serif; cursor: pointer; min-height: 48px; padding: 10px 16px; border: 1px solid #c5cec8; border-radius: 8px; background: white; color: #242a31; }
.nc-suite-close { display: block; margin: 0 0 18px auto; }
.nc-suite-mobile-bar { padding: 10px 16px; background: #fcfdfc; border-bottom: 1px solid #d8dfdb; }
.nc-suite dialog { position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; width: min(320px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; border: 0; overflow-y: auto; box-shadow: 8px 0 32px #0002; }
.nc-suite dialog::backdrop { background: #18231ccc; }
.nc-suite-desktop { display: none; }
body:has(.nc-suite-dialog[open]) { overflow: hidden; }
@media (min-width: 1200px) {
 body:has(.nc-suite) { padding-left: 216px; }
 .nc-suite-desktop { display: block; position: fixed; inset: 0 auto 0 0; width: 216px; overflow-y: auto; border-right: 1px solid #d8dfdb; z-index: 45; }
 .nc-suite-mobile-bar { display: none; }
 body:has(.nc-suite) .hub-sidebar { left: 216px; }
}

.nc-suite-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Installed application (navigation.js): back button before « Applications », as tall as it. The panel does not
   scroll the page behind it, and keeps clear of the notch and of the home indicator. */
.nc-suite .nc-suite-mobile-bar:has(> .nc-suite-back:not([hidden])) { display: flex; align-items: stretch; gap: 8px; }
.nc-suite .nc-suite-mobile-bar button.nc-suite-back { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 36px; margin: 0; padding: 0 10px; }
.nc-suite .nc-suite-mobile-bar button.nc-suite-back[hidden] { display: none; }
.nc-suite dialog { overscroll-behavior: contain; }
.nc-suite-dialog > .nc-suite-panel { padding: max(20px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }

/* Counts use the same dimensions and states in every suite application. */
.nc-suite .nc-suite-link > span:first-of-type { min-width: 0; }
.nc-suite .nc-suite-badge { flex: none; margin-left: auto; min-width: 24px; padding: 2px 5px; border-radius: 6px; background: #e4ebe7; color: #263b32; font: 700 11px/1.4 system-ui, sans-serif; text-align: center; }
.nc-suite .nc-suite-badge[data-state="unavailable"] { background: transparent; color: #69756e; }
.nc-suite .nc-suite-external { margin-left: 0; }
html.dark .nc-suite .nc-suite-badge { background: #364d41; color: #e4f2e9; }
html.dark .nc-suite .nc-suite-badge[data-state="unavailable"] { background: transparent; color: #b5c2ba; }
.nc-suite .nc-suite-link[data-suite-link="messenger"] { --nc-color: #355f88; }

/* Static brand rules also work under style-src self without inline styles. */
.nc-suite-link[data-suite-link="hub"] { --nc-color: #242a31; }
.nc-suite-link[data-suite-link="fairly"] { --nc-color: #514477; }
.nc-suite-link[data-suite-link="mayday"] { --nc-color: #25372f; }
.nc-suite-link[data-suite-link="pulse"] { --nc-color: #245b49; }
.nc-suite-link[data-suite-link="tempo"] { --nc-color: #325e50; }
.nc-suite-link[data-suite-link="vault"] { --nc-color: #267160; }
.nc-suite-link[data-suite-link="dav"] { --nc-color: #243B59; }
.nc-suite-link[data-suite-link="messenger"] { --nc-color: #355f88; }
.nc-suite-link[data-suite-link="webmail"] { --nc-color: #242a31; }
/* The space selector follows each application's current theme. */
.suite-space-selector, .suite-space-assignment { display: grid; gap: .5rem; margin: 1rem 0; padding: .75rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .65rem; color: inherit; }
.suite-space-selector label, .suite-space-assignment label { font-size: .8rem; font-weight: 600; }
.suite-space-selector select, .suite-space-assignment select { width: 100%; min-width: 0; padding: .5rem; border-radius: .4rem; font: inherit; color: inherit; background: inherit; }
.suite-space-selector button, .suite-space-assignment button { padding: .45rem .7rem; border: 1px solid currentColor; border-radius: .4rem; font: inherit; color: inherit; background: transparent; cursor: pointer; }
.suite-space-selector small, .suite-space-assignment small { font-size: .75rem; line-height: 1.4; }
.suite-space-assignment { max-width: 32rem; }

/* Sister brands stay quiet at the bottom of the selector, in every theme. */
.nc-suite-dialog > .nc-suite-panel { display: flex; flex-direction: column; min-height: 100%; }
@media (min-width: 1200px) { .nc-suite-desktop { display: flex; flex-direction: column; } }
.nc-suite-brands { margin-top: auto; padding: 24px 10px 0; }
.nc-suite-brands-title { margin: 0 2px 4px; font: 600 10px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.nc-suite a.nc-suite-brand { display: grid; gap: 1px; padding: 7px 2px; border-radius: 6px; color: inherit; text-decoration: none; font: 12px/1.35 system-ui, sans-serif; }
.nc-suite-brand-name { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.nc-suite-brand-name::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--nc-brand); }
.nc-suite-brand-name::after { content: "↗"; font-weight: 400; opacity: 0; transition: opacity .15s; }
.nc-suite-brand-text { padding-left: 14px; opacity: .65; }
.nc-suite a.nc-suite-brand:hover .nc-suite-brand-name::after, .nc-suite a.nc-suite-brand:focus-visible .nc-suite-brand-name::after { opacity: .7; }
.nc-suite a.nc-suite-brand:hover .nc-suite-brand-text { opacity: .85; }
.nc-suite-brand[data-suite-brand="dowebo"] { --nc-brand: #2f6bd8; }
.nc-suite-brand[data-suite-brand="playnest"] { --nc-brand: #2f9a5e; }
.nc-suite-brand[data-suite-brand="virtana"] { --nc-brand: #eab24c; }
@media (prefers-reduced-motion: reduce) { .nc-suite-brand-name::after { transition: none; } }

/* Space chooser: a card for the current space; its list opens upwards in the desktop column. */
.nc-suite { --nc-space-surface: #fff; --nc-space-hover: #eef2ef; --nc-space-line: #d8dfdb; --nc-space-accent: #245b49; }
html[data-suite-theme="dark"] .nc-suite, html.dark .nc-suite { --nc-space-surface: rgb(29 36 38); --nc-space-hover: rgb(38 47 50); --nc-space-line: #39464b; --nc-space-accent: #9fc9b5; }
.nc-space { position: relative; margin: 16px 0 0; }
.nc-suite .nc-space button.nc-space-current { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px; border: 1px solid var(--nc-space-line); border-radius: 10px; background: var(--nc-space-surface); color: inherit; font: 400 13px/1.3 system-ui, sans-serif; text-align: left; }
.nc-suite .nc-space button.nc-space-current:hover, .nc-suite .nc-space button.nc-space-current[aria-expanded="true"] { background: var(--nc-space-hover); }
.nc-space-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; font: 700 13px/1 system-ui, sans-serif; }
.nc-space-neutral { background: color-mix(in srgb, currentColor 10%, transparent); }
.nc-space-text { display: grid; flex: 1; min-width: 0; }
.nc-space-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nc-space-hint { font-size: 11px; opacity: .65; }
.nc-space-chevron { flex: none; opacity: .6; transform: rotate(180deg); transition: transform .15s; }
.nc-space-current[aria-expanded="true"] .nc-space-chevron { transform: none; }
.nc-space-list { margin-top: 6px; padding: 4px; border: 1px solid var(--nc-space-line); border-radius: 10px; background: var(--nc-space-surface); }
.nc-space-list[hidden] { display: none; }
@media (min-width: 1200px) {
 .nc-suite-desktop .nc-space-current .nc-space-chevron { transform: none; }
 .nc-suite-desktop .nc-space-current[aria-expanded="true"] .nc-space-chevron { transform: rotate(180deg); }
 .nc-suite-desktop .nc-space-list { position: absolute; z-index: 1; right: 0; bottom: calc(100% + 6px); left: 0; max-height: min(60vh, 420px); margin: 0; overflow-y: auto; box-shadow: 0 8px 24px #0002; }
}
.nc-suite .nc-space button.nc-space-option { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: 500 13px/1.3 system-ui, sans-serif; text-align: left; }
.nc-suite .nc-space button.nc-space-option:hover, .nc-suite .nc-space button.nc-space-option[aria-current="true"] { background: var(--nc-space-hover); }
.nc-suite .nc-space button.nc-space-option[aria-current="true"] { font-weight: 600; }
.nc-space-option .nc-space-avatar { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.nc-space-option > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-space-check { flex: none; color: var(--nc-space-accent); }
.nc-space-sep { margin: 4px 2px; border: 0; border-top: 1px solid var(--nc-space-line); }
.nc-space-note { margin: 4px 8px; font-size: 11px; opacity: .7; }
.nc-suite a.nc-space-manage { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: inherit; font: 500 12px/1.3 system-ui, sans-serif; text-decoration: none; opacity: .75; }
.nc-suite a.nc-space-manage:hover { background: var(--nc-space-hover); opacity: 1; }
.nc-space-alert { margin: 8px 2px 0; font: 12px/1.4 system-ui, sans-serif; }
.nc-space-tone-0 { background: #e1f5ee; color: #085041; }
.nc-space-tone-1 { background: #faece7; color: #712b13; }
.nc-space-tone-2 { background: #eeedfe; color: #3c3489; }
.nc-space-tone-3 { background: #e6f1fb; color: #0c447c; }
.nc-space-tone-4 { background: #faeeda; color: #633806; }
.nc-space-tone-5 { background: #fbeaf0; color: #72243e; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-0 { background: #085041; color: #e1f5ee; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-1 { background: #712b13; color: #faece7; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-2 { background: #3c3489; color: #eeedfe; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-3 { background: #0c447c; color: #e6f1fb; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-4 { background: #633806; color: #faeeda; }
:is(html[data-suite-theme="dark"], html.dark) .nc-space-tone-5 { background: #72243e; color: #fbeaf0; }
@media (prefers-reduced-motion: reduce) { .nc-space-chevron { transition: none; } }

/* Support sits below the separator; Apparence is in the top bar of every application. */
.nc-suite-footer { margin-top:16px; padding-top:12px; border-top:1px solid #80808040; }
.nc-suite-link[data-suite-link="support"] { --nc-color:#1b7fa6; }

:is(html[data-suite-theme="dark"], html.dark) .nc-suite-link[data-suite-link="support"] { --nc-color:#92d9ee; }

/* Suite search: a button under each menu title and one dialog for the page, in the current theme.
   The dialog is styled through its id, so application rules such as `.hub-app input:not(...)` cannot move its field. */
.nc-suite button.nc-search-open { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--suite-line, #d8dfdb); border-radius: 8px; background: var(--suite-surface, #fff); color: var(--suite-muted, #59635e); font: 500 13px/1.3 system-ui, sans-serif; text-align: left; box-shadow: none; text-transform: none; letter-spacing: normal; }
.nc-suite button.nc-search-open:hover { background: var(--suite-soft, #eef2ef); color: var(--suite-ink, #242a31); }
.nc-suite button.nc-search-open svg { flex: none; }
dialog#nc-search-dialog { --nc-search-ink: var(--suite-ink, #242a31); --nc-search-muted: var(--suite-muted, #59635e); --nc-search-surface: var(--suite-surface, #fff); --nc-search-soft: var(--suite-soft, #eef2ef); --nc-search-line: var(--suite-line, #d8dfdb); --nc-search-accent: var(--suite-accent, #245b49);
 position: fixed; inset: 8vh 0 auto; width: min(640px, calc(100% - 32px)); max-width: none; max-height: 84vh; margin: 0 auto; padding: 0; overflow: hidden; border: 1px solid var(--nc-search-line); border-radius: 14px; background: var(--nc-search-surface); color: var(--nc-search-ink); box-shadow: 0 18px 48px #0003; font: 14px/1.45 system-ui, sans-serif; letter-spacing: normal; text-align: left; text-transform: none; }
:is(html[data-suite-theme="dark"], html.dark):not([data-suite-palette]) dialog#nc-search-dialog { --nc-search-ink: #e2e9e7; --nc-search-muted: #adbcb7; --nc-search-surface: rgb(24 31 33); --nc-search-soft: rgb(38 47 50); --nc-search-line: #39464b; --nc-search-accent: #9fc9b5; color-scheme: dark; }
dialog#nc-search-dialog[open] { display: flex; }
dialog#nc-search-dialog::backdrop { background: rgb(17 21 30 / .6); }
body:has(.nc-search-dialog[open]) { overflow: hidden; }
#nc-search-dialog *, #nc-search-dialog *::before, #nc-search-dialog *::after { box-sizing: border-box; }
#nc-search-dialog .nc-search-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; padding: 16px; }
#nc-search-dialog .nc-search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
#nc-search-dialog h2 { margin: 0; padding: 0; color: inherit; font: 700 16px/1.3 system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
#nc-search-dialog button.nc-search-close { min-height: 40px; margin: 0; padding: 8px 14px; border: 1px solid var(--nc-search-line); border-radius: 8px; background: var(--nc-search-surface); color: var(--nc-search-ink); font: 600 13px/1.3 system-ui, sans-serif; cursor: pointer; box-shadow: none; }
#nc-search-dialog button.nc-search-close:hover { background: var(--nc-search-soft); }
#nc-search-dialog .nc-search-form { position: relative; display: flex; align-items: center; margin: 0; }
#nc-search-dialog .nc-search-form > svg { position: absolute; z-index: 1; left: 12px; color: var(--nc-search-muted); pointer-events: none; }
#nc-search-dialog input.nc-search-input { width: 100%; min-height: 48px; margin: 0; padding: 10px 12px 10px 40px; border: 1px solid var(--nc-search-line); border-radius: 10px; background: var(--nc-search-surface); color: var(--nc-search-ink); font: 400 16px/1.3 system-ui, sans-serif; box-shadow: none; outline: none; appearance: none; }
#nc-search-dialog input.nc-search-input:focus { border-color: var(--nc-search-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc-search-accent) 25%, transparent); }
#nc-search-dialog .nc-search-filters { display: grid; gap: 8px; margin: 10px 0 0; }
#nc-search-dialog .nc-search-apps { display: flex; flex-wrap: wrap; gap: 6px; }
#nc-search-dialog button.nc-search-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 4px 10px; border: 1px solid var(--nc-search-line); border-radius: 999px; background: var(--nc-search-surface); color: var(--nc-search-ink); font: 500 12px/1.2 system-ui, sans-serif; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; }
#nc-search-dialog button.nc-search-chip:hover { background: var(--nc-search-soft); }
#nc-search-dialog button.nc-search-chip[aria-pressed="true"] { border-color: var(--nc-search-accent); background: color-mix(in srgb, var(--nc-search-accent) 14%, var(--nc-search-surface)); font-weight: 600; }
#nc-search-dialog button.nc-search-chip img { width: 16px; height: 16px; flex: none; }
#nc-search-dialog .nc-search-period { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 12px/1.3 system-ui, sans-serif; }
#nc-search-dialog .nc-search-period label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--nc-search-muted); font: inherit; }
#nc-search-dialog .nc-search-period select, #nc-search-dialog .nc-search-period input { min-height: 32px; margin: 0; padding: 4px 8px; border: 1px solid var(--nc-search-line); border-radius: 8px; background: var(--nc-search-surface); color: var(--nc-search-ink); font: 400 13px/1.2 system-ui, sans-serif; box-shadow: none; width: auto; }
#nc-search-dialog .nc-search-dates { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; }
#nc-search-dialog .nc-search-dates[hidden] { display: none; }
#nc-search-dialog .nc-search-hint { margin: 0 2px; color: var(--nc-search-muted); font: 400 11px/1.4 system-ui, sans-serif; }
#nc-search-dialog .nc-search-scope, #nc-search-dialog .nc-search-status { margin: 8px 2px 0; color: var(--nc-search-muted); font: 400 12px/1.4 system-ui, sans-serif; }
#nc-search-dialog .nc-search-status:empty { display: none; }
#nc-search-dialog .nc-search-results { flex: 1; min-height: 0; margin: 8px -16px -16px; padding: 0 16px 16px; overflow-y: auto; }
#nc-search-dialog .nc-search-group { margin: 12px 0 0; }
#nc-search-dialog h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 2px; color: inherit; font: 700 13px/1.3 system-ui, sans-serif; letter-spacing: normal; text-transform: none; }
#nc-search-dialog h3 img { width: 20px; height: 20px; flex: none; }
#nc-search-dialog .nc-search-kind { color: var(--nc-search-muted); font-weight: 400; }
#nc-search-dialog ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#nc-search-dialog a.nc-search-item { display: grid; gap: 1px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; }
#nc-search-dialog a.nc-search-item:is(:hover, :focus) { background: var(--nc-search-soft); }
#nc-search-dialog a.nc-search-item:focus-visible { outline: 3px solid var(--nc-search-accent); outline-offset: -3px; }
#nc-search-dialog .nc-search-item-title { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
#nc-search-dialog .nc-search-item-detail { color: var(--nc-search-muted); font-size: 12px; }
#nc-search-dialog .nc-search-note { margin: 4px 10px 0; color: var(--nc-search-muted); font: italic 400 12px/1.4 system-ui, sans-serif; }
#nc-search-dialog :focus-visible { outline: 3px solid var(--nc-search-accent); outline-offset: 2px; }
.nc-search-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 599px) {
 dialog#nc-search-dialog { inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; overscroll-behavior: contain; }
 #nc-search-dialog .nc-search-panel { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}


/* Shared top bar. */
/* <x-suite::topbar>: same height, order and controls in every application, on the Hub's model. The breadcrumb on the
   left; on the right the notifications bell, Apparence, Abonnement and the account menu. Also copied into
   appearance.css, read in the head: the bar is drawn before the menu's styles arrive. */
html body .nc-topbar { position: relative; z-index: 30; display: flex; flex: none; align-items: center; justify-content: space-between; gap: 20px; box-sizing: border-box; width: auto; height: 74px; min-height: 0; max-height: none; margin: 0; padding: 0 36px; border: 0; border-bottom: 1px solid var(--suite-line, #e5e9e8); border-radius: 0; background: var(--suite-surface, #fff); color: var(--suite-ink, #222b32); font: 400 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: normal; text-align: left; text-transform: none; box-shadow: none; }
html body .nc-topbar *, html body .nc-topbar *::before, html body .nc-topbar *::after { box-sizing: border-box; }
html body .nc-topbar svg { display: block; flex: none; }
html body .nc-topbar .nc-topbar-trail { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 0; color: var(--suite-muted, #68757d); font-size: 12px; line-height: 1.45; }
html body .nc-topbar .nc-topbar-trail > span:first-child { flex: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .nc-topbar .nc-topbar-trail strong { min-width: 0; overflow: hidden; color: var(--suite-ink, #222b32); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
html body .nc-topbar .nc-topbar-actions { display: flex; flex: none; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; }
html body .nc-topbar a.nc-topbar-bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--suite-ink, #222b32); text-decoration: none; }
html body .nc-topbar a.nc-topbar-link { display: inline-flex; align-items: center; gap: 7px; height: 40px; margin: 0; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--suite-ink, #222b32); font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; }
html body .nc-topbar a.nc-topbar-balance { display: inline-flex; align-items: center; gap: 7px; height: 40px; margin: 0 4px 0 0; padding: 0 12px; border: 1px solid var(--suite-line, #e5e9e8); border-radius: 999px; background: transparent; color: var(--suite-ink, #222b32); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
html body .nc-topbar a.nc-topbar-balance[hidden] { display: none; }
html body .nc-topbar :is(a.nc-topbar-balance, a.nc-topbar-bell, a.nc-topbar-link):hover { background: var(--suite-soft, #f0f4f1); }
html body .nc-topbar .nc-topbar-count { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; margin: 0; padding: 0 4px; border-radius: 999px; background: #c2410c; color: #fff; font: 700 10px/17px system-ui, sans-serif; text-align: center; }
html body .nc-topbar .nc-topbar-count[hidden] { display: none; }
html body .nc-topbar .nc-topbar-account { position: relative; flex: none; margin: 0 0 0 10px; padding: 0; border: 0; background: transparent; }
html body .nc-topbar .nc-topbar-account > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--suite-ink, #222b32); font-size: 12px; font-weight: 400; line-height: 1.45; list-style: none; cursor: pointer; }
html body .nc-topbar .nc-topbar-account > summary::-webkit-details-marker { display: none; }
html body .nc-topbar .nc-topbar-account > summary::marker { content: ""; }
html body .nc-topbar .nc-topbar-avatar { display: grid; place-items: center; flex: none; width: 31px; height: 31px; margin: 0; border: 1px solid var(--suite-line, #dce6df); border-radius: 50%; background: var(--suite-soft, #eaf1eb); color: var(--suite-muted, #537463); font-size: 10px; font-weight: 600; line-height: 1; }
html body .nc-topbar .nc-topbar-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .nc-topbar .nc-topbar-menu { position: absolute; top: 48px; right: 0; z-index: 50; width: 230px; max-width: calc(100vw - 32px); margin: 0; padding: 6px; border: 1px solid var(--suite-line, #e5e9e8); border-radius: 12px; background: var(--suite-surface, #fff); box-shadow: 0 12px 32px #293e3215; }
html body .nc-topbar .nc-topbar-menu :is(a, button) { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 11px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--suite-ink, #222b32); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-align: left; text-decoration: none; text-transform: none; box-shadow: none; cursor: pointer; }
html body .nc-topbar .nc-topbar-menu :is(a, button):hover { background: var(--suite-soft, #f0f4f1); }
html body .nc-topbar .nc-topbar-menu form { margin: 4px 0 0; padding: 4px 0 0; border: 0; border-top: 1px solid var(--suite-line, #e5e9e8); }
html body .nc-topbar :focus-visible { outline: 3px solid var(--suite-accent, #245b49); outline-offset: 2px; }
@media (min-width: 1500px) { html body .nc-topbar { padding-inline: 48px; } }
@media (max-width: 1150px) { html body .nc-topbar { padding-inline: 24px; } }
@media (max-width: 800px) {
 html body .nc-topbar { height: 60px; gap: 12px; padding-inline: 20px; }
 html body .nc-topbar .nc-topbar-trail { gap: 8px; font-size: 11px; }
 html body .nc-topbar .nc-topbar-trail > span:first-child { max-width: 130px; }
 html body .nc-topbar a.nc-topbar-link { justify-content: center; width: 40px; padding: 0; }
 html body .nc-topbar a.nc-topbar-balance { height: 34px; padding: 0 10px; }
 html body .nc-topbar a.nc-topbar-balance svg { display: none; }
 html body .nc-topbar .nc-topbar-account { margin-left: 4px; }
 /* Icons only on a phone: the labels and the name stay read. */
 html body .nc-topbar :is(.nc-topbar-label, .nc-topbar-name) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (max-width: 380px) {
 html body .nc-topbar { gap: 8px; padding-inline: 14px; }
 html body .nc-topbar .nc-topbar-actions { gap: 0; }
 html body .nc-topbar .nc-topbar-trail > span { display: none; }
}