/* ============================================================
   ZAI 模板 · 全局自定义样式挂载点（三主题）
   ------------------------------------------------------------
   用途：知穹网所有插件前端 UI 的统一样式入口。
   后续每个插件的前端样式以独立文件引入（如 zai-partner.css、
   zai-kb-evolve.css 等），本文件只放跨插件的通用变量与基础样式。

   三主题切换：
   - 暖珊瑚（默认）：<html data-theme="coral"> 或直接不写
   - 蓝紫：          <html data-theme="violet">
   - 暗夜金：        <html data-theme="noir">
   站长在后台选择风格后，模板给 <html> 输出对应 data-theme 即可
   全局一键切换，插件无需感知具体配色，统一消费 --zai-* 变量。

   新增通用变量（三主题各自取值，组件不要写死）：
   --zai-on-primary 主色底上的文字色（浅色主题白字 / 暗夜金黄底黑字）
   --zai-grad / -rev / -h  品牌渐变（logo、头像、进度条、数据条）
   --zai-on-grad    渐变底上的文字色
   --zai-nav-bg     顶栏半透明背景
   --zai-ring       头像叠放时的描边色（=页面/卡片底色）
   --zai-mask       遮罩层颜色
   ============================================================ */

/* ---------- 通用字体（三主题共用） ---------- */
:root {
  --zai-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 共享导航组件（首页 / 论坛 / Partner 各页顶栏复用） ---------- */
.zai-switch{display:flex;background:var(--zai-surface-sunken);border-radius:999px;padding:3px;gap:2px}
.zai-switch button{border:0;background:transparent;padding:5px 12px;border-radius:999px;font-size:12px;cursor:pointer;color:var(--zai-text-mid);font-family:inherit;transition:all .18s;white-space:nowrap;line-height:1.4}
.zai-switch button:hover{color:var(--zai-text)}
.zai-switch button.on{background:var(--zai-primary);color:var(--zai-on-primary);font-weight:600}
@media (max-width: 640px){.zai-switch button{padding:5px 9px;font-size:11px}}

/* ============================================================
   全站统一顶栏（唯一结构在 common/_nav.php）
   ------------------------------------------------------------
   历史遗留：首页写的是「.zai-nav-inner 64px 居中容器」，论坛三页写的是
   56px 通栏，Partner 六页又用了 --zai-surface 且不吸顶 —— 于是出现
   「首页顶栏和别的页不一样（高度 / logo 起始位置 / 背景）」。

   这里用 .zai-nav.zai-nav（0,2,0）提升优先级，任何页面样式都覆盖不掉，
   从根上保证所有页顶栏几何与配色一致。
   ============================================================ */
.zai-nav.zai-nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; flex-wrap:nowrap;
  box-sizing:border-box;
  height:56px; padding:0 24px; gap:32px;
  background:var(--zai-nav-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--zai-border);
}
.zai-nav .zai-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:0;color:var(--zai-text);text-decoration:none;white-space:nowrap;flex-shrink:0}
/* 全站统一 LOGO 标记：圆角方块 + 字母 Z（居中对齐，无文字）
   用后代选择器提升优先级，压过各页 CSS 里 24px 的旧定义，
   保证顶栏 / 页脚 / 各处 LOGO 完全一致。 */
.zai-nav .zai-logo-dot,
.zai-footer .zai-logo-dot,
.zai-logo-dot{
  width:30px;height:30px;border-radius:9px;
  background:var(--zai-grad);color:var(--zai-on-grad);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;line-height:1;flex-shrink:0;
  font-family:var(--zai-font);letter-spacing:0;
}
.zai-nav .zai-nav-links{display:flex;align-items:center;gap:26px;margin-left:16px;flex:1;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.zai-nav .zai-nav-links::-webkit-scrollbar{display:none}
.zai-nav .zai-nav-links a{padding:0;color:var(--zai-text-mid);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;transition:color .18s}
.zai-nav .zai-nav-links a:hover,
.zai-nav .zai-nav-links a.on,
.zai-nav .zai-nav-links a.active{color:var(--zai-primary);background:transparent;font-weight:600}
.zai-nav .zai-nav-right,
.zai-nav .zai-nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;flex-shrink:0}
.zai-nav .zai-nav-user{width:32px;height:32px;border-radius:50%;background:var(--zai-grad-rev);color:var(--zai-on-grad);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;text-decoration:none;flex-shrink:0}
.zai-nav .zai-nav-out{color:var(--zai-text-mid);text-decoration:none;font-size:13px;font-weight:500;transition:color .18s;white-space:nowrap}
.zai-nav .zai-nav-out:hover{color:var(--zai-primary)}

/* ---------- 隐藏 Discuz 自带页脚 ----------
   本风格的每一个前台页（门户/论坛/登录/注册）都有自定义页脚，
   Discuz 默认的 #ft（Archiver|手机版|小黑屋…）会露在自定义页脚下方，
   视觉上像未处理的残留。这里按 body class 精准收起，不影响 Discuz 原生页。
   注意：#ft 内含 "Powered by Discuz!" 版权信息，如需保留请告知。 */
