/* ============================================================================
   三月雨 · 数字资产交易平台 —— 视觉系统 v2
   设计语言：暖中性底 + 品牌红主色 + 卡片化信息层级
   色值来自用户设想的界面稿实测取样（banner 渐变 #7D1016 → #C02129 等）
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌红 */
  --brand-900: #7d1016;
  --brand-800: #8e1218;
  --brand-700: #a6171e;
  --brand-600: #ae1820;
  --brand-500: #bf2129;
  --brand-200: #ecc6c9;
  --brand-100: #f6dcdd;
  --brand-050: #fbf3f3;

  /* 语义辅色（对应四张指标卡的左侧色条） */
  --gold: #c8a150;
  --green: #248e41;
  --blue: #2e67ae;
  --amber: #c9791b;
  --slate: #6b7280;

  /* 暖中性 */
  --bg: #f2f0ec;
  --bg-rail: #f7f5f2;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f4f1ec;
  --border: #e7e2d9;
  --border-2: #d9d3c7;
  --text: #201e1b;
  --text-2: #5b564e;
  --text-3: #8d877c;
  --text-4: #ada79c;

  /* 圆角 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(32, 24, 18, .05);
  --sh-2: 0 2px 6px -1px rgba(32, 24, 18, .07), 0 10px 26px -14px rgba(32, 24, 18, .22);
  --sh-3: 0 18px 48px -20px rgba(32, 24, 18, .34);
  --sh-brand: 0 6px 16px -8px rgba(174, 24, 32, .75);

  --rail-w: 236px;
  --banner-h: 68px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", Georgia, serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-num); font-size: .92em; }
.nowrap { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d0c5; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #bfb8aa; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: all .16s var(--ease);
}
.btn:hover { border-color: var(--text-4); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
.btn.primary:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn.soft { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
.btn.soft:hover { background: var(--brand-100); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: rgba(32, 24, 18, .06); color: var(--text); }
.btn.danger { background: #fff; border-color: #e6c3c5; color: #a3161d; }
.btn.danger:hover { background: #fdf4f4; border-color: #d99ba0; }
.btn.sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: var(--r-sm); gap: 5px; }
.btn.xs { height: 27px; padding: 0 9px; font-size: 12px; border-radius: var(--r-xs); gap: 4px; }
.btn.block { width: 100%; height: 44px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-row.nowrap { flex-wrap: nowrap; }

/* ---------- 4. 表单 ---------- */
.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field__hint { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.5; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search],
input:not([type]), select, textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface); color: var(--text); font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%238d877c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(174, 24, 32, .12);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
input:disabled, select:disabled { background: var(--surface-3); color: var(--text-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 620px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* 搜索框 */
.search { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 380px; }
.search input { height: 42px; padding-left: 38px; }
.search::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238d877c' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.6 10.6 14 14'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* 复选组（多选标签） */
.picker { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px; border: 1px solid var(--border-2); border-radius: var(--r); background: var(--surface); }
.picker label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: all .14s; }
.picker label:hover { border-color: var(--brand-200); background: var(--brand-050); }
.picker input { display: none; }
.picker input:checked + span { color: var(--brand-700); font-weight: 600; }
.picker label:has(input:checked) { background: var(--brand-050); border-color: var(--brand-200); }

/* ---------- 5. 标签 / 徽章 / 状态点 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-2); font-size: 13px; cursor: pointer; transition: all .15s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--brand-200); color: var(--brand-700); }
.chip.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; font-weight: 600; box-shadow: var(--sh-brand); }
.chip.sm { height: 29px; padding: 0 12px; font-size: 12.5px; }

.tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: var(--r); width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs button {
  height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text-2); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--surface); color: var(--brand-700); font-weight: 600; box-shadow: var(--sh-1); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 9px;
  border-radius: var(--r-xs); font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border);
}
.badge.ok { background: #eef8f1; color: #1c7440; border-color: #cfe9d9; }
.badge.warn { background: #fdf6e9; color: #96601a; border-color: #f0e0c2; }
.badge.info { background: #eef3fb; color: #23539a; border-color: #d3e0f3; }
.badge.bad { background: #fdf2f2; color: #a3161d; border-color: #f2d3d5; }
.badge.brand { background: var(--brand-050); color: var(--brand-700); border-color: var(--brand-100); }
.badge.plain { background: var(--surface); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: 0 0 auto; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.bad { background: var(--brand-600); }
.dot.info { background: var(--blue); }

.pill-tag {
  display: inline-flex; align-items: center; height: 27px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .38); border-radius: var(--r-pill);
  color: #fff; font-size: 12.5px; letter-spacing: .02em;
  background: rgba(255, 255, 255, .13);
}

/* ---------- 6. 登录页 ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login__brand {
  position: relative; overflow: hidden; color: #fff; padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(150deg, #7d1016 0%, #a6171e 45%, #c02129 100%);
}
.login__brand::after {
  content: ""; position: absolute; right: -140px; bottom: -180px; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 68%);
}
.login__logo { height: 46px; width: auto; max-width: 100%; display: block;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .4)); }
.login__link { color: rgba(255, 255, 255, .8); text-decoration: none; }
.login__link:hover { color: #fff; text-decoration: underline; }
.login__brand h1 { font-size: 30px; font-weight: 700; margin: 22px 0 8px; letter-spacing: .01em; }
.login__claim { font-size: 15px; color: rgba(255, 255, 255, .82); }
.login__facts { margin: 30px 0 0; display: grid; gap: 11px; max-width: 440px; position: relative; z-index: 1; }
.login__facts li { position: relative; padding-left: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.login__facts li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.login__facts strong { color: #fff; }
.login__foot { margin-top: 40px; font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, .62); position: relative; z-index: 1; }

.login__panel { display: flex; flex-direction: column; justify-content: center; padding: 56px 60px; background: var(--bg); }
.login__form { width: 100%; max-width: 372px; margin: 0 auto; }
.login__head { margin-bottom: 26px; }
.login__head h2 { font-size: 22px; font-weight: 700; }
.login__head p { font-size: 13.5px; margin-top: 4px; }
.login__demo { width: 100%; max-width: 372px; margin: 30px auto 0; padding-top: 22px; border-top: 1px solid var(--border); }
.login__demo .chips { margin-top: 11px; }
.alert { padding: 10px 13px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 14px; }
.alert.bad { background: #fdf2f2; color: #a3161d; border: 1px solid #f2d3d5; }
.alert.ok { background: #eef8f1; color: #1c7440; border: 1px solid #cfe9d9; }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__brand { padding: 40px 28px; }
  .login__panel { padding: 34px 28px 48px; }
  .login__logo { height: 34px; }
  .login__facts, .login__foot { display: none; }
}

/* ---------- 7. 外壳：横幅 + 侧栏 + 主区 ---------- */
.shell {
  height: 100vh; display: grid;
  /* 行 1 顶栏 / 行 2 角色模拟横幅（不模拟时该行高度为 0）/ 行 3 主体 */
  grid-template-rows: var(--banner-h) auto 1fr;
}
.banner { grid-row: 1; }
#sim-bar { grid-row: 2; }
.shell__body { grid-row: 3; }
.shell__body { display: grid; grid-template-columns: var(--rail-w) 1fr; overflow: hidden; }

.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 22px; color: #fff;
  background: linear-gradient(97deg, #7d1016 0%, #a6171e 44%, #c02129 100%);
}
.banner__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* 官方标识（深底白字版，专用于红色背景，勿放到浅色底上） */
.banner__logo { height: 33px; width: auto; display: block; flex: 0 0 auto; }
.banner__divider { width: 1px; height: 30px; background: rgba(255, 255, 255, .3); flex: 0 0 auto; }
.banner__text { min-width: 0; }
.banner__title { font-size: 17.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; white-space: nowrap; }
.banner__sub { font-size: 12px; color: rgba(255, 255, 255, .74); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner__right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.banner__date { font-size: 12.5px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.banner__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .26); }
.banner__right .btn.ghost { color: rgba(255, 255, 255, .82); }
.banner__right .btn.ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.whoami { display: flex; align-items: center; gap: 9px; }
.whoami__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .38);
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff;
}
.whoami__text { display: flex; flex-direction: column; line-height: 1.25; }
.whoami__text b { font-size: 13px; font-weight: 600; }
.whoami__text small { font-size: 11px; color: rgba(255, 255, 255, .7); }

