/* =========================================
   恢复：学习页-答案模式 (Result Mode) 样式
   ========================================= */

/* 1. 中文释义区布局 */
.chinese-meaning {
    text-align: center;
    font-size: 20px;
    /* 调大释义字号 */
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 12px 0;
    line-height: 2 !important;
    padding-bottom: 5px;
    border-bottom: 1px dashed #e5e5e7;
    /* 增加分割虚线 */
}


/* 2. 内容盒子通用样式 (例句、助记) */
.content-box {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 8px;
    position: relative;
    text-align: left;
    /* 解释内容恢复左对齐 */
}

/* 例句盒子*/
.sentence-box {
    background: transparent;
}
.sentence-box .en-text {
    font-family: -apple-system, sans-serif;
    font-size: 15px;
    color: #1d1d1f;
    line-height: 1.5;
    margin-bottom: 6px;
    font-style: normal;

}
.sentence-box .cn-text {
    font-size: 14px;
    color: #86868b;
    line-height: 1.4;
}

/* 记忆方法盒子*/
.memory-box {
    background: #fff9db;        /* 更有质感的米黄色（类似便利贴） */
    border: none;               /* 彻底去掉边框，减少条条框框的感觉 */
    padding: 16px 20px;         /* 适当加大内边距，让文字在色块中心呼吸 */
    border-radius: 12px;        /* 保持圆角，显得亲和 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* 极淡的投影，让色块微微浮起 */
    margin-bottom: 12px;
    overflow: visible;  /* 🔴 重要：允许大头针超出盒子边缘 */
}

.memory-box .box-content {
    font-family: -apple-system, sans-serif;
    font-weight: 500;   /* 🍎 苹果的醒目靠的是加粗（Semibold） */
    font-size: 17px;
    color: #1d1d1f;     /* 苹果标准的正文黑 */
    line-height: 1.8;


    /* 🟢 添加以下两行实现两端对齐 */
    text-align: justify;
    text-justify: inter-character;
}

/* 3. 笔记区域微调 */
.note-section {
    margin-top: 10px;
    padding-top: 0px;
    border-top: none;
    /* 🟢 核心：删掉那条多余的分割线 */
}

.apple-review-tag {
    display: inline-block;
    vertical-align: super;
    /* 🟢 让标签像“上标”一样浮在单词右上角 */
    font-size: 12px;
    /* 极小字号 */
    font-weight: 600;
    color: #f57c00;
    /* 苹果经典的橙色 (代表提示/待办) */
    background: #fff3e0;
    /* 极淡的橙色背景 */
    padding: 1px 6px;
    border-radius: 4px;
    /* 小圆角 */
    margin-left: 4px;
    letter-spacing: 0;
    /* 标签内部不需要紧凑字间距 */
    line-height: 1.2;
}

/* =========================================
   大头针 Emoji 方案 (📌)
   ========================================= */
.push-pin {
    position: absolute;
    /* 1. 深度下压：减小 top 的负值，让针尖更多地重叠在黄色区域 */
    top: -12px;           /* 之前是 -16px，现在往下压一点 */
    left: -4px;           /* 稍微往左挪，让针帽探出边缘 */
    
    font-size: 24px;
    z-index: 10;

    /* 2. 角度调整：旋转角度稍微调小，让针身看起来更“垂直”地刺入 */
    transform: scaleX(-1) rotate(5deg); 

    /* 3. 灵魂阴影：让阴影和针尖拉开距离 */
    /* 这里的 8px 纵向位移会让用户感觉针帽很高，而针尖已经没入纸内 */
    filter: drop-shadow(-4px 8px 3px rgba(0, 0, 0, 0.22));

    user-select: none;
    pointer-events: none;
}

/* 设置按钮：半透明隐蔽处理 */
.nav-setting-btn {
    font-size: 20px;
    color: #1d1d1f;
    opacity: 0.35;
    transition: opacity 0.3s;
    padding: 8px; /* 增大点击热区 */
}

/* 气泡菜单容器 */
.popover-setting-container {
    width: 140px;
    padding: 4px 0;
}

.popover-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.setting-label {
    font-size: 14px;
    color: #1d1d1f;
    font-weight: 500;
}
/* =========================================
   单词详情弹窗专用（仅控制外壳与滚动）
/* 1. 弹窗外壳：必须透明且关掉阴影（解决黑角），禁止外层溢出 */
.detail-popup {
    height: 80% !important;
    background: transparent !important; 
    box-shadow: none !important;
    overflow: hidden !important; 
    margin-bottom: 0 !important;
    background: #fff!important;

}

/* 2. 既然已经取消了按钮，让卡片在弹窗里直接铺满，只对“住在弹窗（.detail-popup）里”的“卡片（.learn-card）”生效 */
.detail-popup .learn-card {
    flex: 1;                     /* 🟢 强制撑开，吃掉所有剩余空间 */
    margin: 0 !important;        /* 🟢 物理封死：消除灰紫色缝隙 */
    border-radius: 0 !important; /* 🟢 形状对齐：贴死弹窗边缘 */
    box-shadow: none !important; /* 🟢 视觉对齐：去掉投影 */
}

/* 2. 滚动区域：必须设为 100% 高度并允许滚动，这样才能看到底部的翻译 */
.popup-scroll-area {
    height: 100%;
    overflow-y: auto; 
    padding: 30px 16px 100px 16px; /* 底部预留 100px 防止内容被按钮挡住 */
    box-sizing: border-box;
}

.popup-scroll-content {
    display: flex;
    flex-direction: column;
    /* 🟢 关键：强制容器至少占满弹窗的 100% 高度 */
    min-height: 100%; 
    cursor: pointer;
}