@font-face {
  font-family: "Magna Helvetica Neue";
  src: url("helvetica-neue-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Magna Helvetica Neue";
  src: url("helvetica-neue-bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
:root { --sfdn-font: "Magna Helvetica Neue", "Helvetica Neue", Arial, "Microsoft YaHei", "Nirmala UI", sans-serif; }
html, body, button, input, select, textarea { font-family: var(--sfdn-font); }
#sfdn-auth-gate, .sfdn-user-card { font-family: var(--sfdn-font) !important; }
.ui-language { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; white-space: nowrap; }
.ui-language select { width: auto; max-width: 150px; margin: 0; padding: 7px 9px; border: 1px solid #cbd2d8; border-radius: 5px; color: #18222c; background: #fff; font: inherit; }
.ui-language svg { width: 18px; height: 18px; flex: 0 0 18px; }
@media (max-width: 760px) { .ui-language select { max-width: 112px; } }
/* Image flags render consistently on Windows, including inside the language menu. */
.ui-language { flex: 0 0 auto; }
.ui-language select[hidden] { display: none !important; }
.ui-language-picker { position: relative; text-transform: none; letter-spacing: normal; }
.ui-language-picker button { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; color: #18222c; background: #fff; font: 12px var(--sfdn-font); text-transform: none; letter-spacing: normal; white-space: nowrap; cursor: pointer; }
.ui-language-picker .ui-language-toggle { border: 1px solid #cbd2d8; border-radius: 6px; min-height: 36px; }
.ui-language-picker img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #0002; flex: 0 0 20px; }
.ui-language-options { position: absolute; top: calc(100% + 6px); right: 0; z-index: 100; width: 170px; padding: 5px; border: 1px solid #cbd2d8; border-radius: 8px; background: #fff; box-shadow: 0 6px 20px #0002; max-height: 320px; overflow-y: auto; }
.ui-language-options[hidden] { display: none; }
.ui-language-options button { width: 100%; border: 0; border-radius: 4px; text-align: left; }
.ui-language-options button:hover, .ui-language-options button[aria-selected="true"] { background: #eaf1f6; }
.ui-language-picker button:focus-visible { outline: 2px solid #24628e; outline-offset: 2px; }
.topbar { gap: 20px; flex-wrap: wrap; }
.topbar .sfdn-user-card { margin-left: 4px; }
.header-actions > .ui-language { align-self: center; width: auto; }
@media (max-width: 760px) {
  .topbar .sfdn-user-card { grid-column: 1 / -1; grid-row: 3; margin-left: 0; min-width: 0; }
  .topbar .sfdn-user-card > div { min-width: 0; flex: 1; }
  .topbar .sfdn-user-card small { overflow-wrap: anywhere; }
}