.pg_index #ft, .pg_index #frt, .pg_index #flk,
.pg_forumdisplay #ft, .pg_forumdisplay #frt, .pg_forumdisplay #flk,
.pg_viewthread #ft, .pg_viewthread #frt, .pg_viewthread #flk,
.pg_logging #ft, .pg_logging #frt, .pg_logging #flk,
.pg_register #ft, .pg_register #frt, .pg_register #flk { display: none !important; }

/* ============================================================
   响应式基础
   Discuz 基础样式写死了 body{min-width:1200px} 与 .wp{width:1200px}，
   窄屏会强制横向滚动。这里在窄屏下放开，让 zai 页面自适应。
   ============================================================ */
@media (max-width: 1199px) {
  body { min-width: 0; }
  .wp { width: auto; max-width: 100%; }
}

/* ---------- 顶栏窄屏自适应（兼容两种结构：.zai-nav 直接 flex / 内含 .zai-nav-inner） ---------- */
@media (max-width: 980px) {
  .zai-nav.zai-nav { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 14px; gap: 8px 12px; }
  .zai-nav .zai-nav-inner { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px 12px; }
  .zai-nav .zai-nav-links {
    display: flex; order: 3; flex: 1 1 100%; min-width: 0; margin-left: 0;
    gap: 14px; padding: 6px 0 2px;
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .zai-nav .zai-nav-links::-webkit-scrollbar { display: none; }
  .zai-nav .zai-nav-links a { white-space: nowrap; padding: 4px 8px; }
  .zai-nav .zai-nav-right, .zai-nav .zai-nav-actions { margin-left: auto; flex-wrap: wrap; gap: 8px; }
}

/* ---------- 更窄屏：紧凑化顶栏 ---------- */
@media (max-width: 640px) {
  .zai-nav { padding: 8px 12px; }
  .zai-nav .zai-logo { font-size: 16px; gap: 8px; }
  .zai-nav .zai-logo-dot, .zai-nav .zai-logo-mark,
  .zai-footer .zai-logo-dot { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
  .zai-nav .zai-logo-mark svg, .zai-nav .zai-logo-dot svg { width: 14px; height: 14px; }
  .zai-nav .zai-switch { padding: 2px; }
  .zai-nav .zai-switch button { padding: 4px 8px; font-size: 11px; }
  .zai-nav .zai-nav-out { font-size: 12px; }
  .zai-nav .zai-btn { padding: 7px 12px; font-size: 13px; }
  .zai-nav .zai-nav-user { width: 28px; height: 28px; font-size: 12px; }
}

/* ---------- 主题一：暖珊瑚（默认，兼作无 data-theme 时回退） ---------- */
:root,
[data-theme="coral"] {
  /* 品牌主色 */
  --zai-primary: #E86A5A;
  --zai-primary-hover: #D45544;
  --zai-primary-soft: #FDEDEA;
  --zai-accent: #F2A65A;

  /* 主色/渐变底上的文字 */
  --zai-on-primary: #FFFFFF;
  --zai-grad: linear-gradient(135deg, #E86A5A, #F2A65A);
  --zai-grad-rev: linear-gradient(135deg, #F2A65A, #E86A5A);
  --zai-grad-h: linear-gradient(90deg, #E86A5A, #F2A65A);
  --zai-on-grad: #FFFFFF;

  /* 四型 Partner 专属色 */
  --zai-partner-t: #2A9D8F;   /* 教学型 T */
  --zai-partner-c: #E8A23D;   /* 咨询型 C */
  --zai-partner-p: #E86A5A;   /* 实践型 P */
  --zai-partner-r: #7C6BC9;   /* 研究型 R */
  --zai-gold: #E0A94E;        /* 声望金 */

  /* 中性色 */
  --zai-bg: #FFFFFF;
  --zai-bg-muted: #FBF6F2;
  --zai-surface: #FFFFFF;
  --zai-surface-sunken: #F6EFEA;
  --zai-border: #F0E6DE;
  --zai-border-strong: #E3D5CA;
  --zai-text: #2B2420;
  --zai-text-mid: #6B5F57;
  --zai-text-light: #A5988E;

  /* 顶栏 / 描边 / 遮罩 */
  --zai-nav-bg: rgba(255, 255, 255, .92);
  --zai-ring: #FFFFFF;
  --zai-mask: rgba(43, 36, 32, .36);

  /* 功能色 */
  --zai-success: #3AA76D;
  --zai-warning: #E0963B;
  --zai-error: #D9534F;
  --zai-info: #4A90D9;

  /* 圆角 */
  --zai-radius: 12px;
  --zai-radius-sm: 8px;

  /* 阴影（暖调） */
  --zai-shadow-s: 0 2px 8px rgba(120, 80, 50, .06);
  --zai-shadow-m: 0 8px 24px rgba(120, 80, 50, .10);
  --zai-shadow-l: 0 16px 40px rgba(120, 80, 50, .14);

  color-scheme: light;
}

/* ---------- 主题二：蓝紫（专业成长型） ---------- */
[data-theme="violet"] {
  /* 品牌主色 */
  --zai-primary: #4F46E5;
  --zai-primary-hover: #4338CA;
  --zai-primary-soft: #EEF2FF;
  --zai-accent: #06B6D4;

  --zai-on-primary: #FFFFFF;
  --zai-grad: linear-gradient(135deg, #4F46E5, #06B6D4);
  --zai-grad-rev: linear-gradient(135deg, #06B6D4, #4F46E5);
  --zai-grad-h: linear-gradient(90deg, #4F46E5, #06B6D4);
  --zai-on-grad: #FFFFFF;

  /* 四型 Partner 专属色 */
  --zai-partner-t: #10B981;
  --zai-partner-c: #F59E0B;
  --zai-partner-p: #F43F5E;
  --zai-partner-r: #8B5CF6;
  --zai-gold: #D4A72C;

  /* 中性色 */
  --zai-bg: #FFFFFF;
  --zai-bg-muted: #F5F7FB;
  --zai-surface: #FFFFFF;
  --zai-surface-sunken: #EDF1F7;
  --zai-border: #E5EAF2;
  --zai-border-strong: #D1D9E6;
  --zai-text: #0F172A;
  --zai-text-mid: #475569;
  --zai-text-light: #94A3B8;

  --zai-nav-bg: rgba(255, 255, 255, .92);
  --zai-ring: #FFFFFF;
  --zai-mask: rgba(15, 23, 42, .40);

  /* 功能色 */
  --zai-success: #16A34A;
  --zai-warning: #D97706;
  --zai-error: #DC2626;
  --zai-info: #0891B2;

  /* 圆角（蓝紫更方正，直角感） */
  --zai-radius: 8px;
  --zai-radius-sm: 6px;

  /* 阴影（冷调） */
  --zai-shadow-s: 0 1px 3px rgba(15, 23, 42, .06);
  --zai-shadow-m: 0 10px 28px rgba(15, 23, 42, .10);
  --zai-shadow-l: 0 20px 48px rgba(15, 23, 42, .14);

  color-scheme: light;
}

/* ---------- 主题三：暗夜金（参考 yitang.top：深黑底 + 亮黄主色 + 蓝点缀） ---------- */
[data-theme="noir"] {
  /* 品牌主色：亮黄（CTA）/ 蓝（点缀） */
  --zai-primary: #FFD300;
  --zai-primary-hover: #FFC400;
  --zai-primary-soft: #2A2410;   /* 深色底上的「浅主色」＝暗黄透气底 */
  --zai-accent: #4A90E2;

  /* 黄底用近黑文字（参考 yitang 黄色 logo 块上的深色字） */
  --zai-on-primary: #131313;
  --zai-grad: linear-gradient(135deg, #FFD300, #F5A623);
  --zai-grad-rev: linear-gradient(135deg, #F5A623, #FFD300);
  --zai-grad-h: linear-gradient(90deg, #FFD300, #4A90E2);
  --zai-on-grad: #131313;

  /* 四型 Partner 专属色（取自参考站蓝/绿/红/紫体系） */
  --zai-partner-t: #34A853;   /* 教学型 T */
  --zai-partner-c: #4A90E2;   /* 咨询型 C */
  --zai-partner-p: #E15B56;   /* 实践型 P */
  --zai-partner-r: #9B7BE0;   /* 研究型 R */
  --zai-gold: #FFD300;        /* 声望金 */

  /* 中性色（近黑体系，微冷避免死黑） */
  --zai-bg: #0B0B0D;
  --zai-bg-muted: #131316;
  --zai-surface: #151518;
  --zai-surface-sunken: #1E1E23;
  --zai-border: #26262B;
  --zai-border-strong: #36363D;
  --zai-text: #F2F2F4;
  --zai-text-mid: #A6A6AE;
  --zai-text-light: #6F6F79;

  /* 顶栏 / 描边 / 遮罩 */
  --zai-nav-bg: rgba(11, 11, 13, .86);
  --zai-ring: #151518;
  --zai-mask: rgba(0, 0, 0, .58);

  /* 功能色 */
  --zai-success: #34A853;
  --zai-warning: #FFB020;
  --zai-error: #E15B56;
  --zai-info: #4A90E2;

  /* 圆角（略大，呼应参考站的大圆角面板） */
  --zai-radius: 14px;
  --zai-radius-sm: 9px;

  /* 阴影（黑底加强） */
  --zai-shadow-s: 0 2px 10px rgba(0, 0, 0, .55);
  --zai-shadow-m: 0 12px 32px rgba(0, 0, 0, .62);
  --zai-shadow-l: 0 22px 52px rgba(0, 0, 0, .70);

  color-scheme: dark;
}

/* ---------- 页面底色跟随主题 ----------
   Discuz 基础样式把 body 写死成浅色 #FBF7F5，暗色主题下滚动到边界
   或首屏外区域会闪出白底。这里让 body 跟随主题底色。 */
html body{background:var(--zai-bg)}

/* ---------- 页脚备案信息（common/_footer.php） ---------- */
.zai-footer-icp a{color:inherit;text-decoration:none}
.zai-footer-icp a:hover{color:var(--zai-primary)}
.zai-footer-icp .pipe{margin:0 6px;opacity:.5}

/* ============================================================
   官方头部「用户状态区」（common/header_userstatus.php 的 zai 版）
   ------------------------------------------------------------
   历史问题：zai 未覆盖 header_userstatus，回退到 Discuz 默认版；
   默认版用 #um/.avt/.vwmy 等类，zai 没有对应样式，
   表现为「登录后头像与用户名看不见」。这里给 zai 版用户区上样式。
   ============================================================ */
#um.zai-um{display:flex;align-items:center;gap:12px;padding:8px 0 2px;background:transparent}
#um.zai-um .zai-um-avt{flex-shrink:0;width:52px;height:52px;border-radius:50%;overflow:hidden;display:block;background:var(--zai-surface-sunken);border:2px solid var(--zai-border)}
#um.zai-um .zai-um-avt img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
#um.zai-um .zai-um-info{min-width:0}
#um.zai-um .zai-um-name{font-size:15px;font-weight:700;color:var(--zai-text);line-height:1.5}
#um.zai-um .zai-um-name a{color:var(--zai-text);text-decoration:none}
#um.zai-um .zai-um-name a:hover{color:var(--zai-primary)}
#um.zai-um .zai-um-links{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px}
#um.zai-um .zai-um-links a{color:var(--zai-text-mid);text-decoration:none}
#um.zai-um .zai-um-links a:hover{color:var(--zai-primary)}
#um.zai-um .zai-um-links a.zai-um-out{color:var(--zai-primary);font-weight:600}
#um.zai-um .zai-um-credit{margin-top:4px;font-size:12px;color:var(--zai-text-light);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#um.zai-um .zai-um-credit a{color:var(--zai-text-light);text-decoration:none}
#um.zai-um .zai-um-credit a:hover{color:var(--zai-primary)}
#um.zai-um .zai-um-dot{opacity:.45}
.zai-um-guest{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--zai-text-mid)}
.zai-um-guest a{color:var(--zai-text-mid);text-decoration:none}
.zai-um-guest a:hover{color:var(--zai-primary)}
.zai-um-guest .zai-um-btn{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--zai-border);color:var(--zai-text-mid)}
.zai-um-guest .zai-um-btn-p{background:var(--zai-primary);border-color:var(--zai-primary);color:var(--zai-on-primary)}

/* ---------- 顶栏右上角：支持真头像（不再只有首字母） ---------- */
.zai-nav .zai-nav-avatar{display:block;flex-shrink:0;text-decoration:none}
.zai-nav .zai-nav-user{overflow:hidden;padding:0}
.zai-nav .zai-nav-user img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.zai-nav .zai-nav-name{color:var(--zai-text-mid);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.zai-nav .zai-nav-name:hover{color:var(--zai-primary)}

/* ---------- 安全提醒卡（common/ipnotice.php 的 zai 版） ----------
   注意选择器是 .zai-notice，**不带 #ip_notice**：
   外层固定定位容器（div#ip_notice.focus.plugin）是 Discuz 自己输出的，
   本卡片由 AJAX 注入其内部。只按 class 上样式，避免同 id 命中两层 → 双层边框。 */
.zai-notice{background:var(--zai-surface);border:1px solid var(--zai-border);border-left:3px solid var(--zai-warning);border-radius:var(--zai-radius);padding:14px 16px;color:var(--zai-text-mid);font-size:13px;box-shadow:var(--zai-shadow-m);box-sizing:border-box}
.zai-notice .zai-notice-close{float:right;color:var(--zai-text-light);text-decoration:none;font-size:12px}
.zai-notice .zai-notice-close:hover{color:var(--zai-primary)}
.zai-notice .zai-notice-title{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--zai-text)}
.zai-notice .zai-notice-body p{margin:2px 0;line-height:1.7}
.zai-notice .zai-notice-body b{color:var(--zai-text);font-weight:600}
.zai-notice .zai-notice-act{margin-top:8px}
.zai-notice .zai-notice-act a{color:var(--zai-primary);text-decoration:none;font-weight:600}

/* ============================================================
   全站外壳（2026-10-11 架构升级）
   ------------------------------------------------------------
   ZAI 顶栏（common/_nav.php）与 ZAI 页脚（common/_footer.php）
   现在是**每一页**的默认外壳：官方头部全站关闭、footer.php 全站补 ZAI 页脚。
   因此 Discuz 原 #ft 会与 ZAI 页脚重复 → 全站收起；
   必需的「Powered by Discuz!」版权已并入 ZAI 页脚。
   ============================================================ */
#ft, #frt, #flk { display: none !important; }

/* ---------- 顶栏内搜索（承接官方头部的站内搜索） ---------- */
.zai-nav .zai-nav-search{display:flex;align-items:center;background:var(--zai-surface-sunken);
  border:1px solid var(--zai-border);border-radius:999px;padding:2px 2px 2px 12px;height:32px;box-sizing:border-box}
.zai-nav .zai-nav-search input[type=text]{border:0;background:transparent;color:var(--zai-text);
  font-size:13px;width:150px;outline:none;font-family:var(--zai-font);padding:0}
.zai-nav .zai-nav-search input[type=text]::placeholder{color:var(--zai-text-light)}
.zai-nav .zai-nav-search button{border:0;background:var(--zai-primary);color:var(--zai-on-primary);
  border-radius:999px;height:26px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--zai-font)}

/* ---------- 顶栏用户区（头像 + 用户名 + 下拉菜单） ---------- */
.zai-nav .zai-nav-userbox{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:4px 8px;border-radius:999px;transition:background .18s}
.zai-nav .zai-nav-userbox:hover{background:var(--zai-surface-sunken)}
.zai-nav .zai-nav-caret{color:var(--zai-text-light);font-size:10px;line-height:1}
.zai-nav .zai-nav-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;display:none;
  flex-direction:column;padding:6px;background:var(--zai-surface);border:1px solid var(--zai-border);
  border-radius:var(--zai-radius-sm);box-shadow:var(--zai-shadow-m);z-index:200}
.zai-nav .zai-nav-userbox.open .zai-nav-menu{display:flex}
.zai-nav .zai-nav-menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--zai-text-mid);
  font-size:13px;text-decoration:none;white-space:nowrap}
.zai-nav .zai-nav-menu a:hover{background:var(--zai-surface-sunken);color:var(--zai-primary)}
.zai-nav .zai-nav-menu a em.new{display:inline-block;margin-left:6px;padding:0 5px;border-radius:999px;
  background:var(--zai-primary);color:var(--zai-on-primary);font-size:10px;font-style:normal;line-height:15px;vertical-align:1px}
.zai-nav .zai-nav-menu a.zai-nav-menu-out{color:var(--zai-primary);font-weight:600;
  border-top:1px solid var(--zai-border);border-radius:0 0 8px 8px;margin-top:4px}

/* ---------- 未登录：登录 / 免费加入 ---------- */
.zai-nav .zai-nav-btn{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;
  border:1px solid var(--zai-border);color:var(--zai-text-mid);font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.zai-nav .zai-nav-btn:hover{border-color:var(--zai-primary);color:var(--zai-primary)}
.zai-nav .zai-nav-btn-p{background:var(--zai-primary);border-color:var(--zai-primary);color:var(--zai-on-primary)}
.zai-nav .zai-nav-btn-p:hover{background:var(--zai-primary-hover);color:var(--zai-on-primary)}

/* ---------- 窄屏收纳 ---------- */
@media (max-width: 1100px){ .zai-nav .zai-nav-search input[type=text]{width:96px} }
@media (max-width: 900px){
  .zai-nav .zai-nav-search{display:none}
  .zai-nav .zai-nav-name{display:none}
  .zai-nav .zai-switch{display:none}
}

/* ============================================================
   个人中心（spacecp）框架 —— 版式来自 home/spacecp_header.php
   ------------------------------------------------------------
   所有 spacecp 页面共用这套框架：左栏（头像卡 + 设置导航）+ 右栏内容卡。
   Discuz 默认的 .ct2_a/.mn 是 float 两栏，这里用 grid 接管。
   ============================================================ */
.zai-uc{display:grid;grid-template-columns:224px minmax(0,1fr);gap:20px;align-items:start;
  max-width:1180px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.zai-uc .mn{float:none !important;width:auto !important;margin:0 !important;padding:0 !important;
  background:transparent !important;border:0 !important;min-width:0}
.zai-uc-side{position:sticky;top:72px;display:flex;flex-direction:column;gap:14px}
.zai-uc-user{display:flex;align-items:center;gap:10px;background:var(--zai-surface);
  border:1px solid var(--zai-border);border-radius:var(--zai-radius);padding:12px}
.zai-uc-avt{flex-shrink:0;display:block}
.zai-uc-avt img{width:44px;height:44px;border-radius:50%;display:block;object-fit:cover}
.zai-uc-meta{min-width:0}
.zai-uc-name{display:block;color:var(--zai-text);font-weight:600;font-size:14px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zai-uc-name:hover{color:var(--zai-primary)}
.zai-uc-credit{display:block;color:var(--zai-text-light);font-size:12px;margin-top:2px}
.zai-uc-nav{background:var(--zai-surface);border:1px solid var(--zai-border);
  border-radius:var(--zai-radius);padding:8px;display:flex;flex-direction:column;gap:2px}
.zai-uc-nav-title{margin:8px 10px 4px;font-size:12px;font-weight:600;color:var(--zai-text-light);
  letter-spacing:.05em;text-transform:none}
.zai-uc-nav-title:first-child{margin-top:4px}
.zai-uc-nav a{display:block;padding:8px 12px;border-radius:8px;color:var(--zai-text-mid);
  font-size:13px;text-decoration:none;transition:background .16s,color .16s}
.zai-uc-nav a:hover{background:var(--zai-surface-sunken);color:var(--zai-primary)}
.zai-uc-nav a.on{background:var(--zai-primary-soft);color:var(--zai-primary);font-weight:600}
.zai-uc-main{min-width:0}
.zai-uc-card{background:var(--zai-surface);border:1px solid var(--zai-border);
  border-radius:var(--zai-radius);padding:18px 20px}
.zai-uc-title{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--zai-text);
  border-bottom:1px solid var(--zai-border);padding-bottom:12px;line-height:1.5}
/* 侧栏菜单已上移，内容模板里遗留的 .appl 包装层要"化掉"，不要留成空盒子 */
.zai-uc-main .appl{background:transparent !important;border:0 !important;
  padding:0 !important;margin:0 !important;border-radius:0 !important}
.zai-crumb{padding:12px 0 4px;background:transparent}
.zai-crumb .z{color:var(--zai-text-light);font-size:12px}
.zai-crumb a{color:var(--zai-text-light);text-decoration:none}
.zai-crumb a:hover{color:var(--zai-primary)}
.zai-crumb .zai-crumb-cur{color:var(--zai-text-mid)}
.zai-crumb em{opacity:.5;margin:0 4px;font-style:normal}
@media (max-width: 900px){
  .zai-uc{grid-template-columns:1fr}
  .zai-uc-side{position:static}
}

/* ============================================================
   会员组名（前台统一）：颜色跟随后台「会员组」配置的 #rgb
   ------------------------------------------------------------
   用法：PHP 把颜色写成 CSS 变量挂到元素上 → style="--mgc:#e69a20"
     · .zai-mgname  纯文字形态：颜色 + 柔光（标题 / 行内）
     · .zai-mgchip  药丸形态：颜色 + 柔光 + 同色描边 + 光泽扫过
     · 追加 .hi      高阶档位（累计消耗 ≥ 10 亿 token）：光晕呼吸 + 更快扫光
   用「双类选择器」（.zai-lv.zai-mgchip 等）提高优先级，因此
   ① 不需要改动各页面原有样式；② 不会污染复用了同类名的其它元素
   （如 Discuz 原生等级 chip、徽章 chip —— 它们没有 zai-mgchip）。
   ============================================================ */
.zai-mgname{
  color:var(--mgc, var(--zai-gold));
  text-shadow:0 0 12px color-mix(in srgb, var(--mgc, var(--zai-gold)) 42%, transparent);
}
.zai-mgchip,
.zai-lv.zai-mgchip,
.zai-v2-level.zai-mgchip,
.zai-zbadge.zai-mgchip,
.zai-mg-tag.zai-mgchip,
.zai-level.zai-mgchip{
  position:relative;
  overflow:hidden;
  color:var(--mgc, var(--zai-gold));
  background:color-mix(in srgb, var(--mgc, var(--zai-gold)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--mgc, var(--zai-gold)) 36%, transparent);
  text-shadow:0 0 12px color-mix(in srgb, var(--mgc, var(--zai-gold)) 45%, transparent);
  transition:box-shadow .25s ease;
}
.zai-lv.zai-mgchip:hover,
.zai-v2-level.zai-mgchip:hover,
.zai-zbadge.zai-mgchip:hover,
.zai-mg-tag.zai-mgchip:hover{
  box-shadow:0 0 15px color-mix(in srgb, var(--mgc, var(--zai-gold)) 40%, transparent);
}
/* 光泽扫过：一道同色高光缓慢掠过（半透明，不遮字） */
.zai-mgchip::after{
  content:'';
  position:absolute; top:0; bottom:0; left:0; width:42%;
  pointer-events:none;
  background:linear-gradient(100deg, transparent,
             color-mix(in srgb, var(--mgc, var(--zai-gold)) 62%, #fff) 50%, transparent);
  opacity:.38;
  /* ⚠️ 必须用 transform 位移：left 是布局属性，动画它会让浏览器每帧重排（页面一多就卡） */
  transform:translateX(-120%);
  animation:zaiMgSweep 5s ease-in-out infinite;
}
@keyframes zaiMgSweep{
  0%   { transform:translateX(-120%); }
  50%  { transform:translateX(340%); }
  100% { transform:translateX(340%); }
}
/* 高阶档位：静态强光晕 + hover 增强
   （原为 text-shadow 循环动画，每帧重绘、开销大；改为静态，效果几乎一致但零成本） */
.zai-mgchip.hi,.zai-mgname.hi{
  text-shadow:0 0 16px color-mix(in srgb, var(--mgc, var(--zai-gold)) 65%, transparent),
              0 0 4px  color-mix(in srgb, var(--mgc, var(--zai-gold)) 45%, transparent);
}
.zai-mgchip.hi::after{ animation-duration:3.6s; opacity:.55; }
/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  .zai-mgchip::after{ animation:none; opacity:0; }
}

/* ============================================================
   个人中心（spacecp）原生页 · ZAI 化补全
   ------------------------------------------------------------
   覆盖：home.php?mod=spacecp 下**未搬进 ZAI 设置页**的那些页面
   （查找好友 / 可能认识的人 / 好友请求 / 好友分组 / 隐私筛选 / 推广 / 邮件 …）
   它们用官方模板（common/header + #ct.ct2_a + .mn/.appl），不走 ZAI 的
   spacecp_header 框架，所以这里把版式与控件一并接过来：
     · 布局  官方 float 两栏 → ZAI grid 两栏（主栏 + 右栏子菜单）
     · 卡片  .bm → ZAI 卡片
     · 右栏  .tbn 子菜单 → ZAI 导航项（当前项高亮）
     · 页签  ul.tb → ZAI 页签
     · 表单  input / select / textarea / button → ZAI 控件
   ⚠️ 官方 css_space.css / css_common.css 全程在场（body 带 zai-legacy），
      故一律 !important。作用域限定 body.pg_spacecp，不影响其它页面。
   ============================================================ */

/* —— 布局：float 两栏 → grid 两栏 —— */
body.pg_spacecp #pt{background:transparent!important;border:0!important;
  max-width:1180px;margin:0 auto;padding:12px 16px 4px!important;box-sizing:border-box}
body.pg_spacecp #pt .z{color:var(--zai-text-light)!important;font-size:12px}
body.pg_spacecp #pt a{color:var(--zai-text-light)!important;text-decoration:none}
body.pg_spacecp #pt a:hover{color:var(--zai-primary)!important}
body.pg_spacecp #ct{max-width:1180px;margin:0 auto;padding:0 16px!important;box-sizing:border-box}
body.pg_spacecp #ct.ct2_a,
body.pg_spacecp #ct.ct2{display:grid!important;grid-template-columns:minmax(0,1fr) 208px;
  gap:20px;align-items:start;width:auto!important;float:none!important}
body.pg_spacecp #ct > .mn{float:none!important;display:block!important;width:auto!important;
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;min-width:0}
body.pg_spacecp #ct > .appl{float:none!important;width:auto!important;margin:0!important;
  padding:0!important;background:transparent!important;border:0!important}

/* —— 卡片（.bm / .bm.bw0 / .tbn）—— */
body.pg_spacecp #ct .bm,
body.pg_spacecp #ct .bm.bw0{background:var(--zai-surface)!important;border:1px solid var(--zai-border)!important;
  border-radius:var(--zai-radius)!important;box-shadow:var(--zai-shadow-s,0 1px 3px rgba(0,0,0,.04))!important;
  margin:0 0 16px!important;overflow:hidden}
body.pg_spacecp #ct .bm .bm_h{background:transparent!important;border:0!important;
  padding:16px 20px 0!important;height:auto!important;line-height:normal!important}
body.pg_spacecp #ct .bm .bm_c,
body.pg_spacecp #ct .bm .dxb_bc{padding:16px 20px 20px!important;background:transparent!important}
body.pg_spacecp #ct .bm .bm_h h1,
body.pg_spacecp #ct h1.mt,
body.pg_spacecp #ct h2.mt{float:none!important;color:var(--zai-text)!important;
  font-size:16px!important;font-weight:700!important;margin:0!important;padding:0 0 4px!important;line-height:1.5!important}
body.pg_spacecp #ct h1.mt .fico,
body.pg_spacecp #ct h1.mt i{opacity:.7}

/* —— 右栏子菜单（.tbn）—— */
body.pg_spacecp #ct > .appl .tbn,
body.pg_spacecp #ct > .appl .bm{background:var(--zai-surface)!important;
  border:1px solid var(--zai-border)!important;border-radius:var(--zai-radius)!important;overflow:hidden}
