/* 主样式：苹果简约风 */

:root {
    --bg-main: #FFFFFF;
    --bg-muted: #F5F5F7;
    --text-main: #1D1D1F;
    --text-muted: #6e6e73;
    --accent: #007AFF;
    --border-soft: #E5E5EA;
    --radius: 8px;
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.08);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: var(--bg-main);
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-main);
    /* 新版苹果风背景：淡灰 + 极浅蓝紫大面积柔和渐变，叠加极轻颗粒 */
    background-image:
        radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at 85% 100%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at 0 100%, rgba(129, 140, 248, 0.18) 0, rgba(129, 140, 248, 0) 60%),
        radial-gradient(circle at 100% 0, rgba(56, 189, 248, 0.16) 0, rgba(56, 189, 248, 0) 60%),
        radial-gradient(circle at 50% 40%, rgba(244, 244, 249, 0.9) 0, rgba(244, 244, 249, 0) 70%),
        repeating-linear-gradient(
            45deg,
            rgba(15, 23, 42, 0.015) 0,
            rgba(15, 23, 42, 0.015) 1px,
            transparent 1px,
            transparent 4px
        );
    background-attachment: fixed;
}

/* 深色模式变量覆盖 */
body.theme-dark {
    --bg-main: #0b0b10;
    --bg-muted: #181820;
    --text-main: #f5f5f7;
    --text-muted: #a1a1b4;
    --border-soft: #2d2d3c;
    --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.7);
    background-color: var(--bg-main);
    color: var(--text-main);
    /* 深色模式：更接近 macOS 壁纸的紫蓝渐变，中心略亮四周略暗，叠加轻颗粒 */
    background-image:
        radial-gradient(circle at 15% 0%, rgba(129, 140, 248, 0.4) 0, rgba(129, 140, 248, 0) 55%),
        radial-gradient(circle at 85% 100%, rgba(56, 189, 248, 0.32) 0, rgba(56, 189, 248, 0) 55%),
        radial-gradient(circle at 50% 30%, rgba(15, 23, 42, 0.9) 0, rgba(15, 23, 42, 0) 70%),
        linear-gradient(135deg, #020617, #020617 40%, #020617 60%, #020617),
        repeating-linear-gradient(
            45deg,
            rgba(148, 163, 184, 0.06) 0,
            rgba(148, 163, 184, 0.06) 1px,
            transparent 1px,
            transparent 4px
        );
    background-attachment: fixed;
}

body.theme-dark .search-box-wrap {
    background-color: var(--bg-muted);
}

body.theme-dark .engine-item {
    background-color: var(--bg-muted);
}

/* 深色模式下，默认收藏卡片也保持“无框、透明”，具体效果在后面的 .favorite-card 规则统一控制 */

body.theme-dark .auth-modal {
    background-color: #1b1b24;
}

body.theme-dark .auth-tab-btn.active {
    background-color: #1b1b24;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.theme-dark .search-suggest-box {
    background-color: #1b1b24;
    border-color: rgba(255, 255, 255, 0.06);
}

/* QQ 登录按钮样式 */
.qq-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #12B7F5;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
    width: 100%;
}

.qq-login-btn:hover {
    background: #0FA0D4;
    text-decoration: none;
    color: white;
}

.qq-login-btn svg {
    flex-shrink: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.page-root {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30000 !important; /* 最高优先级，确保显示在所有元素之上 */
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.toast.show {
    opacity: 1;
}

.settings-drawer {
    position: fixed;
    inset: 0;
    background: transparent;
    display: none;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 12px;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none !important;
}

.settings-drawer.show {
    display: flex;
    opacity: 1;
    z-index: 15000 !important;
    pointer-events: auto !important;
}

.settings-panel {
    width: 280px;
    max-width: min(92vw, 320px);
    background: var(--card-bg, #fff);
    box-shadow: 0 14px 36px rgba(0,0,0,0.12);
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    transform: translateY(-6px);
    transition: transform 0.2s ease, opacity 0.2s ease;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    opacity: 0.98;
}

.settings-drawer.show .settings-panel {
    transform: translateY(0);
}

.settings-avatar-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0 6px;
}

.settings-avatar-btn {
    width: 74px;
    height: 74px;
    border: none;
    padding: 1px;
    border-radius: 50%;
    background: conic-gradient(from 120deg, #7c3aed, #4f46e5, #0ea5e9, #7c3aed);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1; /* 确保头像按钮在设置面板之上 */
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-avatar-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.4);
}

.settings-avatar-hover-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
    letter-spacing: 2px;
    padding: 0 4px;
}

.settings-avatar-btn:hover .settings-avatar-hover-text {
    opacity: 1;
}

.settings-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    background: #fff;
}

body.theme-dark .settings-avatar-img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.settings-user-brief {
    text-align: center;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 6px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分省略号 */
}

.settings-user-panel {
    display: none;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--bg-muted);
    font-size: 13px;
}

.settings-user-panel.show {
    display: block;
}

.settings-user-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.settings-user-label {
    color: var(--text-muted);
}

.settings-user-value {
    font-weight: 500;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.settings-user-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body.theme-dark .settings-user-panel {
    background: #1f2030;
}

/* 账号中心小窗口 */
.account-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: none; /* 默认完全隐藏，不占用空间 */
    align-items: center;
    justify-content: center;
    z-index: 50; /* 未显示时使用较低的z-index，避免阻挡内容 */
    pointer-events: none !important; /* 强制设置为none，确保未显示时不拦截事件 */
}

.account-modal-overlay.show {
    display: flex;
    z-index: 16000 !important; /* 显示时提高z-index，确保在设置窗口（15000）和搜索框及联想词框之上 */
    pointer-events: auto !important; /* 显示时允许点击 */
}

.account-modal {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18);
    padding: 18px 18px 16px;
    position: relative;
}

body.theme-dark .account-modal {
    background: #171822;
}

.account-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    border: none;
    background: transparent;
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
}

.account-modal-close:hover {
    color: #ff3b30;
}

.account-modal-title {
    margin: 0 32px 10px 0; /* 右侧预留给 X 按钮 */
    font-size: 18px;
    font-weight: 500;
}

.account-section {
    border-top: 1px solid var(--border-soft);
    padding-top: 10px;
    margin-top: 10px;
}

.account-section-top {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: none;
    padding-top: 4px;
    margin-top: 0;
}

.account-avatar-large {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity 0.2s;
}

.account-avatar-large:hover {
    opacity: 0.9;
}

.account-avatar-large:hover .avatar-upload-overlay {
    opacity: 1;
}

.avatar-upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
}

.avatar-upload-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.account-avatar-large img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.account-basic-info {
    flex: 1;
    min-width: 0;
}

