/* ================================================================
   新华字典 · 汉字/成语详情页专用样式
   Xinhua Dictionary — Character/Chengyu Page CSS
   
   布局规则：
   - .main 用 flex:1 自然撑满（来自 pretty.css，不重写）
   - .breadcrumb 顶部面包屑
   - .content 用 grid: 左面板 + 右面板
   - 间距统一由 --page-pad 控制，左右对称
   ================================================================ */

/* ========== Breadcrumb ========== */
.breadcrumb{
  padding:10px var(--page-pad);
  background:var(--bg-glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  font-size:12px;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.breadcrumb .bc-left{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb .bc-right{display:flex;align-items:center;flex-shrink:0}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{opacity:0.4}
.breadcrumb .current{color:var(--gold);font-weight:600}

/* ========== Content Grid ========== */
.content{
  width:100%;
  margin:0;
  padding:24px var(--page-pad) 0;
  flex:1;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:var(--page-pad);
  max-width:none;
}

/* ========== Left Panel ========== */
.left-panel{
  position:sticky;
  top:calc(var(--toolbar-h) + 20px);
  align-self:start;
  min-width:0;
}

.char-display{
  background:var(--bg-card);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px 20px 28px;
  text-align:center;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}
.char-display::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,var(--gold-glow),transparent 60%);pointer-events:none}
.char-display::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold-gradient);opacity:0.5}

.char-big{font-size:120px;font-family:var(--font-kai);line-height:1.1;color:var(--text-primary);text-shadow:0 4px 20px var(--gold-glow);margin-bottom:12px;position:relative}
.char-pinyin{font-size:30px;color:var(--gold);font-weight:700;margin-bottom:4px}
.char-pinyin-num{font-size:12px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:0.5px}

.glass-card{
  background:var(--bg-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px;
  margin-bottom:16px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-gradient);opacity:0;transition:var(--transition)}
.glass-card:hover{border-color:var(--border-gold);box-shadow:var(--shadow-gold)}
.glass-card:hover::before{opacity:0.5}
.glass-card .card-head{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px;letter-spacing:0.5px}
.glass-card .card-head .ch-ico{width:28px;height:28px;background:var(--theme-glow);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--border)}

.info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:13px}
.info-row:last-child{border-bottom:none}
.info-row .label{color:var(--text-muted)}
.info-row .value{color:var(--text-primary);font-weight:600;text-align:right}

.freq-bar-bg{width:100%;height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;margin-top:10px}
.freq-bar{height:100%;background:var(--gold-gradient);border-radius:4px;width:0;animation:grow-bar 1.5s ease forwards 0.5s}
@keyframes grow-bar{to{width:98%}}
.freq-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:6px}

.english-word{font-size:28px;color:var(--accent-blue);font-weight:700;font-style:italic;text-shadow:0 2px 8px rgba(59,130,246,0.15);text-align:center}

.nav-chars{display:flex;align-items:center;justify-content:center;gap:24px}
.nav-char{text-align:center}
.nav-char a{display:block;font-size:44px;font-family:var(--font-kai);color:var(--text-secondary);transition:var(--transition);text-decoration:none}
.nav-char a:hover{color:var(--gold);transform:scale(1.15)}
.nav-char .py{font-size:11px;color:var(--text-muted);margin-top:2px}
.nav-arrow{font-size:24px;color:var(--gold);margin-top:20px;opacity:0.5}

/* ========== Right Panel ========== */
.right-panel{
  min-width:0;
  /* 关键：不设 max-width，让内容自然填满 grid 的 1fr */
}

.section-card{
  background:var(--bg-card);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 24px;
  margin-bottom:18px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
  scroll-margin-top:80px;
}
.section-card:hover{border-color:var(--border-gold)}
.section-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold-gradient);opacity:0;transition:var(--transition)}
.section-card:hover::before{opacity:0.5}

.sc-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.sc-ico{width:34px;height:34px;background:var(--theme-glow);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid var(--border)}
.sc-title{font-size:17px;font-weight:700;color:var(--text-primary)}

/* ===== 右面板紧凑布局 ===== */

