@charset "utf-8";
.qr-code {
    width: 150px;
    height: 150px;
    background: #eee;
    display: block;
    margin: 0 auto 20px;
    border-radius: 12px;
    text-align: center;
    line-height: 150px;
    color: #999;
}

.related-block {
    padding: 6px 10px;
    background-color: #d7f0e8;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: 0.3s all ease;
}

/* a 标签样式 */
.related-block a {
    color: inherit;
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right-column blockquote a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.right-column blockquote a:hover {
    color: #2d5bff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f6f8fc;
    color: #1f2d3d;
}

/* =========================
   页面布局
========================= */
.page-container {
    display: flex;
    gap: 22px;
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 14px;
    align-items: flex-start;
}

/* =========================
   左侧列表
========================= */
.main-list {
    flex: 1;
}

/* 顶部标题 */
.page-header {
    margin-bottom: 18px;
}

.page-header h1 {
    font-size: 28px;   /* ⭐变大 */
    color: #1f3b57;
    margin-bottom: 6px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.page-header p {
    font-size: 15px;   /* ⭐变大 */
    color: #6b7c93;
}

/* =========================
   列表流
========================= */
.sentence-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =========================
   卡片（现代学习App风格核心）
========================= */
.sentence-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid rgba(200, 220, 255, 0.35);
    box-shadow: 0 6px 18px rgba(20, 40, 80, 0.06);
    transition: 0.25s ease;
}

.sentence-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(20, 40, 80, 0.10);
}

/* =========================
   英文主句（核心视觉）
========================= */
.sentence-title-en {
    font-size: 18px;
    font-weight: 800;
    color: #1b2a41;
    line-height: 1.5;
    letter-spacing: 0.2px;
}

/* =========================
   中文翻译
========================= */
.sentence-title-cn {
    font-size: 15px;
    color: #5b6b7c;
    margin-top: 6px;
}

/* =========================
   AI解析（重点学习块）
========================= */
.sentence-ai {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: #5a6f85;

    background: linear-gradient(135deg, #f7faff, #f1f7ff);
    border-left: 4px solid #7fb3ff;
    padding: 12px;
    border-radius: 12px;
}

/* =========================
   标签区
========================= */
.sentence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* tag */
.tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(100, 150, 255, 0.10);
    color: #2f5fa7;
}

/* level */
.level {
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(60, 180, 120, 0.10);
    color: #2f7a55;
}

/* =========================
   右侧栏
========================= */
.sidebar {
    width: 280px;
    position: sticky;
    top: 20px;
}

/* 右侧卡片 */
.sidebar-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #eef3f8;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.sidebar-box h3 {
     font-size: 17px;   /* ⭐学习工具 / 热门句子标题变大 */
    font-weight: 800;
    margin-bottom: 12px;
    color: #1f3b57;
}

.sidebar-box ul {
    padding-left: 16px;
    font-size: 14px;
    color: #4a6075;
}

.sidebar-box ul li {
    margin-bottom: 6px;
}

/* 二维码 */
.qr-box {
    text-align: center;
    padding: 10px;
}

.qr-placeholder {
    width: 140px;
    height: 140px;
    margin: 0 auto 8px;
    background: #eef5ff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
     color: #6b7c85;
}
.sidebar-box p {
    font-size: 14px;   /* 二维码说明文字 */
    color: #6b7c85;
}

/* 热门 */
.hot-item {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #3b4f66;
}

.sentence-title-en a{
    color: inherit;
    text-decoration: none;
}

.sentence-title-en a:hover{
    color: #2d5bff;
}

/* =========================
   M端适配（关键升级）
========================= */
@media (max-width: 768px) {

    .page-container {
        flex-direction: column;
        gap: 14px;
        padding: 0 10px;
    }

    .sidebar {
        width: 100%;
        position: static;
    }

    .sentence-card {
         padding: 18px;
    border-radius: 16px;
    }

    .sentence-title-en {
        font-size: 17px;
    }

    .sentence-title-cn {
        font-size: 13px;
    }

    .sentence-ai {
        font-size: 12px;
        padding: 10px;
    }
}


/* =========================
   发音模式模块
========================= */

