/* =============================================
   反义词 - antonym.css
   深蓝紫 + 琥珀金双色主题，体现"对立"特色
   三栏布局，支持全屏与暗黑模式
   ============================================= */

/* ========== 主容器 ========== */
.at-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    min-height: 600px;
    background: #f6f5ff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(55, 48, 163, 0.12);
    transition: all 0.3s ease;
}

/* 全屏模式 */
.at-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999;
    border-radius: 0;
    margin: 0;
    min-height: unset;
}

/* ========== 顶部工具栏 ========== */
.at-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #7c3aed 75%, #c2410c 100%);
    color: white;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(49, 46, 129, 0.5);
    flex-shrink: 0;
}

.at-toolbar .toolbar-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.8px;
    margin-right: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toolbar-group {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    min-height: 28px;
}

/* 全屏按鈕组右对齐（规范：工具栏最右侧） */
.toolbar-group--right {
    margin-left: auto;
}

.toolbar-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #312e81;
    transition: all 0.2s;
    white-space: nowrap;
}

.toolbar-btn:hover:not(:disabled) {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.toolbar-btn:active:not(:disabled) {
    transform: translateY(0);
}

.toolbar-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 主操作按钮（查询反义词） */
.toolbar-btn-primary {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.4);
}

.toolbar-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
    box-shadow: 0 4px 14px rgba(194, 65, 12, 0.5);
    color: #fff !important;
}

/* ========== 抖动动画 ========== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 50%, 90% { transform: translateX(-5px); }
    30%, 70% { transform: translateX(5px); }
}

.at-input.shake,
.at-select.shake {
    animation: shake 0.5s ease-in-out;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* ========== 主内容区：三栏 ========== */
.at-main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    background: #f6f5ff;
}

/* ========== 左栏：历史记录 ========== */
.at-history-panel {
    width: 210px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #ddd6fe;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.history-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(to bottom, #f6f5ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #ddd6fe;
    flex-shrink: 0;
}

.history-panel-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #312e81;
}

.history-count {
    font-size: 11px;
    color: #7c3aed;
    font-weight: 400;
}

.history-limit-footer {
    flex-shrink: 0;
    padding: 5px 8px;
    text-align: center;
    font-size: 10px;
    color: #a5b4fc;
    border-top: 1px solid #ddd6fe;
    background: #f6f5ff;
    letter-spacing: 0.2px;
    user-select: none;
}

.history-clear-btn {
    background: #fff0f0;
    border: none;
    color: #ef4444;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 3px;
    transition: background 0.2s;
    white-space: nowrap;
}

.history-clear-btn:hover {
    background: #fde8e8;
}

.history-search {
    padding: 8px;
    border-bottom: 1px solid #ddd6fe;
    flex-shrink: 0;
}

.history-search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd6fe;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
    color: #374151;
    background: #fff;
}

.history-search input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list:hover::-webkit-scrollbar-track { background: #ede9fe; }
.history-list::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 2px; }
.history-list::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

.history-empty {
    text-align: center;
    color: #a5b4fc;
    font-size: 12px;
    padding: 24px 8px;
    user-select: none;
}

@keyframes hiFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.history-item {
    display: flex;
    flex-direction: column;
    padding: 9px 11px;
    margin: 3px 0;
    background: #f6f5ff;
    border: 1px solid #ddd6fe;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    animation: hiFadeIn 0.2s ease;
}

.history-item:hover {
    background: #ede9fe;
    border-color: #7c3aed;
    transform: translateX(2px);
}

.history-item.active {
    background: #ede9fe;
    border-color: #c2410c;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.2);
}

.history-item-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    background: #fde8e8;
    color: #ef4444;
    border: none;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.history-item:hover .history-item-del {
    opacity: 1;
}

.history-item-del:hover {
    background: #ef4444;
    color: #fff;
}

.history-item-word {
    font-size: 13px;
    font-weight: 700;
    color: #312e81;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px;
}

