/* 十七 · 登录 / 注册页。与工作台共用一套设计：暖白底、墨色文字、朱砂色点缀。 */
:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --paper: #f1efea;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: #e4e2dc;
  --line-2: #eeece7;
  --accent: #d4502a;
  --accent-ink: #b5401f;
  --accent-soft: #fbece6;
  --ok: #15803d;
  --ok-soft: #eaf6ee;
  --bad: #b42318;
  --bad-soft: #fdeeec;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --display: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  color-scheme: light;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* ── 左侧：品牌与产品示意 ── */
.auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 44px;
  padding: 48px clamp(32px, 5vw, 72px);
  background:
    radial-gradient(900px 480px at 110% -10%, #f6e2d8 0, transparent 60%),
    radial-gradient(700px 420px at -20% 110%, #ece8df 0, transparent 60%),
    var(--paper);
  border-right: 1px solid var(--line-2);
}
.auth-aside::after {
  content: "十七"; position: absolute; right: -0.08em; bottom: -0.28em;
  font: 400 min(30vw, 380px)/1 var(--serif); color: #18181b05; letter-spacing: -0.04em; pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  position: relative; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ink); color: #fff; font: 600 14px/1 var(--serif); letter-spacing: .02em;
}
.brand-mark i { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.brand-word { font: 600 20px/1 var(--serif); letter-spacing: .12em; }

.aside-copy { max-width: 460px; margin-top: auto; }
.aside-copy h2 { font: 700 clamp(38px, 4.2vw, 54px)/1.18 var(--display); letter-spacing: -.02em; }
.aside-copy p { margin-top: 18px; color: var(--ink-2); font-size: 15px; line-height: 1.85; max-width: 420px; }

.flow { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; max-width: 560px; }
.flow-card {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0;
  padding: 11px 12px; border-radius: 12px; background: #fffffff0; border: 1px solid var(--line);
  box-shadow: 0 1px 2px #18181b0a, 0 8px 24px -16px #18181b40;
}
.flow-card b { display: block; font-size: 12.5px; font-weight: 600; }
.flow-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-card > span:last-child { min-width: 0; }
.flow-card.accent { border-color: #efc7b8; }
.flow-thumb { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 600 12px/1 var(--serif); }
.flow-thumb.img { background: linear-gradient(135deg, #e9d6c6, #c9b8a6 60%, #9d8f80); }
.flow-thumb.txt { background: #f2f1ee; color: var(--ink-2); }
.flow-thumb.vid { background: var(--accent); color: #fff; }
.flow-thumb svg { width: 14px; height: 14px; }
.flow-line { flex: 0 0 22px; height: 1px; background: repeating-linear-gradient(90deg, #b9b5ad 0 4px, transparent 4px 7px); }

.aside-points { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 13.5px; }
.aside-points li { display: flex; align-items: center; gap: 10px; }
.aside-points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.aside-foot { position: relative; z-index: 1; color: var(--faint); font-size: 12px; }

/* ── 右侧：表单 ── */
.auth-main { display: grid; place-items: center; padding: 48px 24px; background: var(--surface); }
.auth-panel { width: min(100%, 384px); }
.mobile-only { display: none; }

.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: #f2f1ee; margin-bottom: 34px; }
.tab { position: relative; z-index: 1; border: 0; background: none; padding: 9px 0; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .18s; }
.tab.active { color: var(--ink); }
.tab-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: #fff; box-shadow: 0 1px 2px #18181b14, 0 1px 1px #18181b0a; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.tabs.register .tab-indicator { transform: translateX(100%); }
.tabs.single { grid-template-columns: 1fr; }
.tabs.single .tab-indicator { width: calc(100% - 8px); }

.auth-head { margin-bottom: 26px; }
.auth-head h1 { font: 700 26px/1.3 var(--display); letter-spacing: -.01em; }
.auth-head p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }

form { display: grid; gap: 16px; }
#registerFields { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span:first-child { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field-optional { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 12px; color: var(--faint); }
.field-hint { display: flex; align-items: center; gap: 6px; margin-top: -1px; font-size: 12px; color: var(--accent-ink); }
.field-hint::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
input {
  width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--faint); }
input:hover { border-color: #d3d0c9; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #d4502a1f; }
input[aria-invalid="true"] { border-color: var(--bad); }
.input-wrap { position: relative; display: block; }
.input-wrap input { padding-right: 44px; }
.reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.reveal:hover { color: var(--ink-2); background: #f4f3f0; }
.reveal.on { color: var(--accent); }
.reveal svg { width: 18px; height: 18px; }

.captcha { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.captcha output { height: 44px; min-width: 104px; padding: 0 14px; display: grid; place-items: center; border-radius: 10px; background: #f4f3f0; border: 1px dashed #d6d3cb; font: 600 16px/1 var(--display); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .3s; }
.icon-button:hover { background: #f7f6f3; }
.icon-button:active svg { transform: rotate(-120deg); }
.icon-button svg { width: 18px; height: 18px; transition: transform .3s; }
.icon-button:disabled { opacity: .5; cursor: wait; }
.pow-state { color: var(--faint); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.pow-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #d6d3cb; }
.pow-state.done { color: var(--ok); }
.pow-state.done::before { background: var(--ok); }

.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.message { padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.6; background: #f4f3f0; color: var(--ink-2); }
.message.error { background: var(--bad-soft); color: var(--bad); }
.message.ok { background: var(--ok-soft); color: var(--ok); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 11px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.button.primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px #18181b1f, inset 0 1px 0 #ffffff14; }
.button.primary:hover { background: #27272a; }
.button.primary:active { transform: translateY(1px); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button.wide { width: 100%; margin-top: 6px; }
.btn-spinner { display: none; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #ffffff55; border-top-color: #fff; animation: spin .7s linear infinite; }
.button.loading .btn-spinner { display: inline-block; }

.foot-note { margin-top: 22px; color: var(--muted); font-size: 13px; text-align: center; }

.signed-in { display: grid; justify-items: center; gap: 16px; text-align: center; color: var(--ink-2); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { place-items: start center; padding: 28px 16px 40px; background: var(--bg); }
  .auth-panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; padding: 24px 20px 26px; box-shadow: 0 12px 40px -24px #18181b40; }
  .mobile-only { display: inline-flex; margin-bottom: 24px; }
  .auth-head h1 { font-size: 24px; }
}
/* ── 品牌标语「无限画布空间」（0.16.0）：电脑在侧栏品牌旁；手机在表单卡片顶部右侧、「注册」上方。
   字体 html.font-kai / font-song / font-fang，颜色 html.tag-mole（墨字朱砂痣）/ tag-red（朱砂字）/ tag-ink（墨字）/ tag-seal（闲章），由管理后台设置 ── */
:root {
  --tag-font: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --tag-size: 13px; --tag-ls: .3em; --tag-color: #57534e; --tag-dot: inline-block;
  --tag-bw: 0px; --tag-bc: transparent; --tag-bg: transparent; --tag-radius: 0px;
  --tag-py: 0px; --tag-pr: 0px; --tag-pl: 0px;
}
html.font-fang { --tag-font: "STFangsong", "FangSong", "FangSong_GB2312", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif; }
html.font-kai { --tag-font: "Kaiti SC", "STKaiti", "KaiTi", "KaiTi_GB2312", "Songti SC", "Noto Serif CJK SC", "SimSun", serif; --tag-size: 14px; --tag-ls: .26em; }
html.tag-red { --tag-color: var(--accent-ink); --tag-dot: none; }
html.tag-ink { --tag-color: #3f3a36; --tag-dot: none; }
html.tag-seal { --tag-size: 12px; --tag-ls: .22em; --tag-color: var(--accent); --tag-dot: none; --tag-bw: 1px; --tag-bc: #d4502ab3; --tag-bg: #d4502a0a; --tag-radius: 2px; --tag-py: 5px; --tag-pr: 5px; --tag-pl: 7.6px; }
.brand-tag { display: inline-flex; align-items: center; font-size: var(--tag-size); white-space: nowrap; }
.brand-tag > span {
  display: inline-flex; align-items: center;
  font: 400 var(--tag-size)/1 var(--tag-font); letter-spacing: var(--tag-ls); color: var(--tag-color);
  border: var(--tag-bw) solid var(--tag-bc); border-radius: var(--tag-radius); background: var(--tag-bg);
  padding: var(--tag-py) var(--tag-pr) var(--tag-py) var(--tag-pl);
}
.brand-tag i { display: var(--tag-dot); flex: none; width: 5px; height: 5px; margin-right: 9px; border-radius: 50%; background: var(--accent); }
.auth-aside .brand-tag { margin-left: 5px; }
.panel-head { display: none; }
@media (max-width: 900px) {
  .panel-head.mobile-only { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
  .panel-head .brand { margin: 0; }
  html:not(.tag-seal) .panel-head .brand-tag { margin-right: calc(-1 * var(--tag-ls)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; } }

/* 0.18.0 邀请活动提示 */
.promo { display: flex; align-items: center; gap: 9px; margin: -6px 0 18px; padding: 10px 13px; border-radius: 11px; background: var(--accent-soft); border: 1px solid #f3cfc1; color: var(--accent-ink); font-size: 13px; line-height: 1.5; }
.promo::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 8h13v3h-13zM4.5 11v5.5h11V11M10 8v8.5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }