@font-face {
  font-family: 'GoogleSansLocal'; /* Define custom font name */
  src: url('/GoogleSans.ttf') format('truetype'); /* Path from web root */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improve perceived performance */
}

:root {
    --primary-color-light: #0056b3; /* 深蓝色 */
    --background-color-light: #fcf8e3; /* Change to eye-friendly yellow */
    --text-color-light: #212529; /* 深灰色文本 */
    --card-background-light: #ffffff; /* 白色卡片背景 */
    --border-color-light: #dee2e6; /* 浅灰色边框 */
    --accent-color-light: #e9ecef; /* 更浅的灰色 */
    --button-hover-light: #004494;

    --primary-color-dark: #4dabf7; /* 亮蓝色 */
    --background-color-dark: #121212; /* 深黑色背景 */
    --text-color-dark: #e0e0e0; /* 浅灰色文本 */
    --card-background-dark: #1e1e1e; /* 深灰色卡片背景 */
    --border-color-dark: #333; /* 中灰色边框 */
    --accent-color-dark: #2c2c2c; /* 更深的灰色 */
    --button-hover-dark: #74c0fc;
}

body {
    /* Use the locally defined font */
    font-family: 'GoogleSansLocal', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color-light, #f4f7f6);
    color: var(--text-color-light, #333);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

header {
    /* background-image: url('/banner.png'); */
    background-size: cover;
    background-position: center center;
    color: white;
    padding: 4rem 1rem;
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--border-color-light);
    cursor: pointer; /* Add cursor pointer for click interaction */
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease; /* Add transform and border-color to transition */
    /* Apply the animation */
    opacity: 0; /* Start hidden for animation */
    animation: fadeInUp 0.5s ease forwards;
    /* Add a slight delay to stagger animations if desired, requires JS or nth-child */
    /* animation-delay: calc(0.1s * var(--card-index, 0)); */ /* Example delay */
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 50, 0.4);
    z-index: 0;
}

header h1,
header p {
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

header h1 {
    margin: 0;
    font-size: 2.8rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Ensure the link within h1 doesn't change color or get underlined */
header h1 a:link,
header h1 a:hover,
header h1 a:visited,
header h1 a:active {
    color: inherit; /* Keep the inherited color (likely white) */
    text-decoration: none; /* Ensure no underline appears */
}

header p {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    opacity: 0.9;
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* Ensure the link within p doesn't change color or get underlined */
header p a:link, /* Base state */
header p a:visited,
header p a:hover,
header p a:active {
    color: inherit;
    text-decoration: none;
}

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.search-section {
    background-color: var(--card-background-light);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color-light);
}

.search-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

/* Style for the new domain select dropdown */
#domain-select {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    font-size: 0.95rem; /* Slightly smaller font */
    background-color: var(--accent-color-light);
    color: var(--text-color-light);
    height: calc(1.4rem + 1.4rem + 2px); /* Match input height roughly (padding + font-size + border) */
    flex-shrink: 0; /* Prevent shrinking */
    margin-right: 0.5rem; /* Space between select and input */
    cursor: pointer;
}

#search-input {
    flex-grow: 1;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--accent-color-light);
    color: var(--text-color-light);
    margin: 0;
    box-sizing: border-box;
    line-height: normal;
}

#search-button {
    background-color: var(--primary-color-light);
    color: white;
    border: 1px solid var(--primary-color-light);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.7rem 1rem;
    flex-shrink: 0;
    box-sizing: border-box;
    height: auto;
}

#search-button svg {
    fill: white;
    width: 18px;
    height: 18px;
    display: block;
}

#search-button:hover {
    background-color: var(--button-hover-light);
}

.term-display-section {
    display: grid;
    gap: 1.5rem;
}

.term-card {
    /* Ensure background uses the light mode page background */
    background-color: var(--background-color-light);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color-light);
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
    /* Explicitly set text color for card content in light mode */
    color: var(--text-color-light);
}

.term-card:hover {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
   transform: scale(1.015); /* Slightly larger scale effect */
   border-color: var(--primary-color-light); /* Change border color on hover */
}

.term-title {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
    color: var(--primary-color-light);
    line-height: normal;
}

.term-translation,
.term-definition,
.term-definition-translation {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    /* Ensure text color is correct */
    color: var(--text-color-light);
}

.term-translation strong,
.term-definition strong,
.term-definition-translation strong {
    font-weight: 600;
    margin-right: 0.3em;
}

