/* Account pages remain visually isolated from the companion layout. */
html[data-account] body > :not(#auth-root):not(script) { display: none !important; }
html[data-account] #auth-root { display: block !important; }
html[data-account], html[data-account] body { height: auto; min-height: 100%; overflow: auto; }
#auth-root { --auth-ink: #eef1fa; --auth-muted: #b4bfd4; --auth-line: #b4c3e22b; --auth-panel: #121e34e8; --auth-input: #111b2ecc; --auth-accent: #c5d1ee; --auth-button-ink: #25334e; --auth-focus: #d2dfff; --auth-error: #ffb9bd; --auth-wash: #111c3294; color: var(--auth-ink); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.6; }
[data-theme="soft-anime"] #auth-root { --auth-ink: #4f3d4b; --auth-muted: #75616e; --auth-line: #8f65772c; --auth-panel: #fff8f2ed; --auth-input: #fffcf8ba; --auth-accent: #925c75; --auth-button-ink: #fff9fc; --auth-focus: #8b4e6e; --auth-error: #ac314f; --auth-wash: #fcebdd48; }
#auth-root *, #auth-root *::before, #auth-root *::after { box-sizing: border-box; }
#auth-root [hidden] { display: none !important; }
#auth-root a { color: inherit; text-decoration: none; }
#auth-root button, #auth-root input { font: inherit; }
#auth-root button { cursor: pointer; }
#auth-root :is(a, button, input):focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 4px; }
#auth-root .auth-page { min-height: 100svh; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 0 clamp(20px, 5.5vw, 96px); background: #101b30; }
[data-theme="soft-anime"] #auth-root .auth-page { background: #eed5d0; }
#auth-root .auth-scenery { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0c17297d, #111c3247 50%, #111c32b5), linear-gradient(0deg, #101b30c9, #101b301a 65%), url('/static/images/moonlit-shore.webp') center / cover; }
[data-theme="soft-anime"] #auth-root .auth-scenery { background: linear-gradient(90deg, #f5dfd19e, #ffeae766 50%, #f8e9e9a1), linear-gradient(0deg, #e6c8c9cc, #fff3e01a 65%), url('/static/images/sakura-dusk.webp') center / cover; }
#auth-root .auth-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#auth-root .auth-brand { display: inline-flex; align-items: center; gap: 13px; font-family: "Yu Mincho", "Noto Serif CJK SC", "SimSun", serif; font-size: 25px; letter-spacing: .16em; }
#auth-root .auth-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--auth-line); border-radius: 50%; font-size: 31px; }
#auth-root .auth-brand small { display: block; font: 9px/1.8 "Segoe UI", sans-serif; letter-spacing: .25em; }
#auth-root .auth-themes { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--auth-line); border-radius: 30px; background: var(--auth-wash); }
#auth-root .auth-themes button { border: 0; border-radius: 24px; padding: 9px 14px; background: transparent; color: var(--auth-muted); font-size: 12px; min-height: 40px; }
#auth-root .auth-themes button[aria-pressed="true"] { color: var(--auth-ink); background: var(--auth-panel); box-shadow: 0 2px 12px #0000000c; }
#auth-root .auth-layout { width: 100%; max-width: 1210px; margin: auto; padding: 28px 0 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: clamp(36px, 6vw, 100px); align-items: center; }
#auth-root .auth-story { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
#auth-root .auth-eyebrow { font-size: 10px; letter-spacing: .21em; font-weight: 500; margin: 0; color: var(--auth-muted); }
#auth-root .auth-story h1 { font-family: "Yu Mincho", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(30px, 3.1vw, 48px); font-weight: 400; line-height: 1.65; letter-spacing: .06em; margin: 28px 0 22px; color: var(--auth-ink); }
#auth-root .auth-story-copy { color: var(--auth-muted); font-size: 15px; line-height: 2.1; margin: 0; }
#auth-root .auth-scene-note { display: flex; align-items: center; gap: 16px; margin-top: 76px; color: var(--auth-muted); font-size: 12px; letter-spacing: .08em; }
#auth-root .auth-star { font-size: 31px; animation: auth-glow 6s ease-in-out infinite; }
#auth-root .auth-scene-note small { display: block; font-size: 9px; letter-spacing: .18em; margin-top: 5px; }
#auth-root .auth-card { padding: 32px 34px 26px; border-radius: 24px; border: 1px solid var(--auth-line); background: var(--auth-panel); backdrop-filter: blur(22px); box-shadow: 0 26px 80px #06102125; }
#auth-root .auth-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#auth-root .auth-card-top .auth-eyebrow { font-size: 9px; letter-spacing: .12em; }
#auth-root .auth-preview-badge { font-size: 10px; white-space: nowrap; border: 1px solid var(--auth-line); border-radius: 20px; padding: 3px 9px; color: var(--auth-muted); }
#auth-root .auth-tabs { display: flex; flex-direction: row; gap: 28px; border-bottom: 1px solid var(--auth-line); margin-top: 23px; }
#auth-root .auth-tabs a { display: block; flex: 0 0 auto; border-radius: 0; background: transparent; margin: 0; padding: 9px 1px 13px; border-bottom: 2px solid transparent; color: var(--auth-muted); font-size: 14px; min-height: 44px; }
#auth-root .auth-tabs a[aria-current="page"] { color: var(--auth-ink); border-bottom-color: var(--auth-accent); }
#auth-root .auth-card h2 { font-size: 25px; font-weight: 500; letter-spacing: .035em; margin: 24px 0 6px; line-height: 1.5; }
#auth-root .auth-intro { margin: 0 0 23px; color: var(--auth-muted); font-size: 13px; }
#auth-root .auth-field { margin: 0 0 17px; }
#auth-root .auth-field label { display: block; font-size: 12px; color: var(--auth-ink); margin: 0 0 8px; }
#auth-root .auth-field input { width: 100%; height: 48px; min-width: 0; border: 1px solid var(--auth-line); border-radius: 10px; color: var(--auth-ink); background: var(--auth-input); padding: 11px 14px; box-shadow: none; font-size: 16px; line-height: 1.5; transition: border-color .2s; }
#auth-root .auth-field input::placeholder { color: var(--auth-muted); opacity: .8; font-size: 13px; }
#auth-root .auth-field input[aria-invalid="true"] { border-color: var(--auth-error); }
#auth-root .auth-password-wrap { position: relative; }
#auth-root .auth-password-wrap input { padding-right: 65px; }
#auth-root .auth-reveal { position: absolute; right: 3px; top: 3px; height: 42px; min-width: 54px; padding: 0 9px; color: var(--auth-muted); border: 0; background: transparent; border-radius: 7px; font-size: 12px; }
#auth-root .auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#auth-root .auth-text-button { background: none; border: 0; padding: 4px 0 8px; color: var(--auth-muted); font-size: 11px; }
#auth-root .auth-hint, #auth-root .auth-error { font-size: 11px; line-height: 1.7; margin: 7px 0 0; }
#auth-root .auth-hint { color: var(--auth-muted); }
#auth-root .auth-error { color: var(--auth-error); }
#auth-root .auth-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 49px; border: 1px solid transparent; border-radius: 11px; background: var(--auth-accent); color: var(--auth-button-ink); margin: 24px 0 0; font-weight: 600; font-size: 14px; transition: filter .2s, transform .2s; }
#auth-root .auth-submit:hover { filter: brightness(1.06); }
#auth-root .auth-submit:active { transform: translateY(1px); }
#auth-root .auth-status { margin: 16px 0 0; padding: 12px; background: var(--auth-input); border: 1px solid var(--auth-line); border-radius: 9px; font-size: 12px; color: var(--auth-ink); }
#auth-root .auth-switch { margin: 21px 0; text-align: center; font-size: 12px; color: var(--auth-muted); }
#auth-root .auth-switch a { color: var(--auth-accent); margin-left: 5px; text-decoration: underline; text-underline-offset: 4px; }
#auth-root .auth-preview-note { display: flex; gap: 9px; border-top: 1px solid var(--auth-line); padding-top: 16px; color: var(--auth-muted); }
#auth-root .auth-preview-note p { margin: 0; font-size: 11px; line-height: 1.85; }
#auth-root .auth-footer { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--auth-muted); }
#auth-root .auth-footer a { padding: 12px 0; }
@keyframes auth-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (max-width: 850px) {
  #auth-root .auth-page { padding-inline: 24px; }
  #auth-root .auth-header { min-height: 86px; }
  #auth-root .auth-layout { grid-template-columns: minmax(0, 460px); justify-content: center; gap: 25px; padding: 16px 0 32px; }
  #auth-root .auth-story { padding: 0; text-align: center; }
  #auth-root .auth-story > .auth-eyebrow, #auth-root .auth-story-copy, #auth-root .auth-scene-note { display: none; }
  #auth-root .auth-story h1 { font-size: 27px; line-height: 1.6; margin: 0; }
  #auth-root .auth-card { padding: 28px; }
}
@media (max-width: 420px) {
  #auth-root .auth-page { padding-inline: 16px; }
  #auth-root .auth-brand { gap: 8px; font-size: 21px; }
  #auth-root .auth-mark { width: 33px; height: 33px; font-size: 25px; }
  #auth-root .auth-themes button { padding: 8px 9px; font-size: 11px; }
  #auth-root .auth-themes button span { display: none; }
  #auth-root .auth-themes button::after { content: '月夜'; margin-left: 4px; }
  #auth-root .auth-themes button[data-auth-theme="soft-anime"]::after { content: '樱语'; }
  #auth-root .auth-story h1 { font-size: 24px; }
  #auth-root .auth-card { padding: 24px 20px; border-radius: 20px; }
  #auth-root .auth-card-top { gap: 6px; }
  #auth-root .auth-card-top .auth-eyebrow { font-size: 8px; }
  #auth-root .auth-footer { flex-wrap: wrap; justify-content: center; gap: 0 15px; padding-bottom: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { #auth-root *, #auth-root *::before, #auth-root *::after { animation: none !important; transition: none !important; } }

/* The entry opens a separate tab so an active companion session is not interrupted. */
.account-entry { display: block; padding: 12px 0; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.account-entry small { display: block; margin-top: 5px; font-size: 10px; }

/* Local invitation administration shares account colors, with readable wrapping. */
#auth-root .invite-admin { max-width:1040px; margin:0 auto; padding:40px 24px 80px; }
#auth-root .invite-admin > header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
#auth-root .invite-admin .auth-card { width:100%; max-width:none; margin:20px 0; }
#auth-root .invite-options { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
#auth-root .admin-list article { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--line, #8884); }
#auth-root .admin-list article > div { flex:1; min-width:180px; overflow-wrap:anywhere; }
#auth-root .admin-list p { margin:6px 0; font-size:13px; opacity:.75; }
#auth-root .invite-admin button:not(.auth-submit) { padding:9px 14px; border-radius:12px; }
#auth-root #invite-secret { margin-top:20px; }
#auth-root #invite-code { width:100%; padding:12px; margin:8px 0; border-radius:10px; font-family:monospace; }
#auth-root #reset-secret { overflow-wrap:anywhere; }
#auth-root button:disabled { opacity:.55; cursor:wait; }
@media(max-width:600px) {
  #auth-root .invite-admin { padding:20px 14px 50px; }
  #auth-root .invite-admin > header { align-items:flex-start; flex-direction:column; }
}