/* AIGC 混剪拆爆款系统 — 白主调 + 软线 + 圆角（与 result 页同源） */

:root {
  /* 背景层叠 — 主调白，对齐 result 页 */
  --bg-0: #ffffff;
  --bg-1: #f8f9fa;
  --bg-2: #f1f3f4;
  --bg-3: #e8eaed;
  --bg-hover: #e8eaed;

  /* 描边 — 整体下移一档：原 line-1 (#dadce0) 偏重，把"几乎隐形"作为默认 */
  --line-1: #e8eaed;
  --line-2: #dadce0;
  --line-strong: #bdc1c6;
  --line-soft: #eef0f2;     /* 仅给"近乎不可见的内部分隔"使用 */

  /* 文字 */
  --fg-0: #1a1a1a;
  --fg-1: #3c4043;
  --fg-2: #5f6368;
  --fg-3: #80868b;
  --fg-4: #9aa0a6;

  /* 强调色 — 保持 cyan 不变 */
  --cyan: oklch(0.60 0.12 195);
  --cyan-soft: oklch(0.60 0.12 195 / 0.10);
  --orange: oklch(0.60 0.14 50);
  --orange-soft: oklch(0.60 0.14 50 / 0.10);
  --pink: oklch(0.58 0.15 10);
  --pink-soft: oklch(0.58 0.15 10 / 0.10);
  --green: oklch(0.60 0.12 150);
  --green-soft: oklch(0.60 0.12 150 / 0.10);
  --purple: oklch(0.58 0.13 295);
  --purple-soft: oklch(0.58 0.13 295 / 0.10);
  --yellow: oklch(0.75 0.12 95);

  /* 平台色 */
  --pf-douyin: oklch(0.60 0.14 10);
  --pf-xhs: oklch(0.58 0.16 25);
  --pf-ks: oklch(0.62 0.14 45);
  --pf-sph: oklch(0.60 0.12 150);

  /* 圆角 — 整体加大让组件更圆润 */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* 软阴影 — 用于卡片，配合软线减少"硬框感" */
  --shadow-1: 0 1px 0 rgba(31, 30, 27, 0.04), 0 0 0 1px var(--line-1);
  --shadow-2: 0 4px 14px rgba(31, 30, 27, 0.06), 0 0 0 1px var(--line-1);

  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-display: "Inter", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }

.app {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

/* 通用工具 */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.grow { flex: 1 1 auto; min-width: 0; min-height: 0; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }

/* ============ 侧边栏 ============ */
.sidebar {
  width: 212px;
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sb-brand {
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-logo {
  width: 24px; height: 24px;
  border-radius: 7px;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(135deg, color-mix(in oklch, var(--cyan) 80%, white), var(--cyan));
  position: relative;
  box-shadow: 0 1px 0 rgba(31, 30, 27, 0.06);
}
.sb-name { font-size: 14px; font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.sb-name .zh { color: var(--fg-1); font-weight: 500; }
.sb-ver { font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); margin-top: 2px; letter-spacing: 0.04em; }

.sb-nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-4);
  padding: 14px 10px 6px;
  font-weight: 500;
}
/* 组别标签前加一段 12px 彩色短杠（参考 Autosend：橙 / 粉 / 绿 循环） */
.sb-group-label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--orange);
  flex-shrink: 0;
}
.sb-nav > .sb-group-label:nth-of-type(2)::before { background: var(--pink); }
.sb-nav > .sb-group-label:nth-of-type(3)::before { background: var(--green); }
.sb-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: 13.5px;
  cursor: pointer;
  font-weight: 450;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.sb-item:hover { background: rgba(31, 30, 27, 0.03); color: var(--fg-1); }
.sb-item.active {
  background: oklch(0.60 0.12 195 / 0.18);
  color: var(--cyan);
  font-weight: 600;
}
.sb-item.active .sb-ic { color: var(--cyan); }
/* 左侧 3px cyan 实心竖条 + 项目向右挪 3px：让"当前页"一眼可识别。
   不在 sb-nav padding 区里 ::before，而是借助 box-shadow 在元素左边缘画一条粗线，
   这样无论上层是否有 overflow 都不会被裁掉。 */
