/* ============================================================
   RedPenKit 统一组件库 · Core Components
   依赖 design-tokens.css。仅收纳「跨页面通用」组件；
   页面独有的复杂样式（如 text.html 的 stage/paywall）仍留在各页 <style>。
   接线规则：各页删除内联的 :root 与下列同名组件样式，改为 <link> 引入。
   ============================================================ */

/* ---------- 图标（统一线性 SVG，currentColor 着色） ---------- */
.rp-ico {
  width: 1.25em; height: 1.25em;
  display: inline-block; vertical-align: -0.2em;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.rp-ico--sm { width: 1em; height: 1em; }
.rp-ico--lg { width: 1.6em; height: 1.6em; }

/* ---------- 导航栏 ---------- */
.rp-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--rp-nav-h); padding: 0 48px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rp-border);
  position: sticky; top: 0; z-index: var(--rp-z-nav);
}
.rp-nav-logo {
  font-size: 22px; font-weight: 800; color: var(--rp-navy);
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  letter-spacing: -0.2px;
}
/* 统一各页导航 logo 尺寸（30px 方图，圆角，防各页不一致） */
.rp-nav-logo img {
  width: 36px; height: 36px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
}
/* 品牌名：红笔助手（墨蓝）+ Red（墨蓝）+ Pen（朱砂红·突出"红笔"）+ Kit（墨蓝）
   只点亮 Pen，前后段与中文保持墨蓝，形成冷暖节奏。 */
.rp-nav-logo .brand-red { color: var(--rp-red); }
.rp-nav-logo:hover { opacity: 0.92; }
.rp-nav-back {
  color: var(--rp-text-muted); text-decoration: none;
  font-size: var(--rp-fs-base); display: inline-flex; align-items: center; gap: 4px;
}
.rp-nav-back:hover { color: var(--rp-navy); }
.rp-nav-actions { display: flex; gap: 12px; align-items: center; }
.rp-user-info { display: flex; align-items: center; gap: 12px; font-size: var(--rp-fs-sm); color: var(--rp-text-muted); }
.rp-user-name { font-weight: 600; color: var(--rp-navy); }