.account-username {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-email {
    font-size: 13px;
    color: var(--text-muted);
}

.account-third-title {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.account-third-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.account-third-status {
    color: #34c759;
}

body.theme-dark .settings-panel {
    background: #1b1b24;
}

.settings-header {
    display: flex;
    align-items: center;          /* 垂直居中对齐“设置”和 X */
    justify-content: space-between;
    margin-bottom: 12px;
}

.settings-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    line-height: 1;               /* 避免标题上下多余空间 */
}

.settings-close {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #ff5f57;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.settings-close:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.settings-close-x {
    display: block;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.settings-group {
    margin-top: 8px;
}

/* 恢复标签区域固定在设置面板底部 */
.settings-restore-group {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.settings-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.settings-theme-options {
    display: flex;
    gap: 8px;
}

.settings-theme-btn {
    flex: 1 1 0;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
    background: #f5f5f7;
    color: var(--text-main);
}

body.theme-dark .settings-theme-btn {
    background: #1f2030;
    color: #f5f5f7;
    border-color: #2d2d3c;
}

/* 当前为浅色模式时，“浅色”按钮高亮为柔和的浅蓝渐变（去掉强烈高光感） */
.settings-theme-btn.active[data-theme-toggle="light"] {
    background: linear-gradient(135deg, #a9c9ff, #d0e5ff);
    color: #0b2540;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 当前为深色模式时，"深色"按钮高亮为柔和的紫色渐变（不再用纯黑做高光） */
body.theme-dark .settings-theme-btn.active[data-theme-toggle="dark"] {
    background: linear-gradient(135deg, #6f6bff, #b3a6ff);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 自动切换主题开关 */
.settings-auto-theme-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    transition: all 0.2s ease;
}

.settings-auto-theme-wrap:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

body.theme-dark .settings-auto-theme-wrap {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

body.theme-dark .settings-auto-theme-wrap:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.35);
}

.settings-cat-toggle {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
    margin-top: 10px;
}

.settings-cat-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-cat-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.settings-cat-sub {
    font-size: 12px;
    color: var(--text-muted);
}

body.theme-dark .settings-cat-toggle {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.settings-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.3s;
    border-radius: 24px;
}

.settings-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.settings-switch input:checked + .settings-switch-slider {
    background-color: #3b82f6;
}

.settings-switch input:checked + .settings-switch-slider:before {
    transform: translateX(20px);
}

body.theme-dark .settings-switch-slider {
    background-color: #475569;
}

body.theme-dark .settings-switch input:checked + .settings-switch-slider {
    background-color: #6366f1;
}

.settings-switch-label {
    font-size: 13px;
    color: var(--text-main);
    user-select: none;
    line-height: 1.5;
    flex: 1;
}

.settings-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.settings-account-name {
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-account-action {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.settings-account-action:hover {
    text-decoration: none;
}

/* 恢复默认标签按钮样式 */
.settings-restore-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-restore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.settings-restore-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.45);
}
.settings-restore-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}
.settings-restore-tip {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.settings-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
    justify-content: center;
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}

.settings-footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.settings-footer-links a:hover {
    color: var(--text-strong);
}

.settings-footer-links .sep {
    color: var(--text-muted);
    opacity: 0.7;
}

.toast-icon {
    width: 22px;
    height: 22px;
}

.toast--add {
    background: linear-gradient(135deg, #1ecb6c, #13a24f);
}

.toast--delete {
    background: linear-gradient(135deg, #ff4b5a, #d8283a);
}

.toast--update {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    position: relative;
    z-index: 200; /* 确保设置按钮始终在主内容之上可点击 */
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    border-radius: 999px;
    border: none;
    background-color: var(--bg-muted);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.theme-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.header-login-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.header-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
}

.header-login-btn:active {
    transform: translateY(0);
    opacity: 0.92;
}

.theme-toggle-sun,
.theme-toggle-moon {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.theme-toggle-sun {
    background: radial-gradient(circle at 30% 30%, #fff 0%, #ffe9a3 40%, #ffcf33 80%);
    box-shadow: 0 0 0 2px rgba(255, 207, 51, 0.4);
}

.theme-toggle-moon {
    background: radial-gradient(circle at 30% 30%, #fff 0%, #cfd8ff 40%, #7a88ff 80%);
    box-shadow: 0 0 0 1px rgba(122, 136, 255, 0.4);
    transform: translateX(6px);
    opacity: 0;
}

body.theme-dark .theme-toggle-sun {
    opacity: 0;
    transform: translateX(-6px);
}

body.theme-dark .theme-toggle-moon {
    opacity: 1;
    transform: translateX(0);
}

.logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;   /* 水平居中 */
    margin-bottom: 32px;       /* 与搜索框保持更舒服的上下距离 */
}

.logo-wrap img {
    width: 300px;
    height: 100px;
    object-fit: contain;
}

.site-name {
    font-size: 20px;
    font-weight: 500;
}

.btn,
button {
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
    background-color: #0063cc;
    box-shadow: 0 4px 18px rgba(0, 122, 255, 0.35);
    transform: translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--border-soft);
    color: var(--text-main);
}

.btn-outline:hover {
    background-color: var(--bg-muted);
}

/* 危险按钮（用于“确认恢复”等） */
.btn-danger {
    background-color: #ef4444;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}
.btn-danger:hover {
    background-color: #dc2626;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    transform: translateY(-1px);
}
.btn-danger:disabled,
.btn-danger[disabled] {
    background-color: #fecaca;
    color: #ffffff;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* 取消按钮（恢复窗口内） */
.btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
    border-color: transparent;
}
.btn-secondary:hover {
    background-color: #e5e7eb;
}

body.theme-dark .btn-secondary {
    background-color: #1f2933;
    color: #e5e7eb;
}
body.theme-dark .btn-secondary:hover {
    background-color: #323f4b;
}

.main-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 让主内容（Logo+搜索+分类+标签）在可视区域中间更居中 */
    padding: 32px 16px 32px;
    min-height: calc(100vh - 80px); /* 扣掉顶部导航大约高度，整体更接近屏幕正中 */
}

.search-panel {
    max-width: 900px;
    width: 100%;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 0; /* 让搜索框自然跟随 Logo 下方，不再额外上移 */
}

/* 当隐藏分类/快捷方式时，仅隐藏分类与标签模块，不改动主区域布局 */
body.hide-categories .category-nav,
body.hide-categories .favorites-section {
    display: none !important;
}

/* PC 端：隐藏分类时，把主容器整体向上提约 176px（Logo 在搜索框下方的相对距离不变） */
@media (min-width: 1025px) {
    body.hide-categories .main-section {
        transform: translateY(-176px);
    }
}

/* 移动端：整体内容（Logo + 搜索框）稍微往上提，类似百度布局 */
@media (max-width: 768px) {
    .main-section {
        justify-content: flex-start;   /* 不再垂直居中，改为从上方开始排布 */
        padding-top: 48px;             /* 顶部留一点空白 */
    }

    .logo-wrap {
        margin-bottom: 16px;           /* Logo 与搜索框之间距离缩小一些 */
    }
}

.search-engines {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.engine-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-muted);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.engine-item.active {
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
    background-color: #e5f0ff;
}

.engine-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.engine-item:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-soft);
}

.search-box-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: #ffffff;          /* 白色底，让搜索框更清晰 */
    border-radius: 999px;
    border: none;                       /* 外框改由伪元素绘制，盖在子元素上方 */
    box-shadow: var(--shadow-soft);
    padding: 0;                          /* 垂直方向无间隙，左右间距交给内部控件 */
    height: 56px;                        /* 整体再高一点，更有存在感 */
    transition: box-shadow var(--transition-normal), transform var(--transition-fast), background-color var(--transition-normal);
    width: 100%;
    max-width: 1200px;                   /* 再加长一截，大约左右各多出 60px 效果 */
    z-index: 1000; /* 提高z-index，确保搜索框及其下拉菜单（联想词框）在收藏按钮之上 */
}

/* 顶层黑色外框，盖在蓝色按钮之上，避免任何缝隙 */
.search-box-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #000000;
    pointer-events: none;
    z-index: 2;
}

.engine-dropdown {
    position: relative;
    margin-right: 10px;
    margin-left: 10px;   /* 整体向右挪一点，避免贴在搜索框最左侧 */
    z-index: 200; /* 确保下拉菜单在分类导航之上 */
}

.engine-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;                 /* 只显示图标本身，不要左右“块”感 */
    height: 100%;        /* 填满整个搜索框高度 */
    border-radius: 999px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    box-shadow: none;
    transition: none;
}

.engine-dropdown-toggle img {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 50%;
}

/* 下拉列表里的搜索引擎图标也统一改成圆形 */
.engine-dropdown-item img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.engine-dropdown-caret {
    display: none;  /* 只保留图标，不显示小三角 */
}

.engine-dropdown-toggle:hover {
    transform: none;
    box-shadow: none;
}

.engine-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 360px;                    /* 一行 4 个时的基础宽度，加宽以容纳完整名称 */
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    padding: 10px;
    display: none;
    z-index: 200; /* 提高z-index，确保在分类导航之上 */
}

.engine-dropdown-menu.show {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* 每行 4 个，自动换行 */
    gap: 8px;
}

.engine-dropdown-item {
    width: 100%;
    padding: 10px 6px;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-main);
    transition: background-color var(--transition-fast);
    border-radius: 10px;
    text-align: center;
}