.term-tags {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.term-tags strong {
    font-weight: 600;
    margin-right: 0.5em;
}

.tag {
    display: inline-block;
    background-color: var(--accent-color-light);
    color: var(--primary-color-light);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid var(--primary-color-light);
}

.term-actions {
    margin-top: 1rem;
    text-align: left;
}

.details-button {
    background-color: var(--accent-color-light);
    color: var(--primary-color-light);
    border: 1px solid var(--primary-color-light);
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s, color 0.3s;
}

.details-button:hover {
    background-color: var(--primary-color-light);
    color: white;
}

/* === Modal Styles === */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: var(--card-background-light, #ffffff);
    color: var(--text-color-light);
    margin: 10% auto; /* 10% from the top and centered */
    padding: 30px 40px;
    border: 1px solid var(--border-color-light, #ccc);
    width: 80%;
    max-width: 800px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    text-align: left; /* Ensure default alignment is left */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

#modal-term-details .term-title,
#modal-term-details .term-translation,
#modal-term-details .term-definition,
#modal-term-details .term-definition-translation,
#modal-term-details .term-tags {
    margin: 0;
    font-size: inherit;
    color: inherit;
    font-weight: normal;
}
#modal-term-details strong {
    font-weight: normal;
}

.modal-content h1 {
    text-align: left; /* Override center alignment */
    color: var(--text-color-light, #2c3e50);
    margin-bottom: 30px;
    font-size: 24px;
}

.modal-field {
    margin-bottom: 24px;
}

.modal-field h2 {
    font-size: 18px;
    color: var(--heading-color-light, #34495e);
    margin-bottom: 8px;
    border-left: 4px solid var(--primary-color-light, #3498db);
    padding-left: 10px;
}

.modal-field .modal-field-content {
    font-size: 16px;
    color: var(--text-color-light, #2c3e50);
    text-align: left; /* Override justify alignment */
    line-height: 1.6;
}

.modal-field .modal-field-content .tag {
    display: inline-block;
    background-color: var(--primary-color-light, #3498db);
    color: #fff;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 5px;
    margin-top: 5px;
}

.modal-content .modal-copy-btn,
.modal-content .modal-close-btn {
    display: block;
    width: fit-content;
    margin: 20px auto 0 auto;
    padding: 8px 20px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
}
.modal-content .modal-copy-btn {
    background-color: var(--accent-color-light, #e9ecef);
    color: var(--text-color-light, #333);
    border-color: #ccc;
    display: none;
}
.modal-content .modal-copy-btn:hover {
    background-color: #d1d5db;
}
.modal-content .modal-close-btn {
    background-color: var(--primary-color-light, #007bff);
    color: white;
    border-color: var(--primary-color-light, #007bff);
}
.modal-content .modal-close-btn:hover {
    background-color: var(--button-hover-light, #0056b3);
}

footer {
    text-align: center;
    margin-top: 3rem; /* Reduced top margin */
    padding: 1.2rem 1rem; /* Consistent and reduced top/bottom padding */
    /* border-top: 1px solid var(--border-color-light); */
    font-size: 0.95rem;
    color: #6c757d;
    background-color: var(--accent-color-light);
}

/* Style for the link inside the span */
footer p {
    margin: 0; /* Remove default paragraph margin */
}
footer p span a {
    font-size: inherit; /* Ensure link inherits the parent font size */
    color: var(--primary-color-light); /* Keep link color distinct */
    text-decoration: underline;
    /* font-weight: 500; */ /* Remove added boldness */
}

/* === Admin Header Override === */
/* Restore solid background for admin pages */
.admin-header {
    background-image: none; /* Override the banner image */
    background-color: var(--primary-color-light);
    padding: 1rem 2rem;
    position: relative; /* Ensure it establishes a stacking context */
    z-index: 10; /* Give header a base z-index */
}

/* Ensure admin header text is readable and clickable */
.admin-header h1 {
    text-shadow: none;
    position: relative; /* Keep for potential future elements */
    z-index: 11; /* Ensure title is above base header */
}

.admin-header .user-info {
    text-shadow: none;
    position: relative; /* Necessary for z-index */
    z-index: 12; /* Ensure user-info is above title and base header */
}

.admin-header .user-info a {
    color: white;
    background-color: rgba(255,255,255, 0.2);
    position: relative; /* Good practice, but z-index on parent might be enough */
    z-index: 13; /* Explicitly make links topmost within header */
}

.admin-header .user-info a:hover {
    background-color: rgba(255,255,255, 0.4);
}

/* Admin Header User Info Span */
.admin-header .user-info span {
    margin-right: 1rem;
}

/* Admin Search Form Alignment */
.admin-actions .admin-search-form {
    margin-left: auto; /* Push search form to the right */
}

/* Clear Search Link Style */
.clear-search-link {
    font-size: 0.8em;
    margin-left: 0.5rem;
    text-decoration: none;
    color: var(--primary-color-light); /* Or choose another suitable color */
}
.clear-search-link:hover {
    text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
    .clear-search-link {
        color: var(--primary-color-dark);
    }
}

/* Pagination Per Page Form */
.pagination-controls .per-page-selector form {
    display: inline; /* Keep form elements on the same line */
}

/* Admin Table Delete Form */
.terms-table .delete-form {
    display: inline; /* Keep button next to edit link */
    margin: 0;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background-color-dark);
        color: var(--text-color-dark);
    }

    header {
        /* background-color: var(--primary-color-dark); */
        /* color: var(--background-color-dark); */
    }

    /* 在暗色模式下移除叠加层效果 */
    header::before {
        background-color: rgba(0, 0, 0, 0); /* 完全透明 */
    }

    /* 在暗色模式下，可能需要调整文字颜色或加深阴影以保证对比度 */
    header h1,
    header p {
        /* 可以考虑是否需要改变文字颜色，例如： color: #eee; */
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* 稍微加深阴影 */
    }

    .search-section, .term-card {
        background-color: var(--card-background-dark);
        border-color: var(--border-color-dark);
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
        /* Ensure text color is correct for dark mode cards */
        color: var(--text-color-dark);
    }

     .term-card:hover {
        box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1); /* Adjusted shadow for dark */
        transform: scale(1.015); /* Keep scale effect */
        border-color: var(--primary-color-dark); /* Dark mode border color */
     }

    #search-input {
        background-color: var(--accent-color-dark);
        color: var(--text-color-dark);
        border-color: var(--border-color-dark);
    }

    #search-button {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
        border-color: var(--primary-color-dark);
    }
    #search-button svg {
        fill: var(--background-color-dark);
    }

    #search-button:hover {
        background-color: var(--button-hover-dark);
    }

    .term-title {
        color: var(--primary-color-dark);
    }

    .tag {
        background-color: var(--accent-color-dark);
        color: var(--primary-color-dark);
        border-color: var(--primary-color-dark);
    }

    footer {
        /* border-top-color: var(--border-color-dark); */ /* Remove border */
        color: #868e96; /* Adjust dark mode color */
        background-color: var(--accent-color-dark); /* Subtle dark background */
    }

    /* Adjust link color in dark mode footer */
    footer p span a {
         color: var(--primary-color-dark);
         /* font-weight: 500; */ /* Remove added boldness */
    }

    /* === Admin Header Override (Dark Mode) === */
    .admin-header {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
        /* z-index will be inherited */
    }

    .admin-header .user-info a {
        color: var(--background-color-dark);
        background-color: rgba(0,0,0, 0.2);
    }
    .admin-header .user-info a:hover {
        background-color: rgba(0,0,0, 0.4);
    }

    .details-button {
        background-color: var(--accent-color-dark);
        color: var(--primary-color-dark);
        border-color: var(--primary-color-dark);
    }
    .details-button:hover {
        background-color: var(--primary-color-dark);
        color: var(--card-background-dark);
    }

    .modal-content {
        background-color: var(--card-background-dark);
        color: var(--text-color-dark);
        border-color: var(--border-color-dark);
        box-shadow: 0 5px 15px rgba(255,255,255,0.1);
    }
    .close-button {
        color: #888;
    }
    .close-button:hover,
    .close-button:focus {
        color: var(--text-color-dark);
    }

    /* Adjust modal example styles for dark mode */
    .modal-content h1 {
        color: #e0e0e0;
    }

    .modal-field h2 {
        color: var(--heading-color-dark, #adb5bd);
        border-left-color: var(--primary-color-dark, #4dabf7);
    }

    .modal-field .modal-field-content {
        color: var(--text-color-dark, #e9ecef);
    }

    .modal-field .modal-field-content .tag {
        background-color: var(--primary-color-dark, #4dabf7);
        color: var(--background-color-dark, #121212);
    }

    .modal-content .modal-copy-btn {
        background-color: var(--accent-color-dark, #343a40);
        color: var(--text-color-dark, #e9ecef);
        border-color: #555;
    }
    .modal-content .modal-copy-btn:hover {
        background-color: #495057;
    }
    .modal-content .modal-close-btn {
        background-color: var(--primary-color-dark, #4dabf7);
        color: var(--background-color-dark, #121212);
        border-color: var(--primary-color-dark, #4dabf7);
    }
    .modal-content .modal-close-btn:hover {
        background-color: var(--button-hover-dark, #1e90ff);
    }

    /* Ensure text color inside cards is correct in dark mode */
    .term-card .term-translation,
    .term-card .term-definition,
    .term-card .term-definition-translation {
        color: var(--text-color-dark);
    }

    /* Dark mode domain select */
    #domain-select {
        background-color: var(--accent-color-dark);
        color: var(--text-color-dark);
        border-color: var(--border-color-dark);
    }
}

/* === Mobile Responsiveness === */
@media (max-width: 600px) {
    header {
        padding: 3rem 1rem; /* Reduce header padding slightly */
    }
    header h1 {
        font-size: 2rem; /* Reduce header font size */
    }
    header p {
        font-size: 1rem;
    }

    .search-container {
        flex-direction: column; /* 改为垂直排列 */
        width: 100%;
        gap: 0.8rem;
    }

    #search-input {
        width: 100%; /* 使输入框占据整行 */
        flex-basis: auto; /* 移除之前的计算 */
    }

    #search-button {
        width: 100%; /* 使按钮占据整行 */
        padding: 0.7rem;
    }

    .admin-container,
    .modal-content {
        padding: 1rem; /* Reduce padding in containers */
        width: 90%; /* Adjust modal width */
        margin: 15% auto; /* Adjust modal margin */
    }

    .admin-header {
        padding: 0.8rem 1rem;
        flex-direction: column; /* Stack admin header items */
        gap: 0.5rem;
        text-align: center;
    }
     .admin-header .user-info {
        margin-top: 0.5rem;
     }

    .admin-actions {
        flex-direction: column; /* Stack admin action buttons */
        align-items: flex-start;
    }
    .admin-actions .import-button {
        margin-left: 0; /* Remove margin when stacked */
    }

    /* Adjust table font size or horizontal scroll for admin tables */
    .terms-table th,
    .terms-table td {
        padding: 0.6rem 0.5rem;
        font-size: 0.9em;
    }
    .terms-table .action-links form {
        display: block; /* Stack delete button */
        margin-top: 0.3rem;
    }
     .terms-table .action-links .delete-link-button {
        margin-left: 0;
     }

}

/* 模态窗口底部关闭按钮样式 */
.modal-close-btn {
    background-color: var(--primary-color-light);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1.5rem; /* 确保与上方内容有间距 */
    display: block;      /* 设为块级元素以应用 auto margin */
    width: 120px;       /* 固定宽度 */
    margin-left: auto;   /* 自动左边距 */
    margin-right: auto;  /* 自动右边距，实现水平居中 */
    text-align: center;
    transition: background-color 0.3s;
}

.modal-close-btn:hover {
    background-color: var(--button-hover-light);
}

/* 暗色模式下的关闭按钮样式 */
@media (prefers-color-scheme: dark) {
    .modal-close-btn {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
    }
    
    .modal-close-btn:hover {
        background-color: var(--button-hover-dark);
    }
}

/* 随机推荐消息的样式 */
.term-card.message.random-suggestion {
    padding-top: 0.8rem; /* 减少顶部内边距 */
    padding-bottom: 0.8rem; /* 减少底部内边距 */
    background-color: var(--accent-color-light);
    border-left: 4px solid var(--primary-color-light);
    color: var(--text-color-light);
    /* 可以加个图标伪元素 */
    /* content: '\f0eb'; */
    /* font-family: 'Font Awesome 5 Free'; */
    /* font-weight: 900; */
    /* margin-right: 0.5em; */
}

/* 确保内部 p 标签的边距也不会太大 */
.term-card.message.random-suggestion p {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

/* 暗色模式下的关闭按钮和随机推荐消息样式 */
@media (prefers-color-scheme: dark) {
    /* ... existing dark mode styles ... */

    .modal-close-btn {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
    }

    .modal-close-btn:hover {
        background-color: var(--button-hover-dark);
    }

    /* 暗色模式随机推荐 */
    .term-card.message.random-suggestion {
        padding-top: 0.8rem; /* 同样减少 */
        padding-bottom: 0.8rem; /* 同样减少 */
        background-color: var(--accent-color-dark);
        border-left-color: var(--primary-color-dark);
        color: var(--text-color-dark);
    }

    /* 暗色模式下 p 标签边距通常无需再调整，会继承基础设置 */
    /* .term-card.message.random-suggestion p { ... } */

    /* ... other existing dark mode rules ... */

} /* 这个是暗色模式媒体查询的结束括号 */

/* ... potentially other media queries like mobile responsiveness ... */

/* 模态窗口复制按钮样式 */
.modal-copy-btn {
    background-color: #6c757d; /* Bootstrap secondary color */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1rem; /* Slightly smaller padding than close button */
    font-size: 0.9rem; /* Slightly smaller font size */
    cursor: pointer;
    margin-top: 1rem;  /* Space above it */
    margin-bottom: 0.5rem; /* Space below it, before the close button */
    display: block; /* Takes its own line */
    width: auto; /* Adjust width based on content */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transition: background-color 0.3s;
    max-width: 200px; /* Example max-width */
}

.modal-copy-btn:hover {
    background-color: #5a6268;
}

/* 暗色模式下的按钮样式 */
@media (prefers-color-scheme: dark) {
    /* ... existing dark mode styles ... */

    .modal-close-btn {
        /* ... styles ... */
    }
    .modal-close-btn:hover {
        /* ... styles ... */
    }

    .modal-copy-btn {
        background-color: #495057;
        color: var(--text-color-dark);
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 120px; /* Or use auto and max-width */
        margin-top: 0.5rem; /* Space above (adjust if copy btn not shown) */
        margin-bottom: 0; /* No space below */
    }
    .modal-copy-btn:hover {
        background-color: #343a40;
    }

    /* ... other dark mode rules ... */
}

/* 前端搜索结果分页控件样式 */
#pagination-controls {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.pagination-controls-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--card-background-light);
    border: 1px solid var(--border-color-light);
    border-radius: 8px;
}

#pagination-controls .pagination-info {
    font-size: 0.9em;
    color: var(--text-color-light);
    /* flex-grow: 1; */ /* Allow info to take space */
    text-align: center;
}

#pagination-controls .pagination-links a,
#pagination-controls .pagination-links span {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    margin: 0 0.2rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    text-decoration: none;
    color: var(--primary-color-light);
    background-color: var(--accent-color-light);
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9em;
}

#pagination-controls .pagination-links a:hover {
    background-color: var(--primary-color-light);
    color: white;
    border-color: var(--primary-color-light);
}

#pagination-controls .pagination-links span.disabled {
    color: #aaa;
    background-color: #f0f0f0;
    border-color: #ddd;
    cursor: default;
}

#pagination-controls .per-page-selector label {
    margin-right: 0.5rem;
    font-size: 0.9em;
    color: var(--text-color-light);
}

#pagination-controls .per-page-selector select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color-light);
    border-radius: 4px;
    background-color: var(--accent-color-light);
    color: var(--text-color-light);
    font-size: 0.9em;
}

/* Dark mode适配 */
@media (prefers-color-scheme: dark) {
    .pagination-controls-inner {
        background-color: var(--card-background-dark);
        border-color: var(--border-color-dark);
    }
    #pagination-controls .pagination-info {
        color: var(--text-color-dark);
    }
    #pagination-controls .pagination-links a,
    #pagination-controls .pagination-links span {
        border-color: var(--border-color-dark);
        color: var(--primary-color-dark);
        background-color: var(--accent-color-dark);
    }
    #pagination-controls .pagination-links a:hover {
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
        border-color: var(--primary-color-dark);
    }
    #pagination-controls .pagination-links span.disabled {
        color: #777;
        background-color: #2c2c2c;
        border-color: #444;
    }
    #pagination-controls .per-page-selector label {
        color: var(--text-color-dark);
    }
    #pagination-controls .per-page-selector select {
        border-color: var(--border-color-dark);
        background-color: var(--accent-color-dark);
        color: var(--text-color-dark);
    }
}