.history-item-mode {
    font-size: 10px;
    color: #7c3aed;
    background: #ede9fe;
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    margin-bottom: 2px;
    max-width: fit-content;
}

.history-item-time {
    font-size: 10px;
    color: #a5b4fc;
}

/* ========== 中栏：表单输入 ========== */
.at-input-panel {
    width: 340px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #ddd6fe;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ========== 右栏：结果展示 ========== */
.at-result-panel {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 300px;
}

/* ========== 通用面板头部 ========== */
.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(to bottom, #f6f5ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #ddd6fe;
    flex-shrink: 0;
}

.panel-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #312e81;
    white-space: nowrap;
}

.panel-tip {
    font-size: 11px;
    color: #7c3aed;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
}

.result-word-tag {
    font-size: 11px;
    color: #312e81;
    background: #ede9fe;
    padding: 2px 10px;
    border-radius: 10px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.result-time {
    font-size: 11px;
    color: #a5b4fc;
    white-space: nowrap;
    flex-shrink: 0;
}

.result-char-count {
    font-size: 11px;
    color: #7c3aed;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(124, 58, 237, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.result-regen-btn {
    flex-shrink: 0;
    padding: 3px 9px;
    background: rgba(194, 65, 12, 0.08);
    border: 1px solid rgba(194, 65, 12, 0.25);
    border-radius: 4px;
    color: #c2410c;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.6;
}

.result-regen-btn:hover {
    background: rgba(194, 65, 12, 0.15);
    border-color: #c2410c;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(194, 65, 12, 0.2);
}

/* ========== 表单区 ========== */
.at-input-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 24px;
}

.at-input-body::-webkit-scrollbar { width: 4px; }
.at-input-body::-webkit-scrollbar-track { background: transparent; }
.at-input-body:hover::-webkit-scrollbar-track { background: #ede9fe; }
.at-input-body::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 2px; }
.at-input-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
.at-input-body::-webkit-scrollbar-corner { background: transparent; }

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #312e81;
    margin-bottom: 6px;
}

.required-mark {
    color: #ef4444;
    margin-left: 2px;
}

.label-tip {
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
}

/* 词语输入框 - 带符号装饰 */
.word-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.word-input-wrapper .at-input {
    padding-right: 40px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #1e1b4b;
}

.word-input-arrow {
    position: absolute;
    right: 10px;
    color: #c4b5fd;
    font-size: 18px;
    pointer-events: none;
    user-select: none;
    transition: color 0.2s;
}

.word-input-wrapper:focus-within .word-input-arrow {
    color: #7c3aed;
}

.at-input,
.at-select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #ddd6fe;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    background: #faf9ff;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.at-input:focus,
.at-select:focus {
    border-color: #7c3aed;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.at-input:hover:not(:focus),
.at-select:hover:not(:focus) {
    border-color: #a78bfa;
    background: #fff;
}

.at-input::placeholder {
    color: #c4b5fd;
    font-weight: 400;
}

.at-input-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.at-input-hint {
    font-size: 11px;
    color: #c4b5fd;
    user-select: none;
}

#wordCharCount {
    font-size: 11px;
    color: #c4b5fd;
    transition: color 0.2s;
}

#wordCharCount.warn   { color: #f59e0b; font-weight: 600; }
#wordCharCount.danger { color: #ef4444; font-weight: 600; }

.at-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237c3aed'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* ========== 查询模式卡片 ========== */
.mode-options {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mode-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 100%;
    min-width: 0;
}

.mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: 1.5px solid #ddd6fe;
    border-radius: 6px;
    background: #faf9ff;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    box-sizing: border-box;
}

.mode-label:hover {
    border-color: #a78bfa;
    background: #ede9fe;
}

.mode-option input[type="radio"]:checked + .mode-label {
    border-color: #7c3aed;
    background: #ede9fe;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.mode-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.mode-text {
    font-size: 13px;
    font-weight: 600;
    color: #312e81;
    white-space: nowrap;
    flex-shrink: 0;
}