.sb-item.active {
  box-shadow: inset 3px 0 0 0 var(--cyan);
  padding-left: 13px;       /* 8 + 3 + 2 缓冲，给左条让出空间 */
}
.sb-ic {
  width: 16px; height: 16px;
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.sb-badge.hot { background: var(--orange-soft); color: var(--orange); }

.sb-footer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-user-name { font-size: 11.5px; color: var(--fg-1); font-weight: 500; }
.sb-user-plan { font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); }

/* ============ 顶部栏 ============ */
.topbar {
  height: 44px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-0);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  flex-shrink: 0;
}
.crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); }
.crumb .sep { color: var(--fg-4); }
.crumb .cur { color: var(--fg-0); font-weight: 500; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  color: var(--fg-2);
  background: var(--bg-1);
  white-space: nowrap;
}
.pill.live { color: var(--green); background: var(--green-soft); border-color: transparent; }
.pill.live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line-1);
  background: var(--bg-1);
  color: var(--fg-1);
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--bg-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn.ghost:hover { background: var(--bg-2); color: var(--fg-0); }
.btn.primary {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.accent {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  font-weight: 600;
}
.btn.sm { height: 22px; padding: 0 8px; font-size: 10.5px; }

/* ============ 表单控件 ============ */
input.input,
select.select,
textarea.textarea {
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  color: var(--fg-1);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
input.input:hover:not(:disabled):not(:focus),
select.select:hover:not(:disabled):not(:focus),
textarea.textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--line-2);
}
input.input:focus,
select.select:focus,
textarea.textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}
input.input:disabled,
select.select:disabled,
textarea.textarea:disabled {
  background: var(--bg-1);
  color: var(--fg-3);
  cursor: not-allowed;
}
select.select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2380868b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
select.select::-ms-expand { display: none; }
textarea.textarea {
  resize: vertical;
  min-height: 80px;
}

/* ============ 主区 ============ */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.main-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  min-height: 0;
}

/* ============ 卡片 ============ */
.card {
  background: var(--bg-0);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
}
.card-hd {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title { font-size: 11.5px; font-weight: 600; color: var(--fg-0); letter-spacing: 0.01em; }
.card-sub { font-size: 10.5px; color: var(--fg-3); font-family: var(--font-mono); }

/* ============ 数据 ============ */
.kpi-v {
  font-size: 24px;
  font-weight: 600;
  color: var(--fg-0);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  line-height: 1;
}
.kpi-v .u { font-size: 12px; color: var(--fg-2); font-weight: 500; margin-left: 2px; }
.kpi-l { font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }

.delta { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green); }
.delta.down { color: var(--pink); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-mono);
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid transparent;
}
.tag.cyan { background: var(--cyan-soft); color: var(--cyan); }
.tag.orange { background: var(--orange-soft); color: var(--orange); }
.tag.pink { background: var(--pink-soft); color: var(--pink); }
.tag.green { background: var(--green-soft); color: var(--green); }
.tag.purple { background: var(--purple-soft); color: var(--purple); }

.dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 平台徽标 */
.pf {
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: white;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.pf.douyin { background: var(--pf-douyin); }
.pf.xhs { background: var(--pf-xhs); }
.pf.ks { background: var(--pf-ks); }
.pf.sph { background: var(--pf-sph); }

/* 视频缩略占位 */
.thumb {
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0, var(--bg-2) 3px, var(--bg-3) 3px, var(--bg-3) 6px);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, oklch(0 0 0 / 0.35));
}
.thumb-dur {
  position: absolute;
  bottom: 4px; right: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: white;
  padding: 1px 4px;
  background: oklch(0 0 0 / 0.65);
  border-radius: 2px;
  z-index: 2;
}
.thumb-pf { position: absolute; top: 4px; left: 4px; z-index: 2; }

/* 数据条 */
.bar {
  height: 4px; border-radius: 2px;
  background: var(--bg-2);
  overflow: hidden;
  position: relative;
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--cyan);
  border-radius: 2px;
}

/* 滚动条 */
.scroll { overflow: auto; }
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* 分割 */
.hr { height: 1px; background: var(--line-1); border: none; margin: 0; }
.vr { width: 1px; background: var(--line-1); align-self: stretch; }