/* ---------- 按钮 ---------- */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--rp-radius);
  font-size: var(--rp-fs-base); font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer; border: none;
  transition: var(--rp-t);
  white-space: nowrap; user-select: none;
}
.rp-btn .rp-ico { width: 18px; height: 18px; }
.rp-btn-primary { background: var(--rp-red); color: #fff; box-shadow: 0 4px 14px rgba(185,28,28,0.20); }
.rp-btn-primary:hover { background: var(--rp-red-light); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(185,28,28,0.26); }
.rp-btn-danger { background: var(--rp-error, #DC2626); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.22); }
.rp-btn-danger:hover { background: #B91C1C; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(220,38,38,.28); }
.rp-btn-secondary { background: var(--rp-card); color: var(--rp-text); border: 2px solid var(--rp-border); }
.rp-btn-secondary:hover { background: var(--rp-bg); border-color: var(--rp-red); color: var(--rp-red); }
.rp-btn-ghost { background: transparent; color: var(--rp-navy); border: 2px solid var(--rp-border); }
.rp-btn-ghost:hover { background: var(--rp-bg); border-color: var(--rp-red); color: var(--rp-red); }
/* 试用区「复制/下载 Markdown」操作条 */
.tool-try-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tool-try-actions .rp-btn { flex: 1; min-width: 120px; }
.rp-btn-gold { background: linear-gradient(135deg, var(--rp-red) 0%, var(--rp-gold) 100%); color: #fff; box-shadow: 0 4px 14px rgba(185,28,28,0.20); }
.rp-btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(185,28,28,0.26); }
.rp-btn-sm { padding: 8px 16px; font-size: var(--rp-fs-sm); border-radius: var(--rp-radius-sm); }
.rp-btn-sm .rp-ico { width: 15px; height: 15px; }
.rp-btn-block { width: 100%; }
/* 导航里的轻量文字链接（如"浏览器插件"）：不抢按钮权重，hover 时变色 + 下划线 */
.rp-nav-link {
  color: var(--rp-text-2); font-size: var(--rp-fs-base); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--rp-radius-sm);
  transition: var(--rp-t-fast);
}
.rp-nav-link:hover { color: var(--rp-red); background: var(--rp-red-soft); }
.rp-nav-link--active { color: var(--rp-red); font-weight: 700; }

/* 导航下拉菜单（插件枢纽：下载 / 安装方法 / 使用说明） */
.rp-nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.rp-nav-dropdown > .rp-nav-link { display: inline-flex; align-items: center; gap: 6px; }
.rp-nav-caret-btn {
  background: none; border: none; padding: 8px 6px 8px 2px; margin: 0; cursor: pointer;
  color: var(--rp-text-muted); display: inline-flex; align-items: center; line-height: 1;
}
.rp-nav-caret { transition: transform var(--rp-t-fast); }
.rp-nav-dropdown.open .rp-nav-caret { transform: rotate(180deg); }
.rp-nav-menu {
  position: absolute; top: 100%; right: 0; min-width: 208px;
  background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow-float); padding: 8px; list-style: none; margin: 0; z-index: var(--rp-z-nav);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: var(--rp-t-fast);
}
.rp-nav-menu::before {
  content: ''; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
  background: var(--rp-card); border-left: 1px solid var(--rp-border); border-top: 1px solid var(--rp-border);
  transform: rotate(45deg);
}
.rp-nav-dropdown.open .rp-nav-menu,
.rp-nav-dropdown:hover .rp-nav-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rp-nav-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rp-radius-sm);
  text-decoration: none; color: var(--rp-text-2); font-size: var(--rp-fs-base); transition: var(--rp-t-fast);
}
.rp-nav-menu a .rp-ico { width: 18px; height: 18px; color: var(--rp-red); flex-shrink: 0; }
.rp-nav-menu a:hover { background: var(--rp-red-soft); color: var(--rp-red); }
.rp-nav-menu a.active { color: var(--rp-red); font-weight: 700; background: var(--rp-red-soft); }
.rp-nav-menu .rp-nav-menu-sep { height: 1px; background: var(--rp-border-light); margin: 6px 4px; }
.rp-btn:disabled, .rp-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.rp-btn:disabled:hover { background: var(--rp-red); }

/* ---------- 卡片 ---------- */
.rp-card {
  background: var(--rp-card); border-radius: var(--rp-radius-xl);
  padding: 28px; box-shadow: var(--rp-shadow);
  border: 1px solid var(--rp-border-light);
}
.rp-card-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 12px; }
.rp-card-title { font-size: var(--rp-fs-xl); font-weight: 700; color: var(--rp-navy); }

/* ---------- 输入 ---------- */
.rp-input, .input-area {
  width: 100%; padding: 13px 16px;
  border: 2px solid var(--rp-border); border-radius: var(--rp-radius);
  font-size: var(--rp-fs-md); font-family: inherit; line-height: 1.6;
  background: var(--rp-card); color: var(--rp-text);
  transition: var(--rp-t);
}
.rp-input::placeholder, .input-area::placeholder { color: var(--rp-text-muted); }
.rp-input:focus, .input-area:focus {
  outline: none; border-color: var(--rp-red);
  box-shadow: var(--rp-shadow-focus); background: var(--rp-card);
}
.rp-select {
  padding: 9px 14px; border: 2px solid var(--rp-border); border-radius: var(--rp-radius);
  font-size: var(--rp-fs-sm); background: var(--rp-card); color: var(--rp-text);
  font-family: inherit; cursor: pointer; transition: var(--rp-t);
}
.rp-select:focus { outline: none; border-color: var(--rp-red); }
.rp-checkbox-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--rp-fs-base); color: var(--rp-text); cursor: pointer;
  padding: 8px 14px; background: var(--rp-bg-alt);
  border-radius: var(--rp-radius); transition: var(--rp-t); user-select: none;
}
.rp-checkbox-label:hover { background: var(--rp-border-light); }
.rp-checkbox-label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--rp-red); }