/* 移动端适配 (可选，简化分页控件) */
@media (max-width: 600px) {
    .pagination-controls-inner {
        flex-direction: column; /* Stack controls vertically */
        align-items: stretch; /* Make items full width */
    }
    #pagination-controls .per-page-selector,
    #pagination-controls .pagination-info,
    #pagination-controls .pagination-links {
        text-align: center; /* Center text */
    }
    #pagination-controls .pagination-links a,
    #pagination-controls .pagination-links span {
        padding: 0.6rem 1rem; /* Make buttons easier to tap */
        margin-bottom: 0.5rem; /* Add space between stacked buttons */
    }
    #pagination-controls .per-page-selector select {
        width: auto; /* Allow select to size naturally */
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
    }
}

/* === Responsive adjustments for Modal (optional) === */
@media (max-width: 768px) {
    .modal-content {
        padding: 1.5rem;
        max-width: 90%; /* <<< Limit modal width on smaller screens */
        width: 90%; /* <<< Ensure it doesn't exceed viewport */
        box-sizing: border-box; /* <<< Include padding in width calculation */
    }
    .modal-content h1 {
        font-size: 20px;
    }
    .modal-content .field h2 {
        display: inline-block;
        vertical-align: middle;
        font-size: 15px;
        margin-right: 5px; /* Reduce space on smaller screens */
    }
    .modal-content .field p {
        font-size: 14px;
    }
    .modal-content .domain-tag {
        font-size: 12px;
        padding: 3px 8px;
    }
    .modal-content .play-button {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        font-size: 12px;
        line-height: 22px;
    }
    .search-mode-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px; /* <<< Reduce gap between label and radios */
    }
    
    .search-mode-radios {
        margin-top: 5px;
        gap: 10px; /* <<< Reduce gap between radio buttons */
    }
}