/* 成语典故 — 横向标签流 */
.idiom-list{
  display:flex;flex-wrap:wrap;gap:8px;
}
.idiom-item{
  display:inline-flex;flex-direction:column;align-items:center;
  padding:10px 14px;min-width:80px;
  background:var(--gold-glow);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  text-decoration:none;transition:all .25s ease;
  text-align:center;
}
.idiom-item:hover{
  border-color:var(--border-gold);transform:translateY(-2px);
  box-shadow:var(--shadow-gold);text-decoration:none;
}
.idiom-char{font-size:16px;font-weight:700;color:var(--text-primary);font-family:var(--font-kai);letter-spacing:1px}
.idiom-py{font-size:10px;color:var(--gold);margin-top:2px;font-weight:600}
.idiom-mean{font-size:10px;color:var(--text-muted);margin-top:4px;max-width:100px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}

/* 词组表格 — 紧凑grid卡片 */
.word-table{width:100%;border-collapse:collapse;font-size:13px}
.word-table th{background:var(--gold-glow);color:var(--gold);font-weight:600;padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:12px}
.word-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,0.03)}
.word-table tr:hover td{background:rgba(255,255,255,0.02)}
.wt-word{font-weight:600;color:var(--text-primary);font-family:var(--font-kai);white-space:nowrap}
.wt-pinyin{color:var(--gold);font-size:12px;font-family:var(--font-mono)}
.wt-mean{color:var(--text-secondary);font-size:12px;line-height:1.7}