.rail { background: var(--bg-rail); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 12px 20px; display: flex; flex-direction: column; }
.rail__nav { display: flex; flex-direction: column; gap: 3px; }
.rail__group { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-4); padding: 16px 12px 6px; }
.rail__group:first-child { padding-top: 2px; }
.rail__item {
  display: flex; align-items: center; gap: 11px; height: 43px; padding: 0 13px;
  border: 0; border-radius: var(--r); background: transparent; color: #453f36;
  font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; width: 100%;
  transition: background .15s, color .15s, box-shadow .15s;
}
.rail__item svg { flex: 0 0 auto; opacity: .78; }
.rail__item:hover { background: rgba(32, 24, 18, .055); color: var(--text); }
.rail__item.on { background: var(--brand-600); color: #fff; font-weight: 600; box-shadow: var(--sh-brand); }
.rail__item.on svg { opacity: 1; }
.rail__item .rail__count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--brand-600); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.rail__item.on .rail__count { background: rgba(255, 255, 255, .28); }
.rail__foot { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid var(--border); }
.rail__foot-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--text-4); margin-bottom: 8px; }
.rail__foot p { font-size: 11.5px; line-height: 1.75; color: var(--text-3); }
.rail__link { color: var(--text-3); text-decoration: none; }
.rail__link:hover { color: var(--brand-600); text-decoration: underline; }
.rail__foot-dot { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11.5px; color: var(--text-3); }
.rail__foot-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(36, 142, 65, .16); }
.rail__foot-dot.bad i { background: var(--brand-600); box-shadow: 0 0 0 3px rgba(174, 24, 32, .16); }

.main { overflow-y: auto; background: var(--bg); }
.content { padding: 26px 30px 64px; max-width: 1560px; }

@media (max-width: 1080px) { :root { --rail-w: 200px; } .content { padding: 22px 20px 56px; } .banner__logo { height: 28px; } }
@media (max-width: 780px) {
  .shell { grid-template-rows: auto auto 1fr; }
  .banner { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .banner__date, .banner__sep, .whoami__text { display: none; }
  .banner__logo { height: 24px; }
  .banner__divider { display: none; }
  .shell__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px; }
  .rail__nav { flex-direction: row; gap: 6px; }
  .rail__group, .rail__foot { display: none; }
  .rail__item { width: auto; height: 38px; padding: 0 14px; font-size: 13px; }
  .content { padding: 16px 14px 48px; }
}