/* New container style */
/* .modal-button-container {
    display: flex; 
    margin-top: 2rem;
    padding-top: 1rem;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.1);
} */

.modal-copy-btn,
.modal-close-btn {
    /* margin: 0; */ /* Reset margin for stacked layout */
    /* margin-bottom: 0.8rem; */ /* Add space between stacked buttons */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%; /* Example: make buttons wider on mobile */
    max-width: 250px; /* Optional max width */
    margin-top: 1rem; /* Adjust top/bottom margins as needed */
    margin-bottom: 0.5rem;
}

.modal-content > .modal-close-btn { /* More specific selector */
    margin-bottom: 0;
}

/* Define the fadeInUp animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Add focus style for search input */
#search-input:focus {
    outline: none;
    border-color: var(--primary-color-light);
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2); /* Subtle glow effect */
}

/* Dark mode focus style for search input */
#search-input:focus {
    border-color: var(--primary-color-dark);
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3); /* Adjusted glow for dark */
}

/* Styles for Term Suggestions */
.term-suggestions-container {
    margin-top: 1rem; /* Space below search bar */
    display: flex;
    flex-wrap: wrap; /* Allow tags to wrap */
    gap: 0.6rem; /* Spacing between tags */
    justify-content: center; /* Center the tags */
    padding-bottom: 0.5rem; /* Optional padding if needed */
}

