/* ============================================================================
   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 }
.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 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;
}

/* ── 空态 / 加载态 ────────────────────────────────────────── */
.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 }
}