.engine-dropdown-item img {
    width: 26px;
    height: 26px;
    object-fit: cover;
}

/* 搜索引擎名称：一行完整显示，不自动换行 */
.engine-dropdown-item span {
    display: block;
    white-space: nowrap;
}

.engine-dropdown-item:hover {
    background-color: var(--bg-muted);
}

.engine-dropdown-item.active {
    background-color: #e5f0ff;
}

body.theme-dark .engine-dropdown-toggle {
    background-color: transparent;
    border-color: transparent;
}

/* 深色模式下：搜索框描边改为白色，更清晰（伪元素外框） */
body.theme-dark .search-box-wrap::before {
    border-color: #ffffff;
}

/* 深色模式：蓝色按钮左侧的分隔线也改成白色，和搜索框边线保持一致 */
body.theme-dark .search-button {
    border-left-color: #ffffff;
}

body.theme-dark .engine-dropdown-menu {
    background-color: #1b1b24;
    border-color: #2d2d3c;
}

body.theme-dark .engine-dropdown-item {
    color: #f5f5f7;
}

body.theme-dark .engine-dropdown-item:hover {
    background-color: #262b3d;
}

body.theme-dark .engine-dropdown-item.active {
    background-color: #2f3650;
}


/* 取消搜索框获得焦点时的“弹起/阴影”动效，保持静止 */

.search-input {
    flex: 1;
    min-width: 0;
    border-radius: 999px 0 0 999px; /* 左半圆，右侧交给按钮 */
    border: none;
    height: 100%;
    font-size: 16px;
    background: transparent;
    outline: none;
    color: var(--text-main);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* 点击输入框后隐藏占位文字「输入关键词」 */
.search-input:focus::placeholder {
    color: transparent;
}
.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 999px 999px 0; /* 右半圆，与输入框拼接成一个整体 */
    border: none;
    padding: 0 12px;               /* 左侧收紧一些，让按钮更精致 */
    background-color: #2563eb;     /* 科技感蓝色 */
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: none;       /* 阴影交给外层 search-box-wrap */
    white-space: nowrap;
    height: 100%;           /* 与输入框一致，高度铺满 search-box-wrap */
    border-left: 2px solid #000000;      /* 浅色模式：左侧黑线，与搜索框边线同粗 */
}

.search-button:hover {
    background-color: #1d4ed8;
}

.search-button-icon svg {
    width: 30px;   /* 再放大一点点，视觉更清晰 */
    height: 30px;
    display: block;
}