.suggestion-tag {
    background-color: var(--accent-color-light);
    color: var(--primary-color-light);
    border: 1px solid var(--border-color-light);
    padding: 0.3rem 0.8rem;
    border-radius: 15px; /* More rounded corners */
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s ease;
    white-space: nowrap; /* Prevent long terms from breaking */
}

.suggestion-tag:hover {
    background-color: var(--primary-color-light);
    color: white;
    border-color: var(--primary-color-light);
    transform: translateY(-1px); /* Slight lift effect */
}

/* Dark mode suggestion tags - Restore and modify */

@media (prefers-color-scheme: dark) {
    .term-suggestions-container {
        /* No changes needed usually */
    }
    .suggestion-tag {
        /* Match search button: Blue background, dark text */
        background-color: var(--primary-color-dark);
        color: var(--background-color-dark);
        border-color: var(--primary-color-dark);
    }
    .suggestion-tag:hover {
        /* Slightly lighter blue on hover */
        background-color: var(--button-hover-dark);
        color: var(--background-color-dark);
        border-color: var(--button-hover-dark);
    }
}

.term-title {
    /* ... existing code ... */
}

/* 添加高级检索选项样式 */
.advanced-search-options {
    width: 100%;
    max-width: 800px;
    margin: 10px auto 15px;
    padding: 0 15px;
}

