/* ==========================================================================
   UBAI 设计系统 · Design Tokens
   --------------------------------------------------------------------------
   所有颜色、圆角、间距、字号、阴影、动效都从这里取值。
   组件里不再出现硬编码色值（除内容渲染的幻灯片配色）。
   ========================================================================== */

@font-face{font-family:Chivo;src:url('/fonts/chivo-900.woff2') format("woff2");font-weight:900;font-display:swap}

*{box-sizing:border-box}

:root{
  /* ---------- 字体 ---------- */
  --font-sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-brand:Chivo,"SF Pro Display",-apple-system,"PingFang SC",sans-serif;
  --font-num:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,"Roboto Mono",monospace;

  /* ---------- 字号（8 档，全站只用这些） ---------- */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-base:15px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:26px;
  --fs-3xl:34px;

  /* ---------- 行高 ---------- */
  --lh-none:1;
  --lh-tight:1.2;
  --lh-snug:1.4;
  --lh-normal:1.6;

  /* ---------- 字重（只用 4 档，避免 650 这类非法值回退） ---------- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* ---------- 字距 ---------- */
  --tracking-tight:-0.02em;
  --tracking-wide:0.08em;

  /* ---------- 圆角（6 档） ---------- */
  --r-xs:6px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:18px;
  --r-2xl:24px;
  --r-full:999px;

  /* ---------- 间距（4px 栅格） ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* ---------- 动效 ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:320ms;

  /* ---------- 层级 ---------- */
  --z-sticky:20;
  --z-pop:30;
  --z-mask:50;
  --z-toast:100;

  /* ---------- 布局 ---------- */
  --topbar-h:60px;
  --page-max:1200px;
  --gutter:24px;

  /* ---------- 焦点环：键盘可达性统一入口 ---------- */
  --focus-ring:0 0 0 2px var(--card),0 0 0 4px color-mix(in srgb,var(--accent) 62%,transparent);
}

/* ========================== 深色主题（默认） ========================== */
:root[data-theme=dark]{
  /* 中性层：页面 < 卡片 < 浮层，三级靠明度而不是描边区分 */
  --page:#0A0A0E;
  --surface:#16161D;
  --surface-2:#1B1B23;
  --surface-3:#24242E;
  --card:#15151B;
  --tile-bg:#1B1B23;

  /* 描边：只在必要处出现，1px 发丝线 */
  --card-border:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);
  --field-border:rgba(255,255,255,.10);

  /* 文字层级：主 / 次 / 弱 */
  --ink:#F4F3F8;
  --text-2:#B7B6C3;
  --muted:#8B8A98;
  --btn-ink:#FFFFFF;

  /* 输入 */
  --field:#0A0A0E;
  --field-placeholder:#7A7987;

  /* 品牌：单一靛紫，不再做三色渐变 */
  --accent:#6E64E6;
  --accent-hover:#7D74ED;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(110,100,230,.16);
  --accent-soft-strong:rgba(110,100,230,.26);
  --link:#A9A2F5;

  /* 语义色 */
  --success:#48C08D;
  --success-soft:rgba(72,192,141,.14);
  --warning:#D9A048;
  --warning-soft:rgba(217,160,72,.14);
  --danger:#E3695F;
  --danger-soft:rgba(227,105,95,.14);

  /* 阴影：深色下用低透明大扩散，不做重投影 */
  --shadow-xs:0 1px 2px rgba(0,0,0,.28);
  --shadow-sm:0 2px 8px rgba(0,0,0,.26),0 1px 2px rgba(0,0,0,.2);
  --shadow-md:0 10px 28px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.22);
  --shadow-lg:0 28px 70px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.3);
  --card-shadow:var(--shadow-sm);

  /* 登录页 */
  --brand:#FFFFFF;
  --brand-shadow:0 1px 10px rgba(0,0,0,.45);
  --shade-color:rgba(0,0,0,.42);
  --shade-grad:linear-gradient(90deg,rgba(12,12,16,.55),rgba(12,12,16,.78) 50%,rgba(12,12,16,.55));
  --cycle-bg:rgba(21,21,27,.9);
  --cycle-border:rgba(255,255,255,.12);
}