.hint-text {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* 搜索联想词列表 */
.search-suggest-box {
    position: absolute;
    top: 100%;          /* 紧贴输入框容器下边缘 */
    left: 0;
    right: 0;
    margin-top: 6px;    /* 与输入框之间留一点间距 */
    width: 100%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 6px 0;
    border: 1px solid rgba(0, 0, 0, 0.04);
    text-align: left;
    max-height: none; /* 展开全部联想词 */
    overflow: visible;
    z-index: 10000 !important; /* 极高的z-index，确保永远在"+"收藏按钮之上（按钮 z-index:200，父容器 z-index:1000） */
}

.search-suggest-item {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-suggest-item span {
    flex: 1;
    color: var(--text-main);
}

.search-suggest-item small {
    display: none;
}

.search-suggest-item:hover {
    background-color: var(--bg-muted);
}

.search-suggest-item.active {
    background-color: #e5f0ff;
    color: #0c1933;
}

body.theme-dark .search-suggest-item {
    color: #e6e8f5;
}

body.theme-dark .search-suggest-item:hover {
    background-color: #262b3d;
}

body.theme-dark .search-suggest-item.active {
    background-color: #2f3650;
    color: #ffffff;
}

/* 分类导航栏（放在搜索框下面） */
.category-nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4px;   /* 分类左右间距 4px */
    row-gap: 8px;
    margin: 24px auto 20px;
    padding: 0;
    max-width: 960px;
    width: 100%;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 16px;
    position: relative;
    z-index: 150 !important; /* 提高z-index，确保在auth-modal-overlay之上 */
    pointer-events: auto !important;
    -webkit-user-select: none;
    user-select: none;
}

body.hide-categories .category-nav,
body.hide-categories .favorites-section {
    display: none !important;
}

body.theme-dark .category-nav {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* 手机端：分类导航横向滚动、更紧凑布局 */
@media (max-width: 768px) {
    .category-nav {
        max-width: 100%;
        margin: 16px 0 12px;
        padding: 0 10px 10px;
        flex-wrap: nowrap;              /* 不换行，放在一行 */
        justify-content: flex-start;    /* 从左开始排布 */
        overflow-x: auto;               /* 允许左右滑动 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        column-gap: 4px;                /* 手机端左右间距 4px，和电脑端保持一致 */
        row-gap: 0;
    }

    .category-nav::-webkit-scrollbar {
        height: 3px;
    }

    .category-nav::-webkit-scrollbar-thumb {
        background-color: rgba(148, 163, 184, 0.6);
        border-radius: 999px;
    }

    .category-nav::-webkit-scrollbar-track {
        background: transparent;
    }

    .category-btn,
    .notebook-category-btn {
        flex: 0 0 auto;                 /* 防止被压缩，确保在一行内可横向滚动 */
        padding: 4px 10px;
        font-size: 13px;
        border-radius: 16px;
        scroll-snap-align: start;
    }

    .category-nav-divider {
        margin: 0 4px;
    }
}

/* 记事本按钮后的分隔符 */
.category-nav-divider {
    color: rgba(0, 0, 0, 0.2);
    margin: 0 4px 0 2px;
    font-size: 18px;
    line-height: 1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    font-weight: 300;
}

body.theme-dark .category-nav-divider {
    color: rgba(255, 255, 255, 0.2);
}

/* 分类右键菜单 */
.category-context-menu {
    position: fixed;
    z-index: 200;
    min-width: 160px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.25);
    padding: 8px 0;
    font-size: 14px;
    display: none;
}
.category-context-menu.show {
    display: block;
}
.category-context-item {
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.category-context-item:hover {
    background: #f3f4f6;
}

.category-context-item[data-action="delete"],
.category-context-item[data-action="delete"] svg,
.category-context-item[data-action="delete"] span {
    color: #ef4444 !important;
}

.category-context-item[data-action="delete"]:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

.category-context-item[data-action="delete"]:hover svg,
.category-context-item[data-action="delete"]:hover span {
    color: #dc2626 !important;
}

body.theme-dark .category-context-item[data-action="delete"],
body.theme-dark .category-context-item[data-action="delete"] svg,
body.theme-dark .category-context-item[data-action="delete"] span {
    color: #ef4444 !important;
}

body.theme-dark .category-context-item[data-action="delete"]:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

body.theme-dark .category-context-item[data-action="delete"]:hover svg,
body.theme-dark .category-context-item[data-action="delete"]:hover span {
    color: #f87171 !important;
}
body.theme-dark .category-context-menu {
    background: #111827;
}
body.theme-dark .category-context-item:hover {
    background: #1f2937;
}

.favorites-section {
    max-width: 960px;
    width: 100%;
    margin-top: 0;
    min-height: 260px; /* 提升整体占位，空分类时也保持高度，避免跳动 */
}

/* PC端：保持正常间距 */
@media (min-width: 1367px) {
    .favorites-section {
        margin-top: 0;
    }
}

/* Mac系统：增加间距，避免分类导航和标签模块离得太近 */
@supports (-webkit-touch-callout: none) {
    .favorites-section {
        margin-top: 8px;
    }
}

.category-btn {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    background-color: transparent;
    border: none;                /* 去掉圆框边框 */
    border-radius: 0;            /* 不要圆角外框 */
    cursor: pointer;
    position: relative;          /* 为下面的小圆点定位做准备 */
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    pointer-events: auto !important;
    position: relative;
    z-index: 151 !important; /* 提高z-index，确保在category-nav之上 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* 登录用户的可拖拽分类按钮 */
.category-btn[draggable="true"] {
    cursor: move;
}

.category-btn[draggable="true"]:hover {
    cursor: move;
}

/* 分类排序模式视觉提示 */
.category-nav.category-reorder-mode .category-btn:not(#notebook-toggle-btn) {
    cursor: grab;
    border: 1px dashed rgba(99, 102, 241, 0.3);
}
.category-nav.category-reorder-mode .category-btn.dragging {
    opacity: 0.7;
    cursor: grabbing;
}

/* Mac OS特定修复 */
@supports (-webkit-touch-callout: none) {
    .category-btn {
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .category-btn:active {
        opacity: 0.7;
    }
}

.category-btn svg {
    flex-shrink: 0;
}

.category-btn:hover {
    color: var(--text-main);
    background-color: transparent; /* 悬停时也不出现背景块，只改变文字颜色 */
}

.category-btn.active {
    color: #2563eb;
    background-color: transparent;
}

.category-btn.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;                 /* 文字下方一点点的小圆点 */
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background-color: #2563eb;    /* 蓝色小圆点 */
}

body.theme-dark .category-btn.active {
    color: #60a5fa;
}

body.theme-dark .category-btn.active::after {
    background-color: #60a5fa;    /* 深色模式下的小圆点颜色 */
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    column-gap: 18px;  /* 水平方向 18px */
    row-gap: 12px;     /* 垂直方向恢复之前的高度间距 */
    max-width: 100%;
    justify-content: center;
    min-height: 220px; /* 提升最小高度，空分类也占位，避免顶部区域跳动 */
}

/* PC端：一行 6 个，每个卡片固定宽度140px */
@media (min-width: 769px) {
    .favorites-grid {
        grid-template-columns: repeat(6, 140px);
        column-gap: 18px;
        row-gap: 12px;
        justify-content: center;
    }
}

/* PC端不显示"编辑"按钮（你只要右键菜单即可） */
@media (min-width: 769px) {
    #fav-edit-toggle {
        display: none !important;
    }
}

.favorite-card {
    /* 默认状态：完全透明、无边框、无阴影，看起来“没有框” */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    position: relative;
    width: 140px;
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    border: none !important;
    box-shadow: none !important;
}

/* PC端：卡片固定尺寸 */
@media (min-width: 769px) {
    .favorite-card {
        width: 140px;
        height: 40px;
        padding: 8px 12px;
    }

    /* 隐藏操作按钮区域（非编辑模式） */
    .favorite-card > div > .fav-actions {
        display: none !important;
    }

    /* 编辑模式下显示操作按钮 */
    body.fav-editing .favorite-card > div > .fav-actions {
        display: flex !important;
        position: absolute;
        top: 4px;
        right: 4px;
        width: auto;
        gap: 4px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        border-radius: 6px;
        padding: 2px;
    }
    
    body.theme-dark body.fav-editing .favorite-card > div > .fav-actions {
        background: rgba(27, 27, 36, 0.9);
    }
}

/* 我的收藏：鼠标悬停时的“透明描边框”效果 */
.favorite-card:hover {
    /* 浅色模式：鼠标悬停时只显示透明描边 + 阴影，看起来是“透明的框” */
    background: transparent !important;
    backdrop-filter: blur(10px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25) !important;
    transform: none; /* 去掉向上移动动效 */
}

body.theme-dark .favorite-card:hover {
    /* 深色模式：鼠标悬停时才出现玻璃效果，默认无框 */
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid rgba(148, 163, 184, 0.55) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75) !important;
    transform: none; /* 去掉向上移动动效 */
}

/* 隐藏不符合当前分类的卡片 */
.favorite-card[data-category]:not([data-category=""]) {
    display: flex;
}

.favorite-card.hidden {
    display: none !important;
}

/* 确保隐藏卡片中的图标仍然会被加载 */
.favorite-card.hidden .favorite-icon img {
    visibility: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.favorite-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.theme-dark .favorite-icon {
    background-color: #1b1b24;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.favorite-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.favorite-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
}

.favorite-name {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

/* PC端：图标和文字横向排列，图标20px，文字单行显示 */
@media (min-width: 769px) {
    .favorite-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        border-radius: 4px;
    }

    .favorite-text {
        flex: 1 1 auto;
        min-width: 0;
        text-align: left;
    }

    .favorite-name {
        font-size: 13px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.favorite-url {
    display: none; /* PC端也与手机端一致：不显示网址行 */
}

.favorite-add {
    border: 1px dashed var(--border-soft);
    background-color: transparent;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    width: 140px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
}

.favorite-add span {
    font-size: 24px; /* "+"图标 */
    color: var(--text-muted);
}

.favorite-add:hover {
    background-color: var(--bg-muted);
}

/* 手机端：添加按钮自适应宽度 */
@media (max-width: 768px) {
    .favorite-add {
        width: 100%;
    }
}

.fav-actions {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
}

body.fav-editing .fav-actions {
    display: flex;
}

/* PC端编辑模式：按钮固定在卡片右上角 */
@media (min-width: 769px) {
    body.fav-editing .favorite-card {
        position: relative;
    }
    body.fav-editing .favorite-card > div > .fav-actions {
        display: flex !important;
        position: absolute;
        top: 4px;
        right: 4px;
        width: auto;
        gap: 4px;
        justify-content: flex-end;
        align-items: center;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 6px;
        padding: 2px;
        z-index: 10;
    }
    body.theme-dark.fav-editing .favorite-card > div > .fav-actions {
        background: rgba(17, 24, 39, 0.9);
        border-color: rgba(55, 65, 81, 0.8);
    }
}

.fav-delete-btn,
.fav-edit-btn {
    border: 1px solid var(--border-soft);
    background: #fff;
    border-radius: 999px;
    padding: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    cursor: pointer;
}

.fav-delete-btn {
    color: #ef4444 !important;
}

.fav-delete-btn svg,
.fav-delete-btn .fav-delete-icon {
    color: #ef4444 !important;
    fill: #ef4444 !important;
}

.fav-delete-btn:hover {
    color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.fav-delete-btn:hover svg,
.fav-delete-btn:hover .fav-delete-icon {
    color: #dc2626 !important;
    fill: #dc2626 !important;
}

.fav-edit-btn {
    color: #007AFF;
}

.fav-delete-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* 收藏标签右键菜单（PC 端） */
.fav-context-menu {
    position: fixed;
    z-index: 300 !important; /* 提高z-index，确保在添加按钮（z-index: 200）之上 */
    min-width: 140px;
    padding: 6px 0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: none;
    flex-direction: column;
}

.fav-context-item {
    padding: 6px 14px;
    font-size: 13px;
    color: #1f2937;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.fav-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fav-context-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
}

/* “打开链接”图标单独放大，提升可读性 */
.fav-context-item[data-action="open"] svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.fav-context-item:hover {
    background: rgba(59,130,246,0.08);
    color: #2563eb;
}

body.theme-dark .fav-context-menu {
    background: #111827;
    border-color: #374151;
}

body.theme-dark .fav-context-item {
    color: #e5e7eb;
}

body.theme-dark .fav-context-item:hover {
    background: rgba(59,130,246,0.25);
    color: #bfdbfe;
}

body.theme-dark .fav-delete-btn,
body.theme-dark .fav-edit-btn {
    background: #1b1b24;
    border-color: #2d2d3c;
}

body.theme-dark .fav-delete-btn {
    color: #ef4444 !important;
}

body.theme-dark .fav-delete-btn svg,
body.theme-dark .fav-delete-btn .fav-delete-icon {
    color: #ef4444 !important;
    fill: #ef4444 !important;
}

body.theme-dark .fav-delete-btn:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

body.theme-dark .fav-delete-btn:hover svg,
body.theme-dark .fav-delete-btn:hover .fav-delete-icon {
    color: #f87171 !important;
    fill: #f87171 !important;
}

body.theme-dark .fav-edit-btn {
    color: #6ea8ff;
}

/* 圆形头像登录按钮 */
.avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #f5f5f7, #d0d5ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0;
}

.avatar-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    background: radial-gradient(circle at 50% 30%, #ffffff 0, #c0c4ff 55%, #8b90ff 100%);
}

/* 右上角设置按钮（齿轮） */
.settings-btn {
    margin-left: 28px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.14);
    background-color: rgba(255,255,255,0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.settings-gear-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    color: #111827;
}

/* 悬停时左侧弹出的“页面设置”小气泡 */
.settings-tooltip {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translate(-6px, -50%);
    padding: 4px 8px;
    background: rgba(17, 24, 39, 0.96);
    color: #f9fafb;
    font-size: 12px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.settings-btn:hover .settings-tooltip {
    opacity: 1;
    transform: translate(-2px, -50%);
}

.settings-btn:hover {
    background-color: #f3f4ff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

body.theme-dark .settings-btn {
    background-color: #111827;
    border-color: rgba(255,255,255,0.16);
}

body.theme-dark .settings-gear-icon svg {
    color: #e5e7eb;
}

body.theme-dark .settings-tooltip {
    background: rgba(31, 41, 55, 0.98);
}

/* 首页添加收藏弹窗 */
.fav-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none; /* 默认完全隐藏，不占用空间 */
    align-items: center;
    justify-content: center;
    z-index: 50; /* 未显示时使用较低的z-index，避免阻挡内容 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important; /* 强制设置为none，确保未显示时不拦截事件 */
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fav-modal-overlay.show {
    display: flex; /* 显示时使用flex布局 */
    z-index: 15000 !important; /* 显示时提高z-index，确保在搜索框及联想词框之上 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important; /* 显示时允许点击 */
}

/* 记事本模态框需要更高的z-index，确保在搜索联想词框（z-index: 10000）之上 */
#notebook-modal.show {
    z-index: 20000 !important; /* 确保在搜索联想词框之上 */
}

/* 删除记事本确认窗口需要显示在记事本模态框之上 */
#notebook-delete-modal.show {
    z-index: 21000 !important; /* 确保在记事本模态框（z-index: 20000）之上 */
}

/* 恢复默认标签窗口需要显示在设置模块之上 */
#restore-confirm-modal.show {
    z-index: 16000 !important; /* 高于设置模块的15000，确保可以点击 */
}

/* 当记事本模态框显示时，阻止背景滚动 */
#notebook-modal.show ~ *,
body:has(#notebook-modal.show) {
    overflow: hidden;
}

/* 兼容不支持:has()的浏览器，使用JavaScript添加类 */
body.notebook-modal-open {
    overflow: hidden !important;
}

/* 移除fadeInOverlay动画，改用transition避免闪烁 */

.fav-modal {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border-radius: 20px;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
    padding: 22px 22px 18px;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

body.theme-dark .fav-modal {
    background: radial-gradient(circle at top left, #1f2937, #020617);
    border-color: rgba(148, 163, 184, 0.35);
}

.fav-modal-close {
    position: absolute;
    right: 12px;
    top: 8px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 500;
    transition: color var(--transition-fast);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.fav-modal-close:hover {
    color: #ef4444;
}

/* 恢复默认标签窗口的关闭按钮使用Mac风格红色 */
#restore-confirm-modal .fav-modal-close {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ff5f57; /* 红色背景 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 16px;
    top: 16px;
    transition: opacity 0.2s, transform 0.2s;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#restore-confirm-modal .fav-modal-close::before {
    content: '×';
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    display: block;
}

#restore-confirm-modal .fav-modal-close:hover {
    opacity: 0.9;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    color: white; /* 确保hover时文字是白色 */
}

.fav-modal-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px;
}

.fav-modal-text {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 10px;
    line-height: 1.6;
}

/* 提示信息弹窗 */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none; /* 默认完全隐藏，不占用空间 */
    align-items: center;
    justify-content: center;
    z-index: 50; /* 未显示时使用较低的z-index，避免阻挡内容 */
    pointer-events: none !important; /* 强制设置为none，确保未显示时不拦截事件 */
}

.info-modal-overlay.show {
    display: flex;
    z-index: 30000 !important; /* 最高优先级，确保显示在所有元素之上 */
    pointer-events: auto !important; /* 显示时允许点击 */
}

.info-modal {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(145deg, #ffffff, #f9fafb);
    border-radius: 20px;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
    padding: 28px 24px 22px;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.25);
    text-align: center;
}

body.theme-dark .info-modal {
    background: radial-gradient(circle at top left, #1f2937, #020617);
    border-color: rgba(148, 163, 184, 0.35);
}

.info-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 300;
    transition: color var(--transition-fast);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.info-modal-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.info-modal-icon {
    font-size: 52px;
    margin-bottom: 16px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

body.theme-dark .info-modal-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.info-modal-title {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--text-main);
}

.info-modal-text {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 22px;
    line-height: 1.6;
}

.info-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.info-modal-actions .btn {
    min-width: 100px;
    padding: 8px 20px;
    font-size: 14px;
}

body.theme-dark .fav-modal-text {
    color: #9ca3af;
}

/* 恢复默认标签输入框美化 */
#restore-confirm-input {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 8px 14px;
    font-size: 13px;
    margin-top: 6px;
    outline: none;
    background: #f9fafb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* 分类弹窗：更紧凑的宽度与布局 */
#category-modal .fav-modal {
    max-width: 360px;
    padding: 20px 20px 16px;
}

#category-modal .fav-modal-title {
    font-size: 16px;
    margin-bottom: 8px;
}

#category-modal .fav-modal-text {
    font-size: 12px;
    margin-bottom: 10px;
}

