/* LargoMusic: charcoal surfaces, warm gold and orchid accents.
   Keep app.css responsible for the recognition and preview component structure. */
:root {
  --paper: #111112;
  --sheet: #1b1b1e;
  --ink: #f4f1eb;
  --ink-deep: #dfd9cf;
  --muted: #b4b4bf;
  --proof: #f3ca72;
  --proof-dark: #ffe1a0;
  --sage: #77737e;
  --rule: #494249;
  --soft-rule: #333136;
  --failure: #ffaaa3;
  --orchid: #b34df5;
  --accent-gradient: linear-gradient(105deg, #ffcf69 0%, #dbaba5 40%, #9246be 76%, #b44fff 100%);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, Georgia, serif;
  --sans: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}
html { color-scheme: dark; background: var(--paper); scroll-padding-top: 28px; }
body {
  background: radial-gradient(ellipse at 69% 7%, #30292233, transparent 48%),
    radial-gradient(ellipse at 35% 36%, #342c291f, transparent 42%), #111112;
}
::selection { background: #b34df559; color: #fff; }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--proof); outline-offset: 5px; }
.masthead, main, footer { width: min(1310px, calc(100% - 96px)); }
.masthead, body[data-auth-provider="logto"] .masthead {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 86px; gap: 28px; border-color: var(--soft-rule);
}
.wordmark { gap: 2px; flex-shrink: 0; }
.brand-logo { display: block; width: 68px; height: 56px; object-fit: contain; flex-shrink: 0; mix-blend-mode: screen; }
.wordmark-copy, body[data-auth-provider="logto"] .wordmark-copy { display: grid; transform: translateY(-2px); }
.wordmark-copy strong { font: 350 29px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: -.055em; background: var(--accent-gradient); color: transparent; background-clip: text; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3.4vw, 52px); margin: 0; }
.main-nav a, body[data-auth-provider="logto"] .main-nav #account-jobs {
  position: relative; display: inline-flex; align-items: center; min-height: 64px; padding: 0;
  border: 0; background: transparent; color: #dfdce2; text-decoration: none; white-space: nowrap; font: 500 15px/1.4 var(--sans);
}
.main-nav a:hover, body[data-auth-provider="logto"] .main-nav #account-jobs:hover { color: var(--proof); }
.main-nav a[aria-current="page"], body[data-auth-provider="logto"] .main-nav #account-jobs[aria-current="page"] { color: var(--proof); background: transparent; }
.main-nav a[aria-current="page"]::after { content: ""; position: absolute; height: 2px; bottom: 10px; left: 0; right: 0; background: var(--proof); }
.masthead-actions, body[data-auth-provider="logto"] .masthead-actions { justify-self: end; justify-content: flex-end; flex-wrap: wrap; gap: 18px; min-width: 0; }
.language-switcher, body[data-auth-provider="logto"] .language-switcher { order: 0; border: 0; background: transparent; grid-template-columns: 25px 1px 28px; }
.language-switcher button { font-size: 10px; }
.language-switcher button.is-active { color: var(--proof); background: transparent; }
.language-switcher button.is-active::after { background: transparent; }
.account-login { border: 1px solid #c5a264; border-radius: 12px; min-width: 92px; min-height: 42px; padding: 10px 18px; font-size: 14px; font-weight: 500; }
.account-login:hover { background: #f3ca720d; }
.account-login:disabled { opacity: .5; cursor: wait; }
body[data-auth-provider="logto"] .account-user { flex-wrap: wrap; gap: 5px; }
.account-user #account-admin { color: var(--proof); text-underline-offset: 4px; }
.intro { padding: 70px 0 50px; text-align: center; }
h1 { justify-content: center; gap: .34em; font: 400 clamp(38px, 5.2vw, 74px)/1.25 var(--serif); letter-spacing: .01em; }
#page-title > span { font-weight: 700; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.04em; background: var(--accent-gradient); color: transparent; background-clip: text; }
html[lang="en"] h1 { font-size: clamp(34px, 4.8vw, 66px); letter-spacing: -.035em; }
.intro-copy { margin-top: 18px; }
.lede { color: #bec0ca; font-size: clamp(15px, 1.55vw, 22px); line-height: 1.8; }
.intro-meta { justify-content: center; margin-top: 30px; padding: 0; border: 0; }
.recognition-stat { align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.recognition-stat::before, .recognition-stat::after { content: ""; align-self: center; width: 70px; height: 1px; margin: 0 16px; background: linear-gradient(90deg, transparent, #736b6b); }
.recognition-stat::after { transform: rotate(180deg); }
.stat-label, .stat-unit { color: var(--muted); font: 400 15px/1.5 var(--sans); letter-spacing: 0; }
.recognition-stat #recognition-count { color: var(--proof); font: 600 28px/1.2 var(--sans); letter-spacing: -.03em; }
.workbench { display: block; width: min(884px, 100%); margin: 0 auto 110px; border: 1px solid #655345; border-radius: 18px; background: linear-gradient(145deg, #282829bb, #161618d9 70%); box-shadow: 0 0 65px #d9a2650b, inset 0 1px 0 #ffffff07; }
.work-content { padding: 36px 43px; }
.section-heading { align-items: center; margin: 0 0 28px; gap: 20px; }
.section-heading h2 { display: flex; align-items: center; gap: 21px; margin: 0; font: 600 27px/1.5 var(--serif); letter-spacing: .025em; }
.section-heading h2::before { content: ""; width: 6px; height: 27px; flex-shrink: 0; background: linear-gradient(#ffe097, #eabc5f); }
#upload-form { gap: 25px; }
.drop-zone { min-height: 287px; border: 1px dashed #68636a; border-radius: 14px; background: #14141642; padding: 32px 22px 26px; }
.drop-zone::before { content: none; }
.drop-zone:hover, .drop-zone.dragging, .drop-zone.has-file { border-color: #d4abca; background: #bd86cf08; box-shadow: inset 0 0 30px #b867cc08; }
.drop-zone:focus-within { outline: 2px solid var(--proof); }
.upload-file-icon { flex-shrink: 0; margin-bottom: 18px; }
.drop-title { font: 500 18px/1.7 var(--sans); text-align: center; }
.drop-note { margin-top: 7px; font-size: 13px; line-height: 1.6; text-align: center; }
.choose-file { display: flex; align-items: center; justify-content: center; min-height: 46px; min-width: 215px; margin-top: 26px; padding: 10px 25px; border: 1.5px solid transparent; border-radius: 28px; background: linear-gradient(#202022, #202022) padding-box, var(--accent-gradient) border-box; color: #efb8a4; font-size: 15px; font-weight: 600; }
.drop-zone:hover .choose-file { background: linear-gradient(#2d242e, #2d242e) padding-box, var(--accent-gradient) border-box; }
.file-name { margin: 14px 0 0; text-align: center; line-height: 1.6; }
.file-name:empty { display: none; }
.primary, .secondary { border-radius: 10px; }
.primary, form > .primary { color: #211723; border: 1px solid transparent; background: var(--accent-gradient); }
.primary:hover, form > .primary:hover { background: var(--accent-gradient); border-color: #e9c39d; filter: brightness(1.08); }
#upload-form > .primary { min-height: 55px; justify-content: center; gap: 10px; padding: 12px 22px; text-align: center; }
#upload-form > .primary span:first-child { font: 600 18px/1.4 var(--sans); letter-spacing: .02em; }
#upload-form .submit-arrow { font: 24px/1 var(--sans); }
#upload-form > .primary:disabled { color: #302334; border-color: #d6b27644; background: var(--accent-gradient); opacity: .9; cursor: not-allowed; }
#upload-form > .primary .visually-hidden { display: block; padding: 0; }
#upload-form > .primary .visually-hidden::after { content: none; }
.upload-tips, .service-notice { background: #ffffff03; border-color: #bd9367; margin: 16px 0 0; padding: 10px 15px; }
.notes { width: min(100%, 1080px); margin-inline: auto; gap: 52px; padding-bottom: 80px; }
.notes-heading, .notes-grid, .score-preview, footer { border-color: var(--soft-rule); }
.notes-heading > p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.notes-heading h2 { font-size: 29px; }
.notes-content { min-width: 0; }
.notes-description p + p { margin-top: 8px; }
.notes-grid h3 { font-size: 18px; }
.notes article p { font-size: 13px; }
footer { padding-top: 36px; }
.community-qr img { width: 154px; border: 0; border-radius: 10px; }
.community-qr figcaption { color: var(--muted); font-size: 13px; font-weight: 400; }
.qr-enlarge { padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: zoom-in; }
.qr-dialog { width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 52px 24px 24px; overflow: auto; border: 1px solid #655345; border-radius: 18px; background: var(--sheet); color: var(--ink); box-shadow: 0 24px 100px #0009; }
.qr-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.qr-dialog h2 { margin: 0 0 20px; text-align: center; font: 500 17px/1.6 var(--sans); }
.qr-dialog img { display: block; width: 100%; height: auto; background: #fff; border-radius: 8px; }
.qr-close { position: absolute; top: 10px; right: 12px; }
.qr-close button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font: 28px/1 var(--sans); }
.qr-close button:hover { background: #ffffff0c; }
#personal-message:empty { display: none; }
.personal-actions #account-logout { margin-left: auto; color: var(--failure); }
.nav-toggle, .mobile-secondary-nav { display: none; }
.personal-dialog, .login-dialog { border: 1px solid #655345; border-radius: 18px; box-shadow: 0 24px 100px #0009; }
.personal-dialog::backdrop, .login-dialog::backdrop { background: #0009; backdrop-filter: blur(6px); }
.personal-actions button, .job-pagination button, .history-toolbar button { border-radius: 8px; }
.login-dialog-actions > button, .history-upload, .history-guest button, .rating-submit:not(:disabled) { background: var(--accent-gradient); color: #211723; border: 0; border-radius: 9px; }
.login-dialog-actions form button { border-radius: 9px; }
.login-dialog { width: min(440px, calc(100% - 32px)); padding: 34px 32px 24px; text-align: center; border-color: #625148; background: radial-gradient(ellipse at 50% 0, #b37de312, transparent 60%), #1b1b1e; }
.login-dialog-close { top: 12px; right: 12px; }
.login-dialog-close button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--muted); font: 26px/1 var(--sans); transition: background .15s, color .15s; }
.login-dialog-close button:hover { background: #ffffff0c; color: var(--ink); }
.login-dialog-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 15px; border: 1px solid #e2bd7d40; border-radius: 17px; color: var(--proof); background: linear-gradient(135deg, #f3ca7214, #b34df51a); }
.login-dialog p.login-dialog-caption { margin: 0; color: var(--proof); font: 500 12px/1.6 var(--sans); letter-spacing: .04em; }
.login-dialog h2 { margin: 10px 0 13px; font: 600 26px/1.4 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.login-dialog #login-dialog-message { min-height: 48px; margin: 0; color: var(--muted); font: 400 14px/1.8 var(--sans); text-wrap: pretty; }
.login-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 26px; }
.login-dialog-actions > button { width: 100%; min-height: 46px; padding: 12px 16px; border-radius: 10px; font: 600 15px/1.5 var(--sans); }
.login-dialog-actions > button:hover:not(:disabled) { filter: brightness(1.1); }
.login-dialog-actions form button { width: 100%; min-height: 40px; padding: 9px 16px; color: var(--muted); font: 400 13px/1.5 var(--sans); }
.login-dialog-actions form button:hover { color: var(--ink); background: #ffffff06; }
.login-dialog[data-login-state="waiting"] .login-dialog-symbol { position: relative; }
.login-dialog[data-login-state="waiting"] .login-dialog-symbol::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid transparent; border-top-color: var(--proof); border-right-color: #b34df57a; border-radius: 50%; animation: login-wait 2s linear infinite; }
@keyframes login-wait { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-dialog[data-login-state="waiting"] .login-dialog-symbol::after { animation: none; }
}
@media (max-width: 480px) {
  .login-dialog { padding: 30px 24px 20px; }
  .login-dialog h2 { font-size: 23px; }
}
.history-heading { padding: 64px 0 38px; }
.history-heading h1 { text-align: left; }
.history-card, .history-guest { border-radius: 16px; }
.history-list .history-completed .history-status { color: #9fd9b4; background: #21392a; }
.history-list .history-failed .history-status { color: var(--failure); background: #43282b; }
.history-list .history-running .history-status { color: var(--proof); background: #3d3426; }
.history-list .history-status { border-radius: 6px; }
.status-panel, .rating-card, .debug-stage { border-radius: 12px; }
.debug-stage, .rating-card, .metrics-scroller, .debug-metrics thead th, .core-event-detail, .core-event-summary span, .core-object-list, .core-object-list li { background: #222226; }
.core-object-list li, .debug-metrics thead th { background: #2a292e; }
.debug-layer-controls { flex-wrap: wrap; }
.job-row.status-completed em, .metric-up { color: #9fd9b4; }
.rating-scale input:checked + span { color: #211723; }
.rating-comment textarea { border-radius: 8px; }
.quality-panel { background: #352d20; border-radius: 8px; }
.quality-panel p { color: #f0d090; }
.quality-panel[data-level="high_risk"], .recovery-panel, .error, .auth-error, .preview-error { background: #382327; border-radius: 8px; }
.preview-toolbar { background: #111112ed; }
.source-proof, .recognized-proof { background: var(--sheet); }
.source-proof header, .recognized-proof header, .proof-pages, .proof-zoom { background: #242327; }
.recognized-proof header > span { color: #c59bef; }
.proof-pages button:hover, .proof-zoom button:hover { background: #3c3042; color: var(--proof); }
.source-proof > header, .recognized-proof > header { flex-wrap: wrap; }
/* Notation must keep black notes on a white page in both comparison panes. */
.score-canvas, .source-stage { color: #173533; background: #fff; color-scheme: light; }
.preview-controls, .playback-bar { border-radius: 10px; }
.playback-bar { color: var(--ink); background: #242126; box-shadow: none; }
.playback-actions .playback-primary { background: var(--proof); color: #211723; }
.playback-speed select { background: var(--sheet); color: var(--ink); }
.playback-follow { color: var(--ink); }
.playback-follow[aria-pressed="true"] { color: #211723; }
.wechat-login { border-color: var(--rule); border-radius: 12px; background: #302934; color: var(--ink); box-shadow: none; }
.wechat-login:hover { background: #3c3042; }
.wechat-login:disabled { color: var(--muted); background: var(--soft-rule); }
.wechat-login small { color: var(--muted); }
@media (max-width: 1150px) {
  .masthead, main, footer { width: calc(100% - 56px); }
  .masthead, body[data-auth-provider="logto"] .masthead { gap: 16px; }
  .main-nav { gap: 24px; }
  .masthead-actions, body[data-auth-provider="logto"] .masthead-actions { gap: 10px; }
  .wordmark-copy strong { font-size: 25px; }
  .intro { padding-top: 65px; }
}
@media (max-width: 960px) {
  .masthead, body[data-auth-provider="logto"] .masthead { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 76px; padding: 10px 0; gap: 16px; }
  .nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); font-size: 21px; cursor: pointer; }
  .nav-toggle[aria-expanded="true"] { color: var(--proof); border-color: var(--proof); }
  .wordmark-copy, body[data-auth-provider="logto"] .wordmark-copy { display: none; }
  .masthead-actions, body[data-auth-provider="logto"] .masthead-actions { display: none; position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: max-content; max-width: 100%; margin: 0; padding: 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); box-shadow: 0 12px 36px #0008; flex-direction: column; align-items: stretch; gap: 16px; }
  .masthead.menu-open .masthead-actions, body[data-auth-provider="logto"] .masthead.menu-open .masthead-actions { display: flex; }
  .masthead-actions .language-switcher { align-self: flex-end; }
  .main-nav { min-width: 0; flex-wrap: nowrap; gap: clamp(12px, 2.5vw, 24px); margin: 0; }
  .main-nav a, body[data-auth-provider="logto"] .main-nav #account-jobs { min-height: 50px; }
  .main-nav a[aria-current="page"]::after { bottom: 0; }
  .intro { padding-top: 54px; }
  .work-content { padding-inline: 32px; }
}
@media (max-width: 620px) {
  .masthead, main, footer { width: calc(100% - 32px); }
  .brand-logo { width: 48px; height: 40px; }
  .wordmark { gap: 0; }
  .wordmark-copy, body[data-auth-provider="logto"] .wordmark-copy { display: none; }
  .masthead, body[data-auth-provider="logto"] .masthead { min-height: 66px; gap: 12px; }
  .masthead-actions, body[data-auth-provider="logto"] .masthead-actions { gap: 16px; }
  .main-nav > a[href="/#about"], .main-nav > a[href="#contact"] { display: none; }
  .mobile-secondary-nav { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--soft-rule); }
  .mobile-secondary-nav a { display: flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; font-size: 14px; }
  .account-login { min-width: 62px; min-height: 36px; font-size: 12px; padding: 8px 12px; }
  .main-nav { gap: 24px; justify-content: center; }
  .main-nav a, body[data-auth-provider="logto"] .main-nav #account-jobs { font-size: 13px; min-height: 49px; }
  .intro { padding: 44px 0 33px; }
  h1 { flex-wrap: wrap; gap: 4px 12px; font-size: clamp(25px, 6.9vw, 42px); white-space: normal; line-height: 1.4; letter-spacing: 0; }
  h1 em { font-size: 1.12em; }
  html[lang="en"] h1 { font-size: 34px; }
  .intro-copy { margin-top: 17px; }
  .lede { padding-inline: 8px; font-size: 14px; line-height: 1.9; }
  .intro-meta { margin-top: 24px; }
  .recognition-stat { margin: 0; gap: 6px; }
  .recognition-stat::before, .recognition-stat::after { width: 27px; margin-inline: 6px; }
  .stat-label, .stat-unit { font-size: 12px; }
  .recognition-stat #recognition-count { font-size: 24px; }
  .workbench { border-radius: 14px; margin-bottom: 64px; }
  .work-content { padding: 24px 18px; }
  .section-heading { margin-bottom: 23px; }
  .section-heading h2 { gap: 12px; font-size: 22px; }
  .section-heading h2::before { height: 22px; width: 4px; }
  .drop-zone { min-height: 277px; padding: 28px 12px 24px; }
  .drop-title { font-size: 15px; }
  .drop-note { font-size: 11px; }
  .choose-file { min-width: 180px; margin-top: 23px; font-size: 14px; }
  #upload-form { gap: 18px; }
  #upload-form > .primary { min-height: 52px; }
  #upload-form > .primary span:first-child { font-size: 16px; }
  .notes { gap: 24px; padding-bottom: 52px; }
  .notes-heading h2 { font-size: 25px; }
  .notes article { padding-block: 22px; }
  .rating-heading { flex-wrap: wrap; gap: 10px; }
  .status-caption { font-size: 8px; }
  .pipeline-stages { grid-template-columns: repeat(4, 1fr); row-gap: 18px; }
  .playback-bar { grid-template-columns: 1fr; }
  .playback-options { justify-content: flex-start; flex-wrap: wrap; }
}

/* Account actions use the shared hierarchy within LargoMusic's dark palette. */
body[data-auth-provider="logto"] .masthead { position: relative; }
body[data-auth-provider="logto"] .masthead-actions { margin-right: 54px; }
body[data-auth-provider="logto"] .account-control { position: absolute; z-index: 40; top: 50%; right: 0; transform: translateY(-50%); }
body[data-auth-provider="logto"] .account-control [hidden] { display: none !important; }
body[data-auth-provider="logto"] .account-control .account-avatar-trigger {
  width: 42px; height: 42px; min-width: 0; min-height: 0; display: grid; place-items: center; margin: 0; padding: 4px;
  border: 1px solid #625265; border-radius: 50%; background: #29252e; color: var(--proof);
  box-shadow: 0 0 0 3px #b34df51f; cursor: pointer;
}
body[data-auth-provider="logto"] .account-control .account-avatar-trigger:hover { border-color: var(--orchid); background: #342b39; }
body[data-auth-provider="logto"] .account-avatar-trigger svg { width: 23px; height: 23px; }
body[data-auth-provider="logto"] .account-avatar-trigger img,
body[data-auth-provider="logto"] .account-avatar-trigger span { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #5a346f; color: #f8e8ff; object-fit: cover; font: 700 17px/1 var(--serif); }
body[data-auth-provider="logto"] .account-menu-panel {
  position: absolute; z-index: 50; top: calc(100% + 12px); right: 0; width: min(330px, calc(100vw - 24px));
  overflow: hidden; border: 1px solid #554658; border-radius: 15px; background: #222124;
  box-shadow: 0 20px 50px #000a; color: var(--ink);
}
body[data-auth-provider="logto"] .account-menu-profile { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 15px; border-bottom: 1px solid #453d45; }
body[data-auth-provider="logto"] .account-menu-profile > span { color: var(--proof); font: 700 11px/1.4 var(--sans); letter-spacing: .12em; }
body[data-auth-provider="logto"] .account-menu-profile strong { font: 700 21px/1.35 var(--serif); overflow-wrap: anywhere; }
body[data-auth-provider="logto"] .account-menu-profile small { color: var(--muted); font: 12px/1.4 var(--sans); overflow-wrap: anywhere; }
body[data-auth-provider="logto"] .account-menu-actions { padding: 7px; }
body[data-auth-provider="logto"] .account-menu-actions > a,
body[data-auth-provider="logto"] .account-menu-actions > button {
  width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center;
  margin: 0; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  text-align: left; text-decoration: none; font: inherit; cursor: pointer;
}
body[data-auth-provider="logto"] .account-menu-actions > a:hover,
body[data-auth-provider="logto"] .account-menu-actions > button:hover { background: #322b34; color: var(--proof); }
body[data-auth-provider="logto"] .account-menu-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #5b4b5d; border-radius: 9px; color: #d6a3ef; font: 18px/1 var(--serif); }
body[data-auth-provider="logto"] .account-menu-actions > a > span:nth-child(2),
body[data-auth-provider="logto"] .account-menu-actions > button > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
body[data-auth-provider="logto"] .account-menu-actions strong { font: 700 13px/1.3 var(--sans); }
body[data-auth-provider="logto"] .account-menu-actions small { color: var(--muted); font: 11px/1.35 var(--sans); }
body[data-auth-provider="logto"] .account-menu-actions i { color: var(--proof); font-style: normal; }
@media (max-width: 960px) {
  body[data-auth-provider="logto"] .masthead-actions { margin-right: 0; }
  body[data-auth-provider="logto"] .account-control { right: 52px; }
  body[data-auth-provider="logto"] .account-menu-panel { right: -52px; }
}