:root {
  --bg: #ffffff; --bg2: #f4fbf7; --text: #14171f; --muted: #5b6472; --line: #e6e9ee;
  --accent: #18c98a; --accent2: #d9f8ea; --glow: rgba(24,201,138,.45);
  --btn: #111111; --btntext: #ffffff; --hero1: #e8fbf2; --hero2: #ffffff;
  /* 页面底色 = **淡青色**,与 `home.html` **同一个值**(用户 2026-10-30:"背景颜色也是淡青色")。 */
  --ok: #12a06a; --err: #d9534f; --warn: #b26a00; --page: #e2f1f4;
  --radius: 18px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20,23,31,.05), 0 14px 34px -20px rgba(20,23,31,.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116; --bg2: #141a20; --text: #f2f4f7; --muted: #9aa3b0; --line: #252c36;
    --accent: #2ee6a6; --accent2: #12352a; --glow: rgba(46,230,166,.40);
    --btn: #ffffff; --btntext: #111111; --hero1: #10261f; --hero2: #0e1116;
    --ok: #2ee6a6; --err: #ff8b8b; --warn: #e0a458; --page: #080d0e;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 40px -22px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--page); color: var(--text); line-height: 1.65;
  font-family: Inter, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; }
sup { font-size: .5em; font-weight: 600; vertical-align: super; line-height: 0; margin-left: 1px; }

/* ------------------------------------------------------------ top bar -- */
header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { max-width: 1240px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; margin-right: 20px; white-space: nowrap; }
.brand svg { width: 30px; height: 30px; flex: none; }
.tabs { display: flex; align-items: center; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  padding: 8px 14px; border-radius: 8px; white-space: nowrap; cursor: pointer; transition: .18s; }
.tab:hover { background: var(--bg2); }
.tab.active { color: var(--accent); font-weight: 600; }
.right { display: flex; align-items: center; gap: 8px; }
.me { display: inline-flex; align-items: baseline; gap: 8px; color: var(--accent);
  font-size: 16px; font-weight: 600; white-space: nowrap; }
/* 昵称保持深色(与Home顶栏同一套;理由见 home.html 那段注释);它是个链接(点进自己的空间)。 */
.me-name { color: var(--text); text-decoration: none; }
.me-name:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------ buttons -- */
.btn { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 18px; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: .18s; }
.btn-primary { background: var(--btn); color: var(--btntext); }
.btn-primary:hover { opacity: .86; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--bg2); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* -------------------------------------------------------------- layout -- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 34px 24px 72px; }
/* 版面(2026-10-30 用户重新设计):**左右各占 50%**。
   左半 = 作者的最新 20 articlesArticles(**给访问者看的那一面**);
   右半从上到下 = 作者资料 → Columns and pieces →(My blocklist)→ Account settings。
   `minmax(0, 1fr)` 而不是 `1fr`:`1fr` 的**默认最小宽度是 auto**,长Title会把
   两栏顶得不相等;写成 minmax(0,…) 才真的各占一半。 */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px;
  align-items: start; }
/* 右半自己是一列(资料 / 管理 / 黑名单 / Account settings),块与块之间 18px。 */
.side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.crumbs a:hover { color: var(--accent); }

/* --------------------------------------------------------------- panel -- */
/* The MSN-Spaces cue: every block is a titled panel with its own header bar.
   **2026-10-30:板块与背景融为一体**(用户:"我想看到的各个板块与背景几乎融为一体,但是仍然
   整洁有序"):面板**不留白底、不留描边、不留投影**;底色交给共享表的 `.tint-*`
   (每个板块一张"略微不同色的纸",见 `prose/web/app.css`),所以Title栏本身不再刷底色、也没有下边框。
   结构靠:**Title条那一档同色相的底色** + Title的字重 + 行内细线(`.op { border-top }`)与间距。
   **浮层与控件保持不透明**:`.dialog`、输入框、按钮 */