/* ---------- 徽章 ---------- */
.rp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: var(--rp-radius-pill);
  font-size: var(--rp-fs-xs); font-weight: 600; line-height: 1.4;
}
.rp-badge-red { background: var(--rp-red-soft); color: var(--rp-red); }
.rp-badge-gold { background: var(--rp-gold-soft); color: var(--rp-gold); }
.rp-badge-success { background: var(--rp-success-soft); color: var(--rp-success); }
.rp-badge-info { background: var(--rp-info-soft); color: var(--rp-info); }
.rp-badge-muted { background: var(--rp-bg-soft); color: var(--rp-text-muted); }

/* ---------- 配额小徽标（导航/卡片通用） ---------- */
.rp-quota-pill {
  font-weight: 600; color: var(--rp-red);
  background: var(--rp-red-soft); padding: 3px 10px; border-radius: var(--rp-radius-pill);
  font-size: var(--rp-fs-sm);
}

/* ---------- Toast 轻提示（替代原生 alert） ---------- */
.rp-toast-wrap {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: var(--rp-z-toast); display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.rp-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--rp-radius);
  font-size: var(--rp-fs-base); font-weight: 500; line-height: 1.4;
  background: var(--rp-card); color: var(--rp-text);
  box-shadow: var(--rp-shadow-lg); border: 1px solid var(--rp-border-light);
  opacity: 0; transform: translateY(-10px); transition: var(--rp-t) ;
  pointer-events: auto; max-width: 92vw;
}
.rp-toast.show { opacity: 1; transform: translateY(0); }
.rp-toast .rp-ico { flex-shrink: 0; width: 20px; height: 20px; }
.rp-toast-success { border-left: 3px solid var(--rp-success); }
.rp-toast-success .rp-ico { color: var(--rp-success); }
.rp-toast-error { border-left: 3px solid var(--rp-error); }
.rp-toast-error .rp-ico { color: var(--rp-error); }
.rp-toast-info { border-left: 3px solid var(--rp-info); }
.rp-toast-info .rp-ico { color: var(--rp-info); }
.rp-toast-warning { border-left: 3px solid var(--rp-warning); }
.rp-toast-warning .rp-ico { color: var(--rp-warning); }

/* ---------- 确认框（替代原生 confirm） ---------- */
.rp-confirm-wrap {
  position: fixed; inset: 0; z-index: calc(var(--rp-z-toast) + 10);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .46);
  opacity: 0; transition: opacity .18s ease; pointer-events: auto;
}
.rp-confirm {
  background: var(--rp-card); border: 1px solid var(--rp-border-light);
  border-radius: calc(var(--rp-radius) + 4px); box-shadow: var(--rp-shadow-float-lg, var(--rp-shadow-lg));
  width: max-content; min-width: 300px; max-width: 92vw; padding: 22px 24px;
  opacity: 0; transform: translateY(8px) scale(.98); transition: var(--rp-t);
}
.rp-confirm.show { opacity: 1; transform: none; }
.rp-confirm-msg { font-size: var(--rp-fs-base); font-weight: 600; color: var(--rp-navy); line-height: 1.5; margin-bottom: 18px; }
.rp-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- 空 / 加载 / 错误 状态 ---------- */
.rp-empty { text-align: center; padding: 48px 24px; color: var(--rp-text-muted); }
.rp-empty .rp-empty-icon { font-size: 44px; margin-bottom: 12px; opacity: 0.7; }
.rp-empty .rp-empty-title { font-size: var(--rp-fs-md); font-weight: 600; color: var(--rp-text-2); margin-bottom: 4px; }
.rp-empty .rp-empty-desc { font-size: var(--rp-fs-sm); }

