/* ============================================================
   TriM3 · Joe 风格文章版式（前台）
   作用域：.post-content（文章/页面/搜索等正文容器）
   短代码由 joe-content.js 渲染，样式在此定义
   ============================================================ */

/* ---------- 1. 正文排版（增强原 post-content） ---------- */
.post-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--md-sys-color-on-background, #1d1a22);
}
.post-content > *:first-child { margin-top: 0 !important; }
.post-content > *:last-child { margin-bottom: 0 !important; }

/* 标题：Joe 风格 —— 二级标题带左侧色条，三级带小圆点 */
.post-content h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 1.6em 0 0.8em;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.post-content h2 {
  position: relative;
  font-size: 23px;
  font-weight: 700;
  margin: 1.8em 0 0.8em;
  padding-left: 14px;
  line-height: 1.4;
}
.post-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--md-sys-color-primary, #6750a4),
    var(--md-sys-color-secondary, #5b8def));
}
.post-content h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 1.5em 0 0.7em;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-content h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-sys-color-primary, #6750a4);
  flex: none;
}
.post-content h4 {
  font-size: 17px;
  font-weight: 700;
  margin: 1.4em 0 0.6em;
  color: var(--md-sys-color-on-surface-variant, #49454f);
}
.post-content h5, .post-content h6 {
  font-size: 15px;
  font-weight: 700;
  margin: 1.2em 0 0.5em;
  color: var(--md-sys-color-on-surface-variant, #49454f);
}

/* 段落 */
.post-content p {
  margin: 0 0 1.1em;
}

/* 链接 */
.post-content a {
  color: var(--md-sys-color-primary, #6750a4);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 40%, transparent);
  transition: color .15s ease, border-color .15s ease;
  word-break: break-all;
}
.post-content a:hover {
  color: var(--md-sys-color-tertiary, #e2558f);
  border-bottom-color: var(--md-sys-color-tertiary, #e2558f);
}

/* 引用块 */
.post-content blockquote {
  position: relative;
  margin: 1.5em 0;
  padding: 14px 18px 14px 20px;
  border-left: 4px solid var(--md-sys-color-primary, #6750a4);
  background: var(--md-sys-color-surface-container-low, #f3eff7);
  border-radius: 0 12px 12px 0;
  color: var(--md-sys-color-on-surface-variant, #49454f);
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content blockquote blockquote {
  background: var(--md-sys-color-surface-container, #ede8f1);
}

/* 行内代码 */
.post-content code {
  font-family: var(--md-sys-font-family-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: 0.88em;
  padding: 0.18em 0.45em;
  background: var(--md-sys-color-surface-container-high, #e6e1ec);
  border-radius: 6px;
  color: var(--md-sys-color-on-surface, #1d1a22);
  word-break: break-all;
}

/* 代码块 */
.post-content pre {
  position: relative;
  background: var(--md-sys-color-inverse-surface, #322f38);
  color: var(--md-sys-color-inverse-on-surface, #f5eff7);
  padding: 18px 20px;
  border-radius: 14px;
  overflow-x: auto;
  line-height: 1.65;
  margin: 1.5em 0;
  font-size: 13.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.post-content pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* 表格 */
.post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5em 0;
  font-size: 14.5px;
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  border-radius: 12px;
  overflow: hidden;
}
.post-content th {
  background: var(--md-sys-color-surface-container-high, #e6e1ec);
  color: var(--md-sys-color-on-surface, #1d1a22);
  font-weight: 700;
}
.post-content th, .post-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  text-align: left;
}
.post-content tbody tr:last-child td { border-bottom: none; }
.post-content tbody tr:nth-child(even) {
  background: var(--md-sys-color-surface-container-low, #f3eff7);
}
.post-content tbody tr:hover {
  background: var(--md-sys-color-surface-container, #ede8f1);
}

/* 图片 */
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 0.5em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 列表 */
.post-content ul, .post-content ol {
  margin: 0 0 1.1em;
  padding-left: 1.6em;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin: 0.35em 0; }
.post-content li::marker {
  color: var(--md-sys-color-primary, #6750a4);
}

/* 分割线 */
.post-content hr {
  border: none;
  height: 1px;
  background: var(--md-sys-color-outline-variant, #cac4d0);
  margin: 2.2em 0;
  position: relative;
}

/* ---------- 2. Joe 短代码版式 ---------- */

/* 2.1 提示框 */
.tri3-box {
  position: relative;
  margin: 1.4em 0;
  padding: 14px 18px 14px 46px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.75;
  border: 1px solid transparent;
}
.tri3-box::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}
.tri3-box .tri3-box-title {
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
}
.tri3-box .tri3-box-body p:last-child { margin-bottom: 0; }
.tri3-box--success {
  background: color-mix(in srgb, #2e7d32 8%, transparent);
  border-color: color-mix(in srgb, #2e7d32 30%, transparent);
  color: #1b5e20;
}
.tri3-box--success::before { background-color: #2e7d32; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.tri3-box--info {
  background: color-mix(in srgb, #1976d2 8%, transparent);
  border-color: color-mix(in srgb, #1976d2 30%, transparent);
  color: #0d47a1;
}
.tri3-box--info::before { background-color: #1976d2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.tri3-box--warning {
  background: color-mix(in srgb, #f9a825 10%, transparent);
  border-color: color-mix(in srgb, #f9a825 40%, transparent);
  color: #7a5b00;
}
.tri3-box--warning::before { background-color: #f9a825; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.tri3-box--danger {
  background: color-mix(in srgb, #c62828 8%, transparent);
  border-color: color-mix(in srgb, #c62828 30%, transparent);
  color: #8e0000;
}
.tri3-box--danger::before { background-color: #c62828; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); }

/* 2.2 折叠 */
.tri3-fold {
  margin: 1.4em 0;
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-low, #f3eff7);
}
.tri3-fold summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--md-sys-color-on-surface, #1d1a22);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease;
  user-select: none;
}
.tri3-fold summary::-webkit-details-marker { display: none; }
.tri3-fold summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--md-sys-color-primary, #6750a4);
  border-bottom: 2px solid var(--md-sys-color-primary, #6750a4);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  margin-right: 2px;
}
.tri3-fold[open] summary::before { transform: rotate(45deg); }
.tri3-fold summary:hover { background: var(--md-sys-color-surface-container, #ede8f1); }
.tri3-fold .tri3-fold-body {
  padding: 4px 16px 14px;
  border-top: 1px dashed var(--md-sys-color-outline-variant, #cac4d0);
  font-size: 14.5px;
}
.tri3-fold .tri3-fold-body > *:first-child { margin-top: 12px; }
.tri3-fold .tri3-fold-body > *:last-child { margin-bottom: 0; }

/* 2.3 Tabs */
.tri3-tabs {
  margin: 1.5em 0;
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest, #ffffff);
}
.tri3-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 6px 0;
  background: var(--md-sys-color-surface-container-high, #e6e1ec);
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
}
.tri3-tabs-tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  position: relative;
  transition: color .15s ease, background .15s ease;
  font-family: inherit;
}
.tri3-tabs-tab:hover { background: var(--md-sys-color-surface-container, #ede8f1); }
.tri3-tabs-tab.is-active {
  color: var(--md-sys-color-primary, #6750a4);
  background: var(--md-sys-color-surface-container-lowest, #ffffff);
}
.tri3-tabs-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--md-sys-color-primary, #6750a4);
}
.tri3-tabs-panels { padding: 14px 16px; }
.tri3-tabs-panel { display: none; }
.tri3-tabs-panel.is-active { display: block; animation: tri3FadeIn .25s ease; }
.tri3-tabs-panel > *:first-child { margin-top: 0; }
.tri3-tabs-panel > *:last-child { margin-bottom: 0; }
@keyframes tri3FadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* 2.4 按钮 */
.tri3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
  cursor: pointer;
  margin: 0.3em 0.3em 0.3em 0;
  line-height: 1.4;
}
.tri3-btn:hover { transform: translateY(-1px); }
.tri3-btn:active { transform: scale(.97); }
.tri3-btn--primary {
  background: var(--md-sys-color-primary, #6750a4);
  color: var(--md-sys-color-on-primary, #ffffff) !important;
  border-bottom: none;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 35%, transparent);
}
.tri3-btn--outline {
  background: transparent;
  border-color: var(--md-sys-color-primary, #6750a4);
  color: var(--md-sys-color-primary, #6750a4) !important;
  border-bottom: 1.5px solid var(--md-sys-color-primary, #6750a4);
}
.tri3-btn--ghost {
  background: var(--md-sys-color-surface-container-high, #e6e1ec);
  color: var(--md-sys-color-on-surface, #1d1a22) !important;
  border-bottom: none;
}

/* 2.5 高亮文字 */
.tri3-hl {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--md-sys-color-tertiary-container, #ffd9e4) 60%, transparent),
    color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 60%, transparent));
  color: var(--md-sys-color-on-surface, #1d1a22);
  padding: 0.05em 0.3em;
  border-radius: 5px;
  font-weight: 600;
}

/* 2.6 引言模块 */
.tri3-quote {
  position: relative;
  margin: 1.6em 0;
  padding: 18px 22px 16px 58px;
  background: linear-gradient(135deg,
    var(--md-sys-color-primary-container, #eaddff),
    var(--md-sys-color-surface-container-low, #f3eff7));
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 18%, transparent);
}
.tri3-quote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 6px;
  font-size: 52px;
  line-height: 1;
  color: var(--md-sys-color-primary, #6750a4);
  font-family: Georgia, serif;
  opacity: .8;
}
.tri3-quote .tri3-quote-body {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--md-sys-color-on-surface, #1d1a22);
}
.tri3-quote .tri3-quote-body p:last-child { margin-bottom: 0; }
.tri3-quote .tri3-quote-author {
  margin-top: 8px;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  text-align: right;
}

/* 2.7 图集 */
.tri3-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 1.4em 0;
}
.tri3-gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--md-sys-color-surface-container-high, #e6e1ec);
  aspect-ratio: 1 / 1;
}
.tri3-gallery-item a { border-bottom: none; display: block; width: 100%; height: 100%; }
.tri3-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  transition: transform .25s ease;
}
.tri3-gallery-item a:hover img { transform: scale(1.04); }

/* 2.8 分隔线 */
.tri3-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2em 0;
  color: var(--md-sys-color-outline-variant, #cac4d0);
}
.tri3-divider::before, .tri3-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--md-sys-color-outline-variant, #cac4d0);
}

/* ---------- 3. 深色模式适配 ---------- */
.dark .post-content h4,
.dark .post-content h5,
.dark .post-content h6,
.dark .post-content blockquote { color: var(--md-sys-color-on-surface-variant, #cac4d0); }
.dark .tri3-box--success { color: #a5d6a7; }
.dark .tri3-box--info { color: #90caf9; }
.dark .tri3-box--warning { color: #ffe082; }
.dark .tri3-box--danger { color: #ef9a9a; }

/* ============================================================
   TriM3 · Joe 官方短代码版式（{xxx} 语法，joe-content.js 渲染）
   ============================================================ */

/* ---------- 居中标题 ---------- */
.joe_mtitle { display: flex; justify-content: center; margin: 1.4em 0; }
.joe_mtitle__text { position: relative; color: var(--md-sys-color-on-surface-variant, #777); padding: 0 16px; font-size: 15px; letter-spacing: 0.05em; }
.joe_mtitle__text::before,
.joe_mtitle__text::after { content: ""; position: absolute; top: 50%; width: 24px; height: 1px; background: var(--md-sys-color-outline-variant, #cac4d0); }
.joe_mtitle__text::before { right: 100%; }
.joe_mtitle__text::after { left: 100%; }

/* ---------- 音乐容器 ---------- */
.joe-ap { margin: 14px 0; border-radius: 16px; overflow: hidden; }
.joe-ap-loading { color: var(--md-sys-color-on-surface-variant, #777); font-size: 14px; padding: 14px; text-align: center; }
.joe-err { color: var(--md-sys-color-error, #ba1a1a); font-size: 14px; }

/* ---------- 多彩按钮 ---------- */
.joe_abtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; margin: 6px 8px 6px 0; border-radius: 17.5px; box-shadow: var(--tri3-elev-1, 0 1px 3px rgba(0,0,0,.2)); transition: transform .15s ease, box-shadow .15s ease; }
.joe_abtn:hover { transform: translateY(-2px); box-shadow: var(--tri3-elev-2, 0 4px 10px rgba(0,0,0,.2)); }
.joe_abtn__icon { display: inline-flex; }
.joe_abtn__content { display: inline-flex; }

/* ---------- 标签按钮 ---------- */
.joe_anote { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; margin: 4px 8px 4px 0; text-decoration: none !important; transition: filter .15s ease; }
.joe_anote:hover { filter: brightness(0.94); }
.joe_anote.secondary { background: var(--md-sys-color-surface-container-high, #ece6e0); color: var(--md-sys-color-on-surface, #1d1a22); }
.joe_anote.success { background: #19be6b; color: #fff; }
.joe_anote.warning { background: #f90; color: #fff; }
.joe_anote.error { background: #ed4014; color: #fff; }
.joe_anote.info { background: var(--md-sys-color-primary, #6750a4); color: #fff; }
.joe_anote__icon { display: inline-flex; }
.joe_anote__content { display: inline-flex; }

/* ---------- 点状分割线 ---------- */
.joe_dotted { display: block; height: 8px; margin: 22px 0; opacity: .8; }

/* ---------- 网盘卡片 ---------- */
.joe_cloud { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; margin: 14px 0; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_cloud__logo { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; background: linear-gradient(135deg, #667eea, #764ba2); position: relative; }
.joe_cloud__logo::after { content: ""; position: absolute; inset: 10px; border: 2px solid rgba(255,255,255,.85); border-radius: 6px; }
.joe_cloud__logo._bd { background: linear-gradient(135deg, #2b7df0, #0e5fd8); }
.joe_cloud__logo._lz { background: linear-gradient(135deg, #12b7f5, #0093e9); }
.joe_cloud__logo._360 { background: linear-gradient(135deg, #ff8f00, #ff6d00); }
.joe_cloud__logo._ty { background: linear-gradient(135deg, #00b0ff, #0086d8); }
.joe_cloud__logo._ct { background: linear-gradient(135deg, #ff7a45, #ff4d4f); }
.joe_cloud__logo._wy { background: linear-gradient(135deg, #f00, #c00); }
.joe_cloud__logo._github { background: linear-gradient(135deg, #444, #222); }
.joe_cloud__describe { flex: 1; min-width: 0; }
.joe_cloud__describe-title { font-size: 15px; font-weight: 600; color: var(--md-sys-color-on-surface, #1d1a22); }
.joe_cloud__describe-sub { font-size: 12px; color: var(--md-sys-color-on-surface-variant, #777); margin-top: 2px; }
.joe_cloud__btn { flex: 0 0 auto; padding: 6px 16px; border-radius: 999px; background: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #fff) !important; font-size: 13px; text-decoration: none !important; }

/* ---------- 消息提示 ---------- */
.joe_message { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; margin: 14px 0; font-size: 14px; }
.joe_message i { font-size: 18px; flex: 0 0 auto; }
.joe_message.info { background: rgba(25, 137, 250, .12); color: #1989fa; }
.joe_message.success { background: rgba(25, 190, 107, .12); color: #19be6b; }
.joe_message.warning { background: rgba(240, 173, 78, .15); color: #b26a00; }
.joe_message.error { background: rgba(237, 64, 20, .12); color: #ed4014; }

/* ---------- 进度条 ---------- */
.joe_progress { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.joe_progress__strip { flex: 1; height: 8px; border-radius: 999px; background: var(--md-sys-color-surface-container-high, #ece6e0); overflow: hidden; }
.joe_progress__strip-percent { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.joe_progress__percentage { font-size: 12px; color: var(--md-sys-color-on-surface-variant, #777); min-width: 36px; text-align: right; }

/* ---------- 复制 ---------- */
.joe_copy { display: inline-block; padding: 6px 16px; border-radius: 999px; background: var(--md-sys-color-surface-container-high, #ece6e0); color: var(--md-sys-color-on-surface, #1d1a22); font-size: 13px; cursor: pointer; user-select: none; transition: background .15s ease; }
.joe_copy:hover { background: var(--md-sys-color-primary, #6750a4); color: var(--md-sys-color-on-primary, #fff); }

/* ---------- 隐藏内容 ---------- */
.joe_hide { padding: 14px 16px; border: 1px dashed var(--md-sys-color-outline, #79747e); border-radius: 12px; color: var(--md-sys-color-on-surface-variant, #777); font-size: 14px; margin: 14px 0; text-align: center; }
.joe_hide__button { color: var(--md-sys-color-primary, #6750a4); cursor: pointer; font-weight: 600; }

/* ---------- Tabs ---------- */
.joe_tabs { margin: 14px 0; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; overflow: hidden; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_tabs__head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0); background: var(--md-sys-color-surface-container, #f3edf7); }
.joe_tabs__head-item { padding: 10px 18px; font-size: 14px; color: var(--md-sys-color-on-surface-variant, #777); cursor: pointer; transition: color .15s ease, background .15s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.joe_tabs__head-item:hover { color: var(--md-sys-color-on-surface, #1d1a22); }
.joe_tabs__head-item.active { color: var(--md-sys-color-primary, #6750a4); border-bottom-color: var(--md-sys-color-primary, #6750a4); font-weight: 600; }
.joe_tabs__body { padding: 16px; }
.joe_tabs__body-item { display: none; }
.joe_tabs__body-item.is-show { display: block; animation: tri3-fade-in .25s ease; }

/* ---------- 折叠 ---------- */
.joe_collapse { margin: 14px 0; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; overflow: hidden; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_collapse__item + .joe_collapse__item { border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0); }
.joe_collapse__item-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; font-size: 14px; color: var(--md-sys-color-on-surface, #1d1a22); transition: background .15s ease; }
.joe_collapse__item-head:hover { background: var(--md-sys-color-surface-container-high, #ece6e0); }
.joe_collapse__item-icon { color: var(--md-sys-color-on-surface-variant, #777); transition: transform .25s ease; }
.joe_collapse__item.is-open .joe_collapse__item-icon { transform: rotate(180deg); }
.joe_collapse__item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.joe_collapse__item.is-open .joe_collapse__item-body { grid-template-rows: 1fr; }
.joe_collapse__item-body-inner { overflow: hidden; min-height: 0; padding: 0 16px; }
.joe_collapse__item.is-open .joe_collapse__item-body-inner { padding: 4px 16px 14px; }

/* ---------- 时间线 ---------- */
.joe_timeline { margin: 14px 0; padding-left: 8px; }
.joe_timeline__item { position: relative; padding-left: 24px; padding-bottom: 20px; }
.joe_timeline__item:last-child { padding-bottom: 0; }
.joe_timeline__item-tail { position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--md-sys-color-outline-variant, #cac4d0); }
.joe_timeline__item:last-child .joe_timeline__item-tail { display: none; }
.joe_timeline__item-circle { position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #19be6b; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_timeline__item-content { font-size: 14px; color: var(--md-sys-color-on-surface-variant, #666); }

/* ---------- 卡片列表 ---------- */
.joe_card__list { display: grid; gap: 12px; margin: 14px 0; }
.joe_card__list-item { padding: 14px 16px; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; background: var(--md-sys-color-surface-container-low, #f7f2fa); font-size: 14px; }

/* ---------- 多列网格 ---------- */
.joe_gird { display: grid; grid-template-columns: repeat(var(--joe-gird-col, 3), 1fr); gap: var(--joe-gird-gap, 15px); margin: 14px 0; }
.joe_gird__item { padding: 14px; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; background: var(--md-sys-color-surface-container-low, #f7f2fa); font-size: 14px; }
@media (max-width: 720px) { .joe_gird { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .joe_gird { grid-template-columns: 1fr; } }

/* ---------- 卡片 / 标注 / 警示 / 描述卡 ---------- */
.joe_card__default { padding: 16px; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; margin: 14px 0; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_card__default-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--md-sys-color-on-surface, #1d1a22); }
.joe_card__default-content { font-size: 14px; color: var(--md-sys-color-on-surface-variant, #666); }

.joe_callout { padding: 14px 16px; border-left: 4px solid #f0ad4e; border-radius: 8px; background: var(--md-sys-color-surface-container-low, #f7f2fa); margin: 14px 0; font-size: 14px; color: var(--md-sys-color-on-surface-variant, #666); }

.joe_alert { padding: 13px 16px; border-radius: 12px; margin: 14px 0; font-size: 14px; }
.joe_alert.info { background: rgba(25, 137, 250, .12); color: #1989fa; }
.joe_alert.success { background: rgba(25, 190, 107, .12); color: #19be6b; }
.joe_alert.warning { background: rgba(240, 173, 78, .15); color: #b26a00; }
.joe_alert.error { background: rgba(237, 64, 20, .12); color: #ed4014; }

.joe_card__describe { padding: 16px; border: 1px solid var(--md-sys-color-outline-variant, #cac4d0); border-radius: 14px; margin: 14px 0; background: var(--md-sys-color-surface-container-low, #f7f2fa); }
.joe_card__describe-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--md-sys-color-primary, #6750a4); }
.joe_card__describe-content { font-size: 14px; color: var(--md-sys-color-on-surface-variant, #666); }

/* ---------- 视频 ---------- */
.joe-video { margin: 14px 0; border-radius: 14px; overflow: hidden; background: #000; }
.joe-video-el { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- 灯泡 / 复选框 ---------- */
.joe_lamp { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #f5c518); box-shadow: 0 0 8px rgba(245, 197, 24, .8); animation: joe-lamp-blink 1.2s ease-in-out infinite; margin: 0 2px; vertical-align: -2px; }
@keyframes joe-lamp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.joe_checkbox { width: 15px; height: 15px; accent-color: var(--md-sys-color-primary, #6750a4); margin-right: 6px; vertical-align: -2px; }

/* ============================================================
   音乐卡片（单曲 / 歌单 / MP3）：联动本地 TriPlayer 悬浮播放器
   ============================================================ */
.joe-music-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--md-sys-color-surface-container-high, #ece6f0);
  cursor: pointer;
  transition: background 0.2s ease;
  width: 320px;
  max-width: 100%;
}
.joe-music-card:hover {
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
}
.joe-music-card.is-active {
  background: color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 55%, transparent);
}
.joe-music-cover {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-size: 20px;
}
.joe-music-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.joe-music-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.joe-music-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, #1d1b20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe-music-artist {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe-music-play {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-primary, #6750a4);
  color: var(--md-sys-color-on-primary, #ffffff);
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.joe-music-play:hover { transform: scale(1.08); }
.joe-music-play:active { transform: scale(0.94); }

/* ---- 歌单卡片（展开歌曲列表） ---- */
.joe-mlist-card {
  margin: 12px 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--md-sys-color-surface-container-high, #ece6f0);
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
}
.joe-mlist-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
}
.joe-mlist-cover {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-size: 24px;
}
.joe-mlist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.joe-mlist-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.joe-mlist-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface, #1d1b20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe-mlist-sub {
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
}
.joe-mlist-playall {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-primary, #6750a4);
  color: var(--md-sys-color-on-primary, #ffffff);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.joe-mlist-playall:hover { transform: scale(1.08); }
.joe-mlist-playall:active { transform: scale(0.94); }
.joe-mlist-songs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  padding-top: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline-variant, #cac4d0) transparent;
}
.joe-mlist-songs::-webkit-scrollbar {
  width: 6px;
}
.joe-mlist-songs::-webkit-scrollbar-track {
  background: transparent;
}
.joe-mlist-songs::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-sys-color-outline, #79747e) 32%, transparent);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.joe-mlist-card:hover .joe-mlist-songs::-webkit-scrollbar-thumb,
.joe-mlist-songs:hover::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline, #79747e);
}
.joe-mlist-loading {
  padding: 14px 8px;
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  text-align: center;
}
.joe-mlist-song {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.joe-mlist-song:hover {
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
}
.joe-mlist-idx {
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-variant-numeric: tabular-nums;
}
.joe-mlist-cover-sm {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
}
.joe-mlist-cover-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.joe-mlist-song-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.joe-mlist-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-sys-color-on-surface, #1d1b20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe-mlist-artist {
  font-size: 11px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe-mlist-dur {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-variant-numeric: tabular-nums;
}
.joe-mlist-play-ic {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--md-sys-color-primary, #6750a4);
  color: var(--md-sys-color-on-primary, #ffffff);
  font-size: 13px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.joe-mlist-song:hover .joe-mlist-play-ic,
.joe-mlist-song.is-playing .joe-mlist-play-ic {
  opacity: 1;
  transform: scale(1);
}

.joe-mlist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.joe-mlist-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  background: var(--md-sys-color-surface-container-highest, #e6e0e9);
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}
.joe-mlist-desc {
  margin: 2px 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-sys-color-surface-container-highest, #e6e0e9) 45%, transparent);
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-size: 12px;
}
.joe-mlist-desc-meta {
  background: transparent;
  padding: 2px 2px 8px;
  opacity: 0.85;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}