/* ========== AI 学术翻译 ========== */
/* 布局与字号规范对齐「论文改写助手」（/a/rewrite）：
   内容区 max-width 1200 居中、标题 30px、正文 15px、面板 = 渐变头 + 无边框输入区 + 灰底脚 */

/* ---- 滚动容器：限宽居中，两侧留白 ---- */
.translate {
    padding-bottom: 40px;
    min-width: 0;
}
.translate > * {
    max-width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* ---- 页面标题（居中） ---- */
.translate .page-head {
    margin: 4px auto 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.translate .page-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .5px;
}
.translate .page-desc {
    margin: 0;
    font-size: 15px;
    color: var(--text-2);
    line-height: 1.6;
}
.page-desc code {
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 13px;
}

/* ---- 方向切换胶囊 ---- */
.dir-tabs {
    display: flex;
    gap: 5px;
    padding: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}
.dir-tab {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
}
.dir-tab:hover:not(.active) { color: var(--brand); background: var(--brand-light); }
.dir-tab.active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(47, 107, 255, .28);
}

/* ============================================================
   工具面板（原文 + 译文，并排双列）
   ============================================================ */
.tr-workbench {
    display: flex;
    gap: 20px;
    margin-bottom: 48px;
}
.tr-panel {
    flex: 1;
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---- 面板头部 ---- */
.tr-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #f7f9fc, #eef2f9);
    border-bottom: 1px solid var(--border);
}
.tr-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.tr-lang-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    color: var(--brand-dark);
    background: var(--brand-light);
    border: 1px solid #d6e4ff;
    white-space: nowrap;
}

/* ---- 原文输入 ---- */
.tr-textarea {
    flex: 1;
    width: 100%;
    min-height: 340px;
    padding: 20px;
    border: none;
    outline: none;
    resize: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
    background: transparent;
}
.tr-textarea::placeholder { color: var(--text-3); }

/* ---- 面板底部 ---- */
.tr-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border-top: 1px solid var(--border);
    background: #f8fafd;
}
.tr-counter { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tr-counter.over { color: #e04040; font-weight: 600; }
.tr-btn-group { display: flex; gap: 10px; align-items: center; }

/* ---- 按钮 ---- */
.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    text-decoration: none;
}
.tr-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
.tr-btn-icon { width: 17px; height: 17px; flex-shrink: 0; }
.tr-btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 28px;
    box-shadow: 0 3px 12px rgba(47, 107, 255, .2);
}
.tr-btn-primary:hover:not(:disabled) {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: 0 5px 18px rgba(47, 107, 255, .32);
    transform: translateY(-1px);
}
.tr-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* 按钮内 spinner */
.tr-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: trSpin .7s linear infinite;
}
@keyframes trSpin { to { transform: rotate(360deg); } }

/* ---- 右侧结果区 ---- */
.tr-result-empty,
.tr-result-loading,
.tr-result-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-3);
    text-align: center;
    padding: 20px;
}
.tr-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
}
.tr-empty-icon svg { width: 26px; height: 26px; }
.tr-result-empty p { margin: 0; font-size: 14px; }
.tr-result-empty p:first-of-type { color: var(--text-2); font-weight: 500; }
.tr-result-tip { font-size: 13px; color: var(--text-3); }
.tr-result-error {
    color: #e04040;
    font-size: 14px;
    line-height: 1.6;
}
.tr-result-error p { margin: 0; }

/* 加载动画（三点脉冲，同改写页） */
.tr-loading-dots { display: flex; gap: 8px; }
.tr-loading-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    animation: dotPulse 1.2s ease-in-out infinite;
}
.tr-loading-dots span:nth-child(2) { animation-delay: .2s; }
.tr-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}
.tr-loading-text { margin: 0; font-size: 14px; color: var(--text-2); }

/* ---- 译文展示 ---- */
.tr-result { flex: 1; display: flex; min-height: 0; }
.tr-result-text {
    flex: 1;
    min-height: 340px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- 通用链接页：静态文本 ---- */
.tr-workbench-static .tr-static-text {
    flex: 1;
    min-height: 340px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- 通用链接页：错误提示 ---- */
.tr-search-tip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: var(--text-2);
    font-size: 14px;
    text-align: center;
}
.tr-search-tip .tr-empty-icon { opacity: .9; }
.tr-search-tip p { margin: 0; line-height: 1.6; }
.tr-back { text-align: center; margin-top: 8px; }

/* ============================================================
   说明卡片
   ============================================================ */
.tr-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tr-note {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow .2s ease;
}
.tr-note:hover { box-shadow: var(--shadow-card); }
.tr-note-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    background: var(--brand-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    padding: 13px;
}
.tr-note h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.tr-note p {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
}
.tr-note code {
    background: var(--brand-light);
    color: var(--brand-dark);
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 12px;
    word-break: break-all;
}
.tr-note b { color: var(--brand-dark); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
    .tr-workbench { flex-direction: column; }
    .tr-notes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .translate .page-title { font-size: 24px; }
    .tr-notes { grid-template-columns: 1fr; }
    .tr-panel-head, .tr-panel-foot { padding: 10px 14px; }
    .tr-textarea { min-height: 240px; padding: 14px; }
    .tr-result-text, .tr-workbench-static .tr-static-text { padding: 14px; }
    .dir-tab { padding: 8px 14px; }
}