:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #1c3227;
  background: #f5f6ef;
  --ink: #1c3227;
  --muted: #506156;
  --line: #d2dcd1;
  --accent: #2d5b44;
  --accent-dark: #224533;
  --surface: #fffefa;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .6; }
input:disabled { opacity: .75; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid #527d61; outline-offset: 3px; }

.skip {
  position: absolute;
  z-index: 2;
  top: .75rem;
  left: .75rem;
  padding: .65rem .9rem;
  border-radius: .4rem;
  background: var(--accent-dark);
  color: white;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 max(24px, calc((100% - 1100px) / 2));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 750; text-decoration: none; }
.brand img { flex: none; }
.brand small { margin-inline-start: .45rem; color: var(--muted); font-size: .8rem; font-weight: 500; }
.top-link { font-size: .86rem; }

.layout {
  width: min(1080px, calc(100% - 64px));
  min-height: min(620px, calc(100svh - 176px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 6vw, 82px);
  margin: auto;
  padding-block: clamp(44px, 8vh, 100px);
}
.intro {
  display: grid;
  min-height: 410px;
  align-content: space-between;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #dce4d5;
  border-radius: 28px;
  background: radial-gradient(ellipse at 80% 75%, #cbdac9, transparent 74%), #e9eee1;
}
.intro-copy { padding: clamp(30px, 4.5vw, 52px) clamp(25px, 4.2vw, 48px) 0; z-index: 1; }
.intro h1 { margin: 0 0 .7rem; font-size: clamp(2rem, 4.4vw, 3.65rem); font-weight: 750; letter-spacing: -.06em; line-height: 1.13; }
.intro p { color: var(--muted); font-size: clamp(.94rem, 1.5vw, 1.04rem); line-height: 1.75; }
.intro-art { width: min(91%, 435px); height: auto; justify-self: end; margin: -3rem -2.3rem -4.6rem 0; user-select: none; pointer-events: none; }

.card {
  min-width: 0;
  min-height: 144px;
  padding: clamp(24px, 3.2vw, 39px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 12px 40px #2e48331a;
}
.card h2 { font-size: clamp(1.64rem, 2.7vw, 2.05rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.25; margin-bottom: 1.36rem; }
.card h3 { font-size: 1.05rem; margin-bottom: .42rem; }
.loading { color: var(--muted); }
.description, .hint, .form-foot, .note { color: var(--muted); line-height: 1.65; }
.description { font-size: .9rem; margin: -.64rem 0 1rem; }
.account-section .description { margin-top: 0; }
.hint { font-size: .77rem; }
.code-status-error { color: #8b3a28; }
.code-status-actions { display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .4rem; }
.code-status-actions a { font-weight: 700; }
.field-error {
  padding: .48rem .65rem;
  border-inline-start: 3px solid #b7503c;
  border-radius: .28rem;
  background: #fff2ee;
  color: #8a2f21;
  font-size: .83rem;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cancel-code { justify-self: start; }
.note, .notice { padding: .66rem .8rem; border-radius: .55rem; margin: 0 0 1rem; font-size: .86rem; overflow-wrap: anywhere; }
.note, .status { background: #e9f1e7; color: #2c5038; }
.error { background: #fcf0eb; color: #8b3a28; }

fieldset { display: grid; gap: 1.03rem; min-width: 0; border: 0; padding: 0; margin: 0; }
.channels legend { margin-bottom: .38rem; padding: 0; font-size: .88rem; font-weight: 670; }
.login-methods { margin-bottom: 1.03rem; }
.channel-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.channel-options label {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .45rem .5rem;
  border: 1px solid var(--line);
  border-radius: .55rem;
  color: var(--ink);
  font-size: .88rem;
  cursor: pointer;
}
.channel-options label:has(input:checked) { border-color: #789980; background: #eef4ec; }
.channel-options input { margin: 0; accent-color: var(--accent); }
.field { display: grid; gap: .38rem; min-width: 0; }
.field label { font-size: .88rem; font-weight: 670; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.label-row a { font-size: .81rem; }
.field input {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: .62rem .73rem;
  border: 1px solid #bfcdbf;
  border-radius: .55rem;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}
.field input::placeholder { color: #647168; }
.field input:focus { outline: 2px solid #789980; outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #b7503c; }
.field input[aria-invalid="true"]:focus { outline-color: #b7503c; }
.secret { position: relative; }
.secret input { padding-inline-end: 3.95rem; }
.secret-toggle {
  position: absolute;
  inset: 4px 5px 4px auto;
  padding: 0 .58rem;
  border: 0;
  border-radius: .38rem;
  background: transparent;
  color: var(--accent);
  font-size: .8rem;
}
.secret-toggle:hover { background: #e8f1e8; }
.phone { position: relative; }
.phone span { position: absolute; top: .72rem; left: .7rem; padding-right: .55rem; border-right: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.phone input { padding-inline-start: 3.25rem; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.widget:empty { display: none; }

.primary, .secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 45px;
  padding: .6rem .87rem;
  border-radius: .55rem;
  font-size: .89rem;
  font-weight: 680;
}
.primary { border: 1px solid var(--accent); color: #fff; background: var(--accent); }
.primary:hover:enabled { border-color: var(--accent-dark); background: var(--accent-dark); }
.secondary { border: 1px solid #bccdbd; background: #eef4ec; color: var(--accent-dark); white-space: nowrap; }
.secondary:hover:enabled { background: #e1ece1; }
.form-foot { margin-top: 1.18rem; font-size: .88rem; text-align: center; }

.profile { display: flex; align-items: center; gap: .8rem; min-height: 56px; margin-bottom: 1.25rem; }
.profile > :last-child { min-width: 0; }
.avatar { position: relative; display: grid; place-items: center; flex: 0 0 56px; height: 56px; overflow: hidden; border-radius: 50%; background: #dfe9dc; color: var(--accent); font-size: 1.25rem; font-weight: 750; }
.avatar img { position: absolute; inset: 0; object-fit: cover; }
.account-name { overflow-wrap: anywhere; font-weight: 670; }
.field input[type="file"] { font-size: .84rem; padding: .47rem .52rem; }
.field input::file-selector-button { padding: .29rem .46rem; margin-right: .37rem; border: 1px solid var(--line); border-radius: .35rem; background: #f5f7f2; color: var(--ink); cursor: pointer; }
.account-section { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.3rem; }
.account-section summary { width: fit-content; padding: .3rem 0; color: var(--accent); font-weight: 670; cursor: pointer; }
.account-section[open] summary { margin-bottom: .8rem; }
.logout { margin-top: 1.12rem; padding: .52rem 0; border: 0; background: transparent; color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.footer { padding: 1.3rem 24px 1.6rem; border-top: 1px solid var(--line); text-align: center; font-size: .78rem; }
.footer a { color: var(--muted); }

.auth-embed {
  /* Match the Web Component's iframe so the outer canvas stays transparent. */
  color-scheme: light;
  color: var(--ink);
  background: var(--embed-background, transparent);
  --embed-palette-scheme: light;
  --embed-palette-ink: #1c3227;
  --embed-palette-muted: #506156;
  --embed-palette-placeholder: #647168;
  --embed-palette-line: #d2dcd1;
  --embed-palette-surface: #fff;
  --embed-palette-field: #fff;
  --embed-palette-field-line: #bfcdbf;
  --embed-palette-accent: #2d5b44;
  --embed-palette-accent-hover: #224533;
  --embed-palette-button-ink: #fff;
  --embed-palette-selection: #f5f7f5;
  --embed-palette-control-hover: #ecefec;
  --embed-palette-toggle-hover: #e8f1e8;
  --embed-palette-error-line: #b7503c;
  --ink: var(--embed-ink, var(--embed-palette-ink));
  --muted: var(--embed-muted, var(--embed-palette-muted));
  --line: var(--embed-line, var(--embed-palette-line));
  --surface: var(--embed-surface, var(--embed-palette-surface));
  --accent: var(--embed-accent, var(--embed-palette-accent));
  --accent-dark: var(--embed-accent, var(--embed-palette-accent-hover));
}
.auth-embed[data-embed-scheme="dark"] {
  --embed-palette-scheme: dark;
  --embed-palette-ink: #eef2f9;
  --embed-palette-muted: #b5c0d1;
  --embed-palette-placeholder: #9baabe;
  --embed-palette-line: #61718b;
  --embed-palette-surface: #1b2330;
  --embed-palette-field: #141b26;
  --embed-palette-field-line: var(--embed-palette-line);
  --embed-palette-accent: #76d8c1;
  --embed-palette-accent-hover: #a6e8d9;
  --embed-palette-button-ink: #112b25;
  --embed-palette-selection: #263748;
  --embed-palette-control-hover: #2e4257;
  --embed-palette-toggle-hover: var(--embed-palette-control-hover);
  --embed-palette-error: #ffd0c7;
  --embed-palette-error-line: #eb9a8d;
}
.auth-embed body { color-scheme: var(--embed-palette-scheme); display: block; min-height: 0; }
.auth-embed .topbar, .auth-embed .intro, .auth-embed .footer { display: none; }
.auth-embed .layout { display: block; width: 100%; min-height: 0; margin: 0; padding: var(--embed-frame-padding, 4px); }
.auth-embed .card {
  width: min(100%, 36rem);
  min-height: 0;
  margin-inline: auto;
  padding: var(--embed-padding, clamp(12px, 4vw, 24px));
  border-width: var(--embed-border-width, 1px);
  border-radius: var(--embed-radius, .85rem);
  background: var(--surface);
  box-shadow: var(--embed-shadow, none);
}
.auth-embed .embed-brand {
  display: flex;
  align-items: center;
  gap: .48rem;
  margin-bottom: .76rem;
  color: var(--muted);
  font-size: .79rem;
  font-weight: 650;
}
.auth-embed .embed-brand img { flex: none; }
.auth-embed .card h2 { font-size: 1.52rem; margin-bottom: .98rem; }
.auth-embed fieldset { gap: .85rem; }
.auth-embed .login-methods { margin-bottom: .85rem; }
.auth-embed :focus-visible { outline-color: var(--accent); }
.auth-embed[data-embed-scheme="dark"] .skip {
  background: var(--embed-button, var(--embed-palette-accent));
  color: var(--embed-button-ink, var(--embed-palette-button-ink));
}
.auth-embed .field input {
  border-color: var(--embed-line, var(--embed-palette-field-line));
  background: var(--embed-field, var(--embed-palette-field));
}
.auth-embed .field input::placeholder { color: var(--embed-muted, var(--embed-palette-placeholder)); }
.auth-embed .field input:focus { outline-color: var(--accent); }
.auth-embed .field input[aria-invalid="true"] { border-color: var(--embed-palette-error-line); }
.auth-embed .field input[aria-invalid="true"]:focus { outline-color: var(--embed-palette-error-line); }
.auth-embed .channel-options label { background: var(--embed-field, transparent); }
.auth-embed .channel-options label:has(input:checked) { border-color: var(--accent); background: var(--embed-palette-selection); }
.auth-embed :is(.field input, .channel-options label, .primary, .secondary) { border-radius: var(--embed-control-radius, .55rem); }
.auth-embed .secret-toggle { border-radius: var(--embed-control-radius, .38rem); }
.auth-embed .secret-toggle:hover { background: var(--embed-palette-toggle-hover); }
.auth-embed .primary {
  border-color: var(--embed-button, var(--embed-palette-accent));
  background: var(--embed-button, var(--embed-palette-accent));
  color: var(--embed-button-ink, var(--embed-palette-button-ink));
}
.auth-embed .primary:hover:enabled {
  border-color: var(--embed-button-hover, var(--embed-palette-accent-hover));
  background: var(--embed-button-hover, var(--embed-palette-accent-hover));
}
.auth-embed .secondary { border-color: var(--line); background: var(--embed-palette-selection); }
.auth-embed .secondary:hover:enabled { background: var(--embed-palette-control-hover); }
.auth-embed[data-embed-scheme="dark"] :is(.note, .status) { background: #233f3b; color: #bbebd6; }
.auth-embed[data-embed-scheme="dark"] :is(.field-error, .error) { background: #492e33; color: var(--embed-palette-error); }
.auth-embed[data-embed-scheme="dark"] .field-error { border-inline-start-color: var(--embed-palette-error-line); }
.auth-embed[data-embed-scheme="dark"] .code-status-error { color: var(--embed-palette-error); }

@media (max-width: 800px) {
  .layout { width: min(500px, calc(100% - 40px)); grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px 40px; }
  .intro { min-height: 146px; grid-template-columns: minmax(0, 1fr) 29%; align-content: stretch; align-items: center; border-radius: 20px; }
  .intro-copy { padding: 1.25rem 0 1.25rem 1.45rem; }
  .intro h1 { margin-bottom: .3rem; }
  .intro-art { margin: -2rem -1.7rem -2rem -1rem; width: 176px; max-width: none; }
  .topbar { min-height: 64px; }
}
@media (max-width: 360px) {
  .layout { width: calc(100% - 24px); }
  .card { padding: 19px; }
  .intro h1 { font-size: 1.64rem; }
  .intro-art { width: 135px; }
  .login-methods .channel-options label { gap: .34rem; padding-inline: .35rem; font-size: .81rem; }
}

.account-page .layout {
  display: block;
  width: min(960px, calc(100% - 48px));
  min-height: 0;
  margin: 0 auto auto;
  padding-block: clamp(28px, 5vw, 52px) 48px;
}
.account-page .intro { display: none; }
.account-page .card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.account-header, .account-actions { display: flex; align-items: center; flex-wrap: wrap; }
.account-header {
  justify-content: space-between;
  gap: 10px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.account-header h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 750; letter-spacing: -.04em; }
.account-actions { gap: 8px 16px; }
.account-actions a { text-decoration: none; }
.account-actions .logout { margin: 0; min-height: 44px; font-size: .86rem; }
.account-settings { display: grid; grid-template-columns: minmax(152px, 200px) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.account-nav, .account-panel { border: 1px solid var(--line); background: var(--surface); }
.account-nav { display: grid; align-self: start; gap: 4px; padding: 6px; border-radius: 14px; }
.account-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .78rem;
  border-radius: 9px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}
.account-nav a:hover { background: #f0f4ed; color: var(--accent-dark); }
.account-nav a[aria-current]:not([aria-current="false"]) { background: #e5efe5; color: var(--accent-dark); }
.account-panel { min-width: 0; border-radius: 18px; padding: clamp(18px, 3.5vw, 32px); }
.account-panel h2 { margin-bottom: 1rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.account-panel form { max-width: 34rem; }
.account-panel .description { margin: 0 0 1.2rem; }
.account-panel .profile { padding: .9rem; border-radius: 12px; background: #f2f5ee; }
.account-contacts { margin: 0; border-block: 1px solid var(--line); }
.account-contacts > div {
  display: grid;
  grid-template-columns: minmax(64px, .28fr) minmax(0, 1fr);
  gap: .55rem;
  padding: .78rem 0;
  font-size: .9rem;
}
.account-contacts > div + div { border-top: 1px solid var(--line); }
.account-contacts dt { color: var(--muted); }
.account-contacts dd { margin: 0; overflow-wrap: anywhere; }
.contact-empty { color: var(--muted); }
.account-contacts dd > :not([hidden]) + .contact-empty { display: none; }
.account-panel #bind-section { margin-top: 1rem; border-top: 0; padding-top: 0; }

@media (max-width: 620px) {
  .account-page .layout { width: calc(100% - 32px); padding-block: 22px 36px; }
  .account-settings { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; }
  .account-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .account-nav a { justify-content: center; padding-inline: .3rem; text-align: center; }
}

:root:not(.auth-embed) {
  --paper: #eee6ff;
  --lavender: #d9c9ff;
  --ink: #2e1957;
  --muted: #584476;
  --line: #2e195748;
  --accent: #5631ce;
  --accent-dark: #402295;
  --surface: #fff7e8;
  color: var(--ink);
  background: var(--paper);
}

:root:not(.auth-embed) .topbar .brand img { width: clamp(111px, 25vw, 158px); height: auto; }
:root:not(.auth-embed) .topbar .brand small { margin-inline-start: 0; }
:root:not(.auth-embed) .intro {
  border-color: var(--line);
  border-radius: 16px;
  background: linear-gradient(112deg, var(--paper) 43%, var(--lavender) 43%);
}
:root:not(.auth-embed) .intro-art {
  width: clamp(150px, 23vw, 285px);
  margin: 12px clamp(22px, 5vw, 65px) 30px 0;
  transform: rotate(-7deg);
}
:root:not(.auth-embed, .account-page) .card { border-radius: 16px; box-shadow: none; }
:root:not(.auth-embed) :focus-visible { outline-color: var(--accent); }
:root:not(.auth-embed) .field input { border-color: var(--line); }
:root:not(.auth-embed) .field input::placeholder { color: var(--muted); }
:root:not(.auth-embed) .field input:focus { outline-color: var(--accent); }
:root:not(.auth-embed) .field input[aria-invalid="true"] { border-color: #b7503c; }
:root:not(.auth-embed) .field input[aria-invalid="true"]:focus { outline-color: #b7503c; }
:root:not(.auth-embed) .channel-options label:has(input:checked) { border-color: var(--accent); }
:root:not(.auth-embed) :is(.note, .status, .secondary, .channel-options label:has(input:checked)) {
  background: var(--paper);
  color: var(--ink);
}
:root:not(.auth-embed) .secondary { border-color: var(--line); }
:root:not(.auth-embed) :is(.secret-toggle:hover, .secondary:hover:enabled, .avatar) { background: var(--lavender); }
:root:not(.auth-embed) :is(.account-nav a:hover, .account-panel .profile) { background: var(--paper); }
:root:not(.auth-embed) .account-nav a[aria-current]:not([aria-current="false"]) { background: var(--lavender); }
:root:not(.auth-embed) .field input::file-selector-button { background: var(--paper); }

@media (max-width: 800px) {
  :root:not(.auth-embed) .intro-art { width: clamp(70px, 16vw, 115px); margin: 12px 20px 12px 0; }
}