/* Composition-style application bar, with vocabulary's own blue palette. */
.memory-header {
  --header-bg: #b8d4f5;
  --header-line: #377ce8;
  width: 100%;
  min-height: 72px;
  padding: 12px max(24px, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 30;
  color: #101b2b;
  background: var(--header-bg);
  border-bottom: 4px solid var(--header-line);
  box-shadow: 0 2px 8px #173d681f;
}
.memory-brand {display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none}
.brand-icon {display:block;width:36px;height:36px;flex:0 0 36px;background:transparent;border-radius:0}
.brand-icon img {display:block;width:100%;height:100%;object-fit:contain}
.memory-brand-title {
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:inherit;font-size:26px;font-weight:800;line-height:1.4;letter-spacing:.01em;
  font-family:"Noto Sans SC","Noto Sans CJK SC","Noto Sans",sans-serif;
}
.memory-brand-title>span {display:inline-block}
.memory-nav {display:flex;align-items:center;justify-content:center;min-width:0;gap:6px;margin:0}
.memory-nav a {display:inline-flex;align-items:center;justify-content:center;padding:8px 13px;border-radius:5px;color:inherit;font-size:24px;font-weight:700;line-height:1.45;white-space:nowrap;text-decoration:none}
.memory-nav a:hover {background:#f2f7ff8c}
.memory-nav a[aria-current=page] {background:#f2f7ffd1;box-shadow:inset 0 -2px 0 #1759ce}
.memory-account {display:flex;align-items:center;justify-self:end;gap:10px;font-size:16px;white-space:nowrap}
.memory-account>span {font-weight:700}
.memory-account form {margin:0}
.memory-account button {display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 8px;border:1px solid #b93831;border-radius:6px;background:#b93831;color:white;font-size:16px;font-weight:700;line-height:1.2}
.memory-account button:hover {background:#9f2f29;border-color:#9f2f29}
.header-back {justify-self:end;grid-column:3;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 12px;border:1px solid #9bb9e0;border-radius:6px;background:#f2f7ffb3;color:inherit;font-size:18px;font-weight:700;white-space:nowrap}
.header-back:hover {background:#f2f7ff}
.memory-header a:focus-visible,.memory-header button:focus-visible {outline:3px solid #1759ce;outline-offset:3px}
@media(max-width:1100px) {
  .memory-header {grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 16px}
  .memory-brand {grid-column:1;grid-row:1}
  .memory-account,.header-back {grid-column:2;grid-row:1}
  .memory-nav {grid-column:1/-1;grid-row:2;width:100%;padding-top:8px;border-top:1px solid #173d6824}
  .memory-nav a {font-size:18px;padding:7px 12px}
}
@media(max-width:767px) {
  .memory-header {position:relative;min-height:0;gap:4px 8px;padding:10px max(12px, env(safe-area-inset-left)) 0}
  .memory-brand {gap:6px}
  .brand-icon {width:32px;height:32px;flex-basis:32px}
  .memory-brand-title {font-size:18px;letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip}
  .memory-account {gap:0}
  .memory-account>span {display:none}
  .memory-account button {min-height:40px;padding:6px 8px;font-size:16px}
  .memory-nav {justify-content:flex-start;flex-wrap:nowrap;gap:2px;padding:6px 0;overflow-x:auto;overscroll-behavior-x:contain}
  .memory-nav a {flex:1 0 auto;min-height:42px;padding:8px 6px;font-size:18px}
  .memory-header:not(:has(.memory-nav)) {padding-bottom:10px}
  .header-back {min-height:40px;padding:6px 9px;font-size:16px}
}