/* ============ 专用：时间轴 ============ */
.tl-wrap { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: 12px; }
.tl-track {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 58px;
  padding-bottom: 4px;
}
.tl-frame {
  flex: 1;
  min-width: 0;
  background: var(--bg-3);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
}
.tl-frame.hook { background: linear-gradient(180deg, var(--orange) 0%, oklch(0.65 0.12 50) 100%); }
.tl-frame.build { background: linear-gradient(180deg, var(--cyan) 0%, oklch(0.65 0.10 195) 100%); }
.tl-frame.cta { background: linear-gradient(180deg, var(--green) 0%, oklch(0.65 0.10 150) 100%); }
.tl-ruler {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--fg-3);
  padding-top: 6px;
  border-top: 1px solid var(--line-1);
  margin-top: 6px;
}

/* ============================================================
 *  ResultReport (M3.4)  —  SPA 内的拆解报告组件，替代旧 result.html
 * ============================================================ */
.rr { display: flex; flex-direction: column; gap: 16px; padding: 4px 4px 24px; }

/* Header */
.rr-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line-1);
  border-radius: 8px;
}
.rr-job-id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: .04em; }
.rr-title { font-size: 16px; font-weight: 600; color: var(--fg-0); margin: 0; line-height: 1.4; }
.rr-meta-line { font-size: 11px; color: var(--fg-2); display: flex; gap: 6px; flex-wrap: wrap; }

/* Section */
.rr-sec { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 8px; padding: 14px 16px 16px; }
.rr-sec-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.rr-sec-idx { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: .08em; }
.rr-sec-title { font-size: 14px; font-weight: 600; color: var(--fg-0); margin: 0; }
.rr-sec-badge { font-size: 10px; padding: 2px 8px; background: color-mix(in oklch, var(--cyan) 12%, var(--bg-1)); color: var(--cyan); border-radius: 10px; }
.rr-sec-body { display: flex; flex-direction: column; gap: 10px; }

/* Card */
.rr-card { background: var(--bg-0); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.rr-card-title { font-size: 11px; color: var(--fg-3); margin-bottom: 6px; letter-spacing: .03em; }
.rr-card-body { display: flex; flex-direction: column; gap: 6px; }

/* Grid */
.rr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rr-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.rr-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* KV */
.rr-kv { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; }
.rr-kv-k { color: var(--fg-3); min-width: 80px; }
.rr-kv-v { color: var(--fg-0); flex: 1; min-width: 0; }
.rr-kv-v.mono { font-family: var(--font-mono); font-size: 11px; }

/* Big / conf / reason */
.rr-big { font-size: 17px; font-weight: 600; color: var(--fg-0); line-height: 1.3; }
.rr-conf { font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); }
.rr-reason { font-size: 12px; color: var(--fg-1); line-height: 1.6; margin-top: 4px; }
.rr-text { font-size: 12px; color: var(--fg-1); line-height: 1.6; }
.rr-quote {
  font-size: 13px; color: var(--fg-0); font-weight: 500; line-height: 1.6;
  padding: 10px 14px; background: color-mix(in oklch, var(--cyan) 6%, var(--bg-0));
  border-left: 3px solid var(--cyan); border-radius: 4px;
}
.rr-muted { color: var(--fg-3); }

/* Chip */
.rr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--line-soft);
}
.rr-chip.cyan   { background: color-mix(in oklch, var(--cyan)   10%, var(--bg-1)); color: var(--cyan);   border-color: color-mix(in oklch, var(--cyan) 20%, transparent); }
.rr-chip.purple { background: color-mix(in oklch, var(--purple) 10%, var(--bg-1)); color: var(--purple); border-color: color-mix(in oklch, var(--purple) 20%, transparent); }
.rr-chip.green  { background: color-mix(in oklch, var(--green)  12%, var(--bg-1)); color: var(--green);  border-color: color-mix(in oklch, var(--green) 22%, transparent); }
.rr-chip.pink   { background: color-mix(in oklch, var(--pink)   12%, var(--bg-1)); color: var(--pink);   border-color: color-mix(in oklch, var(--pink) 22%, transparent); }