/* ========================== 浅色主题 ========================== */
:root[data-theme=light]{
  --page:#EEF0F4;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --surface-3:#F0F1F4;
  --card:#FFFFFF;
  --tile-bg:#E8EAEE;

  --card-border:rgba(16,18,24,.08);
  --line:rgba(16,18,24,.08);
  --line-strong:rgba(16,18,24,.14);
  --field-border:rgba(16,18,24,.10);

  --ink:#14161C;
  --text-2:#3F4653;
  --muted:#666E7C;
  --btn-ink:#FFFFFF;

  --field:#F7F8FA;
  --field-placeholder:#8D95A2;

  --accent:#5B4FD6;
  --accent-hover:#4C41C7;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(91,79,214,.08);
  --accent-soft-strong:rgba(91,79,214,.14);
  --link:#5145CE;

  --success:#1E8F63;
  --success-soft:rgba(30,143,99,.10);
  --warning:#A9741F;
  --warning-soft:rgba(169,116,31,.10);
  --danger:#C03A31;
  --danger-soft:rgba(192,58,49,.09);

  --shadow-xs:0 1px 2px rgba(16,22,38,.05);
  --shadow-sm:0 1px 3px rgba(16,22,38,.06),0 1px 2px rgba(16,22,38,.04);
  --shadow-md:0 8px 24px rgba(16,22,38,.08),0 2px 6px rgba(16,22,38,.04);
  --shadow-lg:0 24px 64px rgba(16,22,38,.14),0 6px 16px rgba(16,22,38,.06);
  --card-shadow:var(--shadow-sm);

  --brand:#14161C;
  --brand-shadow:none;
  --shade-color:rgba(244,245,247,.55);
  --shade-grad:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.72) 50%,rgba(255,255,255,.5));
  --cycle-bg:rgba(255,255,255,.94);
  --cycle-border:rgba(16,18,24,.10);
}

/* ========================== 基础排版 ========================== */

/* 主题切换瞬间：停用所有过渡，整屏同步换色，消除闪屏 */
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after {
  transition: none !important;
  animation: none !important;
}
html,body{height:100%}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
input,select,textarea{outline:none}

/* 数字统一等宽，避免跳动 */
.num,.qn-val,.thumb-num,.pageno,[data-num]{font-variant-numeric:tabular-nums}

/* 全局键盘焦点：只在键盘操作时出现，不干扰鼠标用户 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--ink)}

/* 滚动条：细、低对比、悬停才明显 */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 55%,transparent);background-clip:content-box}

/* ========================== 登录页 ========================== */

.login-home{position:fixed;inset:0;overflow:hidden}
.work-wall{position:absolute;inset:-70px -100px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-4);align-content:start;pointer-events:none;z-index:0}
.wall-column{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.wall-column:nth-child(2n){transform:translateY(85px)}
.wall-tile{aspect-ratio:16/9;flex:none;border-radius:var(--r-md);overflow:hidden;background:var(--tile-bg);box-shadow:var(--shadow-sm)}
.wall-tile img{display:block;width:100%;height:100%;object-fit:contain;background:var(--surface-3)}

.login-shade{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background-color:var(--shade-color);background-image:var(--shade-grad)}

.login-brand{position:absolute;top:var(--sp-8);left:var(--sp-10);right:var(--sp-10);z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);color:var(--brand)}
.brand{font-family:var(--font-brand);font-weight:900;font-size:33px;letter-spacing:-.05em;white-space:nowrap;color:var(--brand)}
.brand-ppt{font-size:20px;margin-left:0;letter-spacing:-.03em}
.login-brand>.tagline{font-size:var(--fs-base);color:var(--text-2);text-shadow:var(--brand-shadow);letter-spacing:-0.01em}

.theme-cycle{
  position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-full);background:var(--cycle-bg);border:1px solid var(--cycle-border);
  color:var(--ink);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
.theme-cycle:hover{border-color:var(--line-strong);transform:scale(1.03)}
.theme-cycle:active{transform:scale(.97)}
.theme-cycle svg{width:22px;height:22px;display:block}
.theme-auto-dot{position:absolute;top:9px;right:9px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.85;animation:dot-breathe 2.6s ease-in-out infinite}

.login-card{
  width:404px;max-width:calc(100vw - 32px);padding:var(--sp-8);
  max-height:calc(100dvh - 140px);overflow-y:auto;
  border:1px solid var(--card-border);border-radius:var(--r-2xl);
  background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg);
}
@media(min-width:1500px){.login-card{width:440px}}
@supports(backdrop-filter:blur(1px)){
  .login-card{background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:blur(20px) saturate(1.2)}
}

/* 风格轮播条 */
.style-strip{display:flex;align-items:center;gap:var(--sp-2);height:30px;margin:-2px 0 14px;font-size:var(--fs-sm);color:var(--muted);min-width:0}
.style-strip[hidden]{display:none}
.ss-dots{display:inline-flex;gap:3px;flex:none}
.ss-dots i{display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:background var(--dur-3) var(--ease)}
.ss-name{font-weight:var(--fw-semibold);color:var(--ink);white-space:nowrap}
.ss-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.style-strip.swap{animation:strip-in .5s var(--ease) both}
@keyframes strip-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.login-intro h1{font-size:28px;font-weight:var(--fw-semibold);letter-spacing:var(--tracking-tight);line-height:var(--lh-snug);margin:0 0 var(--sp-3);color:var(--ink)}
.login-intro p{display:none}
.modal-title{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--muted);margin:0 0 var(--sp-4)}