#category-modal .form-label {
    font-size: 12px;
    display: block;
    margin-bottom: 6px; /* 拉开“新的分类名称”与输入框的距离 */
}

#category-modal .form-input {
    padding: 8px 10px;
    font-size: 13px;
}

#category-modal .fav-modal-actions {
    margin-top: 4px;
}

#restore-confirm-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
    background: #ffffff;
}
body.theme-dark #restore-confirm-input {
    background: #14141c;
    border-color: #3a3a4a;
    color: #f9fafb;
}
body.theme-dark #restore-confirm-input::placeholder {
    color: #8c8ca3;
}

/* 深色模式下，弹窗内输入框文字和边框更亮，方便看清 */
body.theme-dark .fav-modal .form-input {
    background-color: #14141c;
    border-color: #3a3a4a;
    color: #f5f5f7;
}

body.theme-dark .fav-modal .form-input::placeholder {
    color: #8c8ca3;
}

.page-footer {
    padding: 16px 40px 24px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 记事本左侧列表区域（仿 iPad 备忘录） */
.notebook-section {
    background: #f5f5f7;
    border-radius: 16px 0 0 16px;
    padding: 16px 12px 10px;
    display: flex;
    flex-direction: column;
    height: 600px;
    max-height: 90vh;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

body.theme-dark .notebook-section {
    background: #111827;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.notebook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}

.notebook-title {
    font-size: 22px;
    font-weight: 600;
}

.notebook-search-wrap {
    margin-bottom: 8px;
}

.notebook-search-input {
    width: 100%;
    border-radius: 10px;
    border: none;
    background: #e5e5ea;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}

body.theme-dark .notebook-search-input {
    background: #1f2933;
    color: #e5e7eb;
}

/* .notebook-toolbar 已移除，新建按钮移到 header 中 */

.notebook-new-btn {
    border-radius: 999px;
    border: none;
    background: #fbbf24;
    color: #111827;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(251, 191, 36, 0.4);
}

.notebook-new-btn:hover {
    background: #f59e0b;
}

.notebook-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 4px;
    padding-right: 4px;
}

.notebook-item {
    border-radius: 10px;
    padding: 10px 10px;
    background: #ffffff;
    margin-bottom: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notebook-item.active {
    background: #facc15;
}

.sortable-ghost {
    opacity: 0.4;
}

.notebook-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.notebook-item-meta {
    font-size: 11px;
    color: #6b7280;
}

body.theme-dark .notebook-item {
    background: #1f2937;
}

body.theme-dark .notebook-item .notebook-item-title {
    color: #e5e7eb;
}

body.theme-dark .notebook-item .notebook-item-meta {
    color: #9ca3af;
}

body.theme-dark .notebook-item.active {
    background: #facc15;
}

body.theme-dark .notebook-item.active .notebook-item-title {
    color: #111827;
}

body.theme-dark .notebook-item.active .notebook-item-meta {
    color: #6b7280;
}

/* 记事本右键菜单 */
.notebook-context-menu {
    position: fixed;
    z-index: 21000 !important; /* 确保在记事本模态框（z-index: 20000）之上 */
    min-width: 140px;
    padding: 6px 0;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: none;
    flex-direction: column;
}

.notebook-context-item {
    padding: 6px 14px;
    font-size: 13px;
    color: #1f2937;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notebook-context-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notebook-context-item:hover {
    background: rgba(59,130,246,0.08);
    color: #2563eb;
}

.notebook-context-item[data-action="delete"],
.notebook-context-item[data-action="delete"] svg,
.notebook-context-item[data-action="delete"] span {
    color: #ef4444 !important;
}

.notebook-context-item[data-action="delete"]:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626 !important;
}

.notebook-context-item[data-action="delete"]:hover svg,
.notebook-context-item[data-action="delete"]:hover span {
    color: #dc2626 !important;
}

body.theme-dark .notebook-context-menu {
    background: #111827;
    border-color: #374151;
}

body.theme-dark .notebook-context-item {
    color: #e5e7eb;
}

body.theme-dark .notebook-context-item:hover {
    background: rgba(59,130,246,0.25);
    color: #bfdbfe;
}

.notebook-footer {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
}

/* 右侧记事本编辑区 */
.notebook-editor-section {
    width: 100%;
}

.notebook-editor-inner {
    border-radius: 0 16px 16px 0;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    padding: 16px 16px 12px;
    height: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 记事本整体弹出容器（两列布局） */
.notebook-modal-inner {
    display: grid;
    grid-template-columns: 320px minmax(0, 520px);
    gap: 0;
    max-width: 900px;
    width: 100%;
    align-items: stretch;
    position: relative;
    opacity: 0;
    transform: scale3d(0.92, 0.92, 1) translate3d(0, -10px, 0);
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                        -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.fav-modal-overlay.show .notebook-modal-inner {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

#notebook-modal {
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: padding;
}

#notebook-modal.maximized {
    padding: 0;
}

#notebook-modal .notebook-modal-inner {
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#notebook-modal.maximized .notebook-modal-inner {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    align-items: stretch;
    border-radius: 0;
    gap: 0;
}

#notebook-modal .notebook-section {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#notebook-modal.maximized .notebook-section {
    max-height: 100%;
    height: 100%;
    border-radius: 0;
}

#notebook-modal .notebook-editor-inner {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#notebook-modal.maximized .notebook-editor-inner {
    max-height: 100%;
    height: 100%;
    border-radius: 0;
}

#notebook-modal.maximized .notebook-modal-inner {
    grid-template-columns: 320px minmax(0, 1fr);
}