.search-criteria {
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4285f4;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.search-criteria h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

.search-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.search-mode-label {
    font-weight: 500;
    margin-right: 5px;
}

.search-mode-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.radio-label, .checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-text, .checkbox-text {
    margin-left: 5px;
    font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .search-mode-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .search-mode-radios {
        margin-top: 5px;
    }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .search-criteria {
        background-color: #2a2a2a;
        border-left-color: #5c9aff;
    }
    
    .search-criteria h3 {
        color: #e0e0e0;
    }
    
    .radio-text, .checkbox-text, .search-mode-label {
        color: #d0d0d0;
    }
}

/* Trigger Button (FAB) */
#deepseek-trigger {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px; /* FAB size */
    height: 55px; /* FAB size */
    background-color: var(--primary-color-light, #007bff);
    color: white; /* Default color for potential text fallback */
    border: none;
    border-radius: 50%; /* Circular */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Removed font-size as content is SVG */
    z-index: 999;
    transition: background-color 0.3s, transform 0.3s ease;
    padding: 0; /* Remove padding to let SVG control spacing */
}

#deepseek-trigger svg {
    width: 32px; /* Slightly larger SVG */
    height: 32px; /* Slightly larger SVG */
    display: block; /* Ensure SVG behaves like a block */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    border-radius: 50%; /* Make the background circular */
    padding: 4px; /* Padding around the SVG icon */
    box-sizing: content-box; /* Padding adds to the size */
}