body.pg_spacecp #ct > .appl .tbn h2{background:transparent!important;border:0!important;
  color:var(--zai-text)!important;font-size:14px!important;font-weight:600!important;
  margin:0!important;padding:14px 16px 8px!important;height:auto!important;line-height:1.5!important}
body.pg_spacecp #ct > .appl .tbn ul{list-style:none!important;margin:0!important;padding:4px 8px 10px!important}
body.pg_spacecp #ct > .appl .tbn ul li{margin:0!important;padding:0!important;float:none!important;
  border:0!important;background:transparent!important}
body.pg_spacecp #ct > .appl .tbn ul li a{display:block!important;padding:8px 12px!important;
  border-radius:8px!important;color:var(--zai-text-mid)!important;font-size:13px!important;
  text-decoration:none!important;border:0!important;background:transparent!important}
body.pg_spacecp #ct > .appl .tbn ul li a:hover{background:var(--zai-surface-sunken)!important;
  color:var(--zai-primary)!important}
body.pg_spacecp #ct > .appl .tbn ul li.on a,
body.pg_spacecp #ct > .appl .tbn ul li.a a{background:var(--zai-primary-soft)!important;
  color:var(--zai-primary)!important;font-weight:600}

/* —— 页签（ul.tb）—— */
body.pg_spacecp #ct ul.tb{list-style:none!important;margin:0 0 14px!important;padding:0!important;
  display:flex!important;flex-wrap:wrap!important;gap:6px!important;border:0!important;
  background:transparent!important;height:auto!important}