.panel { background: transparent; border-radius: var(--radius); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.panel-head .count { color: var(--muted); font-size: 12px; }
.panel-body { padding: 20px; }

/* -------------------------------------------------------- profile card -- */
/* 资料卡版式(2026-10-30 用户):**头像 + (Username / 在线 / 签名)在左,三个统计在右**并列 ——
   一行装完;下面再来一行:**左 = Join日期,右 = 动作按钮**(自己的空间那儿就是「去My space」)。
   比原来"资料 / 签名 / 统计 / Columns小标 / 按钮"五行紧凑得多。 */
.identity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar { width: 64px; height: 64px; flex: none; border-radius: 20px; display: flex;
  align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--accent), #0f9c69); box-shadow: var(--shadow); }
.avatar.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
/* 名字那一块自己一列:能收缩(`min-width: 0`),这样长签名不会把右边的统计挤出去。 */
.identity .who { min-width: 0; flex: 1 1 220px; }
.identity h1 { margin: 0 0 2px; font-size: 22px; }
/* 在线状态(那一行"● 在线 / Last seen …")与它的圆点。 */
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.dot.on { background: var(--accent); box-shadow: 0 0 0 3px var(--accent2); }
/* 签名从"卡片下面单独一行"搬进这一列 —— 与Username / 在线状态同栏,读起来是一个人。
   注意它**不再**是 `.bio`(那个类连带 `margin: 14px 0 0` 的块级排版一起删了)。 */
.who .bio { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.who .bio.empty-bio { font-style: italic; opacity: .7; }
/* 统计:**并列在右边**(`margin-left: auto` 把它推到行尾),每项**竖排** ——
   上面数字、下面文字(用户 2026-10-30:"改为竖置,上面数字下面相应文字")。
   窄屏换行由 `flex-wrap` 兜住。 */
.stats { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-left: auto; align-items: flex-start; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.stat b { font-size: 19px; line-height: 1.25; }
.stat span { color: var(--muted); font-size: 12px; }
/* 卡片最后一行:Join日期在左、动作按钮在右。 */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Joined那一小句:**标签加粗**(`<b>Joined</b>`,颜色用正文色)、日期用灰字
   (`.joined` 本身是 muted)—— 冒号后的那一个空格写在 JS 里(`": " + text`),
   HTML 里连续空格会被折叠,所以空格必须在拼接时就带上。 */
.joined { color: var(--muted); font-size: 12.5px; }
.joined b { color: var(--text); font-weight: 700; }
/* `.actions` / `.friend-state`(连它的 `.ok` / `.err` 两档,以及 `.actions .btn` 那)**全删掉了**:
   它们唯一的用户是「加为Friends / 拉黑」那一行,而它已经搬去 `user_public.html`(那边自带一份)
   —— 这一页只服务"自己的空间"。`.btn-accent` 同批删:这一页没人挂(`.btn-primary` / `.btn-ghost`
   才是这里用的两个)。 */
/* `.chips` / `.chip`(Columns小标那一排,比如"个人杂谈 · 1")**整条删掉了**(2026-10-30 用户:
   "在Profile页去掉任何Columns相关的内容比如『个人杂谈 · 1』")—— Columns的条数仍在统计里
   (`1 Columns`),但**具体是哪些Columns**不再出现在资料卡上。 */

/* -------------------------------------------------------------- posts -- */
/* -------------------------------------------------------- misc states -- */
.empty { color: var(--muted); text-align: center; padding: 34px 20px; font-size: 14px; }
.skeleton { color: var(--muted); padding: 22px 20px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: 90vw; padding: 12px 20px;
  border-radius: 12px; background: var(--btn); color: var(--btntext); box-shadow: var(--shadow);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-bottom: 3px solid var(--ok); }
.toast.err { border-bottom: 3px solid var(--err); }

/* --------------------------------------- 自己的空间:管理控件(owner 模式) -- */
/* 「My articles」并进这一页了:Visibility=taking it down、下载、Delete —— 只在 is_me(看自己的空间)时出现。
   一次一篇;Delete要勾一次确认。 */
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-danger { background: var(--err); color: #fff; }
.btn-danger:hover:not(:disabled) { opacity: .88; }
/* `.rules`(那段"一次一篇…"的说明块)**删掉了**(2026-10-30 用户:那四行说明整段不要了,
   功能改成四个按钮)—— 它的三个选择器(`.rules` / `.rules b` / `.rules .warn`)在整页里
   再无用户,所以一起删,不留死规则。 */
/* 「Columns and pieces」每一行(用户 2026-10-30):**Title本身就是那个功能的入口** ——
   所以它是个 `<button class="op-title">`(键盘也能用、没有内联 handler),长得像链接;
   **说明跟在Title同一行、不加粗**,中间的三个空格是 `&nbsp;&nbsp;&nbsp;` 写出来的
   (HTML 会把连续普通空格折叠成一个,写不出来"三个空格")。
   —— 这一块曾被"删分页器 CSS"那一刀误伤过,现已补回(见那一处 cut 的教训:按标记切范围时,
   要确认两个标记之间**没有别人**)。 */
.op-line { display: flex; align-items: baseline; flex-wrap: wrap; }
.op-title { border: 0; background: none; padding: 0; margin: 0; font: inherit;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text);
  cursor: pointer; text-align: left; }
.op-title:hover { color: var(--accent); text-decoration: underline; }
.op-hint { color: var(--muted); font-size: 12.5px; font-weight: 400; }
/* Title下面那个选择器回答"做在Which piece上" —— 所以"一次一篇"仍然是**结构**,不是承诺。 */
.pick-select { display: block; width: 100%; margin-top: 9px; min-width: 0;
  max-width: 100%; text-overflow: ellipsis; }
.vis-select { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text); }

/* Delete的确认:对话框里写着删的是Which piece,还要勾一句「我知道」,按钮才可点。 */
.dialog-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(10,14,20,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialog-backdrop[hidden] { display: none; }
.dialog { background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); width: min(560px, 100%); padding: 22px 24px; }
.dialog h3 { margin: 0 0 8px; font-size: 18px; }
.dialog p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.dialog .what { color: var(--text); font-weight: 600; font-size: 15px; }
.dialog .ack { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; }
.dialog .ack input { margin-top: 3px; flex: none; }
/* Account settings:两行"说明 + 按钮"(改Password / Delete)。Delete那行用危险色,与「Delete」一致。 */
.ops { display: flex; flex-direction: column; gap: 2px; }
.op { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 16px; border-top: 1px solid var(--line); }
.op:first-child { border-top: 0; }
.op b { font-size: 14.5px; }
.op p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 62ch; }
.op.danger b { color: var(--err); }
.op button { flex: none; }
/* 「Saved」:最多显示 **10 articles**,再多就在面板内部滚动(用户 2026-11-02:"Save夹要控制高度,
   最多显示十篇,多余的滑动滑轨显示")。每行 ≈ 一条 `.op`(Title + 作者/SaveTime)。 */
#bookmarkList { max-height: 620px; overflow-y: auto; }
/* Delete对话框里的两条风险告知:编号,免得被一眼扫过去。 */
.deactivate-risks { margin: 10px 0 14px; padding-left: 18px; }
.deactivate-risks p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.deactivate-risks b { color: var(--text); }
.dialog .field { display: block; font-size: 13.5px; color: var(--text); }
.dialog .field span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12.5px; }
.dialog textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; font: inherit;
  font-size: 13.5px; color: var(--text); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; resize: vertical; }
.dialog textarea:focus { outline: none; border-color: var(--accent); }
.dialog .hint { color: var(--muted); font-size: 12px; margin: 6px 0 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

@media (max-width: 980px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .bar { padding: 0 12px; gap: 6px; }
  .brand { margin-right: 6px; font-size: 17px; }
  .brand svg { width: 26px; height: 26px; }
  .me { display: none; }
  .wrap { padding: 22px 16px 56px; }
}

/* 2026-11-07:语言开关。中文页上写 English,英文页上写 中文。 */
.lang-switch { font-size: 13px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px;
  white-space: nowrap; display: inline-block; }
.lang-switch:hover { border-color: var(--accent); background: var(--accent2); }