@media (max-width: 900px) {
    .notebook-modal-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    
    #notebook-modal.maximized .notebook-modal-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 手机端记事本优化：全宽单列、上下分区更紧凑，便于滑动 */
@media (max-width: 768px) {
    #notebook-modal {
        /* 顶部/底部各预留约10px，总间距约20px；同时考虑安全区 */
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px 10px;
        align-items: flex-start;    /* 顶对齐，避免垂直居中产生大空隙 */
        justify-content: center;
    }

    #notebook-modal .notebook-modal-inner {
        max-width: 100%;
        width: 100%;
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        border-radius: 14px;
    }

    #notebook-modal.maximized .notebook-modal-inner {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        gap: 0;
    }

    .notebook-section {
        height: auto;
        max-height: 40vh;
        padding: 12px 12px 8px;
        border-radius: 14px 14px 10px 10px;
    }

    .notebook-header {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 6px);
        padding-top: 2px;
        padding-bottom: 6px;
        background: inherit;
        z-index: 1;
    }

    .notebook-search-wrap {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 48px);
        padding-bottom: 6px;
        background: inherit;
        z-index: 1;
    }

    .notebook-list {
        padding-right: 0;
    }

    .notebook-editor-inner {
        height: auto;
        max-height: none;
        min-height: 46vh;
        border-radius: 10px 10px 14px 14px;
        padding: 12px 12px 10px;
    }

    .notebook-title {
        font-size: 20px;
    }

    .notebook-title-input {
        font-size: 15px;
    }

    .notebook-editor {
        min-height: 240px;
        font-size: 14px;
        line-height: 1.6;
    }

    .notebook-new-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

