/* Utlra 登录 / 注册页主题（与落地页 v6 同一套：纯黑 + 暖白 + logo 紫）
   通过 nginx sub_filter 注入应用 HTML；只在 html.utra-auth 下生效，不影响控制台 */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }

html.utra-auth {
  --u-bg: #000;
  --u-ivory: #ece8e1;
  --u-ivory-2: #a19d96;
  --u-ivory-3: #67645f;
  --u-line: rgba(236, 232, 225, .1);
  --u-line-2: rgba(236, 232, 225, .2);
  --u-key: #8a83ff;
  --u-serif: 'Instrument Serif', 'Songti SC', 'Noto Serif SC', 'STSong', serif;
  --u-sans: 'Inter', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 覆盖应用的主题变量，输入框、按钮、提示框随之变黑 */
  color-scheme: dark;
  --background: #000;
  --foreground: #ece8e1;
  --card: #0a0a0a;
  --card-foreground: #ece8e1;
  --popover: #0a0a0a;
  --popover-foreground: #ece8e1;
  --primary: #ece8e1;
  --primary-foreground: #000;
  --secondary: #141414;
  --secondary-foreground: #ece8e1;
  --muted: #141414;
  --muted-foreground: #8b8780;
  --accent: #141414;
  --accent-foreground: #ece8e1;
  --border: rgba(236, 232, 225, .14);
  --input: rgba(236, 232, 225, .16);
  --ring: #8a83ff;
  --radius: 0px;
  background: #000;
}
html.utra-auth body {
  background: #000; color: var(--u-ivory);
  font-family: var(--u-sans);
  -webkit-font-smoothing: antialiased;
}
html.utra-auth ::selection { background: var(--u-key); color: #fff; }

/* ── 左侧品牌面板（auth.js 插入到 body，位于 #root 之外） ── */
.utra-panel { display: none; }
html.utra-auth .utra-panel {
  display: flex; flex-direction: column; justify-content: space-between;
  position: fixed; inset: 0 auto 0 0; width: 50%; z-index: 1;
  padding: 36px 48px 32px; border-right: 1px solid var(--u-line);
  background:
    radial-gradient(520px 320px at 30% 60%, rgba(138, 131, 255, .05), transparent 70%),
    #000;
  overflow: hidden;
}
.utra-panel a { color: inherit; text-decoration: none; }
.utra-brand { display: inline-flex; align-items: center; gap: 9px; }
.utra-brand img { width: 15px; height: 15px; }
.utra-brand span { font: 400 20px/1 var(--u-serif); color: var(--u-ivory); }
.utra-label { font: 500 10.5px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--u-ivory-3); }
.utra-word {
  margin: 18px 0 0 -0.04em; font: 400 clamp(88px, 10vw, 150px)/.86 var(--u-serif);
  letter-spacing: -0.025em; color: var(--u-ivory);
}
.utra-word i { display: inline-block; width: .15em; height: .15em; margin-left: .05em; background: var(--u-key); }
.utra-line { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--u-line); max-width: 420px; font: 400 22px/1.35 var(--u-serif); color: var(--u-ivory); }
.utra-vows { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 11.5px; color: var(--u-ivory-3); }
.utra-vows span::before { content: '/ '; color: var(--u-line-2); }

/* ── 右侧：应用原有的表单 ── */
html.utra-auth #root { margin-left: 50%; position: relative; z-index: 2; }
html.utra-auth #root .h-svh > a[href="/"] { display: none; }   /* 品牌已在左侧面板 */
html.utra-auth #root .h-svh { background: transparent; }

html.utra-auth #root form { gap: 18px; }
html.utra-auth #root h2 {
  font: 400 34px/1.15 var(--u-serif) !important;
  letter-spacing: -0.01em !important; text-align: left !important; color: var(--u-ivory);
}
html.utra-auth #root h2 + p { font-size: 13px !important; color: var(--u-ivory-2) !important; }
html.utra-auth #root a { color: var(--u-ivory-2); text-decoration-color: var(--u-line-2); transition: color .2s; }
html.utra-auth #root a:hover { color: var(--u-ivory); }

html.utra-auth #root label {
  font: 500 10.5px ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: .16em; text-transform: uppercase; color: var(--u-ivory-3) !important;
}
html.utra-auth #root input {
  height: 44px !important; border-radius: 0 !important;
  background: transparent !important; border-color: var(--u-line-2) !important;
  color: var(--u-ivory) !important; font-size: 14px !important; padding-inline: 14px !important;
  box-shadow: none !important; transition: border-color .2s;
}
html.utra-auth #root input::placeholder { color: #4d4b47 !important; }
html.utra-auth #root input:focus { border-color: var(--u-ivory-2) !important; outline: none !important; }
html.utra-auth #root input:-webkit-autofill {
  -webkit-text-fill-color: var(--u-ivory) !important;
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  caret-color: var(--u-ivory);
}
html.utra-auth #root a[href="/forgot-password"] { font-size: 11.5px !important; top: -2px !important; }

/* 主按钮：象牙白直角，和落地页一致 */
html.utra-auth #root button[type="submit"] {
  height: 44px !important; border-radius: 0 !important; margin-top: 6px;
  background: var(--u-ivory) !important; color: #000 !important; border: 0 !important;
  font: 500 13px var(--u-sans) !important; letter-spacing: .06em;
  box-shadow: none !important; transition: background .25s;
}
html.utra-auth #root button[type="submit"]:hover { background: #fff !important; }
html.utra-auth #root button[type="submit"]:disabled { opacity: .5; }
/* 输入框里的“显示密码”按钮 */
html.utra-auth #root input + button { color: var(--u-ivory-3) !important; background: transparent !important; }
html.utra-auth #root input + button:hover { color: var(--u-ivory) !important; }
/* 其余次要按钮（第三方登录等） */
html.utra-auth #root button[type="button"]:not(input + button) { border-radius: 0 !important; }

/* ── 窄屏：面板改为顶部品牌条 ── */
@media (max-width: 900px) {
  html.utra-auth .utra-panel {
    position: relative; inset: auto; width: 100%; min-height: 0;
    padding: 22px 20px 26px; border-right: 0; border-bottom: 1px solid var(--u-line);
  }
  .utra-word { font-size: 64px; margin-top: 26px; }
  .utra-line { font-size: 17px; margin-top: 18px; padding-top: 16px; }
  .utra-vows, .utra-panel .utra-label { display: none; }
  html.utra-auth #root { margin-left: 0; }
  html.utra-auth #root .h-svh { height: auto; min-height: 0; }
  html.utra-auth #root .h-svh > div { padding-top: 8px; }
}