.voice-switch-box {

    background: linear-gradient(135deg,#eef7ff,#f8fbff);

    border: 1px solid #e6eef8;
}

/* 标题 */
.voice-switch-box h3 {

    font-size: 22px;

    font-weight: 800;

    color: #1e3a5f;

    margin-bottom: 18px;
}

/* 切换区域 */
.sidebar-voice-switch {

    display: flex;

    gap: 10px;

    align-items: center;
}

/* 按钮 */
.voice-mini-btn {

    border: none;

    background: #edf4ff;

    color: #3b5b85;

    padding: 10px 18px;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;

    box-shadow: 0 3px 10px rgba(59,91,133,0.08);
}

/* hover */
.voice-mini-btn:hover {

    transform: translateY(-1px);

    background: #dbeafe;
}

/* 当前激活 */
.voice-mini-btn.active {

    background: linear-gradient(135deg,#60a5fa,#4f8cff);

    color: #ffffff;

    box-shadow: 0 6px 16px rgba(79,140,255,0.28);
}

/* 提示 */
.voice-switch-tip {

    margin-top: 14px;

    font-size: 14px;

    line-height: 1.7;

    color: #64748b;
}

/* =========================
   手机端
========================= */

@media (max-width: 768px) {

    .voice-switch-box h3 {

        font-size: 18px;
    }

    .sidebar-voice-switch {

        width: 100%;
    }

    .voice-mini-btn {

        flex: 1;

        text-align: center;

        padding: 10px 0;

        font-size: 13px;
    }

    .voice-switch-tip {

        font-size: 13px;
    }
}

/* 卡片定位 */
.sentence-card {

    position: relative;
}

/* 列表页播放按钮 */
.speak-sentence-btn.sentence-play-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(80,140,255,0.10);
    transition: 0.25s ease;
    cursor: pointer;
}

@media (max-width: 768px) {

    .speak-sentence-btn.sentence-play-btn {

        position: static;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 12px;

        padding: 7px 12px !important;

        font-size: 13px;

    }

}

/* hover */
.speak-sentence-btn.sentence-play-btn:hover {

    transform: translateY(-1px);

    background: #c9ddff;
}

/* 去掉点击黑框 */
.speak-sentence-btn.sentence-play-btn:focus {

    outline: none !important;

    box-shadow: 0 0 0 3px rgba(120,180,255,0.15);
}

/* 播放中 */
.speak-sentence-btn.sentence-play-btn.playing {

    background: #dff7e8 !important;

    color: #18834d !important;

    box-shadow: 0 4px 12px rgba(24,131,77,0.15);
}

/* 播放中的图标动画 */
.sentence-play-btn.playing .speak-icon {

    display: inline-block;

    animation: soundWave 0.9s infinite ease-in-out;
}


/* 喇叭动画 */
@keyframes soundWave {

    0% {

        transform: scale(1) rotate(0deg);
    }

    25% {

        transform: scale(1.15) rotate(-8deg);
    }

    50% {

        transform: scale(1.25) rotate(8deg);
    }

    75% {

        transform: scale(1.15) rotate(-6deg);
    }

    100% {

        transform: scale(1) rotate(0deg);
    }
}

/* =========================
   热门词组
========================= */

.hot-phrase-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;
}

/* 标签按钮 */
.phrase-tag {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition: 0.25s ease;

    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* hover */
.phrase-tag:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* 蓝 */
.phrase-tag.blue {

    background: #e8f1ff;

    color: #2563eb;
}

/* 绿 */
.phrase-tag.green {

    background: #eaf9ee;

    color: #1f9d55;
}

/* 橙 */
.phrase-tag.orange {

    background: #fff2e8;

    color: #ea580c;
}

/* 紫 */
.phrase-tag.purple {

    background: #f3e8ff;

    color: #9333ea;
}

/* 青 */
.phrase-tag.cyan {

    background: #e6f9ff;

    color: #0891b2;
}

/* 粉 */
.phrase-tag.pink {

    background: #ffeaf4;

    color: #db2777;
}

/* 黄 */
.phrase-tag.yellow {

    background: #fff8db;

    color: #ca8a04;
}

/* 蓝绿 */
.phrase-tag.teal {

    background: #e6fffb;

    color: #0f766e;
}

/* =========================
   手机端
========================= */

@media (max-width: 768px) {

    .phrase-tag {

        font-size: 12px;

        padding: 7px 12px;
    }

}

.sidebar-box ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.sidebar-box ul li {
  margin-bottom: 10px;
}

.sidebar-box ul li a {
  text-decoration: none;
  color: #666;
  display: block;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.sidebar-box ul li a:hover {
  background: #f0f8ff;
  color: #007bff;
}

.pagebox {
    margin: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagebox nav {
    width: 100%;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* hover */
.pagination .page-link:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
}

/* 当前页 */
.pagination .page-item.active .page-link {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    cursor: default;
}

/* 禁用 */
.pagination .page-item.disabled .page-link {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

/* 上一页下一页 */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    font-size: 18px;
    font-weight: 700;
}

/* PC宽屏更舒服 */
@media (min-width: 1200px) {
    .pagination .page-link {
        min-width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

/* 平板 */
@media (max-width: 1024px) {

    .pagination .page-link {
        min-width: 38px;
        height: 38px;
        font-size: 14px;
    }

}

/* 普通手机 */
@media (max-width: 768px) {

    .pagination {
        gap: 5px;
    }

    /* 默认隐藏 */
    .pagination .page-item {
        display: none;
    }

    /* 显示：首页、当前页、前一页、后一页、上一页按钮、下一页按钮 */
    .pagination .page-item.active,
    .pagination .page-item.active + .page-item,
    .pagination .page-item:has(+ .page-item.active),
    .pagination .page-item:first-child,
    .pagination .page-item:last-child {
        display: block;
    }

    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 8px;
    }

}

/* 小手机 */
@media (max-width: 480px) {

    .pagination {
        gap: 4px;
    }

    .pagination .page-link {
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 6px;
    }

}

/* 超小屏 */
@media (max-width: 360px) {

    .pagination .page-link {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
        border-radius: 5px;
    }

}