body.theme-dark .notebook-editor-inner {
    background: #020617;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

/* Mac 风格窗口控制按钮 - 位于右侧编辑区右上角 */
.notebook-editor-inner {
    position: relative;
}

.notebook-window-controls-top {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
}

.notebook-window-btn {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: opacity 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notebook-window-btn:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.notebook-window-maximize {
    background: #28c840;
    order: 1;
}

.notebook-window-close {
    background: #ff5f57;
    order: 2;
}

.notebook-window-close-x {
    display: none;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.notebook-window-close:hover .notebook-window-close-x {
    display: block;
}

.notebook-editor-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.notebook-title-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    background: transparent;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}

.notebook-title-input:focus {
    border-bottom-color: #3b82f6;
}

.notebook-title-input::placeholder {
    color: #9ca3af;
    font-weight: normal;
}

body.theme-dark .notebook-title-input {
    color: #e5e7eb;
}

body.theme-dark .notebook-title-input::placeholder {
    color: #6b7280;
}

.notebook-editor-date {
    font-size: 12px;
    color: #9ca3af;
}

.notebook-editor {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    min-height: 200px;
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    font-family: var(--font-main);
    color: var(--text-main);
    background: transparent;
}

body.theme-dark .notebook-editor {
    color: #e5e7eb;
}

/* 错误提示气泡 */
.notebook-error-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ef4444;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    font-size: 14px;
    z-index: 30000 !important; /* 最高优先级，确保显示在所有元素之上 */
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    pointer-events: none;
    max-width: 400px;
    word-wrap: break-word;
}

.notebook-error-toast.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.notebook-error-toast::before {
    content: '⚠';
    margin-right: 8px;
    font-size: 16px;
}

/* 黄色警告提示气泡 - 居中头部显示 */
.notebook-warning-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%); /* 初始位置：居中且向上偏移 */
    background: #fbbf24;
    color: #111827;
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.4);
    font-size: 14px;
    z-index: 30000 !important; /* 最高优先级，确保显示在所有元素之上 */
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-width: none; /* 移除最大宽度限制，允许在一行显示 */
    white-space: nowrap; /* 强制不换行，在一行显示 */
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.5;
}