/* 古籍用例 — 紧凑卡片 */
.classics-list{display:flex;flex-direction:column;gap:10px}
.classic-item{
  padding:12px 16px;background:rgba(255,255,255,0.02);
  border-left:3px solid var(--gold);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.classic-meta{display:flex;align-items:center;gap:10px;margin-bottom:4px;font-size:12px}
.classic-book{color:var(--gold);font-weight:600;font-family:var(--font-kai)}
.classic-dynasty{color:var(--text-muted);font-size:11px}
.classic-text{font-size:13px;color:var(--text-secondary);line-height:1.8;font-family:var(--font-kai)}

/* 名句引用 — 紧凑卡片 */
.quotes-list{display:flex;flex-direction:column;gap:10px}
.quote-item{
  padding:12px 16px;
  border:1px solid var(--border-gold);border-radius:var(--radius-sm);
  background:var(--gold-glow);
}
.quote-text{font-size:14px;color:var(--text-primary);line-height:1.9;font-family:var(--font-kai)}
.quote-meta{font-size:12px;color:var(--text-muted);margin-top:6px;text-align:right}

/* 易混淆辨析 — 横向对比卡片 */
.confusable-list{display:flex;flex-wrap:wrap;gap:12px}
.conf-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;background:rgba(239,68,68,0.04);
  border:1px solid rgba(239,68,68,0.15);border-radius:var(--radius-sm);
  flex:1;min-width:200px;
}
.conf-char{font-size:32px;font-family:var(--font-kai);color:var(--accent-red);font-weight:700}
.conf-diff{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* 近反义词 — 横向标签 */
.syn-ant-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.syn-box,.ant-box{border-radius:var(--radius-md);padding:14px;border:1px solid var(--border)}
.syn-box{background:rgba(34,197,94,0.04)}
.ant-box{background:rgba(239,68,68,0.04)}
.syn-box:hover,.ant-box:hover{box-shadow:var(--shadow-sm)}
.sa-label{font-size:12px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.syn-box .sa-label{color:var(--accent-green)}
.ant-box .sa-label{color:var(--accent-red)}
.sa-words{display:flex;flex-wrap:wrap;gap:6px}
.sa-word{padding:4px 12px;background:var(--bg-glass);border:1px solid var(--border);border-radius:14px;font-size:12px;cursor:pointer;transition:var(--transition)}
.syn-box .sa-word{color:var(--accent-green)}
.ant-box .sa-word{color:var(--accent-red)}
.sa-word:hover{transform:translateY(-1px);text-decoration:none}

/* 内链区 — 横向标签 */
.internal-links{
  display:flex;flex-wrap:wrap;gap:8px;padding:4px 0;
}
.il-label{
  display:inline-flex;align-items:center;
  padding:6px 14px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;color:var(--text-muted);
}
.il-link{
  display:inline-flex;align-items:center;
  padding:6px 14px;background:var(--gold-glow);
  border:1px solid var(--border-gold);border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--gold);
  text-decoration:none;transition:all .25s ease;
}
.il-link:hover{
  background:var(--gold);color:#fff;border-color:var(--gold);
  transform:translateY(-1px);box-shadow:var(--shadow-gold);
}

/* 用法辨析 — 紧凑左边框 */
.usage-note-box{
  padding:12px 16px;border-left:3px solid var(--accent-green);
  background:rgba(34,197,94,0.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px;line-height:1.9;color:var(--text-secondary);
}

/* 误用提醒 — 紧凑红色左边框 */
.misusage-box{
  padding:12px 16px;border-left:3px solid var(--accent-red);
  background:rgba(239,68,68,0.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px;line-height:1.9;color:var(--text-secondary);
}

/* 近义辨析 — 对比卡片 */
.syn-compare-list{display:flex;flex-direction:column;gap:10px}
.syncomp-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;background:rgba(255,255,255,0.02);
  border:1px solid var(--border);border-radius:var(--radius-sm);
}
.syncomp-idiom{font-size:15px;font-weight:700;color:var(--text-primary);font-family:var(--font-kai);white-space:nowrap}
.syncomp-diff{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* 字源演变 — 紧凑水平时间线 */
.etymology-timeline{display:flex;flex-direction:column;gap:8px}
.ety-item{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.ety-item:last-child{border-bottom:none}
.ety-era{font-size:13px;font-weight:700;color:var(--gold);white-space:nowrap;min-width:56px}
.ety-text{font-size:13px;color:var(--text-secondary);line-height:1.7;font-family:var(--font-kai)}

/* 说文解字 — 紧凑 */
.shuowen-box{
  padding:12px 16px;border-left:3px solid var(--gold);
  background:var(--gold-glow);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.shuowen-text{font-size:14px;color:var(--text-primary);line-height:1.9;font-family:var(--font-kai)}
.shuowen-note{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.7}

/* 英文翻译 — 横向标签 */
.english-list{display:flex;flex-wrap:wrap;gap:6px}
.english-item{
  padding:4px 12px;background:var(--theme-glow);
  border:1px solid var(--border);border-radius:14px;
  font-size:13px;color:var(--accent-blue);font-style:italic;
}

/* 多音字 — 紧凑列表 */
.polyphone-list{display:flex;flex-direction:column;gap:8px}
.poly-item{
  padding:10px 14px;background:rgba(255,255,255,0.02);
  border:1px solid var(--border);border-radius:var(--radius-sm);
}
.poly-pinyin{font-size:18px;font-weight:700;color:var(--gold);font-family:var(--font-kai)}
.poly-mean{font-size:13px;color:var(--text-secondary);margin-top:4px}
.poly-example{font-size:12px;color:var(--text-muted);margin-top:4px}

/* 成语详情页逐字拆解 — 紧凑4列 */
.chengyu-breakdown{
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important
}
.chengyu-breakdown .related-item{
  padding:14px 6px !important
}
.chengyu-breakdown .r-char{
  font-size:28px !important
}
.chengyu-breakdown .r-py{
  font-size:10px !important
}
.chengyu-breakdown .r-mean{
  font-size:9px !important;
  margin-top:4px !important
}

/* Related Grid — 首页热门汉字/成语 & 详情页通用 */
.related-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
/* 首页热门成语 — 固定5列对齐（与汉字统一） */
.related-grid-chengyu{
  grid-template-columns:repeat(5,1fr);
}
.related-grid-chengyu .related-item{
  padding:16px 8px;
}
.related-grid-chengyu .r-char{
  font-size:18px;
  font-family:var(--font-kai);
  letter-spacing:2px;
  line-height:1.3;
  color:var(--text-primary);
}
.related-grid-chengyu .r-py{
  font-size:11px;
  color:var(--gold);
  margin-top:4px;
  font-weight:600;
}
.related-item{background:var(--bg-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;text-align:center;transition:var(--transition);cursor:pointer;position:relative;overflow:hidden}
.related-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold-gradient);opacity:0;transition:var(--transition)}
.related-item:hover{border-color:var(--border-gold);transform:translateY(-3px);box-shadow:var(--shadow),var(--shadow-gold)}
.related-item:hover::after{opacity:1}
.related-item .r-char{font-size:38px;font-family:var(--font-kai);line-height:1.2;color:var(--text-primary)}
.related-item .r-py{font-size:11px;color:var(--gold);margin-top:4px;font-weight:600}
.related-item .r-mean{font-size:10px;color:var(--text-muted);margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 响应式调整 — 小屏下related-grid回退为auto-fill */
@media(max-width:900px){
  .related-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .related-grid-chengyu{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .content{grid-template-columns:1fr;gap:20px}
  .left-panel{position:static}
  .idiom-list{gap:6px}
  .confusable-list{flex-direction:column}
  .conf-item{min-width:0}
}