body.pg_spacecp #ct ul.tb li{float:none!important;margin:0!important;padding:0!important;border:0!important}
body.pg_spacecp #ct ul.tb li a,
body.pg_spacecp #ct ul.tb li.a a{display:block!important;padding:6px 14px!important;
  border-radius:999px!important;font-size:13px!important;text-decoration:none!important;
  background:var(--zai-surface-sunken)!important;color:var(--zai-text-mid)!important;border:0!important}
body.pg_spacecp #ct ul.tb li.a a,
body.pg_spacecp #ct ul.tb li a:hover{background:var(--zai-primary)!important;
  color:var(--zai-on-primary)!important;font-weight:600}

/* —— 表单控件 —— */
body.pg_spacecp #ct input[type=text],
body.pg_spacecp #ct input[type=password],
body.pg_spacecp #ct input[type=email],
body.pg_spacecp #ct input[type=number],
body.pg_spacecp #ct select,
body.pg_spacecp #ct textarea{background:var(--zai-surface-sunken)!important;
  border:1px solid var(--zai-border-strong)!important;border-radius:8px!important;
  color:var(--zai-text)!important;padding:7px 10px!important;font-size:13px!important;
  font-family:inherit!important;height:auto!important;line-height:1.5!important;
  box-shadow:none!important;transition:border-color .16s,box-shadow .16s}