/* ---------- 8. 页头 ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head h2 { font-size: 29px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.page-head .sub { font-size: 13.5px; color: var(--text-3); margin-top: 5px; }
.page-head__actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.toolbar .spacer { flex: 1 1 auto; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters__label { font-size: 13px; color: var(--text-3); margin-right: -3px; }

/* ---------- 9. 指标卡 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sh-1);
  padding: 17px 20px 18px 22px; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stat:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-600); }
.stat.gold::before { background: var(--gold); }
.stat.green::before { background: var(--green); }
.stat.blue::before { background: var(--blue); }
.stat__num { font-size: 33px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat__num small { font-size: 15px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.stat__label { font-size: 13px; color: var(--text-3); margin-top: 3px; }
@media (max-width: 1080px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr 1fr; gap: 11px; } .stat { padding: 13px 14px 14px 17px; } .stat__num { font-size: 26px; } }

/* ---------- 10. 素材卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 20px; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; gap: 16px; } }

.card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  cursor: pointer;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--border-2); }
.card__cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.card__cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 76% 12%, rgba(255, 255, 255, .22), transparent 62%);
}
.card__badge {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--r-xs); background: rgba(255, 255, 255, .93); color: #2b2721;
  font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3);
  backdrop-filter: blur(4px);
}
.card__cat {
  position: relative; z-index: 2; color: #fff; font-size: 20px; font-weight: 700;
  letter-spacing: .2em; text-indent: .2em; text-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}
.card__price {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px); box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .5);
}
.card__body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 16.5px; font-weight: 700; line-height: 1.42; color: var(--text); }
.card__meta { margin-top: 10px; display: grid; gap: 5px; }
.card__meta li { position: relative; padding-left: 13px; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.card__meta li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); }
.card__foot { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; align-items: center; }

/* 分类封面渐变（取样自界面稿并扩展至全部分类） */
.g-video { background: linear-gradient(135deg, #7d1016, #c02129); }
.g-animation { background: linear-gradient(135deg, #d86c33, #eea651); }
.g-microfilm { background: linear-gradient(135deg, #4161af, #6e8ed3); }
.g-sand_painting { background: linear-gradient(135deg, #b08b51, #d2b985); }
.g-folding_screen { background: linear-gradient(135deg, #4e906d, #78b895); }
.g-stereoscopic_3d { background: linear-gradient(135deg, #6b4fa8, #9a85d6); }
.g-audio { background: linear-gradient(135deg, #2e7f94, #5fb3c7); }
.g-image { background: linear-gradient(135deg, #a64b7a, #d085ac); }
.g-template { background: linear-gradient(135deg, #5a6b7a, #8fa0ae); }
.g-other { background: linear-gradient(135deg, #8a8175, #b5ada1); }

/* ---------- 11. 面板 / 卡片容器 ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.panel + .panel { margin-top: 18px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.panel__head h3 { font-size: 15.5px; font-weight: 700; }
.panel__head .muted { font-size: 12.5px; margin-top: 2px; }
.panel__body { padding: 18px; }
.panel__body.tight { padding: 0; }
.panel__foot { padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.stack { display: grid; gap: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1080px) { .grid-3 { grid-template-columns: 1fr; } }

/* 定义列表 */
.dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13.5px; }
.dl dt { color: var(--text-3); white-space: nowrap; }
.dl dd { margin: 0; color: var(--text); word-break: break-word; }

/* ---------- 12. 表格 ---------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; font-size: 12.5px;
  color: var(--text-3); background: var(--surface-2); padding: 11px 14px;
  border-bottom: 1px solid var(--border); white-space: nowrap; letter-spacing: .02em;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .strong { font-weight: 600; }
table.tbl .col-actions { white-space: nowrap; }
table.tbl .sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* ---------- 13. 抽屉 & 弹窗 ---------- */
.scrim { position: fixed; inset: 0; background: rgba(28, 21, 16, .44); backdrop-filter: blur(2px); z-index: 60; animation: fade .18s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes slideIn { from { transform: translateX(40px); opacity: .4; } }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 94vw); background: var(--surface); z-index: 61; box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: slideIn .26s var(--ease); }
.drawer__cover { position: relative; padding: 22px 24px; color: #fff; }
.drawer__cover h3 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.drawer__cover .sub { font-size: 12.5px; color: rgba(255, 255, 255, .82); margin-top: 6px; }
.drawer__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; }
.drawer__close:hover { background: rgba(0, 0, 0, .46); }
.drawer__body { padding: 20px 24px 28px; overflow-y: auto; flex: 1; }
.drawer__foot { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; gap: 9px; flex-wrap: wrap; }
.drawer__sec + .drawer__sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.drawer__sec h4 { font-size: 13px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; margin-bottom: 12px; }
.drawer__sec h4 span.count { color: var(--text-4); font-weight: 500; }

.modal { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(580px, 94vw); max-height: 90vh; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: slideUp .22s var(--ease); }
.modal.wide { width: min(820px, 95vw); }
.modal__head { padding: 19px 22px 15px; border-bottom: 1px solid var(--border); }
.modal__head h3 { font-size: 17px; font-weight: 700; }
.modal__head .sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.modal__body { padding: 20px 22px; overflow-y: auto; }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ---------- 14. 提示条 ---------- */
.toasts { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; max-width: 380px; padding: 12px 15px;
  border-radius: var(--r); background: #26221d; color: #fff; font-size: 13.5px; line-height: 1.5;
  box-shadow: var(--sh-3); pointer-events: auto; animation: slideUp .22s var(--ease);
}
.toast.ok { background: #1c6b3c; }
.toast.bad { background: #9c1620; }
.toast.warn { background: #91601a; }
.toast i { flex: 0 0 auto; font-style: normal; font-weight: 700; }

/* ---------- 15. 空态 / 骨架 / 载入 ---------- */
.empty { padding: 56px 20px; text-align: center; color: var(--text-3); }
.empty__icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: var(--r-md); background: var(--surface-3); display: grid; place-items: center; }
.empty__icon svg { opacity: .5; }
.empty h4 { font-size: 14.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.empty p { font-size: 13px; }

.sk { background: linear-gradient(90deg, #eeeae4 25%, #f6f3ef 37%, #eeeae4 63%); background-size: 400% 100%; animation: sk 1.3s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes sk { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.sk-card { height: 300px; border-radius: var(--r-md); }
.sk-row { height: 42px; margin-bottom: 8px; }

.spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn:not(.primary) .spin, .btn.ghost .spin { border-color: rgba(32, 24, 18, .25); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 16. 进度条 / 图表 ---------- */
.bar { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.bar > i { display: block; height: 100%; }
.meter { display: grid; gap: 6px; }
.meter__top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-2); }
.chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 20px; }
.chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.chart__stack { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; box-shadow: var(--sh-1); }
.chart__stack i { display: block; width: 100%; }
.chart__label { font-size: 11px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- 17. 其他 ---------- */
.rule-card { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }
.rule-card__head { padding: 14px 17px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.rule-card__head h4 { font-size: 14.5px; font-weight: 700; }
.rule-card__head .basis { font-size: 12px; color: var(--brand-600); font-weight: 600; margin-top: 2px; }
.rule-card__body { padding: 16px 17px; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.pager__info { font-size: 12.5px; color: var(--text-3); margin-right: auto; font-variant-numeric: tabular-nums; }
.kv-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); }
.hr { height: 1px; background: var(--border); margin: 18px 0; border: 0; }
.cover-thumb { aspect-ratio: 16/9; width: 88px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 600; flex: 0 0 auto; }
.copy { cursor: pointer; border-bottom: 1px dashed var(--text-4); }
.copy:hover { color: var(--brand-600); border-color: var(--brand-200); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .card:hover, .stat:hover { transform: none; }
}

/* ============================================================================
 * AI 助手 —— 状态条 / 语义检索 / 对话
 * ========================================================================== */
.ai-strip{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px}
.ai-strip__chips{display:flex;gap:8px;flex-wrap:wrap}
.ai-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;
  background:var(--warm-050,#faf8f5);border:1px solid var(--line);color:var(--ink)}
.ai-chip small{opacity:.6;font-weight:600}
.ai-chip i{width:7px;height:7px;border-radius:50%;background:#c9c4bd;display:inline-block}
.ai-chip.on i{background:#248E41;box-shadow:0 0 0 3px rgba(36,142,65,.15)}
.ai-chip.off i{background:#c0392b}
.ai-chip.off{opacity:.75}
.ai-strip__meta{font-size:12px;color:var(--muted,#6b6560);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ai-queue{padding:3px 9px;border-radius:999px;background:rgba(36,142,65,.1);color:#1c6b31}
.ai-queue.busy{background:rgba(200,161,80,.18);color:#8a6a1f}

.ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
@media(max-width:1180px){.ai-grid{grid-template-columns:1fr}}
.ai-col{min-width:0}

/* 检索 */
.ai-search{display:flex;gap:8px}
.ai-search input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit}
.ai-search input:focus{outline:none;border-color:var(--brand-600,#AE1820);box-shadow:0 0 0 3px rgba(174,24,32,.1)}
.ai-search__hint{font-size:12px;color:var(--muted,#6b6560);margin:6px 0 10px}
.ai-results{max-height:560px;overflow:auto}
.ai-hits__head{font-size:12px;color:var(--muted,#6b6560);margin-bottom:8px}
.ai-hit{display:flex;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  background:#fff;cursor:pointer;transition:.15s}
.ai-hit:hover{border-color:var(--brand-600,#AE1820);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.ai-hit__score{flex:0 0 46px;text-align:center;font-size:16px;font-weight:700;color:var(--brand-700,#8f141c);
  background:var(--warm-050,#faf8f5);border-radius:8px;padding:4px 0;line-height:1.15}
.ai-hit__score small{display:block;font-size:10px;font-weight:500;opacity:.6}
.ai-hit__body{min-width:0;flex:1}
.ai-hit__body h4{margin:0 0 4px;font-size:14px}
.ai-hit__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted,#6b6560)}
.ai-hit__price{color:var(--brand-700,#8f141c);font-weight:600}
.ai-hit__occ{margin-top:6px;font-size:12px;color:#8a6a1f;background:rgba(200,161,80,.13);padding:3px 8px;border-radius:6px;display:inline-block}
.ai-hit__occ.free{color:#1c6b31;background:rgba(36,142,65,.1)}
.ai-hit__text{margin:6px 0 0;font-size:12.5px;color:var(--muted,#6b6560);line-height:1.55}
.ai-hit.policy .ai-hit__score{color:#1c4e8a;background:rgba(46,103,174,.08)}

/* 对话 */
.ai-scenes{display:flex;gap:6px;flex-wrap:wrap}
.ai-chat{min-height:340px;max-height:520px;overflow:auto;padding:4px}
.ai-welcome{text-align:center;padding:26px 16px;color:var(--muted,#6b6560)}
.ai-welcome__icon{width:52px;height:52px;border-radius:14px;margin:0 auto 12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-800,#7D1016),var(--brand-600,#BF2129));color:#fff}
.ai-welcome h3{margin:0 0 6px;color:var(--ink,#2b2724);font-size:15px}
.ai-welcome p{margin:0 auto 14px;max-width:430px;font-size:13px;line-height:1.6}
.ai-suggest{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}

.msg{display:flex;gap:9px;margin-bottom:14px}
.msg.user{justify-content:flex-end}
.msg__avatar{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand-800,#7D1016),var(--brand-600,#BF2129))}
.msg__col{min-width:0;max-width:86%}
.msg__bubble{padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.68;background:#fff;border:1px solid var(--line);word-break:break-word}
.msg.user .msg__bubble{background:var(--brand-600,#BF2129);color:#fff;border-color:transparent}
.msg__bubble.thinking{display:flex;align-items:center;gap:8px;color:var(--muted,#6b6560)}
.msg__cites{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.cite{font-size:11.5px;padding:3px 8px;border-radius:6px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-family:ui-monospace,monospace;color:#1c4e8a}
.cite:hover{border-color:#1c4e8a;background:rgba(46,103,174,.07)}
.msg__foot{margin-top:4px;font-size:11px;color:var(--muted,#6b6560);opacity:.75}

.ai-input{display:flex;gap:8px;align-items:flex-end}
.ai-input textarea{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:inherit;font-size:13.5px;resize:vertical}
.ai-input textarea:focus{outline:none;border-color:var(--brand-600,#AE1820);box-shadow:0 0 0 3px rgba(174,24,32,.1)}
.ai-foot-note{font-size:11.5px;color:var(--muted,#6b6560);margin-top:7px}
.cite-doc p{margin:0 0 10px;line-height:1.75;font-size:13.5px}
.cite-doc{background:var(--warm-050,#faf8f5);border:1px solid var(--line);border-radius:10px;padding:14px}


/* ============================================================
   单位权限 / 账号权限（用户与组织）
   ============================================================ */
.perm-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .perm-layout { grid-template-columns: 1fr; } }

.perm-list .panel__body { max-height: 640px; overflow: auto; }
.perm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-left: 3px solid transparent;
  padding: 9px 12px; cursor: pointer; color: inherit; font: inherit;
}
.perm-item:hover { background: var(--surface-3); }
.perm-item.on { background: var(--brand-050); border-left-color: var(--brand-600); }
.perm-item__name { font-weight: 600; flex: 0 0 auto; }
.perm-item__meta { flex: 1 1 auto; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.perm-scope {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 16px; border-radius: var(--r); background: var(--surface-3);
}
.perm-scope__label { font-weight: 600; }
.perm-note { padding: 10px 12px; margin-bottom: 16px; border-radius: var(--r); background: var(--surface-3); font-size: 13px; color: var(--text-2); }

.perm-group { margin-bottom: 18px; }
.perm-group__title { font-weight: 600; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
.perm-group__items { display: flex; flex-wrap: wrap; gap: 8px; }

.perm-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--r-pill); border: 1px solid var(--border-2);
  cursor: pointer; font-size: 13px; user-select: none; background: var(--surface);
}
.perm-chip:hover { border-color: var(--brand-200); }
.perm-chip input { margin: 0; accent-color: var(--brand-600); }
.perm-chip.on { border-color: var(--brand-500); background: var(--brand-050); font-weight: 600; }
.perm-chip.extra { border-style: dashed; }
.perm-chip.cut { opacity: .6; }
.perm-chip.cut .perm-chip__label { text-decoration: line-through; }
.perm-tag { font-size: 11px; padding: 0 6px; border-radius: var(--r-pill); white-space: nowrap; }
.perm-tag.grant { background: #eef8f1; color: #1c7440; }
.perm-tag.revoke { background: #fdf2f2; color: #a3161d; }

.perm-editor .row-actions { display: flex; gap: 8px; }


/* ============================================================================
 * 角色工作台卡片（按角色区分界面）
 * ==========================================================================*/
.workbench {
  margin: 0 0 18px; padding: 15px 18px; border-radius: var(--r);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--brand-050), var(--surface) 62%);
  display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
}
@media (max-width: 1100px) { .workbench { grid-template-columns: 1fr; gap: 11px; } }
.workbench__badge { font-size: 16.5px; font-weight: 700; color: var(--brand-700); letter-spacing: .2px; }
.workbench__sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.workbench__duties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 20px; }
.workbench__duties li { font-size: 13px; color: var(--text-2); position: relative; padding-left: 13px; }
.workbench__duties li::before {
  content: ''; position: absolute; left: 0; top: 6.5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-700);
}
.workbench__quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.workbench__quick-title { font-size: 12px; color: var(--text-3); }
.workbench__hint {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3);
  border-top: 1px dashed var(--border-2); padding-top: 10px;
}

/* ---------- 素材文件与受控交付（资产抽屉内） ---------- */
.files { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .files { grid-template-columns: 1fr; } }
.files__cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border: 1px solid var(--border); border-radius: var(--r); background: #1c1916;
}
.files__cover--none { display: grid; place-items: center; font-size: 12px; color: var(--text-3); }
.files__main { min-width: 0; }
.files__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.files__head .spacer { flex: 1; }
td.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.link, button.link {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px;
  color: var(--brand-700); text-decoration: none; font-family: inherit;
}
a.link:hover, button.link:hover { text-decoration: underline; }
.token-box {
  width: 100%; box-sizing: border-box; padding: 10px; resize: vertical;
  font-family: var(--font-num, monospace); font-size: 12.5px; line-height: 1.6;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r);
}

/* ============================================================================
 * 新增：角色模拟横幅 · 项目介绍 · 精选推介 · 角色模拟模块 · 权限矩阵
 * ========================================================================== */

/* ---------- 角色模拟横幅：常驻在顶栏下方，不能被忽略 ---------- */
.simbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 46px; padding: 8px 20px; font-size: 13.5px; color: #fff;
  background: linear-gradient(90deg, #7d1016 0%, #a6171e 52%, #bf2129 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.simbar.hidden { display: none; }
.simbar b { letter-spacing: .06em; }
.simbar__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #ffd36e; box-shadow: 0 0 0 4px rgba(255, 211, 110, .22);
  animation: simPulse 1.6s ease-in-out infinite;
}
@keyframes simPulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.simbar__text { color: rgba(255, 255, 255, .9); }
.simbar .spacer { flex: 1; }
.simbar .btn.xs { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .32); color: #fff; }
.simbar .btn.xs:hover { background: rgba(255, 255, 255, .26); }
.simbar .btn.xs.danger { background: #fff; border-color: #fff; color: var(--brand-800); font-weight: 600; }

/* ---------- 项目介绍 ---------- */
.btn.lg { padding: 11px 22px; font-size: 14.5px; border-radius: var(--r); }
.ix-hero {
  position: relative; overflow: hidden; margin-bottom: 26px; border-radius: var(--r-lg);
  padding: 54px 46px 40px; color: #fff; box-shadow: var(--sh-3);
  background: radial-gradient(120% 150% at 12% 0%, #8e1218 0%, #6d0e13 46%, #38090c 100%);
}
.ix-hero__glow {
  position: absolute; right: -12%; top: -46%; width: 640px; height: 640px; pointer-events: none;
  background: radial-gradient(circle, rgba(200, 161, 80, .3), transparent 62%);
}
.ix-hero__inner { position: relative; max-width: 1000px; }
.ix-hero__badge {
  display: inline-block; margin-bottom: 20px; padding: 5px 13px; font-size: 11.5px;
  letter-spacing: .12em; border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill); color: rgba(255, 255, 255, .88);
}
.ix-hero h1 {
  margin: 0 0 18px; font-weight: 700; letter-spacing: -.6px; line-height: 1.24;
  font-size: clamp(27px, 3.4vw, 45px);
}
.ix-hero h1 em { font-style: normal; color: #f0cf8a; }
.ix-hero__lead { max-width: 64ch; margin: 0 0 26px; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, .87); }
.ix-hero__lead strong { color: #fff; }
.ix-hero__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.ix-hero__who { margin-left: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.ix-hero .btn.ghost { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); color: #fff; }
.ix-hero .btn.ghost:hover { background: rgba(255, 255, 255, .22); }
.ix-hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px;
  overflow: hidden; border-radius: var(--r-md); background: rgba(255, 255, 255, .16);
}
.ix-herostat { padding: 16px 18px; background: rgba(0, 0, 0, .17); }
.ix-herostat b { display: block; font-family: var(--font-num); font-size: 26px; line-height: 1.25; }
.ix-herostat span { font-size: 12.5px; color: rgba(255, 255, 255, .74); }
.ix-herostat.gold b { color: #f0cf8a; }
.ix-herostat.green b { color: #8fd9a3; }
.ix-herostat.blue b { color: #9cc3f2; }

.ix-sec { margin-bottom: 26px; }
.ix-sec--tint {
  padding: 34px 32px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
}
.ix-sec__head { max-width: 78ch; margin-bottom: 22px; }
.ix-sec__kicker {
  margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-700);
}
.ix-sec__head h2 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 27px); line-height: 1.36; letter-spacing: -.3px; }
.ix-sec__head p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

.ix-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; }
.ix-card {
  padding: 22px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.ix-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.ix-card__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: var(--r-sm); background: var(--brand-050); color: var(--brand-700);
}
.ix-card h3 { margin: 0 0 8px; font-size: 16px; }
.ix-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.78; color: var(--text-2); }
.ix-card ul { margin: 0; padding: 0; list-style: none; }
.ix-card li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.95; color: var(--text-3); }
.ix-card li::before {
  content: ''; position: absolute; left: 3px; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500);
}

.ix-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 14px; }
.ix-step { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.ix-step__no { margin-bottom: 8px; font-family: var(--font-num); font-size: 22px; font-weight: 700; color: var(--brand-200); }
.ix-step h3 { margin: 0 0 6px; font-size: 15px; }
.ix-step p { margin: 0 0 10px; font-size: 13px; line-height: 1.78; color: var(--text-2); }
.ix-step__who { padding-top: 9px; font-size: 12px; color: var(--text-3); border-top: 1px dashed var(--border); }

.ix-splits { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; }
.ix-split { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.ix-split h3 { margin: 0 0 16px; font-size: 15px; }
.ix-split__row {
  display: grid; grid-template-columns: 116px 1fr 44px; gap: 10px; align-items: center;
  margin-bottom: 10px; font-size: 13px;
}
.ix-split__track { height: 8px; overflow: hidden; background: var(--surface-3); border-radius: var(--r-pill); }
.ix-split__track i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-600), var(--gold));
  animation: ixBar .75s var(--ease) both;
}
@keyframes ixBar { from { width: 0 !important } }
.ix-split__row b { font-family: var(--font-num); text-align: right; }
.ix-split__note {
  margin: 12px 0 0; padding-top: 10px; font-size: 12px; color: var(--text-3);
  border-top: 1px dashed var(--border);
}

.ix-rules { display: grid; gap: 1px; overflow: hidden; background: var(--border); border-radius: var(--r-md); }
.ix-rule { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 16px 20px; background: var(--surface); }
.ix-rule__no { font-family: var(--font-num); font-size: 12.5px; font-weight: 700; color: var(--brand-700); }
.ix-rule p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }

.ix-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 28px 32px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--surface) 0%, var(--brand-050) 100%);
}
.ix-cta h2 { margin: 0 0 6px; font-size: 20px; }
.ix-cta p { max-width: 64ch; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.ix-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 外部单位：精选推介 ---------- */
.show-hero {
  position: relative; overflow: hidden; padding: 40px 40px 34px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: radial-gradient(130% 170% at 6% 0%, #fdf4e7 0%, #f8f3ec 44%, var(--bg) 100%);
}
.show-hero__glow {
  position: absolute; right: -70px; top: -130px; width: 430px; height: 430px; pointer-events: none;
  background: radial-gradient(circle, rgba(191, 33, 41, .14), transparent 62%);
}
.show-hero__inner { position: relative; max-width: 76ch; }
.show-hero__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-700); }
.show-hero h2 { margin: 10px 0 12px; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.32; letter-spacing: -.4px; }
.show-hero p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.88; color: var(--text-2); }
.show-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 18px; }
.show-tile {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.show-tile:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.show-tile:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.show-tile__cover { position: relative; display: flex; align-items: flex-start; justify-content: space-between; height: 152px; padding: 12px; }
.show-tile__cat, .show-tile__protect {
  padding: 3px 10px; font-size: 11.5px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .44); color: #fff;
}
.show-tile__protect { background: rgba(255, 255, 255, .88); color: var(--text); }
.show-tile__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.show-tile__body h3 { margin: 0; font-size: 16px; line-height: 1.46; }
.show-tile__meta { margin: 0; padding: 0; list-style: none; }
.show-tile__meta li { font-size: 12.5px; line-height: 1.85; color: var(--text-3); }
.show-tile__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.show-tile__price { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: var(--brand-700); }
.show-tile__price i { font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.show-tile__go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.show-tile:hover .show-tile__go { color: var(--brand-700); }

/* ---------- 角色模拟模块 ---------- */
.simhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.simhead__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; }
.simhead p { max-width: 80ch; margin: 0; font-size: 13.5px; line-height: 1.85; }
.simhead__now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alert--info {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px;
  font-size: 13px; line-height: 1.75; color: var(--text-2); border-radius: var(--r);
  background: var(--brand-050); border: 1px solid var(--brand-100);
}
.alert--info svg { flex: none; margin-top: 2px; color: var(--brand-700); }
.simgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.simcard {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.simcard:hover { box-shadow: var(--sh-2); }
.simcard.on { border-color: var(--brand-500); box-shadow: var(--sh-brand); }
.simcard__head { display: flex; align-items: center; gap: 12px; }
.simcard__avatar {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  font-size: 15px; font-weight: 700; border-radius: 50%;
  background: var(--brand-050); color: var(--brand-700);
}
.simcard__head h3 { margin: 0; font-size: 15.5px; }
.simcard__head .sub { font-size: 11.5px; color: var(--text-3); }
.simcard__sub { font-size: 13px; line-height: 1.72; color: var(--text-2); }
.simcard__meta {
  display: flex; gap: 18px; margin: 0; padding: 12px 0; list-style: none;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}
.simcard__meta li { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--text-3); }
.simcard__meta b { font-size: 13px; color: var(--text); }
.simcard__duties { margin: 0; padding: 0; list-style: none; }
.simcard__duties li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.9; color: var(--text-3); }
.simcard__duties li::before { content: '·'; position: absolute; left: 4px; }
.simcard__foot { margin-top: auto; }
.simcard__foot .btn { width: 100%; }

/* ---------- 权限矩阵 ---------- */
.mx-wrap { overflow-x: auto; }
table.mx th, table.mx td { border-bottom: 1px solid var(--border); }
table.mx thead th { background: var(--surface-2); }
.mx__perm {
  position: sticky; left: 0; z-index: 2; min-width: 224px; padding: 10px 14px;
  text-align: left; background: var(--surface);
}
.mx__perm b { display: block; font-size: 13px; }
.mx__perm .mono { font-size: 11px; color: var(--text-4); }
.mx__role { min-width: 92px; padding: 10px 8px; text-align: center; vertical-align: bottom; }
.mx__role b { display: block; font-size: 12.5px; }
.mx__role .mono { display: block; font-size: 10px; color: var(--text-4); }
.mx__count {
  display: inline-block; margin-top: 5px; padding: 1px 7px; font-size: 10.5px;
  color: var(--text-3); background: var(--surface-3); border-radius: var(--r-pill);
}
.mx__group td { padding: 7px 14px; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--text-2); background: var(--surface-2); }
.mx__group .muted { margin-left: 8px; font-size: 11px; font-weight: 400; }
.mx__cell { padding: 8px; text-align: center; }
.mx__cell input { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; }
.mx__cell input:disabled { cursor: not-allowed; opacity: .55; }
.mx__cell.mx--grant { background: #eefaf1; box-shadow: inset 0 0 0 1px #bfe6ca; }
.mx__cell.mx--revoke { background: #fdeeee; box-shadow: inset 0 0 0 1px #f0c9c9; }

@media (max-width: 860px) {
  .ix-hero { padding: 36px 24px 30px; }
  .ix-sec--tint { padding: 24px 20px; }
  .show-hero { padding: 28px 22px 26px; }
}

/* ========================================================================
 * 作品详情（整页）—— 参照 Dell 人工智能解决方案页的信息架构
 *   Hero 主张 → 应用场景(tabs) → 授权概览指标带 → 授权类型与交付网格
 *   → 五步流程 → 相关资源 → 交易与存证明细（真实业务数据）
 * ===================================================================== */
.ad { display: flex; flex-direction: column; gap: 22px; }

.ad__crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }
.ad__crumbs a { color: var(--text-2); cursor: pointer; }
.ad__crumbs a:hover { color: var(--brand-600); }
.ad__crumbs b { color: var(--text); }

/* ---------- ① Hero：这部作品能给您什么 ---------- */
.dx-hero {
  /* 黄金分割 φ=1.618：主视觉（缩略图）占横向大头，文案占小头。
     比例 1 : 1.618 —— 与 Dell 大图待客的版面一致，缩略图不再被掐在 440px。 */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 38px; align-items: center; padding: 34px 36px 32px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.dx-hero__text { min-width: 0; }
.dx-hero h1 { margin: 10px 0 0; font-size: 29px; line-height: 1.28; letter-spacing: -.4px; }
.dx-hero__claim { margin: 12px 0 0; font-size: 15px; line-height: 1.72; color: var(--text-2); }
.dx-hero__claim b { color: var(--brand-600); font-size: 17px; }
.dx-hero__stats { display: flex; flex-wrap: wrap; margin: 18px 0 0; padding: 14px 0 0;
  list-style: none; border-top: 1px dashed var(--border-2); }
.dx-hero__stats li { min-width: 82px; padding: 0 14px; border-left: 1px solid var(--border); }
.dx-hero__stats li:first-child { padding-left: 0; border-left: 0; }
.dx-hero__stats b { display: block; font-family: var(--font-num); font-size: 16px; line-height: 1.4; color: var(--text); }
.dx-hero__stats span { font-size: 12px; color: var(--text-3); }
.dx-hero__media { min-width: 0; }
.dx-hero .ad__cover { width: 100%; }

.ad__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ad__meta { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.ad__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.dx-hero .ad__cta { margin-top: 16px; }
.ad__note { margin: 14px 0 0; font-size: 12px; color: var(--text-3); }

.ad__cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-md);
  display: grid; place-items: center; box-shadow: var(--sh-1); }
.ad__cover-tag { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; letter-spacing: .2px; }
.ad__cover-preview { position: absolute; inset: 0; }
.ad__cover-preview img, .ad__cover-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 通用「带」区块 ---------- */
.dx-band { padding: 26px 28px 28px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.dx-band--tint { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.dx-band--plain { background: transparent; border: 0; box-shadow: none; padding: 4px 0 0; }
.dx-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 20px; }
.dx-band__head h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.3px; }
.dx-band__head p { margin: 8px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.dx-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--brand-600); }
.dx-count { font-family: var(--font-num); font-size: 12.5px; color: var(--text-3); }

/* ---------- ② 应用场景（tabs） ---------- */
.dx-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.dx-tab { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-2); font-size: 13px; cursor: pointer; transition: all .16s var(--ease); }
.dx-tab:hover { border-color: var(--text-4); color: var(--text); }
.dx-tab.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
.dx-tab span { font-family: var(--font-num); font-size: 11.5px; padding: 1px 6px; border-radius: var(--r-pill); background: rgba(32, 24, 18, .08); }
.dx-tab.is-on span { background: rgba(255, 255, 255, .24); }

.dx-scenes { padding-top: 20px; }
.dx-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 28px; }
.dx-scene__main h3 { margin: 0; font-size: 19px; }
.dx-scene__main > p { margin: 10px 0 0; max-width: 70ch; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.dx-scene__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 20px; }
.dx-scene__facts > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 11px 13px; }
.dx-scene__facts span { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.dx-scene__facts b { font-size: 14px; }
.dx-scene__side { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; }
.dx-scene__k { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--text-3); }
.dx-scene__lic { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dx-scene__lic li { display: flex; flex-direction: column; gap: 2px; padding-left: 11px; border-left: 2px solid var(--brand-200); }
.dx-scene__lic b { font-size: 12.5px; }
.dx-scene__lic span { font-size: 12.5px; color: var(--text-2); }

.dx-empty { display: flex; align-items: flex-start; gap: 14px; padding: 20px; margin-top: 18px;
  background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--r-md); color: var(--text-2); }
.dx-empty b { display: block; color: var(--text); margin-bottom: 4px; }
.dx-empty p { margin: 0; font-size: 13px; line-height: 1.7; max-width: 70ch; }
.dx-empty > button { margin-left: auto; flex: none; }

/* ---------- ③ 授权概览指标带 ---------- */
.dx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0; }
.dx-kpis > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 16px; border-top: 3px solid var(--brand-500); box-shadow: var(--sh-1); }
.dx-kpi__k { display: block; font-size: 12px; color: var(--text-3); }
.dx-kpi__v { display: block; margin: 6px 0 4px; font-size: 21px; font-family: var(--font-num); letter-spacing: -.4px; }
.dx-kpi__s { display: block; font-size: 11.5px; line-height: 1.55; color: var(--text-3); }
.dx-kpi__v--sm { font-size: 15.5px; letter-spacing: 0; word-break: keep-all; }

/* ---------- ④ 授权类型与交付物 ---------- */
.dx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dx-cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 14px; }
.dx-cards--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dx-card { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px 17px 17px; transition: all .16s var(--ease); }
.dx-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); transform: translateY(-1px); }
.dx-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.dx-card__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--brand-050); color: var(--brand-600); border: 1px solid var(--brand-100); }
.dx-card h4 { margin: 0 0 7px; font-size: 15.5px; }
.dx-card p { margin: 0; font-size: 13px; line-height: 1.72; color: var(--text-2); }
.dx-card__foot { padding-top: 10px; font-family: var(--font-num); font-size: 12.5px; color: var(--brand-700); }
.dx-card--flat, .dx-card--res { background: var(--surface); }
.dx-card--res .btn { margin-top: auto; align-self: flex-start; }
.dx-card--res .btn { padding-top: 0; }
.dx-card--res button { margin-top: 14px; }
.dx-card--res svg { transform: rotate(180deg); }
.dx-tag--on { background: rgba(36, 142, 65, .1); color: var(--green); border-color: rgba(36, 142, 65, .25); }

/* ---------- ⑤ 五步流程 ---------- */
.dx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0; }
.dx-steps > li { display: flex; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 16px 15px; }
.dx-step__no { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-600); color: #fff; font-family: var(--font-num); font-size: 13px; font-weight: 700; }
.dx-steps b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.dx-steps p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.dx-step__who { display: inline-block; margin-top: 9px; font-size: 11.5px; color: var(--text-3);
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--surface-3); }

/* ---------- ⑦ 交易与存证明细 ---------- */
.ad__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px; align-items: start; }
.ad__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ad__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ad__sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 19px 19px; box-shadow: var(--sh-1); }
.ad__sec > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15.5px; }
.ad__count { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--brand-700);
  background: var(--brand-050); border: 1px solid var(--brand-100); border-radius: var(--r-pill); padding: 1px 8px; }
.ad__lead { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.ad__hint { margin: -4px 0 12px; font-size: 12.5px; color: var(--text-3); }
.ad__k { display: block; font-size: 11.5px; color: var(--text-3); margin-bottom: 3px; }
.ad__grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; }
.ad__trade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px; }
.ad__trade-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 13px 14px; }
.ad__trade-item b { font-size: 14.5px; }
.ad__trade-item p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.ad__locked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;
  padding-top: 13px; border-top: 1px dashed var(--border-2); }

/* 带水印预览件 */
.preview-box { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.preview-box__bar { padding: 8px 12px; font-size: 12px; color: var(--brand-700); background: var(--brand-050);
  border-bottom: 1px solid var(--brand-100); }
.preview-box__stage { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #000; }
.preview-box__stage img, .preview-box__stage video { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1240px) {
  .dx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; }
}

@media (max-width: 1100px) {
  .dx-hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .dx-hero h1 { font-size: 26px; }
  .dx-scene { grid-template-columns: 1fr; gap: 18px; }
  .ad__cols { grid-template-columns: 1fr; }
  .dx-band { padding: 20px 18px 22px; }
}

/* ---------- AI 答案渲染（极简 Markdown）----------
 * DeepSeek 返回带 **加粗**、- 列表、### 小标题的 Markdown，
 * 这里给还原后的标记配上排版，避免挤成一坨。
 */
.msg__bubble ul,
.msg__bubble ol { margin: 6px 0 6px 18px; padding: 0; }
.msg__bubble li { margin: 3px 0; list-style: disc; line-height: 1.7; }
.msg__bubble ol li { list-style: decimal; }
.msg__bubble .md-h { font-weight: 600; margin: 10px 0 4px; color: var(--text); }
.msg__bubble .md-gap { height: 7px; }
.msg__bubble strong { font-weight: 600; color: var(--text); }
.msg__bubble code {
  background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em;
}