.rp-spinner {
  width: 18px; height: 18px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%;
  animation: rp-spin 0.8s linear infinite; display: inline-block;
}
.rp-spinner-lg { width: 40px; height: 40px; border-width: 3px; border-top-color: var(--rp-red); border-color: var(--rp-border); }
@keyframes rp-spin { to { transform: rotate(360deg); } }

.rp-loading { text-align: center; padding: 48px 24px; color: var(--rp-text-muted); }
.rp-loading .rp-spinner-lg { margin: 0 auto 16px; }

/* ---------- 通用辅助 ---------- */
.rp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rp-muted { color: var(--rp-text-muted); }
.rp-text-sm { font-size: var(--rp-fs-sm); }
.rp-text-xs { font-size: var(--rp-fs-xs); }
.rp-divider { height: 1px; background: var(--rp-border-light); border: 0; margin: 0; }
.rp-stack { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-center { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   装饰层 · 精美度提升（金线 / 光晕 / 精致卡片 / 图标砖 / 入场）
   均为「跨页面通用」修饰，页面直接加 class 即可复用。
   ============================================================ */

/* 金线分隔（居中短金线 + 中心菱形端点），放 section 标题下方 */
.rp-deco-divider {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 18px auto 40px; max-width: 220px;
}
.rp-deco-divider::before, .rp-deco-divider::after {
  content: ''; height: 1px; flex: 1; background: var(--rp-line-gold);
}
.rp-deco-divider i {
  width: 6px; height: 6px; flex-shrink: 0;
  background: var(--rp-gold); transform: rotate(45deg); border-radius: 1px;
  box-shadow: 0 0 0 4px var(--rp-gold-soft);
}

/* 背景光晕工具类：父级需 position:relative; overflow:hidden */
.rp-glow { position: relative; overflow: hidden; }
.rp-glow::before, .rp-glow::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(48px); opacity: .9;
}
.rp-glow--red::before {
  width: 560px; height: 560px; top: -260px; right: -160px;
  background: radial-gradient(circle, var(--rp-glow-red), transparent 68%);
}
.rp-glow--gold::after {
  width: 600px; height: 600px; bottom: -300px; left: -180px;
  background: radial-gradient(circle, var(--rp-glow-gold), transparent 68%);
}
.rp-glow--navy::before {
  width: 520px; height: 520px; top: -240px; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, var(--rp-glow-navy), transparent 70%);
}
/* 内容抬到光晕之上 */
.rp-glow > .hero, .rp-glow > .main-content, .rp-glow > .rp-layer { position: relative; z-index: 1; }

/* 精致卡片：柔和多层阴影 + 金色内描边高光，hover 上浮显金边 */
.rp-card--elevated {
  box-shadow: var(--rp-shadow-soft);
  transition: transform var(--rp-t), box-shadow var(--rp-t-slow), border-color var(--rp-t);
}
.rp-card--elevated::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--rp-ring-gold); opacity: 0; transition: opacity var(--rp-t); pointer-events: none;
}
.rp-card--elevated:hover {
  transform: translateY(-6px); box-shadow: var(--rp-shadow-float-lg);
  border-color: rgba(184,144,47,.45);
}
.rp-card--elevated:hover::after { opacity: 1; }

/* 精致图标砖：白底 + 金内圈 + 红图标 + 柔光（替代纯红实心方块） */
.rp-icon-tile {
  position: relative; width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #ffffff 0%, var(--rp-bg-alt) 100%);
  border: 1.5px solid rgba(185,28,28,.18);
  box-shadow: var(--rp-shadow-soft), var(--rp-ring-soft);
  color: var(--rp-red); margin-bottom: 22px;
}
.rp-icon-tile .rp-ico { width: 28px; height: 28px; }
.rp-icon-tile::before {
  content: ''; position: absolute; inset: 5px; border-radius: 12px;
  border: 1px solid rgba(184,144,47,.20); pointer-events: none;
}