.notebook-warning-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* 显示时：居中且不偏移 */
    pointer-events: auto;
}

.notebook-warning-toast::before {
    content: '⚠';
    margin-right: 10px;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
    display: inline-block;
}

.notebook-warning-toast span {
    flex: 1;
}

body.theme-dark .notebook-warning-toast {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
}

/* 成功提示（绿色） */
.success-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%); /* 初始位置：居中且向上偏移 */
    background: #10b981;
    color: #ffffff;
    padding: 14px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    font-size: 14px;
    z-index: 30000 !important; /* 最高优先级，确保显示在所有元素之上 */
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-width: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.5;
}

.success-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* 显示时：居中且不偏移 */
    pointer-events: auto;
}

.success-toast::before {
    content: '✓';
    margin-right: 10px;
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
    display: inline-block;
}

.success-toast span {
    flex: 1;
}

body.theme-dark .success-toast {
    background: #059669;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.5);
}

.header-logout-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}

.header-logout-link:hover {
    text-decoration: none;
}

.footer-left,
.footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 首页弹窗登录/注册 */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none; /* 默认完全隐藏，不占用空间 */
    align-items: center;
    justify-content: center;
    z-index: 50; /* 未显示时使用较低的z-index，避免阻挡内容 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important; /* 强制设置为none，确保未显示时不拦截事件 */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                        visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.auth-modal-overlay.show {
    display: flex; /* 显示时使用flex布局 */
    z-index: 15000 !important; /* 显示时提高z-index，确保在搜索框及联想词框之上 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important; /* 显示时允许点击 */
}

.auth-modal {
    width: 100%;
    max-width: 420px;
    background-color: var(--bg-main) !important; /* 强制设置背景色，确保不透明 */
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 24px 24px 16px;
    position: relative;
    z-index: 201 !important; /* 确保在overlay之上 */
    opacity: 1 !important; /* 强制不透明 */
    transform: scale3d(0.9, 0.9, 1) translate3d(0, -20px, 0);
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                        -webkit-transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.auth-modal-overlay.show .auth-modal {
    opacity: 1 !important; /* 强制不透明 */
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

.auth-modal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #ff5f57;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
    z-index: 202 !important; /* 确保关闭按钮在最上层 */
    pointer-events: auto !important; /* 确保可以点击 */
}

.auth-modal-close:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.auth-modal-close-x {
    display: block;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.auth-modal-tabs {
    display: inline-flex;
    border-radius: 999px;
    background-color: var(--bg-muted);
    padding: 2px;
    margin-bottom: 18px;
    position: relative;
    z-index: 10;
}

.third-login-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0f172a;
}

.third-login-subtitle {
    font-size: 13px;
    margin-bottom: 24px;
    line-height: 1.6;
    color: var(--text-muted, #4b5563);
}

body.theme-dark .third-login-title {
    color: #e2e8f0;
}

body.theme-dark .third-login-subtitle {
    color: #cbd5e1;
}

.auth-tab-btn {
    border-radius: 999px;
    border: none;
    background: transparent;
    padding: 6px 18px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.auth-tab-btn.active {
    background-color: #fff;
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 面板容器包装器 */
.auth-modal-panels-wrapper {
    position: relative;
    min-height: 280px;
}

.auth-tab-panel {
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
}

.auth-tab-panel.active {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    pointer-events: auto;
    position: relative;
    z-index: 2;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: var(--accent);
    cursor: pointer;
    font-size: 13px;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.link-button:hover {
    color: var(--accent);
    opacity: 0.8;
}

/* 登录/注册面板底部提示文字的过渡动画 */
.auth-tab-panel > form > div[style*="margin-top:14px"] {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-container {
    max-width: 420px;
    margin: 60px auto 40px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
    padding: 32px 32px 28px;
}

.auth-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 12px;
}

.auth-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

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

.form-label {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.form-input {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    color: var(--text-main);
}

.form-input::placeholder {
    color: var(--text-muted);
}
.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
    background-color: #fff;
}

/* 深色模式下所有输入框的样式 */
body.theme-dark .form-input {
    background-color: #14141c;
    border-color: #3a3a4a;
    color: #f5f5f7;
}

body.theme-dark .form-input::placeholder {
    color: #8c8ca3;
}

body.theme-dark .form-input:focus {
    background-color: #1a1a24;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    color: #f5f5f7;
}

/* 深色模式下 textarea 和 select 的样式 */
body.theme-dark textarea.form-input,
body.theme-dark textarea {
    background-color: #14141c;
    border-color: #3a3a4a;
    color: #f5f5f7;
}

body.theme-dark textarea.form-input::placeholder,
body.theme-dark textarea::placeholder {
    color: #8c8ca3;
}

body.theme-dark textarea.form-input:focus,
body.theme-dark textarea:focus {
    background-color: #1a1a24;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    color: #f5f5f7;
}

body.theme-dark select.form-input,
body.theme-dark select {
    background-color: #14141c;
    border-color: #3a3a4a;
    color: #f5f5f7;
}

body.theme-dark select.form-input:focus,
body.theme-dark select:focus {
    background-color: #1a1a24;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
    color: #f5f5f7;
}

/* 深色模式下登录/注册弹窗的样式 */
body.theme-dark .auth-container {
    background-color: #1b1b24;
    color: #f5f5f7;
}

body.theme-dark .auth-title {
    color: #f5f5f7;
}

body.theme-dark .auth-subtitle {
    color: #9ca3af;
}

.form-error {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #b00020;
    background-color: #fdecee;
}

.form-success {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    color: #05602b;
    background-color: #e4f7ec;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.dashboard-container {
    max-width: 960px;
    margin: 40px auto 32px;
    padding: 0 16px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.dashboard-title {
    font-size: 22px;
    font-weight: 500;
}

.bookmark-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.bookmark-item {
    background-color: var(--bg-muted);
    border-radius: var(--radius);
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: none;
    cursor: grab;
}

.bookmark-item.dragging {
    opacity: 0.7;
    box-shadow: var(--shadow-soft);
}

.bookmark-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bookmark-actions {
    display: flex;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}

.admin-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-card {
    background-color: #fff;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
}

.admin-card h2 {
    font-size: 18px;
    margin: 0 0 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.stat-item {
    background-color: var(--bg-muted);
    border-radius: var(--radius);
    padding: 14px 12px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stat-value {
    font-size: 20px;
    font-weight: 500;
}