.rr-chip-flow { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* Table */
.rr-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rr-table th, .rr-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.rr-table th { font-size: 10.5px; color: var(--fg-3); font-weight: 500; letter-spacing: .03em; }
.rr-table td { color: var(--fg-1); line-height: 1.5; }
.rr-table .mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); }

/* Bar */
.rr-bar-flow { display: flex; flex-direction: column; gap: 6px; }
.rr-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.rr-bar-k { min-width: 50px; color: var(--fg-2); }
.rr-bar-track { flex: 1; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; min-width: 80px; }
.rr-bar-fill { display: block; height: 100%; background: var(--cyan); border-radius: 3px; }
.rr-bar-v { color: var(--fg-3); min-width: 38px; text-align: right; }

/* List */
.rr-ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--fg-1); line-height: 1.7; }
.rr-ul li { margin-bottom: 2px; }

/* Pre */
.rr-pre {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-1);
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: 10px 12px; margin: 0; white-space: pre-wrap; word-break: break-word;
  max-height: 280px; overflow: auto; line-height: 1.6;
}
.rr-pre-script { font-family: var(--font-sans); font-size: 12.5px; max-height: 360px; }

/* SVG */
.rr-svg-wrap { width: 100%; overflow: hidden; padding: 6px 0 4px; }
.rr-svg { width: 100%; height: 140px; display: block; }

/* Tabs */
.rr-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rr-tab {
  font-size: 11px; padding: 4px 12px; background: var(--bg-2); color: var(--fg-2);
  border: 1px solid var(--line-soft); border-radius: 4px; cursor: pointer;
}
.rr-tab.active { background: var(--cyan); color: var(--bg-0); border-color: var(--cyan); }

/* Shots */
.rr-shots-hd { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px 8px; font-size: 11.5px; color: var(--fg-2); }
.rr-shots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rr-shot { background: var(--bg-0); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rr-shot-hd { display: flex; justify-content: space-between; align-items: center; }
.rr-shot-idx { font-size: 11px; font-weight: 600; color: var(--cyan); font-family: var(--font-mono); }
.rr-shot-narr { font-size: 12px; color: var(--fg-0); line-height: 1.5; }
.rr-shot-fld { display: flex; gap: 6px; font-size: 11px; line-height: 1.5; }
.rr-shot-fld-k { color: var(--fg-3); min-width: 28px; flex-shrink: 0; }
.rr-shot-fld-v { color: var(--fg-1); flex: 1; min-width: 0; word-break: break-word; }

/* Video */
.rr-video { width: 100%; max-width: 480px; display: block; margin: 10px auto; border-radius: 6px; background: #000; }

/* Empty / Loading / Error */
.rr-empty { font-size: 11px; color: var(--fg-3); text-align: center; padding: 18px; }
.rr-loading { display: flex; align-items: center; gap: 8px; padding: 24px; color: var(--fg-2); font-size: 12px; }
.rr-error { display: flex; gap: 8px; padding: 12px 14px; background: color-mix(in oklch, var(--pink) 8%, var(--bg-1)); color: var(--pink); border: 1px solid color-mix(in oklch, var(--pink) 20%, transparent); border-radius: 6px; font-size: 11.5px; }

/* ===== SSO 登录页（/login，chromeless 全屏 iframe） ===== */
.app--chromeless { width: 100%; height: 100%; display: block; }
.sso-iframe { width: 100%; height: 100vh; border: 0; display: block; background: var(--bg-0); }
.sso-empty { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-0); }
.sso-empty-panel { max-width: 460px; padding: 28px 32px; border: 1px solid var(--line-1); border-radius: 12px; background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); }
.sso-empty-title { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: var(--fg-0); }
.sso-empty-desc { font-size: 13px; line-height: 1.65; color: var(--fg-2); }
.sso-empty-desc code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--bg-0); color: var(--cyan); }
.sso-error-banner { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: min(560px, 92vw); padding: 10px 14px; border-radius: 8px; background: color-mix(in oklch, var(--pink) 12%, var(--bg-1)); color: var(--pink); border: 1px solid color-mix(in oklch, var(--pink) 28%, transparent); font-size: 12.5px; font-family: var(--font-sans); box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 999; }