#deepseek-trigger:hover {
    background-color: var(--button-hover-light, #0056b3);
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Dark Mode Trigger */
@media (prefers-color-scheme: dark) {
    #deepseek-trigger {
        background-color: var(--primary-color-dark, #4dabf7);
    }
    #deepseek-trigger:hover {
        background-color: var(--button-hover-dark, #1e90ff);
    }
    /* Optional: Adjust SVG background in dark mode if needed */
    /* #deepseek-trigger svg {
        background-color: rgba(230, 230, 230, 0.85); Slightly darker background 
    } */
}

/* Style for the modal title dynamically added by JS */
.modal-main-title {
    text-align: center;
    margin-bottom: 1em;
    /* Add other title styling if needed */
}

/* Style for N/A content in modal field */
.modal-field-content-na {
    font-style: italic;
}

/* Style for the modal copy button (default hidden) */
button#copy-english-btn {
    display: none; /* Default hidden, shown by JS */
    /* Add other styling as needed, e.g., margin */
    margin-top: 10px;
}

/* Style for warning messages */
.message.warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    /* ... (existing dark mode rules) ... */

     .message.warning {
        background-color: #4d3c0c;
        color: #ffeeba;
        border-color: #66512c;
     }

    /* ... (rest of dark mode rules) ... */
}

/* Append these styles */

.deepseek-content .textarea-wrapper,
.deepseek-content .result-wrapper {
    position: relative; /* Needed for absolute positioning of the clear button */
    margin-bottom: 10px; /* Keep spacing */
}

.deepseek-content .clear-btn {
    position: absolute;
    top: 5px; /* Adjust as needed */
    right: 5px; /* Adjust as needed */
    background-color: rgba(200, 200, 200, 0.6);
    border: none;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    width: 18px;
    height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s, background-color 0.2s;
}

.deepseek-content .clear-btn:hover {
    background-color: rgba(180, 180, 180, 0.8);
    opacity: 1;
}

/* Adjust top position slightly for the result clear button if needed */
.deepseek-content .result-wrapper .clear-btn {
    top: 8px; /* Example adjustment */
}

/* Ensure textarea and result div don't overlap the button */
.deepseek-content textarea#deepseek-source,
.deepseek-content div#deepseek-result {
    padding-right: 25px; /* Add padding to prevent text overlapping the button */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Spinner Styles */
.spinner {
    display: none; /* Start hidden by default */
    display: inline-block;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary-color-light, #007bff); /* Spinner color */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    vertical-align: middle; /* Align with button text */
    margin-left: 8px; /* Space between button and spinner */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dark mode spinner adjustment */
@media (prefers-color-scheme: dark) {
    .spinner {
        border-left-color: var(--primary-color-dark, #4dabf7);
    }
     /* ... other dark mode rules ... */
}

/* DeepSeek Assistant Styles */
#deepseek-window .deepseek-content > div:has(#deepseek-domain-select) {
    margin-bottom: 8px;
}

#deepseek-window label[for="deepseek-domain-select"] {
    margin-right: 5px;
    font-size: 0.9em;
}

