/* ============================================================================
   NoteStar 用户中心主题 ——「星澜·诺瓦」（深色星空）

   来源：用户提供的视觉参考稿，本文件是它在服务端的落地版。改动集中在三处：
     ① 删掉原稿里的内联 style，全部提成 class（服务端 CSP 是 `style-src 'self'`，
        内联样式会被浏览器直接拦掉 —— 现象是"本地看着好好的、部署后全乱"）
     ② 原稿的 `.toast` 是"单例 + .show 切换"的演示实现，这里改成适配 ui.js 的
        「.toasts 容器 + 多个 .toast」结构，与全站其它页面共用同一套轻提示
     ③ 末尾补上 ui.js 用到的组件（对话框 / 按钮变体 / 字段 / spinner）的深色版
        —— 这些在 base.css 里是浅色实现，本页不引 base.css（它的 body 布局与这里冲突）

   🔴 本文件与 base.css 是**两套并列的主题**，不是叠加关系：
      引了本文件就不要再引 base.css。改了 ui.js 里的类名，两处都要跟。
   🔴 颜色只用 :root 里的变量，不要在规则里写死色值。
   ============================================================================ */

:root {
  --bg: #080c20;
  --panel: #111832;
  --panel2: #151e3b;
  --line: #aab8ff28;
  --text: #f5f5ff;
  --muted: #a7b2d3;
  --purple: #c3b4ff;
  --cyan: #a0eff0;
  --gold: #f0d59a;
  --green: #9ce5c8;
  --danger: #ff9d9d;
  --radius: 18px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 85% 3%, #6a52b32c, transparent 28%),
    radial-gradient(ellipse at 8% 45%, #167b9b20, transparent 32%),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
/* 星尘层：纯装饰，不能挡住任何点击 */
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    radial-gradient(1px 1px at 10% 15%, #fff 50%, transparent 70%),
    radial-gradient(2px 2px at 75% 20%, #b7a7ff 50%, transparent 70%),
    radial-gradient(1px 1px at 45% 80%, #a0eff0 50%, transparent 70%);
  background-size: 260px 240px, 400px 370px, 500px 430px;
}

a { color: inherit; text-decoration: none }
button, input { font: inherit }
.hidden { display: none !important }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }

/* ── 骨架 ─────────────────────────────────────────────────── */
.shell { width: min(1240px, calc(100% - 36px)); margin: auto }
.topbar {
  height: 76px;
  border-bottom: 1px solid #c2caff17;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 850; letter-spacing: -.04em }
.brandmark {
  width: 40px; height: 40px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #d4c6ff, #8de7f0);
  color: #11152b; font-size: 23px;
  box-shadow: 0 0 26px #b3a4ff30;
}
.brand small { display: block; font-size: 9px; color: #8492bb; letter-spacing: .18em; margin-top: 3px }
.topnav { display: flex; align-items: center; gap: 25px; font-size: 12px; color: #aeb9d8 }
.topnav a.active { color: #eee9ff }
.topnav a:hover { color: #dcd6ff }
.topright { display: flex; align-items: center; gap: 9px }

.avatar-mini {
  width: 34px; height: 34px; overflow: hidden; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #c8b8ff, #9ce8ed);
  color: #15172d; font-weight: 800;
  border: 1px solid #d3c9ff66;
}
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30% }

/* ── 按钮 ─────────────────────────────────────────────────── */
.btn {
  border: 1px solid #b9c4ff36;
  background: #ffffff08;
  color: #f4f2ff;
  padding: 10px 15px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); border-color: #c9bdff8c }
.btn.primary { background: linear-gradient(110deg, #d2c4ff, #9be9ef); color: #12162c; border: 0 }
.btn--danger { border-color: #ff9d9d47; color: #ffc9c9; background: #ff9d9d0f }
.btn--danger:hover:not(:disabled) { border-color: #ff9d9d8c }
.btn--ghost { background: transparent; color: #c3cbe4 }
.btn--sm { padding: 7px 11px; font-size: 11px }
.btn:disabled { opacity: .5; cursor: not-allowed }
/* <a class="btn"> 没有 disabled，用 aria-disabled 顶 —— 半透明 + 不吃点击 */
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none }
.btn[aria-pressed="true"] { background: linear-gradient(110deg, #d2c4ff, #9be9ef); color: #12162c; border: 0 }

/* ── 两栏布局 ─────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 22px;
  padding: 30px 0 55px;
}
.sidebar {
  align-self: start;
  position: sticky;
  top: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #10162ce8;
  padding: 18px;
}
.profile-mini {
  padding: 12px 8px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 51px; height: 51px; flex: 0 0 51px;
  border-radius: 17px;
  display: grid; place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #d7caff, #8de7f0);
  color: #15172d; font-size: 25px;
  box-shadow: 0 0 25px #b7a5ff26;
  border: 1px solid #dfd6ff70;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 29% }
.profile-mini b { font-size: 13px; display: block; overflow-wrap: anywhere }
.profile-mini small { display: block; font-size: 10px; color: #9aa8cc; margin-top: 5px }
.navgroup { padding-top: 18px }
.navlabel { font-size: 9px; letter-spacing: .17em; color: #7180a9; padding: 0 10px 9px }
.sidelink {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 11px;
  border-radius: 11px;
  color: #aab5d5;
  font-size: 12px;
  margin: 3px 0;
  cursor: pointer;
  border: 1px solid transparent;
}
.sidelink .ico { width: 22px; text-align: center; font-size: 16px; color: #b9b0ff }
.sidelink.active { background: linear-gradient(100deg, #9f91ff20, #a0e9f00c); border-color: #b7adff24; color: #fff }
.sidelink:hover { background: #ffffff08 }
/* 管理后台入口：跟普通项目在视觉上分层（琥珀色 = 跨到另一个区域，不是本页锚点） */
.sidelink--admin { color: #d9c08a; border-color: #d9c08a1f; background: #d9c08a0a }
.sidelink--admin .ico { color: #f0c96b }
.sidelink--admin:hover { background: #d9c08a16; color: #f5dda6 }
.sidehint {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid #a7a4ff26;
  border-radius: 14px;
  background: linear-gradient(135deg, #a99bff0e, #91e8f00a);
}
.sidehint b { font-size: 11px }
.sidehint p { font-size: 10px; line-height: 1.8; color: #a2afd0; margin: 7px 0 0 }

.main { min-width: 0 }

/* ── 欢迎区 ───────────────────────────────────────────────── */
.welcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 21px }
.eyebrow { font-size: 10px; color: #b7a8ff; letter-spacing: .19em; font-weight: 800 }
.welcome h1 { font-size: 30px; letter-spacing: -.055em; margin: 8px 0 }
.welcome p { font-size: 12px; color: #a6b2d3; line-height: 1.8; margin: 0 }
.datebox {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px 14px;
  background: #ffffff04;
  text-align: right;
  flex: 0 0 auto;
}
.datebox small { display: block; font-size: 9px; color: #7e8cb4; letter-spacing: .12em }
.datebox b { display: block; font-size: 12px; margin-top: 5px }

/* ── 看板娘 Hero ──────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  border: 1px solid #b9b1ff37;
  border-radius: 22px;
  padding: 24px 22px 14px 29px;
  background:
    radial-gradient(ellipse at 83% 50%, #8b78ff35, transparent 40%),
    linear-gradient(110deg, #171d3a, #11172d 65%, #171a36);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.hero:before { content: "✧"; position: absolute; right: 25%; top: -66px; font-size: 240px; color: #c2b6ff08 }
.hero-copy { position: relative; z-index: 1; max-width: 570px }
/* 首页那张更大一点：它是第一眼，得让人看清"这是个什么"。
   账号页也用 .hero，所以只给首页加 hero--home，别一把改掉别人。 */
.hero--home { min-height: 306px }
.hero--home h2 { font-size: 26px; line-height: 1.35 }
.hero--home p { font-size: 12px; max-width: 500px }
.hero h2 { font-size: 23px; line-height: 1.4; margin: 12px 0 7px; letter-spacing: -.04em }
.hero p { font-size: 11px; line-height: 1.9; color: #aebada; max-width: 480px; margin: 0 }
.hero-actions { display: flex; gap: 9px; margin-top: 17px; flex-wrap: wrap }
.mascotbox {
  width: 258px; height: 300px; flex: 0 0 258px;
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  align-self: stretch;
  margin-top: -3px; margin-bottom: -3px;
  min-width: 0;
}
.orb {
  position: absolute;
  width: 235px; height: 235px;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  border: 1px solid #b9a9ff48;
  border-radius: 50%;
  box-shadow: 0 0 0 19px #b9a9ff09, 0 0 62px #9485ff2d;
}
.mascot-art {
  position: relative; z-index: 1;
  height: 300px; width: auto; max-width: 122%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 0 26px #a998ff38);
  animation: float 5s ease-in-out infinite;
}
.mascot-label {
  position: absolute; z-index: 2;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px; letter-spacing: .12em;
  color: #d2c9ff;
  white-space: nowrap;
  background: #10152bd9;
  border: 1px solid #c0b4ff27;
  border-radius: 99px;
  padding: 5px 8px;
}
.mascot-note {
  position: absolute; z-index: 3;
  top: 26px; right: -2px;
  max-width: 152px;
  padding: 10px 12px;
  border-radius: 14px 14px 4px 14px;
  background: #f5f1ff;
  color: #302b58;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.75;
  box-shadow: 0 8px 24px #03050b44;
  transform: rotate(2deg);
}
.mascot-note:after {
  content: "";
  position: absolute;
  right: 17px; bottom: -6px;
  border-width: 7px 0 0 8px;
  border-style: solid;
  border-color: #f5f1ff transparent transparent transparent;
}
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
}

/* ── 状态卡 ───────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 17px 0 }
.stat {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px;
  background: #11172ce8;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-icon {
  width: 39px; height: 39px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #aaa0ff14;
  color: #c5b8ff;
  font-size: 19px;
  flex: 0 0 39px;
}
.stat small { font-size: 10px; color: #8f9ec4; display: block }
.stat b { display: block; font-size: 17px; margin-top: 4px }
.stat em { font-style: normal; color: #8ddfc8; font-size: 9px; margin-left: 5px }
.stat em.is-warn { color: #f0d59a }
.stat em.is-danger { color: #ff9d9d }

/* ── 面板 ─────────────────────────────────────────────────── */
.columns { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 15px }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #11172ce8;
  padding: 20px;
  min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px }
.panel-head h3 { font-size: 14px; margin: 0 }
.panel-head a { font-size: 10px; color: #bdb0ff }
.panel-head a:hover { color: #d9d0ff }
.muted { font-size: 10px; color: #8594b8 }

/* ── 账号资料展示（昵称 + 头像；只读，产地是桌面端）────────────── */
.profile-view {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 0 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid #b7c2ff14;
}
.profile-avatar {
  width: 64px; height: 64px; flex: 0 0 64px;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(140deg, #c3b4ff33, #a0eff033);
  border: 1px solid #b9c4ff36;
  color: #e7e2ff;
  font-size: 22px;
  font-weight: 800;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block }
.profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px }
.profile-meta b { font-size: 14px; overflow-wrap: anywhere }
.profile-meta small { color: #8594b8; font-size: 10px; line-height: 1.6 }

.account-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #b7c2ff14 }
.account-row:last-child { border-bottom: 0 }
.row-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: #a9a0ff12;
  color: #c9bfff;
}
.row-content { flex: 1; min-width: 0 }
.row-content b { display: block; font-size: 11px }
.row-content small { display: block; color: #8f9ec0; font-size: 10px; margin-top: 4px; overflow-wrap: anywhere }
.row-content small.idtext { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em }

.pill {
  font-size: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid #9ce5c82d;
  color: #9ce5c8;
  background: #9ce5c80b;
  white-space: nowrap;
}
.pill.gold { color: #f0d59a; border-color: #f0d59a30; background: #f0d59a0a }
.pill.grey { color: #98a4c4; border-color: #98a4c42d; background: #98a4c40a }
.pill.danger { color: #ff9d9d; border-color: #ff9d9d30; background: #ff9d9d0a }

/* ── 设备 ─────────────────────────────────────────────────── */
.device {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #b7c2ff17;
  border-radius: 13px;
  background: #ffffff03;
  margin-top: 10px;
}
.deviceicon {
  width: 37px; height: 37px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: #a0e9f011;
  color: #9ce9f1;
  font-size: 18px;
  flex: 0 0 37px;
}
.device b { display: block; font-size: 11px }
.device small { display: block; color: #8d9cbe; font-size: 9px; margin-top: 4px }
.device .device-body { min-width: 0; flex: 1 }
.device .pill { margin-left: auto; flex: 0 0 auto }
.device-actions { display: flex; gap: 7px; flex: 0 0 auto }

.privacy {
  margin-top: 15px;
  border: 1px solid #91e6d51f;
  border-radius: 15px;
  padding: 15px;
  background: #8ce4d008;
}
.privacy-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700 }
.privacy-head .dot { color: #9ce5c8 }
.privacy p { font-size: 10px; line-height: 1.8; color: #9faccb; margin: 8px 0 0 }
.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  gap: 12px;
}
.privacy-row span { font-size: 10px; color: #aab6d5 }

/* ── 动态 ─────────────────────────────────────────────────── */
.activity { display: flex; gap: 11px; padding: 10px 0 }
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9ce9f1;
  box-shadow: 0 0 10px #9ce9f16b;
  margin-top: 4px;
  flex: 0 0 8px;
}
.activity-dot.purple { background: #c4b4ff; box-shadow: 0 0 10px #c4b4ff6b }
.activity-dot.gold { background: #f0d59a; box-shadow: 0 0 10px #f0d59a6b }
.activity b { font-size: 10px; display: block }
.activity small { font-size: 9px; color: #8e9dbf; display: block; margin-top: 4px }
.activity > div { min-width: 0 }

/* ── 页脚 ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid #b7c2ff16;
  padding: 22px 0 28px;
  color: #7180a5;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 页脚里的隐私 / 条款链接：默认 a 是 inherit + 无下划线，和周围同色就"看不见"了 */
.footer a {
  color: #9aa8cc;
  text-decoration: underline;
  text-decoration-color: #9aa8cc45;
  text-underline-offset: 2px;
}
.footer a:hover { color: #dcd6ff; text-decoration-color: #dcd6ff }

/* ── 正文里的站内链接 ─────────────────────────────────────── */
/* 同上：.panel 里出现 <a> 的地方（隐私说明、条款正文）必须一眼看出可点。
   🔴 排除 .btn —— 按钮也是 <a>，套上下划线会直接毁掉按钮样式 */
.panel a:not(.btn) {
  color: #bdb0ff;
  text-decoration: underline;
  text-decoration-color: #bdb0ff59;
  text-underline-offset: 2px;
}
.panel a:not(.btn):hover { color: #ded4ff; text-decoration-color: #ded4ff }

/* 提示块（notice--ok/warn/danger）有自己的语义色，里面塞紫字会很跳 ——
   跟随提示本身的颜色，只用下划线表达"这里能点" */
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px }
.notice a:hover { opacity: .82 }

/* ── 空态 / 加载态 ────────────────────────────────────────── */
.empty {
  padding: 22px 0;
  text-align: center;
  color: #8594b8;
  font-size: 11px;
  line-height: 1.9;
}

/* ============================================================================
   以下是 ui.js 用到的组件在**深色主题下**的实现。
   base.css 里对应的浅色版本不参与本页（本页不引 base.css）。
   🔴 改 ui.js 的类名 → 两处都要改。
   ============================================================================ */

/* 轻提示：容器 + 多条堆叠 */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: 92vw;
}
.toasts .toast {
  border: 1px solid #b9c2ff40;
  border-radius: 12px;
  background: #171e39;
  padding: 12px 17px;
  font-size: 11px;
  box-shadow: 0 12px 40px #0006;
  color: #eef1ff;
  animation: toastIn .18s ease-out;
}
.toasts .toast--ok { border-color: #9ce5c855; color: #d9f6ec }
.toasts .toast--warn { border-color: #f0d59a55; color: #fdf0d5 }
.toasts .toast--danger { border-color: #ff9d9d66; color: #ffe2e2 }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px) }
  to { opacity: 1; transform: translateY(0) }
}

/* 对话框（promptDialog / infoDialog 用的是原生 <dialog>） */
dialog.modal {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid #b9c2ff30;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  box-shadow: 0 24px 80px #0009;
}
dialog.modal::backdrop { background: #04060fb3; backdrop-filter: blur(3px) }
.modal__head { padding: 20px 20px 0 }
.modal__title { font-size: 14px; margin: 0 }
.modal__body { padding: 12px 20px 4px; color: #b9c4e0; font-size: 12px }
.modal__body .muted { font-size: 11px; line-height: 1.9; color: #98a5c6; margin: 0 0 12px }
.modal__foot { padding: 16px 20px 20px; display: flex; justify-content: flex-end; gap: 9px }

/* 表单字段（对话框里的输入框） */
.field { display: flex; flex-direction: column; gap: 7px }
.field label { font-size: 11px; color: #a7b2d3 }
.field input {
  border: 1px solid #b9c4ff36;
  border-radius: 11px;
  background: #ffffff0a;
  color: var(--text);
  padding: 11px 13px;
  font-size: 12px;
}
.field input:focus { outline: none; border-color: #c9bdff8c }

/* 徽章（site.js 会创建 .tag —— 门户首页的服务状态标记就是它） */
.tag {
  display: inline-block;
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid #98a4c42d;
  background: #98a4c40c;
  color: #a9b4d2;
  white-space: nowrap;
}
.tag--ok { border-color: #9ce5c82d; background: #9ce5c80b; color: #9ce5c8 }
.tag--warn { border-color: #f0d59a30; background: #f0d59a0a; color: #f0d59a }
.tag--danger { border-color: #ff9d9d33; background: #ff9d9d0f; color: #ff9d9d }
.tag--brand { border-color: #c3b4ff33; background: #c3b4ff0f; color: #c3b4ff }

/* 提示条（页面级说明 / 结果反馈） */
.notice {
  border: 1px solid #b9c2ff2b;
  border-radius: 12px;
  background: #ffffff06;
  padding: 12px 14px;
  font-size: 11px;
  line-height: 1.8;
  color: #b9c4e0;
  margin: 0 0 14px;
}
.notice--ok { border-color: #9ce5c82b; background: #9ce5c80a; color: #cdf0e0 }
.notice--warn { border-color: #f0d59a2b; background: #f0d59a0a; color: #f2e2c2 }
.notice--danger { border-color: #ff9d9d33; background: #ff9d9d0d; color: #f7d2d2 }

/* 字段下方的说明文字 / 校验错误 */
.field__hint { font-size: 10px; line-height: 1.7; color: #8594b8; margin: 7px 0 0 }
.center { text-align: center }
.btn--block { width: 100%; display: flex; justify-content: center }

/* 窄栏页（登录 / 注册 / 验证 / 找回密码）：居中的单列卡片 */
.auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 44px 0 70px;
}
.auth > .panel { width: min(470px, 100%) }
.auth h1 { font-size: 21px; letter-spacing: -.04em; margin: 0 0 8px }
.auth .lead { font-size: 11px; color: #a6b2d3; line-height: 1.9; margin: 0 0 20px }
.auth form .field + .field { margin-top: 14px }
.auth form .btn { margin-top: 20px }
.auth-foot { margin: 18px 0 0; font-size: 11px; color: #8f9ec0; text-align: center; line-height: 1.9 }
.auth-foot a { color: #c3b4ff }
.auth-foot a:hover { color: #ded4ff }

/* 门户首页：三列介绍卡 + 服务状态行 + 简单列表 */
/* auto-fit 让窄屏自动折行，不必再写一条 media query */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px;
  margin: 17px 0;
}
.service-line { margin-top: 14px; font-size: 11px; color: #a6b2d3 }
.plain-list { margin: 8px 0 0; padding-left: 17px; font-size: 11px; line-height: 2.1; color: #a6b2d3 }

/* busy() 用的转圈 */
.spinner {
  display: inline-block;
  width: 11px; height: 11px;
  border: 2px solid #ffffff40;
  border-top-color: #ffffffd0;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* ── 反馈页（feedback.html）───────────────────────────────────
   `.field input` 只覆盖了单行输入框；反馈页要用 select 和 textarea，
   给它们同一套外观，否则那一块会露出浏览器默认的浅色控件，深色页上非常突兀。 */
.field select,
.field textarea {
  border: 1px solid #b9c4ff36;
  border-radius: 11px;
  background: #ffffff0a;
  color: var(--text);
  padding: 11px 13px;
  font-size: 12px;
  font-family: inherit;
}
.field select:focus,
.field textarea:focus { outline: none; border-color: #c9bdff8c }
.field select option { background: #171b2a; color: #e6e9f5 }
.field textarea { resize: vertical; min-height: 130px; line-height: 1.9 }

.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px }
.fb-opt { color: #7d89a8 }
.fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px }
.fb-item {
  border: 1px solid #b7c2ff17;
  border-radius: 13px;
  padding: 13px 14px;
  margin-bottom: 9px;
  background: #ffffff04;
}
.fb-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px }
.fb-text {
  font-size: 12px;
  line-height: 1.95;
  color: #c8d1e8;
  margin: 0;
  white-space: pre-wrap;   /* 用户在 textarea 里敲的换行要保留 */
  word-break: break-word;
}
.fb-item-foot { margin-top: 9px }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ── 响应式 ───────────────────────────────────────────────── */
@media (max-width: 940px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); gap: 14px }
  .topnav { gap: 13px }
  .columns { grid-template-columns: 1fr }
  .hero { padding: 22px }
  .mascotbox { width: 205px; flex-basis: 205px; height: 270px; margin-right: -5px }
  .mascot-art { height: 270px; max-width: 132% }
  .orb { width: 185px; height: 185px; top: 42px }
  .mascot-note { max-width: 132px; font-size: 9px }
  .stats { gap: 9px }
  .stat { padding: 13px; gap: 8px }
}
@media (max-width: 680px) {
  .shell { width: calc(100% - 24px) }
  .topbar { height: 65px }
  .topnav { display: none }
  .layout { display: block; padding-top: 19px }
  .sidebar { position: static; padding: 10px; margin-bottom: 16px }
  .profile-mini { padding: 6px 7px 11px; border-bottom: 0 }
  .navgroup { padding-top: 8px; display: flex; overflow: auto; gap: 5px }
  .navlabel, .sidehint { display: none }
  .sidelink { white-space: nowrap; padding: 9px 11px; margin: 0 }
  .sidelink .ico { width: auto }
  .welcome { align-items: flex-start }
  .welcome h1 { font-size: 25px }
  .datebox { display: none }
  .hero { min-height: 280px; padding: 20px; align-items: flex-start }
  .hero h2 { font-size: 19px; max-width: 95% }
  .hero p { max-width: 320px }
  .mascotbox {
    position: absolute; right: -7px; bottom: 0;
    width: 150px; height: 196px;
    opacity: .80; margin: 0; pointer-events: none;
  }
  .mascot-art { height: 220px; max-width: 100% }
  .orb { width: 136px; height: 136px; top: 30px }
  .mascot-note { display: none }
  .mascot-label { font-size: 7px; bottom: 3px }
  .hero-copy { max-width: 88%; z-index: 2 }
  .stats { grid-template-columns: 1fr; gap: 9px }
  .stat { padding: 13px }
  .columns { gap: 12px }
  .panel { padding: 16px }
  .footer { font-size: 9px }
  .fb-grid { grid-template-columns: 1fr }
}

/* ═══════════════════════════════════════════════════════════════
   API 服务（模型广场 / 我的 API）
   —— 命名统一带 api- 前缀，避免和账号页的类打架。
   颜色只取 :root 变量；有渐变的地方一律自己算色值，
   不依赖任何外部图源（CSP 是 img-src 'self' data:）。
   ═══════════════════════════════════════════════════════════════ */

.api-page { max-width: 1060px }

/* ── 页头 ───────────────────────────────────────────────────── */
.api-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 4px 0 24px;
  flex-wrap: wrap;
}
.api-head__title { min-width: 0 }
.api-head h1 { font-size: 27px; line-height: 1.25; margin: 6px 0 8px; letter-spacing: -.012em }
.api-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; max-width: 56ch }
.api-head__side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }

/* ── 通用卡片 ───────────────────────────────────────────────── */
.api-block {
  border: 1px solid #b7c2ff1c;
  border-radius: 17px;
  background: linear-gradient(180deg, #131a32f2, #0d1327f2);
  padding: 18px;
  margin-bottom: 16px;
}
.api-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.api-block__head h2 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  letter-spacing: .02em;
  color: #e6e9ff;
}
.api-block__head span { font-size: 10px; color: #8594b8 }
.api-block__note { font-size: 10px; color: #8594b8; line-height: 1.7; margin: 12px 0 0 }

/* ── 余额 ───────────────────────────────────────────────────── */
.api-wallet {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
}
.api-wallet__main {
  border: 1px solid #f0d59a26;
  border-radius: 15px;
  padding: 18px 20px;
  background:
    radial-gradient(120% 140% at 100% 0%, #f0d59a14, transparent 55%),
    #0f1428f2;
}
.api-wallet__main small { display: block; font-size: 9px; letter-spacing: .12em; color: #9aa6c9 }
.api-wallet__main b {
  display: block;
  font-size: 34px;
  line-height: 1.1;
  margin: 6px 0 4px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -.02em;
}
.api-wallet__main em { font-style: normal; font-size: 11px; color: #8594b8 }
.api-wallet__side {
  border: 1px solid #b7c2ff17;
  border-radius: 15px;
  padding: 16px 18px;
  background: #0c1124a8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.api-wallet__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.api-wallet__row span { font-size: 10px; color: #8594b8 }
.api-wallet__row b { font-size: 17px; color: var(--text); font-weight: 600 }

/* ── 新用户礼包 ─────────────────────────────────────────────── */
.api-gift {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #f0d59a3d;
  border-radius: 16px;
  padding: 15px 18px;
  margin-bottom: 16px;
  background:
    radial-gradient(90% 160% at 0% 50%, #f0d59a12, transparent 60%),
    #10152af2;
  flex-wrap: wrap;
}
.api-gift__mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--gold);
  background: #f0d59a14;
  border: 1px solid #f0d59a33;
}
.api-gift__copy { flex: 1; min-width: 180px }
.api-gift__copy b { display: block; font-size: 13px; margin-bottom: 4px }
.api-gift__copy p { margin: 0; font-size: 10px; line-height: 1.7; color: #9aa6c9 }

/* ── 模型卡 ─────────────────────────────────────────────────── */
.api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 12px }

.api-card {
  border: 1px solid #b7c2ff1c;
  border-radius: 16px;
  background: #10162af2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  transition: border-color .18s ease, transform .18s ease;
}
.api-card:hover { border-color: #b7c2ff3d; transform: translateY(-1px) }
.api-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.api-card__top h3 { margin: 0; font-size: 14px; font-weight: 600 }

.api-badge {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid #9ce5c82d;
  color: #9ce5c8;
  background: #9ce5c80b;
  white-space: nowrap;
}
.api-badge--gold { color: var(--gold); border-color: #f0d59a30; background: #f0d59a0a }
.api-badge--grey { color: #98a4c4; border-color: #98a4c42d; background: #98a4c40a }

/* 模型 ID 是这一页最该被复制的东西，做成整行可点 */
.api-id {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  color: var(--cyan);
  background: #a0eff008;
  border: 1px dashed #a0eff02b;
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.api-id:hover { background: #a0eff016; border-color: #a0eff05c }
.api-id span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.api-id small { font-size: 9px; color: #8594b8; flex: 0 0 auto }

/* 指标解释条：把「最大上下文」这类术语当场讲清楚，别指望用户去查 */
.api-hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid #b7c2ff14;
  background: #0b1022;
  font-size: 11px;
  line-height: 1.8;
  color: #8594b8;
}
.api-hint b { color: #dbe3ff; font-weight: 600 }

/* 最大上下文等硬指标：独立一行，比脚注显眼，但不抢价格的位置 */
.api-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 0;
  border-top: 1px solid #b7c2ff14;
  border-bottom: 1px solid #b7c2ff14;
}
.api-spec { display: flex; align-items: baseline; gap: 6px; min-width: 0 }
.api-spec span { font-size: 9.5px; color: #8594b8; white-space: nowrap }
.api-spec b { font-size: 12.5px; color: #dbe3ff; font-weight: 600 }
.api-spec--unknown b { color: #6d7a9c; font-weight: 500 }

.api-card__price { display: flex; gap: 18px }
.api-card__price div { display: flex; align-items: baseline; gap: 4px }
.api-card__price span { font-size: 9px; color: #8594b8 }
.api-card__price b { font-size: 13px; color: var(--gold); font-weight: 600 }
.api-card__price em { font-style: normal; font-size: 9px; color: #6d7a9c }

.api-card__foot { font-size: 9.5px; color: #8594b8; margin-top: auto }

/* ── 代码块 ─────────────────────────────────────────────────── */
.api-snippet {
  margin: 0;
  padding: 13px 14px;
  border-radius: 12px;
  background: #05081a;
  border: 1px solid #b7c2ff12;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.85;
  color: #c9d4f5;
  overflow-x: auto;
  white-space: pre;
}

/* ── 三步上手 ───────────────────────────────────────────────── */
.api-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.api-step {
  border: 1px solid #b7c2ff14;
  border-radius: 13px;
  padding: 13px 14px;
  background: #0c1124a8;
}
.api-step b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  margin-bottom: 6px;
  color: #ddd6ff;
  font-weight: 600;
}
.api-step b i {
  font-style: normal;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  background: #c3b4ff1f;
  color: var(--purple);
  flex: 0 0 auto;
}
.api-step p { margin: 0; font-size: 10px; color: #8594b8; line-height: 1.7 }

/* ── 密钥行 ─────────────────────────────────────────────────── */
.api-keyrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #b7c2ff14;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #0c1124a8;
}
.api-keyrow:last-child { margin-bottom: 0 }
.api-keyrow .grow { flex: 1; min-width: 0 }
.api-keyrow .name { font-size: 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
.api-keyrow .meta {
  font-size: 9px;
  color: #8594b8;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 新建 key 只显示一次，用醒目边框告诉用户"这段要现在抄走" */
.api-keybox {
  border: 1px solid #f0d59a4d;
  background: #f0d59a0a;
  border-radius: 12px;
  padding: 13px;
  margin: 10px 0;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--gold);
  line-height: 1.6;
}

/* ── 套餐 ───────────────────────────────────────────────────── */
.api-plan {
  border: 1px solid #b7c2ff1c;
  border-radius: 15px;
  background: #10162af2;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.api-plan__price { display: flex; align-items: baseline; gap: 8px }
.api-plan__price b { font-size: 23px; font-weight: 600; letter-spacing: -.02em }
.api-plan__price small { font-size: 10px; color: #8594b8 }
.api-plan__meta { font-size: 10px; color: #8594b8; line-height: 1.7 }

/* ── 表格 ───────────────────────────────────────────────────── */
.api-table { width: 100%; border-collapse: collapse; font-size: 11px }
.api-table th {
  text-align: left;
  font-weight: 500;
  font-size: 9px;
  color: #7d8aad;
  letter-spacing: .07em;
  padding: 0 10px 9px;
  border-bottom: 1px solid #b7c2ff12;
  white-space: nowrap;
}
.api-table td { padding: 11px 10px; border-bottom: 1px solid #b7c2ff0c; vertical-align: middle }
.api-table tr:last-child td { border-bottom: 0 }

/* ── 工具条 ─────────────────────────────────────────────────── */
.api-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.api-toolbar:last-child { margin-bottom: 0 }

@media (max-width: 860px) {
  .api-wallet { grid-template-columns: 1fr }
  .api-steps { grid-template-columns: 1fr }
  .api-grid { grid-template-columns: 1fr }
  .api-head h1 { font-size: 22px }
  .api-wallet__main b { font-size: 28px }
}

/* 免费模型：用绿色区分，避免和金色的"付费价"混在一起看 */
.api-badge--free { color: #9ce5c8; border-color: #9ce5c85c; background: #9ce5c814; font-weight: 600 }
.api-price-free { color: #9ce5c8 !important }

/* ── 模型广场：搜索与分组（参照 new-api 的 Model Square 组织方式）───── */
.api-tools {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.api-search { flex: 1; min-width: 200px }
.api-search input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid #b7c2ff1f;
  background: #0c1124cc;
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border-color .15s ease;
}
.api-search input::placeholder { color: #6d7a9c }
.api-search input:focus { border-color: #c3b4ff4d }

.api-chips { display: flex; gap: 6px; flex-wrap: wrap }
.api-chip {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid #b7c2ff1c;
  background: #0c1124a8;
  color: #9aa6c9;
  font-size: 10.5px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.api-chip:hover { border-color: #b7c2ff3d; color: #cfd8f5 }
.api-chip[aria-pressed='true'] {
  border-color: #c3b4ff66;
  background: #c3b4ff1a;
  color: #ddd6ff;
}

.api-group { margin-bottom: 24px }
.api-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid #b7c2ff12;
}
.api-group__head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #cfd8f5;
}
.api-group__head span { font-size: 9.5px; color: #7d8aad }

/* ── 接入指南 ───────────────────────────────────────────────── */
.api-base {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #a0eff02b;
  border-radius: 12px;
  background: #05081a;
  padding: 11px 14px;
  margin-bottom: 18px;
}
.api-base code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--cyan);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.api-base code::-webkit-scrollbar { display: none }

.api-guide { display: flex; flex-direction: column; gap: 20px }
.api-guide h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 600;
  color: #ddd6ff;
}
.api-guide h4 i {
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  background: #c3b4ff1f;
  color: var(--purple);
  flex: 0 0 auto;
}
.api-guide ol {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.9;
  color: #9aa6c9;
}
.api-guide ol b { color: #cfd8f5; font-weight: 600 }
.api-guide p { margin: 0 0 10px; font-size: 10.5px; line-height: 1.75; color: #8594b8 }

.api-code-tabs { display: flex; gap: 6px; margin-bottom: 8px }
.api-code {
  max-height: 300px;
  overflow: auto;
}

.api-tips {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 10.5px;
  line-height: 1.85;
  color: #8594b8;
}
.api-tips li { margin-bottom: 7px }
.api-tips b { color: #cfd8f5; font-weight: 600 }

/* ── 下载区（首页 + 下载页共用） ────────────────────────────────
   两张卡并排：安卓（主推，带强调边框）和 Windows。
   信息顺序刻意是「平台 → 版本/体积/日期 → 按钮 → 一句警告」，
   因为用户来这儿只关心三件事：能不能装、多大、安不安全。 */
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff06, #ffffff02);
}
/* 主推的那张只加一点边框光，不换配色 —— 换配色会变成"另一个产品" */
.dl-card--main {
  border-color: #b9b1ff52;
  background: linear-gradient(160deg, #1a2144, #141a33);
}
.dl-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.dl-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 11px;
  color: var(--muted);
}
.dl-card__meta b { color: #dbe3ff; font-weight: 700 }
.dl-card .btn { align-self: flex-start; margin-top: 2px }
.dl-card__hint {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.75;
  color: #8594b8;
}
.dl-card__hint b { color: #cfd8f5; font-weight: 600 }
/* 下载区的标题行：左边小标题，右边"全部下载"这类次级动作 */
.dl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dl-head .panel-head { margin-bottom: 0 }
/* 🔴 CSP 是 style-src 'self'，内联 style 会被浏览器直接拦掉。
   需要一点点间距就加类，不要在 HTML 里写 style="" */
.hint-tight { margin-top: 10px }

@media (max-width: 860px) {
  .dl-grid { grid-template-columns: 1fr }
}