/* Match the top shell: vfp-index.css, vfp-button.*.css and vfp-final-patch.css.
   Scoped here so the top and the other tools keep their current styles. */
.vfp-shell-header {
  position: sticky; top: 0; z-index: 90; height: 72px;
  border-bottom: 0; background: rgba(3,7,13,.82); backdrop-filter: blur(6px);
  box-shadow: 0 12px 26px rgba(0,0,0,.55); color: #e9f0f6;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.vfp-shell-header .vfp-shell-header-inner { width: 100%; max-width: none; height: 72px; min-height: 72px; padding: 0 16px; gap: 16px; }
.vfp-shell-header .vfp-shell-brand { gap: 10px; padding-left: 8px; color: inherit; }
.vfp-shell-header .vfp-shell-logo { width: 56px; height: 56px; max-width: 56px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.vfp-shell-header .vfp-shell-tagline { height: 56px; padding: 4px 0; justify-content: space-between; transform: translateY(-2px); font-size: clamp(18px,2.5vw + 11px,24px); font-weight: 800; line-height: 1.2; letter-spacing: .5px; color: #fff; }
.vfp-shell-header .vfp-shell-tagline-accent { color: #5bc3f5; }
.vfp-shell-header .notes-shell-actions { position: relative; top: 8px; gap: 10px; align-items: flex-end; }
.vfp-shell-header :is(.notes-theme-toggle,.notes-menu-toggle) { display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; min-height: 42px; place-items: center; padding: 0; border: 0; border-radius: 14px; background: transparent; color: #e9f0f6; box-shadow: inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.20); cursor: pointer; }
.vfp-shell-header .lang-pill { width: auto; height: 34px; min-height: 34px; gap: 8px; padding: 0 9.6px; border: 0; background: transparent; color: #e9f0f6; box-shadow: inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.18); font: 700 13.3333px/1 Arial,sans-serif; letter-spacing: .3px; }
.vfp-shell-header .lang-pill span { font-size: 12px; opacity: .95; }
.vfp-shell-header .lang-pill span + span::before { margin-right: 8px; color: inherit; }
:root[data-lang="jp"] .vfp-shell-header .lang-pill span:first-child,
:root[data-lang="en"] .vfp-shell-header .lang-pill span:last-child { color: #5bc3f5; font-weight: 800; text-shadow: 0 0 8px rgba(91,195,245,.4); }
.vfp-shell-header :is(button,summary):hover { filter: none; background-color: rgba(255,255,255,.06); }
.vfp-shell-header :is(button,summary):focus-visible { outline: 2px solid #5bc3f5; outline-offset: 3px; }
.notes-theme-icon { display: block; width: 20px; height: 20px; background: currentColor; }
:root[data-theme="dark"] .notes-theme-icon { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 1 0 21 12.79z'/%3E%3C/svg%3E") center / contain no-repeat; }
:root[data-theme="light"] .notes-theme-icon { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='black' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 1v4m0 14v4M1 12h4m14 0h4M4.2 4.2l2.6 2.6m10.4 10.4 2.6 2.6M4.2 19.8l2.6-2.6M17.2 6.8l2.6-2.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.notes-shell-navigation { position: relative; }
.notes-menu-toggle { list-style: none; }
.notes-menu-toggle::-webkit-details-marker { display: none; }
.notes-menu-toggle svg { display: block; width: 20px; height: 20px; }
.notes-shell-nav { position: fixed; top: 72px; right: 16px; width: min(260px,calc(100vw - 32px)); max-height: calc(100dvh - 88px); overflow-y: auto; padding: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.notes-shell-nav a { display: block; padding: 10px 12px; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; }
.notes-shell-nav a:hover, .notes-shell-nav a:focus-visible { background: rgba(91,195,245,.12); outline: 2px solid #5bc3f5; outline-offset: -2px; }
:root[data-theme="light"] .vfp-shell-header { background: linear-gradient(rgba(238,241,247,.90) 0%,rgba(238,241,247,.75) 100%); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(210,215,227,.6); box-shadow: 0 6px 14px rgba(15,23,42,.12); color: #151922; }
:root[data-theme="light"] .vfp-shell-header .vfp-shell-tagline { color: #151922; }
:root[data-theme="light"] .vfp-shell-header .vfp-shell-logo { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
:root[data-theme="light"] .vfp-shell-header .vfp-shell-tagline-accent { color: #5bc3f5; }
:root[data-theme="light"] .vfp-shell-header :is(.notes-theme-toggle,.notes-menu-toggle) { background: #fff; color: #1c2128; box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 1px 1px rgba(0,0,0,.06),0 8px 24px -14px rgba(0,0,0,.18); }
:root[data-theme="light"] .vfp-shell-header .lang-pill { background: #f2f4f7; color: #3a4047; box-shadow: inset 0 1px 0 rgba(255,255,255,.85),0 1px 1px rgba(0,0,0,.05); }
:root[data-theme="light"][data-lang="jp"] .vfp-shell-header .lang-pill span:first-child,
:root[data-theme="light"][data-lang="en"] .vfp-shell-header .lang-pill span:last-child { color: #5bc3f5; }
@media (max-width: 599px) {
  .vfp-shell-header .vfp-shell-header-inner { padding-inline: 12px; gap: 8px; }
  .vfp-shell-header .vfp-shell-brand { padding-left: 0; gap: 8px; }
  .vfp-shell-header .vfp-shell-logo { width: 44px; height: 44px; max-width: 44px; }
  .vfp-shell-header .vfp-shell-tagline { height: 44px; font-size: 18px; padding: 2px 0; }
  .vfp-shell-header .notes-shell-actions { top: 3px; gap: 6px; }
  .vfp-shell-header :is(.notes-theme-toggle,.notes-menu-toggle) { width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; border-radius: 12px; }
}
@media (max-width: 359px) {
  .vfp-shell-header .vfp-shell-logo { width: 40px; height: 40px; max-width: 40px; }
  .vfp-shell-header .vfp-shell-tagline { height: 40px; font-size: 16px; }
  .vfp-shell-header .lang-pill { gap: 6px; padding-inline: 7px; }
  .vfp-shell-header :is(.notes-theme-toggle,.notes-menu-toggle) { width: 32px; flex-basis: 32px; }
}