#deepseek-domain-select {
    padding: 3px;
    border-radius: 3px;
    font-size: 0.9em;
    /* Add specific dark mode styles if needed */
}

#deepseek-status-log {
    font-size: 0.8em;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #666; /* Use var(--text-color-light) or a new variable? */
    min-height: 1.2em;
    word-wrap: break-word;
}

/* Dark mode specific styles for status log if needed */
@media (prefers-color-scheme: dark) {
    #deepseek-status-log {
        color: var(--text-color-dark); /* Use main dark text color */
        /* Make it slightly less prominent if needed */
        /* opacity: 0.8; */
    }
    /* Add dark mode styles for deepseek-domain-select if needed */
}

@media (prefers-color-scheme: dark) {
    #deepseek-trigger {
        background-color: var(--primary-color-dark, #4dabf7);
    }
    #deepseek-trigger:hover {
        background-color: var(--button-hover-dark, #1e90ff);
    }
    #deepseek-window {
        background-color: var(--card-background-dark, #212529);
        border-color: var(--border-color-dark, #495057);
    }
     .deepseek-header {
        background-color: var(--primary-color-dark, #4dabf7);
        color: white; /* Ensure header text is white for contrast */
     }
     .deepseek-header .close-btn {
        color: white; /* Ensure close button is visible */
     }
    /* Apply dark mode text color to labels inside the content area */
     .deepseek-content label {
        color: var(--text-color-dark, #e0e0e0);
     }
    .deepseek-content textarea {
        background-color: var(--accent-color-dark, #343a40);
        color: var(--text-color-dark, #e9ecef);
         border-color: var(--border-color-dark, #495057);
    }
    #deepseek-result {
        /* Use accent color for consistency, similar to textarea */
        background-color: var(--accent-color-dark, #343a40);
        border-color: var(--border-color-dark, #495057);
        color: var(--text-color-dark, #e9ecef);
    }
    .deepseek-footer {
         border-top-color: var(--border-color-dark, #495057);
         /* Ensure footer matches window background */
         background-color: var(--card-background-dark, #212529);
    }
    .deepseek-footer button {
        background-color: var(--primary-color-dark, #4dabf7);
         /* Use white or light text color for contrast */
         color: white; /* Or var(--text-color-dark) if that looks better */
    }
    .deepseek-footer button:hover {
        background-color: var(--button-hover-dark, #1e90ff);
    }
    /* Adjust clear button colors for dark mode */
    .deepseek-content .clear-btn {
        background-color: var(--accent-color-dark, rgba(100, 100, 100, 0.6));
        color: var(--text-color-dark, #ddd);
    }
    .deepseek-content .clear-btn:hover {
        background-color: rgba(120, 120, 120, 0.8); /* Keep slightly lighter for hover */
    }
    /* Adjust spinner color for dark mode */
    .spinner {
        border-left-color: var(--primary-color-dark, #4dabf7);
    }
    /* Dark mode status log */
    #deepseek-status-log {
        color: var(--text-color-dark); /* Use main dark text color */
        /* Make it slightly less prominent if needed */
        /* opacity: 0.8; */
    }
     /* Dark mode domain select */
    #deepseek-domain-select {
        background-color: var(--accent-color-dark, #343a40);
        color: var(--text-color-dark, #e9ecef);
        border-color: var(--border-color-dark, #495057);
    }
 }

/* Docs Link Button Style */
.docs-link-button {
    display: inline-block;
    margin-left: 8px; /* Space between radio label and button */
    padding: 2px 8px;
    font-size: 0.8em;
    color: var(--primary-color-light, #007bff);
    background-color: var(--accent-color-light, #e9ecef);
    border: 1px solid var(--border-color-light, #ccc);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    vertical-align: middle; /* Align vertically with radio text */
}

.docs-link-button:hover {
    background-color: var(--primary-color-light, #007bff);
    color: white;
    border-color: var(--primary-color-light, #007bff);
}

/* Dark Mode Docs Link */
@media (prefers-color-scheme: dark) {
    .docs-link-button {
        color: var(--primary-color-dark, #4dabf7);
        background-color: var(--accent-color-dark, #343a40);
        border-color: var(--border-color-dark, #495057);
    }
    .docs-link-button:hover {
        background-color: var(--primary-color-dark, #4dabf7);
        color: var(--background-color-dark, #121212);
        border-color: var(--primary-color-dark, #4dabf7);
    }
}