/* 登录表单 */
.account-body fieldset{border:0;margin:0;padding:0;min-width:0}
.account-body label{display:block;margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-2)}
.account-body input{
  display:block;width:100%;min-height:52px;padding:0 var(--sp-4);
  border:1px solid var(--field-border);border-radius:var(--r-lg);
  background:var(--field);color:var(--ink);font-size:var(--fs-base);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.account-body input::placeholder{color:var(--field-placeholder);font-size:var(--fs-base)}
.account-body input:hover{border-color:var(--line-strong)}
.account-body input:focus{border-color:var(--accent);background:var(--surface);box-shadow:var(--focus-ring)}

.password-input{position:relative}
.password-input input{padding-right:56px}
.password-visibility{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;display:grid;place-items:center;color:var(--muted);border-radius:var(--r-md);transition:background var(--dur-1),color var(--dur-1)}
.password-visibility:hover{background:var(--accent-soft);color:var(--ink)}
.password-visibility svg{width:20px;height:20px}

.account-body .primary{
  width:100%;margin-top:var(--sp-5);min-height:52px;border-radius:var(--r-lg);
  font-size:var(--fs-base);font-weight:var(--fw-medium);
  color:var(--accent-ink);background:var(--accent);box-shadow:none;
}
.account-links{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-5)}
.account-links button{font-size:var(--fs-sm);color:var(--link);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-1);transition:color var(--dur-1)}
.account-links button:hover{color:var(--ink)}
.email-code-row{display:flex;gap:8px;align-items:center}
.email-code-row input{min-width:0;flex:1}
.email-code-row button{flex:none;min-height:44px;padding:0 10px;border:1px solid var(--field-border);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--link);white-space:nowrap}
.email-code-row button:disabled{opacity:.5;cursor:default}
.form-note{font-size:var(--fs-sm);line-height:1.6;color:var(--muted);margin:12px 0 0}

.login-footer{position:absolute;left:var(--sp-10);right:var(--sp-10);bottom:var(--sp-4);z-index:2;display:flex;justify-content:space-between;align-items:center;color:var(--brand);font-size:var(--fs-sm);text-shadow:var(--brand-shadow)}
.site-language{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--brand)}
.site-language svg{width:16px;height:16px;opacity:.9}

/* ========================== 动效 ========================== */

@keyframes dot-breathe{0%,100%{opacity:.85}50%{opacity:.25}}
@keyframes tile-arrive{0%{opacity:.4}to{opacity:1}}
@keyframes surface-arrive{0%{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes slogan-in{0%{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}

@media(prefers-reduced-motion:no-preference){
  .work-wall{animation:tile-arrive .9s ease-out both}
  .login-card{animation:surface-arrive .35s var(--ease) .15s both}
  .login-intro h1{animation:slogan-in .6s var(--ease) .2s both}
  .theme-auto-dot{animation:dot-breathe 2.6s ease-in-out infinite}
  .wall-column:nth-child(2n){animation:wall-drift-a 16s ease-in-out infinite alternate}
  .wall-column:nth-child(3n){animation:wall-drift-b 21s ease-in-out infinite alternate}
  .wall-column:nth-child(5n){animation:wall-drift-a 26s ease-in-out infinite alternate-reverse}
}
@keyframes wall-drift-a{0%{transform:translateY(78px)}100%{transform:translateY(96px)}}
@keyframes wall-drift-b{0%{transform:translateY(85px)}100%{transform:translateY(66px)}}

/* ========================== 响应式 ========================== */

@media(max-height:650px){.login-footer{display:none}.login-brand{top:var(--sp-5)}}
@media(max-width:760px){
  .work-wall{grid-template-columns:repeat(4,230px);left:50%;right:auto;width:968px;transform:translateX(-50%);gap:var(--sp-3)}
  .wall-column{gap:var(--sp-3)}
  .wall-column:nth-child(n+5){display:none}
  .login-brand{top:var(--sp-4);left:var(--sp-5);right:var(--sp-5)}
  .login-brand>.tagline{display:none}
  .login-card{width:380px;padding:var(--sp-6) var(--sp-5) var(--sp-5);border-radius:var(--r-xl)}
  .login-intro h1{font-size:26px;letter-spacing:var(--tracking-tight)}
  .login-footer{left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-3)}
}
@media(max-width:430px){.login-card{width:min(100%,380px)}.login-intro h1{font-size:24px}}