:root {
  --brand-navy:#07143F; --brand-blue:#0754ED; --brand-sky:#53B4FF;
  --brand-bg:#F7F9FC; --brand-card:#FFFFFF; --brand-text:#0F172A;
  --brand-muted:#64748B; --brand-border:#E2E8F0;
  --panel:var(--brand-card); --line:var(--brand-border); --muted:var(--brand-muted);
  --accent:var(--brand-blue); --soft:#EFF6FF; --a:var(--brand-blue);
  color:var(--brand-text); background:var(--brand-bg);
}
.app{grid-template-columns:252px minmax(0,1fr)}
.app>aside{padding:30px 18px;gap:30px;min-width:0;box-shadow:none}
.brand{display:block;text-align:left;min-width:0;letter-spacing:normal}
.engrnote-logo{--logo-size:36px;display:inline-flex;align-items:center;gap:10px;max-width:100%;vertical-align:middle;color:var(--brand-navy);transform-origin:left center;transition:transform 200ms ease}
.engrnote-logo:hover{transform:scale(1.03)}
.engrnote-logo__icon{display:block;width:calc(var(--logo-size)*1.625);height:var(--logo-size);object-fit:contain;flex-shrink:0}
.engrnote-logo__copy{display:flex;flex-direction:column;min-width:0;gap:5px}
.engrnote-logo__name{font-family:inherit;font-weight:700;font-size:calc(var(--logo-size)*.67);line-height:1.5;letter-spacing:normal}
.brand .engrnote-logo__tagline,.engrnote-logo__tagline{display:block;font-family:inherit;font-size:9px;font-weight:600;line-height:1.5;letter-spacing:normal;margin:0;white-space:nowrap;color:var(--brand-muted)}
.engrnote-logo--theme-mono .engrnote-logo__icon{filter:grayscale(1) brightness(0) saturate(100%) invert(14%) sepia(68%) saturate(1976%) hue-rotate(204deg) brightness(90%) contrast(101%)}
.engrnote-logo--theme-dark{color:#fff}.engrnote-logo--theme-dark .engrnote-logo__tagline{color:#fff}.engrnote-logo--theme-dark .engrnote-logo__icon{filter:brightness(0) invert(1)}
.app>aside>nav{gap:6px;min-width:0}
.app>aside>nav button{display:flex;align-items:center;gap:10px;min-height:46px;padding:11px 12px;border-radius:11px;font-size:14px;font-weight:500;line-height:1.5}
.app>aside>nav button.active{background:var(--soft);color:var(--accent);font-weight:700}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
button{transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease}
.primary:not(:disabled):hover{background:var(--brand-navy);color:#fff}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:var(--brand-sky)}
.page{min-width:0}.noteitem.selected{border-color:#BFDBFE}.example{background:var(--brand-bg)}
body.dark{--panel:#142440;--line:#2A4165;--muted:#A5B5CD;--accent:#93C5FD;--soft:#1B355A;--a:#93C5FD;background:#0B1528;color:#F1F5F9}
body.dark .engrnote-logo--theme-auto{color:#fff}body.dark .engrnote-logo--theme-auto .engrnote-logo__tagline{color:#A5B5CD}body.dark .engrnote-logo--theme-auto .engrnote-logo__icon{filter:brightness(0) invert(1)}
body.dark .primary{background:var(--brand-blue);color:white}body.dark .primary:not(:disabled):hover{background:var(--brand-navy);color:#fff}
@media(min-width:761px) and (max-width:1100px){.app{grid-template-columns:204px minmax(0,1fr)}.app>aside{padding:25px 12px}.brand .engrnote-logo{--logo-size:34px!important;gap:7px}.brand .engrnote-logo__tagline{font-size:7px;letter-spacing:normal}.app>aside>nav button{font-size:13px;padding:10px 8px;gap:8px}}
@media(max-width:760px){.app{display:block}.app>aside{padding:16px;gap:16px}.brand .engrnote-logo{--logo-size:34px!important}.brand .engrnote-logo__tagline{display:none}.app>aside>nav{display:flex;overflow-x:auto;max-width:100%;padding-bottom:3px}.app>aside>nav button{flex-shrink:0;min-height:44px}.settings{max-width:100%}.setting{flex-wrap:wrap}.setting>span{min-width:0}.engrnote-logo__copy{min-width:0}}
@media(prefers-reduced-motion:reduce){.engrnote-logo,button{transition:none}.engrnote-logo:hover{transform:none}}

.engrnote-logo__note{color:var(--brand-blue)}
.engrnote-logo--theme-dark .engrnote-logo__note,body.dark .engrnote-logo--theme-auto .engrnote-logo__note{color:#53B4FF}
.engrnote-logo--theme-mono .engrnote-logo__note{color:inherit}
.engrnote-logo__name{white-space:nowrap}

/* Stack the app mark above its name in the navigation header. */
.brand .engrnote-logo{flex-direction:column;align-items:center;gap:4px;transform-origin:center}
.brand .engrnote-logo__copy{align-items:center;gap:0}

/* A quiet navigation rail: consistent line icons and compact, legible rows. */
.app>aside{--sidebar-hover:#f7f7f8;--sidebar-selected:#ededf0;gap:22px;border-right:1px solid #eeeef0}
.app>aside>nav[aria-label]{gap:2px}
.app>aside>nav[aria-label] button{gap:12px;min-height:44px;padding:9px 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--text-body);font-size:14px;font-weight:400;line-height:1.5}
.app>aside>nav[aria-label] button:hover{background:var(--sidebar-hover);color:var(--text-heading)}
.app>aside>nav[aria-label] button.active{background:var(--sidebar-selected);color:var(--text-heading);font-weight:600}
.app>aside>nav .nav-icon{width:18px;height:18px;flex:0 0 18px}
.app>aside>nav .nav-icon svg{width:18px;height:18px;stroke-width:1.5}
.app>aside .sidebottom{padding:12px;font-size:11px;line-height:1.5}
.app>aside .sidebottom .tiny{font-size:11px}
.app>aside .brand .engrnote-logo:hover{transform:none}
.app>aside .app-language-switch{gap:3px}
.app>aside .app-language-switch button{border-color:transparent;background:transparent;border-radius:6px;font-size:12px;min-height:36px;padding:6px 10px}
.app>aside .app-language-switch button[aria-pressed=true]{background:var(--sidebar-selected);color:var(--text-heading)}
body.dark .app>aside{--sidebar-hover:#1c2940;--sidebar-selected:#29364a;border-color:var(--line)}
@media(min-width:761px){
 .app{grid-template-columns:224px minmax(0,1fr)}
 .app>aside{position:sticky;top:0;align-self:start;height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:24px 14px;scrollbar-width:thin}
 .app>aside>nav[aria-label] button[data-page=vocabulary],.app>aside>nav[aria-label] button[data-page=workspace],.app>aside>nav[aria-label] button[data-page=calendar]{margin-top:14px}
 .app>aside .brand{padding:0 12px}
 .app>aside .app-language-switch{padding:0 4px}
}
@media(min-width:761px) and (max-width:1100px){.app{grid-template-columns:204px minmax(0,1fr)}.app>aside{padding:22px 10px}.app>aside>nav[aria-label] button{gap:10px;font-size:13px}}
@media(max-width:760px){.app>aside{gap:14px;padding:16px;border-right:0;border-bottom:1px solid var(--line)}.app>aside>nav[aria-label]{gap:4px}.app>aside>nav[aria-label] button{padding:9px 12px;font-size:13px}.app>aside .sidebottom{display:none}}

/* Interface language stays at the upper right, independent of the sidebar. */
body>.app-language-switch{position:fixed;top:14px;right:24px;z-index:9;display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 2px 8px #0f172a08}
body>.app-language-switch button{border:0;background:transparent;color:var(--text-body);min-height:36px;padding:6px 11px;border-radius:6px;font-size:13px}
body>.app-language-switch button[aria-pressed=true]{background:var(--soft);color:var(--accent)}
body>.app-language-switch [data-language-status]:empty{display:none}
.app>.page{padding-top:72px}
@media(max-width:760px){body>.app-language-switch{top:16px;right:14px}.app>.page{padding-top:22px}.app>aside .brand{max-width:calc(100% - 130px)}}

/* A quiet signature remains visible after scrolling, without capturing input. */
.brand-scroll-watermark{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:clamp(112px,11vw,168px);z-index:2;opacity:0;visibility:hidden;pointer-events:none;user-select:none;transition:opacity .24s ease,visibility .24s ease}
.brand-scroll-watermark.is-visible{opacity:.09;visibility:visible}
.brand-scroll-watermark .engrnote-logo{display:block;width:100%;max-width:none;transform:none;transition:none}
.brand-scroll-watermark .engrnote-logo__icon,.brand-scroll-watermark .engrnote-logo--custom img{width:100%;height:auto;max-height:none;object-fit:contain}
body.dark .brand-scroll-watermark.is-visible{opacity:.12}
@media(max-width:760px){.brand-scroll-watermark{width:92px;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}.brand-scroll-watermark.is-visible{opacity:.075}}
@media(prefers-reduced-motion:reduce){.brand-scroll-watermark{transition:none}}
@media print{.brand-scroll-watermark{display:none}}