/* 入场动画：淡入上浮，支持 --d 错峰延迟 */
@keyframes rp-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rp-reveal { opacity: 0; will-change: opacity, transform; }
.rp-reveal.rp-in { animation: rp-fade-up .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .rp-reveal { opacity: 1; }
  .rp-reveal.rp-in { animation: none; }
}

/* ============================================================
   后台通用布局 · 侧边栏 Shell（profile / history / settings 复用）
   ============================================================ */
.rp-shell { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - var(--rp-nav-h)); }

.rp-side {
  background: var(--rp-card); border-right: 1px solid var(--rp-border);
  padding: 32px 18px; position: relative;
}
.rp-side::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--rp-line-gold); opacity: .5; }
.rp-side-user { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--rp-border-light); margin-bottom: 24px; }
.rp-side-avatar {
  width: 72px; height: 72px; margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--rp-red) 0%, var(--rp-gold) 100%);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(185,28,28,.25);
}
.rp-side-name { font-size: 18px; font-weight: 600; color: var(--rp-navy); margin-bottom: 6px; }
.rp-side-plan {
  display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: var(--rp-radius-pill);
  background: var(--rp-gold-soft); color: var(--rp-gold); font-weight: 600;
}
.rp-side-nav { list-style: none; }
.rp-side-nav li { margin-bottom: 4px; }
.rp-side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--rp-radius);
  text-decoration: none; color: var(--rp-text-muted); font-size: var(--rp-fs-base);
  transition: var(--rp-t);
}
.rp-side-nav a .rp-ico { width: 20px; height: 20px; color: var(--rp-text-muted); }
.rp-side-nav a:hover { background: var(--rp-bg-alt); color: var(--rp-navy); }
.rp-side-nav a:hover .rp-ico { color: var(--rp-red); }
.rp-side-nav a.active { background: var(--rp-red-soft); color: var(--rp-red); font-weight: 600; }
.rp-side-nav a.active .rp-ico { color: var(--rp-red); }

.rp-content { padding: 40px 48px; }
.rp-page-title { font-size: var(--rp-fs-3xl); font-weight: 700; color: var(--rp-navy); margin-bottom: 28px; position: relative; }
.rp-page-title::after { content: ''; display: block; width: 56px; height: 3px; margin: 12px 0 0; background: var(--rp-grad-gold); border-radius: 2px; }

/* 抽屉触发按钮 / 遮罩：桌面态一律不出现 */
.rp-side-toggle {
  display: none; align-items: center; justify-content: center; gap: 6px;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--rp-border); border-radius: var(--rp-radius);
  background: var(--rp-card); color: var(--rp-navy); cursor: pointer;
}
.rp-side-toggle:hover { border-color: var(--rp-gold-light); color: var(--rp-red); }
.rp-side-toggle .rp-ico { width: 20px; height: 20px; }
.rp-side-overlay { display: none; }

@media (max-width: 768px) {
  .rp-shell { grid-template-columns: 1fr; }
  /* 侧栏改为离屏抽屉，而非 display:none（原写法会让账户导航在手机上彻底消失） */
  .rp-side {
    position: fixed; top: var(--rp-nav-h); left: 0; bottom: 0;
    width: 264px; max-width: 82vw; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 24px rgba(0, 0, 0, .18);
  }
  .rp-side.open { transform: translateX(0); }
  .rp-side-overlay {
    display: block; position: fixed; inset: 0; top: var(--rp-nav-h); z-index: 50;
    background: rgba(15, 23, 42, .42); opacity: 0; visibility: hidden;
    transition: opacity .25s ease;
  }
  .rp-side-overlay.show { opacity: 1; visibility: visible; }
  .rp-content { padding: 24px 20px; }
  .rp-nav { padding: 16px 20px; }
  .rp-side-toggle { display: inline-flex; }
  /* 标题行在窄屏与抽屉按钮同行，避免挤压换行 */
  .rp-content-head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
  .rp-content-head .rp-page-title { margin-bottom: 0; }
}