[hidden] { display: none !important; }
.fan-login-page { margin: 0; min-height: 100svh; background: #061826; color: #e7f4ff; font: 14px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",sans-serif; color-scheme: dark; letter-spacing: 0; }
.fan-login-page * { box-sizing: border-box; }
.login-portrait { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.login-shade { position: fixed; inset: 0; background: linear-gradient(90deg, #03121dec, #041321a8 39%, #04172610 80%), linear-gradient(0deg,#061826e8,transparent 50%); }
.login-brand { position: relative; display: flex; align-items: center; gap: 14px; padding: 26px max(24px,calc((100% - 1200px)/2)); }
.login-brand svg { color: #8ad8f4; width: 28px; height: 28px; }
.login-brand strong { font-size: 23px; }
.login-brand span { font-size: 12px; color: #afcbdc; border-left: 1px solid #829caa80; padding-left: 16px; }
.login-content { position: relative; width: min(1200px,100%); margin: 0 auto; padding: 28px 24px 48px; }
.login-title { max-width: 440px; }
.login-title h1 { font-size: 40px; line-height: 1.3; margin: 12px 0; font-weight: 600; }
.login-title p:first-child { color: #91d8dd; font-size: 10px; }
.login-title p:last-child { color: #b9d6e5; font-size: 14px; }
.fan-auth-form { width: min(100%,400px); margin-top: 26px; padding: 24px; background: #071e2ce8; border: 1px solid #537c914d; border-radius: 8px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fan-auth-form h2 { margin: 22px 0 6px; font-size: 22px; font-weight: 500; }
.fan-auth-form > p { margin: 0 0 20px; color: #a6c4d4; font-size: 12px; }
.fan-auth-tabs { display: flex; border-bottom: 1px solid #365366; gap: 26px; }
.fan-auth-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; color: #97b2c3; font: inherit; padding: 0 3px 12px; cursor: pointer; }
.fan-auth-tabs button[aria-pressed="true"] { color: #99e0f9; border-color: #99e0f9; }
.fan-auth-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fan-auth-form label, .account-form label { display: grid; gap: 7px; margin-top: 16px; font-size: 12px; color: #bed6e5; }
.fan-auth-form input, .account-form input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid #416579; border-radius: 4px; color: #ebf7ff; background: #081c2d; padding: 11px 12px; font: inherit; font-size: 16px; }
.fan-auth-form input, .account-form input { caret-color: #d8f7ff; cursor: text; }
.fan-auth-form input:focus, .account-form input:focus { outline: 2px solid #8acade; outline-offset: 2px; }
.fan-password-wrap { position: relative; }
.fan-password-wrap input { padding-right: 48px; }
.fan-password-wrap button { position: absolute; inset: 2px 2px 2px auto; width: 42px; border: 0; background: none; color: #9dc7dd; display: grid; place-items: center; cursor: pointer; }
.fan-password-wrap svg { width: 18px; height: 18px; }
.fan-primary { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; background: #9adcf8; color: #082536; border: 1px solid #c7efff; border-radius: 4px; font: inherit; font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; }
.fan-primary svg { width: 17px; height: 17px; }
.fan-auth-form .fan-primary { margin-top: 24px; width: 100%; }
.fan-auth-note, .fan-auth-form > .fan-auth-note { font-size: 11px; color: #94b2c4; line-height: 1.8; margin: 16px 0 0; }
.fan-error { font-size: 12px; line-height: 1.8; color: #f5b1b9; overflow-wrap: anywhere; }
.fan-error:empty { display: none; }
.login-footer { position: relative; color: #92b5ca; font-size: 11px; padding: 0 max(24px,calc((100% - 1152px)/2)) 26px; }
.login-footer .site-registration { display: block; width: fit-content; max-width: 100%; margin-top: 10px; color: #b5d6e8; line-height: 1.6; overflow-wrap: anywhere; text-underline-offset: 4px; }
.login-footer .site-registration:hover, .login-footer .site-registration:focus-visible { color: #e2f6ff; text-decoration: underline; }
.fan-auth-form button:disabled, .account-form button:disabled { opacity: .5; cursor: default; }
.fan-auth-form button:focus-visible { outline: 2px solid #a9ead8; outline-offset: 4px; }
.fan-checking .site-shell, .fan-checking #requestModal, .fan-checking #siteEntrance { visibility: hidden; pointer-events: none; }
.fan-session-gate { display: none; position: fixed; z-index: 200; inset: 0; background: #051724; color: #b9d7e6; place-items: center; padding: 24px; font-size: 14px; text-align: center; }
.fan-checking .fan-session-gate { display: grid; }
.fan-session-gate button { margin: 16px auto; }
.fan-bell { position: relative; }
.fan-unread-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; background: #a4e2d5; color: #073334; border: 2px solid #061827; border-radius: 10px; font-size: 10px; display: grid; place-items: center; font-weight: 700; line-height: 1; }
.fan-dialog { width: min(570px,calc(100% - 24px)); max-height: calc(100dvh - 28px); box-sizing: border-box; padding: 26px; background: #0a2232; border: 1px solid #476d83; border-radius: 8px; color: #daedf8; overflow-y: auto; overscroll-behavior: contain; color-scheme: dark; }
.fan-dialog::backdrop { background: #000e1acc; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.fan-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fan-dialog-heading > div { min-width: 0; }
.fan-dialog-heading h2 { margin: 5px 0; font-size: 23px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.fan-dialog-heading p { font-size: 10px; color: #98dacc; margin: 0; }
.fan-dialog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; color: #9ab9cc; font-size: 12px; }
.fan-quiet { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; min-height: 36px; border: 0; background: none; color: #b3dceb; font: inherit; font-size: 12px; cursor: pointer; }
.fan-quiet svg { width: 16px; height: 16px; }
.fan-message { padding: 20px 14px; border-top: 1px solid #315162; border-left: 3px solid #527487; background: rgba(11, 35, 49, .35); }
.fan-message.unread { border-left-color: #9ae5d0; background: rgba(33, 76, 75, .26); box-shadow: inset 0 0 24px rgba(135, 228, 214, .04); }
.fan-message-status { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fan-message-status small { margin: 0; }
.message-state { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 3px 7px; border: 1px solid #6a8b9a; border-radius: 4px; color: #a6c5d2; font-size: 11px; }
.message-state svg { width: 13px; height: 13px; }
.fan-message.read h3 { color: #b4c9d4; }
.fan-message.unread h3 { color: #e2faf3; font-weight: 600; }
.fan-message.unread .message-state { border-color: #8bdaca; color: #b9f2e5; }
.fan-message h3 { font-size: 16px; font-weight: 500; margin: 0 0 8px; overflow-wrap: anywhere; }
.fan-message small { display: block; color: #90afc0; font-size: 11px; }
.fan-message .message-body { color: #bcd5e1; font-size: 13px; line-height: 1.9; margin-block: 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.fan-message-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.fan-message-page { display: flex; gap: 16px; align-items: center; justify-content: end; font-size: 12px; margin-top: 14px; color: #93b3c6; }
.account-form { margin-top: 24px; padding-top: 8px; border-top: 1px solid #365367; }
.account-form .fan-primary { margin-top: 20px; }
.account-caption { font-size: 12px; line-height: 1.9; color: #9ab9cb; }
.account-status { color: #a5e3cc; font-size: 12px; line-height: 1.9; }
.account-legacy { border-top: 1px solid #355165; padding-top: 18px; margin-top: 24px; font-size: 12px; color: #b7d3df; }
.account-legacy .account-form { border: 0; padding-top: 0; margin-top: 12px; }
.account-legacy summary { min-height: 30px; cursor: pointer; }
.account-logout { width: 100%; justify-content: center; border-top: 1px solid #355165; margin-top: 28px; padding-top: 20px; color: #d5b6bb; }
.notification-open .ocean-pointer { visibility: hidden; }
body.has-ocean-cursor.notification-open, body.has-ocean-cursor.notification-open * { cursor: auto !important; }
body.has-ocean-cursor.notification-open :is(button, a, summary) { cursor: pointer !important; }
body.has-ocean-cursor.notification-open :is(input, textarea) { cursor: text !important; }
.fan-bgm-control { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #071d2de8; border: 1px solid #47798e; border-radius: 7px; box-shadow: 0 10px 28px #020e1880; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fan-bgm-control .icon-button { width: 36px; height: 36px; }
.fan-bgm-control .fan-bgm-expand { display: none; }
.fan-bgm-panel { display: flex; align-items: center; gap: 8px; }
.fan-bgm-panel[hidden] { display: none; }
.fan-bgm-slider { display: block; width: 92px; margin: 0; }
.fan-bgm-slider input { display: block; width: 100%; height: 22px; min-height: 22px; padding: 0; border: 0; background: transparent; accent-color: #9adcf8; cursor: pointer; }
.fan-bgm-slider input:disabled { cursor: default; opacity: .45; }
.fan-checking .fan-bgm-control, .entrance-active .fan-bgm-control, .modal-open .fan-bgm-control, .notification-open .fan-bgm-control { visibility: hidden; pointer-events: none; }
.toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) {
  .fan-bgm-control { right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 2px; padding: 3px; }
  .fan-bgm-control .icon-button { width: 44px; height: 44px; flex: 0 0 44px; }
  .fan-bgm-control .fan-bgm-expand { display: grid; }
  .fan-bgm-panel { position: absolute; right: -1px; bottom: calc(100% + 9px); width: 206px; max-width: calc(100vw - 28px); padding: 9px 12px; background: #071d2df5; border: 1px solid #47798e; border-radius: 7px; box-shadow: 0 10px 28px #020e1880; }
  .fan-bgm-slider { flex: 1; min-width: 0; width: auto; }
  .fan-bgm-slider input { height: 44px; }
}
@media (max-width: 600px) {
  .login-portrait { object-position: 61% top; height: 520px; -webkit-mask-image: linear-gradient(#000 62%,transparent); mask-image: linear-gradient(#000 62%,transparent); }
  .login-shade { background: linear-gradient(0deg,#061826 10%,#061826bc 55%,#06182625); }
  .login-brand { padding: max(20px,env(safe-area-inset-top)) 22px 16px; }
  .login-content { padding: 66px 20px 24px; }
  .login-title h1 { font-size: 32px; }
  .fan-auth-form { width: 100%; padding: 22px 20px; margin-top: 22px; }
  .fan-dialog { padding: 22px 18px; }
  .top-actions { gap: 8px; }
  .top-actions .header-cta { display: none; }
}
@media (max-height: 600px) {
  .login-content { padding-top: 10px; }
  .login-title { display: none; }
  .fan-auth-form { margin-top: 0; }
}