.mode-desc {
    font-size: 11px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.mode-option input[type="radio"]:checked + .mode-label .mode-text {
    color: #4f46e5;
}

.mode-option input[type="radio"]:checked + .mode-label .mode-desc {
    color: #7c3aed;
}

/* ========== 常用词语快捷按钮 ========== */
.quick-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.quick-word-btn {
    padding: 5px 12px;
    background: #ede9fe;
    border: 1px solid #c4b5fd;
    border-radius: 14px;
    font-size: 12px;
    color: #4f46e5;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.quick-word-btn:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.25);
}

.quick-word-btn:active {
    transform: translateY(0);
}

.quick-word-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 模式卡片禁用态（查询中防止误操作） */
.mode-option input[type="radio"]:disabled + .mode-label {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== 禁用态 ========== */
.at-input:disabled,
.at-select:disabled {
    background: #f0eeff !important;
    color: #a5b4fc !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    border-color: #ede9fe !important;
    box-shadow: none !important;
}

.at-input:disabled::placeholder {
    color: #c4b5fd;
}

/* ========== 结果区域 ========== */
.at-result-body {
    flex: 1;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.at-result-body::-webkit-scrollbar { width: 4px; }
.at-result-body::-webkit-scrollbar-track { background: transparent; }
.at-result-body:hover::-webkit-scrollbar-track { background: #ede9fe; }
.at-result-body::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 2px; }
.at-result-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* ========== 占位提示 ========== */
.result-placeholder {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    text-align: center;
    user-select: none;
}

/* 占位图标：左右词语+箭头动画 */
.placeholder-icon-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
}

@keyframes phWordLeft {
    0%, 100% { transform: translateX(0); color: #4338ca; }
    50%       { transform: translateX(-5px); color: #7c3aed; }
}

@keyframes phWordRight {
    0%, 100% { transform: translateX(0); color: #c2410c; }
    50%       { transform: translateX(5px); color: #ea580c; }
}

@keyframes phArrow {
    0%, 100% { transform: scaleX(1); opacity: 0.8; }
    50%       { transform: scaleX(1.3); opacity: 1; }
}

/* 暗黑模式占位动画专用 keyframe（CSS 层无法嵌套，必须在此声明） */
@keyframes phWordLeftDark {
    0%, 100% { transform: translateX(0); color: #818cf8; }
    50%       { transform: translateX(-5px); color: #a78bfa; }
}

@keyframes phWordRightDark {
    0%, 100% { transform: translateX(0); color: #fb923c; }
    50%       { transform: translateX(5px); color: #f97316; }
}

.ph-word-left  { animation: phWordLeft  2.4s ease-in-out infinite; color: #4338ca; }
.ph-arrow      { animation: phArrow     2.4s ease-in-out infinite; color: #9ca3af; font-size: 22px; }
.ph-word-right { animation: phWordRight 2.4s ease-in-out infinite; color: #c2410c; }

.placeholder-title {
    font-size: 16px;
    font-weight: 700;
    color: #312e81;
    margin: 0 0 10px;
}

.placeholder-desc {
    font-size: 13px;
    color: #7c3aed;
    margin: 4px 0;
    line-height: 1.65;
}

.placeholder-pairs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

.pair-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to right, #ede9fe, #fff7ed);
    border-radius: 8px;
    padding: 8px 18px;
    border: 1px solid #ddd6fe;
}

.pair-word {
    font-size: 14px;
    font-weight: 700;
    color: #4338ca;
    min-width: 36px;
    text-align: center;
}

.pair-sep {
    font-size: 16px;
    color: #9ca3af;
}

.pair-antonym {
    font-size: 14px;
    font-weight: 700;
    color: #c2410c;
    min-width: 36px;
    text-align: center;
}

/* ========== 加载动画 - 方向箭头 ========== */
.result-loading {
    flex: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
}

@keyframes arrowLeft {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50%       { transform: translateX(-10px); opacity: 1; }
}

@keyframes arrowRight {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50%       { transform: translateX(10px); opacity: 1; }
}

@keyframes arrowWord {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

.loading-arrows {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
}

.arrow-left  { animation: arrowLeft  1.4s ease-in-out infinite; color: #7c3aed; font-size: 24px; }
.arrow-word  { animation: arrowWord  1.4s ease-in-out infinite; color: #4338ca; font-size: 22px; }
.arrow-right { animation: arrowRight 1.4s ease-in-out infinite; color: #c2410c; font-size: 24px; }

.loading-text {
    font-size: 13px;
    color: #7c3aed;
    font-weight: 500;
    margin: 0;
}

/* ========== 结果内容 ========== */
@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 结果区域淡入独立类（JS通过添加此类触发动画，禁止在基础类中硬编码） */
.at-result-enter {
    animation: resultFadeIn 0.35s ease-out forwards;
}

.result-content {
    flex: 1;
    min-height: 0;
    padding: 24px 28px;
    font-size: 14px;
    line-height: 1.9;
    color: #1e1b4b;
    word-break: break-word;
    overflow-wrap: break-word;
    border-left: 4px solid #7c3aed;
    background: linear-gradient(to bottom, #fdfcff 0%, #fff 100%);
}

/* 结果内容 li 标记符主题色（项目规范：所有工具统一使用 #ff9800 橙色） */
.result-content ul li::marker,
.result-content ol li::marker {
    color: #ff9800;
}

/* 结果内容富文本排版 */
.result-content h4 {
    font-size: 14px;
    font-weight: 700;
    color: #312e81;
    margin: 1.1em 0 0.5em;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd6fe;
}

.result-content h4:first-child {
    margin-top: 0;
}

.result-content strong {
    color: #4f46e5;
    font-weight: 700;
}

.result-content em {
    color: #7c3aed;
    font-style: italic;
}

.result-content ul,
.result-content ol {
    margin: 0 0 1em 1.4em;
    padding: 0;
}

.result-content ul:last-child,
.result-content ol:last-child {
    margin-bottom: 0;
}

.result-content li {
    margin-bottom: 0.4em;
    line-height: 1.8;
}

.result-content li:last-child {
    margin-bottom: 0;
}

/* 结果内容段落样式 */
.result-content p {
    margin: 0 0 1.1em;
    line-height: 1.9;
}

.result-content p:last-child {
    margin-bottom: 0;
}

/* 模式对应的边框色 */
.result-content[data-mode="基础反义词"] { border-left-color: #4f46e5; }
.result-content[data-mode="详细解析"]   { border-left-color: #7c3aed; }
.result-content[data-mode="词语辨析"]   { border-left-color: #c2410c; }

/* 错误状态 */
.result-content.result-content--error {
    border-left: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    flex: 1;
    min-height: 0;
}

.result-error-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    flex: 1;
    min-height: 200px;
}

.result-error-icon {
    font-size: 40px;
    margin-bottom: 16px;
    color: #f87171;
    line-height: 1;
}

.result-error-title {
    font-size: 14px;
    font-weight: 600;
    color: #dc2626;
    margin: 0 0 8px;
}

.result-error-hint {
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

.at-retry-btn {
    margin-top: 18px;
    padding: 9px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.at-retry-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}

/* ========== 示例模态框 ========== */
.at-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100000;
    backdrop-filter: blur(2px);
    animation: atOverlayFadeIn 0.2s ease;
}

.at-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100001;
    width: 90%;
    max-width: 760px;
    max-height: 82vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(79, 70, 229, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: atModalSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes atModalSlideIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% - 16px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes atOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.at-modal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.at-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #ddd6fe;
    flex-shrink: 0;
    background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #7c3aed 75%, #c2410c 100%);
    color: #fff;
}

.at-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.at-modal-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
}

.at-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    align-content: start;
}

.at-modal-body::-webkit-scrollbar { width: 4px; }
.at-modal-body::-webkit-scrollbar-track { background: transparent; }
.at-modal-body:hover::-webkit-scrollbar-track { background: #ede9fe; }
.at-modal-body::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 2px; }
.at-modal-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }

/* ========== 示例卡片 ========== */
.example-card {
    border: 1.5px solid #ddd6fe;
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    background: #faf9ff;
    position: relative;
    overflow: hidden;
}

.example-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(to bottom, #4338ca 0%, #c2410c 100%);
    opacity: 0;
    transition: opacity 0.2s;
}

.example-card:hover {
    border-color: #7c3aed;
    background: #ede9fe;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
}

.example-card:hover::before { opacity: 1; }

.example-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #312e81;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.example-card-badge {
    font-size: 10px;
    font-weight: 500;
    background: #ede9fe;
    color: #4f46e5;
    padding: 1px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.example-card-badge.badge-orange {
    background: #fff7ed;
    color: #c2410c;
}

.example-card-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.55;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.example-card-import {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #4f46e5;
    background: #ede9fe;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.example-card-import:hover {
    background: #7c3aed;
    color: #fff;
}

/* ========== 响应式布局 ========== */
@media (max-width: 1024px) {
    .at-input-panel { width: 280px; }
    .panel-tip { display: none; }
    .mode-desc { display: none; }
}

@media (max-width: 768px) {
    .at-main-content { flex-direction: column; overflow-y: auto; }
    .at-history-panel { width: 100%; max-height: 160px; border-right: none; border-bottom: 1px solid #ddd6fe; }
    .at-input-panel { width: 100%; border-right: none; border-bottom: 1px solid #ddd6fe; max-height: 400px; }
    .at-result-panel { width: 100%; min-height: 300px; }
    .at-modal-body { grid-template-columns: 1fr; }
    .placeholder-pairs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ========== 打印样式 ========== */
@media print {
    .at-toolbar, .at-history-panel, .at-input-panel,
    #resultPlaceholder, #resultLoading { display: none !important; }
    .at-container, .at-container.fullscreen { position: static !important; height: auto; box-shadow: none; }
    .at-main-content { display: block; }
    .at-result-panel { width: 100%; }
    .at-result-body { overflow: visible; }
    .result-content { padding: 0; }
}

/* ========== 暗黑模式（body.dark） ========== */
body.dark .at-container {
    background: #14122b;
}

body.dark .at-main-content {
    background: #14122b;
}

body.dark .at-toolbar {
    background: linear-gradient(135deg, #1e1b48 0%, #2d2a72 40%, #4c2889 75%, #7a2c12 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

body.dark .at-history-panel,
body.dark .at-input-panel,
body.dark .at-result-panel {
    background: #1a1730;
    border-color: rgba(124, 58, 237, 0.18);
}

body.dark .history-panel-header {
    background: linear-gradient(to bottom, #1e1b38 0%, #1a1730 100%);
    border-color: rgba(124, 58, 237, 0.15);
}

body.dark .history-panel-header h3 {
    color: #a5b4fc;
}

body.dark .history-limit-footer {
    background: #14122b;
    border-color: rgba(124, 58, 237, 0.12);
    color: #4c4784;
}

body.dark .history-clear-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

body.dark .history-clear-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

body.dark .history-search input {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.25);
    color: #c4b5fd;
}

body.dark .history-search input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

body.dark .history-search input::placeholder {
    color: #4c4784;
}

body.dark .history-list::-webkit-scrollbar-thumb { background: #3730a3; }
body.dark .history-list::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
body.dark .history-list:hover::-webkit-scrollbar-track { background: #1e1b38; }

body.dark .history-empty {
    color: #4c4784;
}

body.dark .history-item {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.18);
}

body.dark .history-item:hover {
    background: #252144;
    border-color: #7c3aed;
}

body.dark .history-item.active {
    background: #252144;
    border-color: #c2410c;
}

body.dark .history-item-word {
    color: #a5b4fc;
}

body.dark .history-item-mode {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

body.dark .history-item-time {
    color: #4c4784;
}

body.dark .history-item-del {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

body.dark .history-item-del:hover {
    background: #ef4444;
    color: #fff;
}

body.dark .panel-header {
    background: linear-gradient(to bottom, #1e1b38 0%, #1a1730 100%);
    border-color: rgba(124, 58, 237, 0.15);
}

body.dark .panel-header h3 {
    color: #a5b4fc;
}

body.dark .panel-tip {
    color: #4c4784;
}

body.dark .form-group label {
    color: #a5b4fc;
}

body.dark .at-input,
body.dark .at-select {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.25);
    color: #c4b5fd;
}

body.dark .at-input:focus,
body.dark .at-select:focus {
    border-color: #7c3aed;
    background: #252144;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

body.dark .at-input:hover:not(:focus),
body.dark .at-select:hover:not(:focus) {
    border-color: rgba(124, 58, 237, 0.45);
    background: #252144;
}

body.dark .at-input::placeholder {
    color: #3730a3;
}

body.dark .word-input-arrow {
    color: #3730a3;
}

body.dark .word-input-wrapper:focus-within .word-input-arrow {
    color: #7c3aed;
}

body.dark .at-input-body::-webkit-scrollbar-thumb { background: #3730a3; }
body.dark .at-input-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
body.dark .at-input-body:hover::-webkit-scrollbar-track { background: #1e1b38; }

body.dark .mode-label {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.25);
}

body.dark .mode-label:hover {
    background: #252144;
    border-color: rgba(124, 58, 237, 0.5);
}

body.dark .mode-option input[type="radio"]:checked + .mode-label {
    background: #252144;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
}

body.dark .mode-text {
    color: #a5b4fc;
}

body.dark .mode-desc {
    color: #4c4784;
}

body.dark .mode-option input[type="radio"]:checked + .mode-label .mode-text {
    color: #c4b5fd;
}

body.dark .mode-option input[type="radio"]:checked + .mode-label .mode-desc {
    color: #7c3aed;
}

body.dark .quick-word-btn {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.3);
    color: #a5b4fc;
}

body.dark .quick-word-btn:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

body.dark .quick-word-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

body.dark .at-input:disabled,
body.dark .at-select:disabled {
    background: #17152e !important;
    color: #3730a3 !important;
    border-color: rgba(55, 48, 163, 0.2) !important;
}

body.dark .label-tip {
    color: #3730a3;
}

body.dark #wordCharCount {
    color: #3730a3;
}

body.dark #wordCharCount.warn   { color: #f59e0b; }
body.dark #wordCharCount.danger { color: #ef4444; }

body.dark .at-result-body {
    background: #1a1730;
}

body.dark .at-result-body::-webkit-scrollbar-thumb { background: #3730a3; }
body.dark .at-result-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
body.dark .at-result-body:hover::-webkit-scrollbar-track { background: #1e1b38; }

body.dark .result-placeholder {
    background: #1a1730;
}

body.dark .placeholder-title {
    color: #a5b4fc;
}

body.dark .placeholder-desc {
    color: #4c4784;
}

body.dark .pair-item {
    background: linear-gradient(to right, rgba(30, 27, 56, 0.8), rgba(50, 28, 20, 0.4));
    border-color: rgba(124, 58, 237, 0.2);
}

body.dark .pair-word { color: #818cf8; }
body.dark .pair-sep  { color: #4c4784; }
body.dark .pair-antonym { color: #fb923c; }

/* 暗黑模式占位动画：切换到深色主题的 keyframe，避免旧 keyframe 里的深色在暗色背景上不可见 */
body.dark .ph-word-left  { animation-name: phWordLeftDark;  color: #818cf8; }
body.dark .ph-word-right { animation-name: phWordRightDark; color: #fb923c; }
body.dark .ph-arrow      { color: #4c4784; }

body.dark .loading-text {
    color: #7c3aed;
}

/* 暗黑模式加载动画箭头颜色（修复 .arrow-word 在深色背景下几乎不可见的 bug） */
body.dark .arrow-left  { color: #a78bfa; }
body.dark .arrow-word  { color: #e0e7ff; }
body.dark .arrow-right { color: #fb923c; }

body.dark .result-content {
    background: linear-gradient(to bottom, #1c1933 0%, #1a1730 100%);
    color: #c4b5fd;
    border-left-color: #7c3aed;
}

body.dark .result-content[data-mode="基础反义词"] { border-left-color: #4f46e5; }
body.dark .result-content[data-mode="详细解析"]   { border-left-color: #7c3aed; }
body.dark .result-content[data-mode="词语辨析"]   { border-left-color: #ea580c; }

/* 暗黑模式下错误状态背景修复 */
body.dark .result-content.result-content--error {
    background: #1a1730;
}

body.dark .result-meta .result-word-tag {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

body.dark .result-time {
    color: #3730a3;
}

body.dark .result-char-count {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.15);
}

body.dark .result-regen-btn {
    background: rgba(194, 65, 12, 0.12);
    border-color: rgba(194, 65, 12, 0.3);
    color: #fb923c;
}

body.dark .result-regen-btn:hover {
    background: rgba(194, 65, 12, 0.22);
    border-color: #ea580c;
}

body.dark .at-modal {
    background: #1a1730;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.dark .at-modal-header {
    background: linear-gradient(135deg, #1e1b48 0%, #2d2a72 40%, #4c2889 75%, #7a2c12 100%);
}

body.dark .at-modal-body {
    background: #1a1730;
}

body.dark .at-modal-body::-webkit-scrollbar-thumb { background: #3730a3; }
body.dark .at-modal-body::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
body.dark .at-modal-body:hover::-webkit-scrollbar-track { background: #1e1b38; }

body.dark .example-card {
    background: #1e1b38;
    border-color: rgba(124, 58, 237, 0.2);
}

body.dark .example-card:hover {
    background: #252144;
    border-color: #7c3aed;
}

body.dark .example-card-title {
    color: #a5b4fc;
}

body.dark .example-card-badge {
    background: rgba(79, 70, 229, 0.2);
    color: #818cf8;
}

body.dark .example-card-badge.badge-orange {
    background: rgba(194, 65, 12, 0.2);
    color: #fb923c;
}

body.dark .example-card-desc {
    color: #4c4784;
}

body.dark .example-card-import {
    background: rgba(79, 70, 229, 0.2);
    color: #818cf8;
}

body.dark .example-card-import:hover {
    background: #7c3aed;
    color: #fff;
}

body.dark .result-error-title {
    color: #f87171;
}

body.dark .result-error-hint {
    color: #4c4784;
}

body.dark .at-input-hint {
    color: #3730a3;
}

/* 暗黑模式富文本標题/粗体/斜体/列表 */
body.dark .result-content h4 {
    color: #a5b4fc;
    border-bottom-color: rgba(124, 58, 237, 0.2);
}

body.dark .result-content strong {
    color: #818cf8;
}

body.dark .result-content em {
    color: #c4b5fd;
}

body.dark .result-content ul li::marker,
body.dark .result-content ol li::marker {
    color: #ff9800;
}

/* 暗黑模式错误重试按鈕 */
body.dark .at-retry-btn {
    background: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
    box-shadow: 0 2px 8px rgba(55, 48, 163, 0.4);
}

body.dark .at-retry-btn:hover {
    background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%);
    box-shadow: 0 4px 14px rgba(55, 48, 163, 0.5);
}