body.pg_spacecp #ct input:focus,
body.pg_spacecp #ct select:focus,
body.pg_spacecp #ct textarea:focus{border-color:var(--zai-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--zai-primary) 16%,transparent)!important;outline:none!important}
body.pg_spacecp #ct select{padding-right:6px!important}
body.pg_spacecp #ct label{color:var(--zai-text-mid)!important;font-weight:500!important}
body.pg_spacecp #ct th{color:var(--zai-text-mid)!important;font-weight:500!important;background:transparent!important}
body.pg_spacecp #ct .tb,
body.pg_spacecp #ct .tb table{background:transparent!important;border:0!important}
body.pg_spacecp #ct .tb th,
body.pg_spacecp #ct .tb td{border-color:var(--zai-border)!important}

/* —— 按钮 —— */
body.pg_spacecp #ct button,
body.pg_spacecp #ct input[type=submit],
body.pg_spacecp #ct .pn{background:var(--zai-primary)!important;border:1px solid var(--zai-primary)!important;
  color:var(--zai-on-primary)!important;border-radius:8px!important;padding:7px 18px!important;
  font-size:13px!important;font-weight:600!important;font-family:inherit!important;
  cursor:pointer!important;height:auto!important;line-height:1.5!important;box-shadow:none!important}
body.pg_spacecp #ct button:hover,
body.pg_spacecp #ct input[type=submit]:hover,
body.pg_spacecp #ct .pn:hover{background:var(--zai-primary-hover)!important;
  border-color:var(--zai-primary-hover)!important}
body.pg_spacecp #ct .zai-btn{background:var(--zai-surface)!important;color:var(--zai-text-mid)!important;
  border:1px solid var(--zai-border-strong)!important}

/* —— 空态与提示 —— */
body.pg_spacecp #ct .emp{background:var(--zai-surface-sunken)!important;border:1px dashed var(--zai-border-strong)!important;
  border-radius:var(--zai-radius-sm)!important;color:var(--zai-text-light)!important;padding:18px!important;text-align:center}
body.pg_spacecp #ct .emp a{color:var(--zai-primary)!important}

/* —— 窄屏：右栏下移，主栏吃满 —— */
@media (max-width:900px){
  body.pg_spacecp #ct.ct2_a,
  body.pg_spacecp #ct.ct2{grid-template-columns:minmax(0,1fr)}
}